Creating moods for blog posts

I started blogging earlier this year. And I create this little site from scratch. I’ve had a lot of fun while building it and I think I probably will continue to update it in my spare time. I visited quite some indie websites lately and I’ve some ideas in mind that I want to try out. Also, this site is also a playground for me to experiment with some CSS. So, why not have some fun then?

This post is me exploring colors, CSS Custom Property and Safari’s Theme Color.

Inspiration

Last week, when I was writing a post about Hong Kong, something clicked. Meanwhile, thousands of flags in Red hanging around—literally everywhere—in the city on 1 July. I thought of our Chairman Mao, who didn’t? Some say we should miss her majesty Queen Elizabeth instead. Well, then you might be convicted of treason because of that. You gotta be careful these days. Jokes aside, as I recall, Mao was once a very recognized figure to the US people. This makes me think of some art pieces from the 70’s—hundreds of silkscreen paintings with Mao on it. I remember the use of colors and the portrait of course. Despite my art history lessons also failed, and yet I can still remember some.

An American artist Andy Warhol created hundreds of pieces of artwork using Mao, Marilyn Monroe and Campbell Soup Cans as subjects. The artist’s work based on their portraits/illustrations and reproducing them using silkscreen printing with vibrant colors for the paintings. That’s Pop Art.

So, you’ve guessed it. I’m inspired by Warhol’s artwork and want to make use of Duotone colors for color themes on this site. This blog supports Light and Dark Modes when it was built. I do like the simplicity of black and white. Still do. However, I wish to put more personality into my site as well as to generate moods that are related to the blog post’s subject. I want each post could be a piece of Pop Art and stand out on its own. A tribute to the art movement. I’ll be using Randoma11y for color pairings which passes the WCAG contrast ratio. I’ll call it Mood™.

Next, let’s talk about how I do it.

Implementation

First thing, I’m aware that this might not be a good idea to implement color themes in every post. It’s also not ideal for reading experience. Readers, if any, will probably suffer from the inconsistency of color change. But you know, this is my blog. I think I’m allowed to do whatever I want. If you wish, I figure you can either subscribe to my broken RSS or use the Reader View in browsers.

HSL & CSS Custom Property

I revisited my CSS and cringed when I looked back at what I wrote. It’s quite poorly written to be honest. So, I spent some time cleaning up a bit. For color code, I’ve been using hex but it’s too hard for a human brain if I want to adjust the value, for instance, adding transparency. I did try using rgba() but turns out hsl() is way more ideal. I think that’s probably taken me a few hours to figure out how it works.

--light-h: 0;
--light-s: 0%;
--light-l: 90%;
--dark-h: 0;
--dark-s: 0%;
--dark-l: 15%;
  
--mood-light: hsl(var(--light-h), var(--light-s), var(--light-l));
--mood-dark: hsl(var(--dark-h), var(--dark-s), var(--dark-l));

I created a set of CSS Custom Properties and insert them into the hsl() with var(). Then define both --text-color and --bg-color for applying to elements. With prefers-color-scheme: dark to trigger the switch between modes.

* {
  --text-color: var(--mood-dark);
  --bg-color: var(--mood-light);
}
@media (prefers-color-scheme: dark) {
  * {
    --text-color: var(--mood-light);
    --bg-color: var(--mood-dark);
  }
}

The advantage of using hsl() is that you can manipulate the values separately. Create different shades based on the same color with Lightness without affecting Hue and Saturation. Basically, I define two colors for a page using PHP variables for both Light and Dark mode accordingly. Use --light-l, --dark-l or --opac to adjust the lightness or opacity to wherever needed.

* {
  --light-h: <?php echo $light_h; ?>;
  --light-s: <?php echo $light_s; ?>%;
  --light-l: <?php echo $light_l; ?>%;
  --dark-h: <?php echo $dark_h; ?>
  --dark-s: <?php echo $dark_s; ?>%;
  --dark-l: <?php echo $dark_l; ?>%;
}

I admit that adding a bunch of PHP variables for each page is quite cumbersome if I want to make any updates. But you know, I’m the only person who manages this site. So, I guess it’ll suffice.

--light-l: calc(<?php echo $light_l; ?>% + 10%)

I am still experimenting with CSS. But let’s call it a day for now.

Safari’s Theme Color

When new features of Safari 15 was announced in WWDC21, I’m a bit excited to try out the Theme Color. Now, this is the moment I’m waiting for. I also discoverd a tool dedicated for testing color theme in Safari.

<meta name="theme-color" 
  content="hsl(<?= $dark_h ?>, <?= $dark_s ?>%, <?= $dark_l ?>%)"
  media="(prefers-color-scheme: dark)">

<meta name="theme-color" 
  content="hsl(<?= $light_h ?>, <?= $light_s ?>%, <?= $light_l ?>%)">

Making use of the PHP variables defined earlier and insert them into <meta>. I read articles somewhere mentioning that if the website owner prefers a specific mode, for instance, Dark Mode in this case, declare the <meta> tag before the rest. Also, adding media="(prefers-color-scheme: dark)" to the preferred one without specifying the other mode. The good news is, even if the website doesn’t have CSS for Dark Mode it can still have colored Tab Bar.

But for the theme_color in manifest.json, I think I’ll leave it alone.

Wrapping up

This site can now have different color themes for each individual post. The default is still black and white. But if I want a post to be unique or anything piqued my interest, I’ll then put some color on. I really likes vivid and bright colors in Pop Art. And this is how I do it. If anyone is reading, this is part of my “15 minutes of fame”.

In the future, everyone will be world-famous for 15 minutes.

To me, this is a fun and creative process. I can do some cool stuff on my own site gives me a bit of satisfaction. I’m the boss 😎. I guess it’s because I write everything from scratch and the way I customize this site tells who I am. This is me. Nothing to impress though.

For now, it’s plain colored background. Thing is, I achieved the result without using any JavaScript at all. I’ll call that a win. I might want to try out CSS gradients or patterns as background in the future. There’s still a very long road ahead to learn. Maybe someday I finally can learn to use SSG and the command line properly. Who knows?

Anyway, see you next time!

This is #Day34 of #100DaysToOffload.

Footnotes

1. Mao Zedong was a Chinese communist leader via Wikipedia. ↩︎
2. Andy Warhol an American visual artist via Wikipedia. ↩︎
3. Pop art via Wikipedia. ↩︎
4. Randoma11y by John Otander. ↩︎
5. Contrast and Color Accessibility by WebAIM. ↩︎
6. Design for Safari 15 via Apple Developer. ↩︎
7. Safari 15 Theme Color Preview by Roger Lee. ↩︎

---

• Reply via Email: [email protected]
• Comment on Mastodon