May, 31, 2024 archives

I finally took some time to implement a “dark mode” style for this site. It will default to whatever you have your system set to, but there is also a set of radio buttons that you can use to force it to a particular mode. (It doesn’t save the setting, so you will have to do it on every page if you are browsing around.)

This talk by Sara Joy about light mode and dark mode was part of the inspiration for getting around to this, and this article about light-dark from Bramus is where I stole borrowed the idea for handling the mode switching.

Because I am using the relatively new CSS light-dark() function to implement this, it is possible (likely?) it will degrade less than gracefully on older browsers.

When I added the support for dark mode, I had to add a little support to the syntax highlighting styles so they looked okay in both light and dark modes.

Today I went in and worked on the JavaScript code a bit to make it a little more modern and refined the styles a little bit more. I also added the language file for YAML, and built it out so it does a better job of highlighting some of YAML’s more special syntax.

I am sticking with this JavaScript-based syntax highlighting for now, mostly because it works.

Here is a YAML sample pulled from the 1.2.2 spec plus a couple of minor additions to show off additional syntax that is handled.

%YAML 1.2
--- !<tag:clarkevans.com,2002:invoice>
invoice: 34843
date   : 2001-01-23
bill-to: &id001
  given  : Chris
  family : Dumars
  address:
    lines: |
      458 Walkman Dr.
      Suite #292
    city    : Royal Oak
    state   : MI
    postal  : 48046
ship-to: *id001
product:
- sku         : BL394D
  quantity    : 4
  description : Basketball
  price       : 450.00
- sku         : BL4438H
  quantity    : 1
  description : Super Hoop
  price       : 2392.00
tax  : 251.42
total: 4443.52
shipped:
  - false
comments:
  Late afternoon is best.
  Backup contact is Nancy
  Billsmer @ 338-4338.