Light Mode Added

While researching accessibility, I read that dark mode can be bad for astigmatism. I have also noticed recently that in my peripheral vision, white text on dark backgrounds can appear to dance around and appears to vibrate. I tend to use dark mode on most apps on my phone, and also began to notice that when I'm tired, white text on dark background appears to vibrate in my direct vision, not just my peripheral vision.

Because of this, I decided that:

1. Any text heavy apps I use, such as Mastodon or my RSS feed reader, will be switched to light mode.
2. My website needs light mode

I remember there being a trend of JavaScript switches for light/dark mode toggles. I have already made a conscious choice to avoid unnecessary JavaScript on my main website, so I opted to let the user, or the browser if the user hasn't bothered to adjust settings, make the decision whether to use light or dark mode.

I doubt this is news to most people, but CSS has a media query for that. As I've kept the design of my site fairly simple, it was as straightforward as just inverting the colours for my variables. After that, I only had to hard code colours I didn't want to change (my faux-Excel spreadsheet style tables, and my pre and code elements), tweak a few colours to optimise contrast, and use an inverted filter for an SVG in my footer. I did also reduce the glare effect on my terminal style hero header, as it didn't work quite as well for light mode as it did for dark.

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --bg-color-dark: #f5f2f0;
    --color: #ddd;
    --color-dark: #bbb;
    --color-light: #444;
    --border-color: #777;
    --accent-primary: #44a0eb;
    --accent-primary-light: #55b1fc;
    --accent-secondary: #be8ae9;
    --accent-secondary-light: #d7a6ff;
    --accent-mono: #aaa;
    --accent-bg-mono-light: #333;
    --accent-mono-light: #ccc;
    --topic-selected: #666;
  }      

  .hero {
    text-shadow:
      0 0 .23vw currentColor,
      0 0 1.2vw currentColor;
    }

  footer img {
    filter: invert(100%);
  }
}

While doing this I realised that I am quite pleased with the design of my website; not only because the choices I've made make potentially big changes quite straightforward, but also because I'm quite proud of how its grown so far. Naturally, some things are never finished, and there are clearly spots here and there where I quite obviously haven't sat down to consider properly and solve. But otherwise I think the design is a good reflection of my tastes and personality when it comes to computing.

I like to stick to defaults nowadays. Ricing can be fun on occasion, but lately I prefer to just get going, and for now it seems to be working for me. There is a terminal theme, but not too much - only the breadcrumb navigation and the hero header on the home page. It says a bit about the type of content to be found on the website, without forcing a users eyes to have to parse heavy text in a mono font. Some people may like that, but not me. It also celebrates HTML defaults, while making a few tweaks to improve readability and to ever so slightly modernise the page design.

I feel like I've really proven to myself here, that less can be more. The light mode design in particular, compliments what HTML already provides out of the box, and I love that.