cadence’s website.

Some changes will be applied after reloading.
Some changes will be applied after reloading.

Sass themes

My website needs a dark theme. We all know it does. So how do I do it?

I'm trying to experiment with this theory I came up with to see if it's viable.

The idea is that the entire page style is in a mixin that takes one parameter: the theme to use, which is type map. Throughout the rest of the main file, colours are replaced with accesses to the theme map.

Then, for each theme, create a style that defines the colour map, imports the mixin from the main file, and calls it with the colours from the current file. Now, the output of the theme is a stylesheet with all the right colours. These stylesheets can then be served on different URLs and depending on the selected theme a different sheet can be inserted at the top of the document.

This is the opposite of other people's common patterns which have the main file import the colours, and then do something like apply a class to switch the theme. I looked at a couple of ways of doing that but they all seemed much more clunky than what I have pictured in my mind.

Although, there are some major roadblocks with my current method that perhaps I'll deal with tomorrow:

  • Mixins can't go inside mixins.
  • I'm having trouble creating a multi-line map.
  • It's late at night and I have no brain cells.

You'll be pleased to know that I've done something good though: I asked online and somebody told me how to add a keybind to Emacs which lets me search for text and then mark it as region. This is really really helpful, since I love isearch, and I love using it to jump around the document, and often when I'm writing prose like this blog post I want to go back to a previous word and edit it to a more effective word. For example, I just went back and edited "things" to "prose" in the previous paragraph. I know there's M-% to interactively replace, but that's overkill for me when I only want to edit one specific thing, and I want to edit it in place rather than typing in the minibuffer. What the code does is while I have isearch open I can press M-RET and the text that isearch higlighted becomes the region, and isearch exits. You can find my post here if you want to use this yourself. We did it reddit!

I think I'll spend most of the weekend struggling through the """group project""". We'll see what happens.

— Cadence

A seal on a cushion spinning a globe on its nose.
Another seal. They are friends!