July 16, 2020

Customizing Kiko

I’ve returned to using the Kiko theme after finding some custom CSS, which achieves a lot of what I would want out of the theme. I’ve also started working on my dark mode, including a fun glow effect on my masthead. The colors are a set I’ve used many times from the Seattle Sounders. Light or day mode use the classic Rave Green and Sounder Blue, with the dark or night mode taking from the team’s Nightfall look.

Update: A few have mentioned they like the glow effect in the dark mode theme. It’s simply a layered text shadow effect, set at markers of all the way up to 70 pixels. The example I found, showed it with an animation, but I didn’t want to make it too distracting. With the Kiko theme in mind, the CSS code looks like this:

.masthead-title a {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0  30px #c8347e, 0 0 40px #c8347e, 0 0 50px  #c8347e, 0 0 60px #c8347e,  0 0 70px #c8347e;