Rini.Neocities

What I'm Up To

Light & Dark Mode With A Few Lines Of Code

After seeing this post I went over to the corresponding article on MDN. I'd wanted to make a light/dark mode for Aliff's landing page for a while, but it looked like it was something elaborate with workarounds or @media queries and lots of Javascript as written about here and here so I kept putting it off. With this new-to-me light-dark() function, it was almost ridiculously easy.

Basically, all I had to do was add color-scheme: light-dark; to :root in the CSS, then specify the colour values for both schemes as needed.

What's important is this:

:root {
  color-scheme: light-dark;
}
        

And then use the light-dark() function to define what colours you want for the desired elements, for example:

body {
  background-color: light-dark(#fff, #000);
}
        

Whereby the first value will occur in light mode, and the second in dark mode. So, in the above example, the background will be white in light mode, and black in dark mode. They must be in this order and separated by a comma, and I imagine light-dark() can be used on anything that you can specify a colour for.

I didn't implement a manual toggle on Aliff's site yet, so for now it will just select the scheme automatically based on the user's system or browser settings, but I think it's a good start.

Following another post on the first blog mentioned above, I managed to switch out using Font Awesome with Tabler Icons which may be less streamlined, but now there are no more external scripts to load. Using vertical-align: text-bottom; helped me with positioning the icons, though I don't know if it looks the same on different browsers.

It might be weird that I regularly write about Aliff's stuff here instead of my own things, but they are all equally my handiwork, and lets me practise coding.

A New Blog

The most exciting thing going on recently has to do with our washing machine—or, as it had become, a dirtying machine. Other than that, Aliff finally launched a blog with a brand new domain.

He hasn't had a whole lot of time to write, and it's still using the default template design, but I'm happy that it's up and running after years of shelving the idea. It'll be fun to build on it as we think of things to add.

The concept of this page is described on nownownow.com.

Last updated 16th December 2024.