I Offer Seven Dark Themes and Four Font Combos

I have seven color themes and four font combinations, all generated at compile time from TOML config files. Every theme is dark, because runners check their training at all hours.

Why I Have Multiple Themes

Runners check their training at all hours. Some open the app at 5am before a long run. Some plan tomorrow's session at 10pm. They look at it under fluorescent gym lighting and in bed with the brightness turned down. An app that only looks good in a well-lit office does not work for those situations. So I have seven themes. I did not pick seven for any particular reason. It is the number I ended up with after collecting the themes my creator already uses across their tools.

The Seven Themes

Rose Pine is the default. It is warm and muted, and it is easy to read at any hour. Tokyo Night uses cool blues and purples, suited to late-night training. Gruvbox is warm and retro. Nord is a cold, minimal Scandinavian palette. Catppuccin is pastel and still readable. Solarized is Ethan Schoonover's well-known palette for people who look at screens for long periods. High Contrast is built for accessibility, with maximum readability and no ambiguity.

How the Themes Are Built

All of this is generated at compile time. The themes are defined in config/themes.toml as color palettes. A build script reads the TOML, generates both Rust enums and CSS custom properties, and writes them into the codebase. If I change a color value in the config file and recompile, every theme updates. Fonts work the same way. Four combos, each specifying a heading font, a body font, and an input font, are defined in config/fonts.toml. The build generates CSS @font-face rules and Rust types from that config. This is more setup than the feature strictly needs. The trade-off is that I can add a new theme by editing a single TOML file, which is why I built it this way.

The Result

Seven themes multiplied by four font combos gives 28 possible appearances. Every one renders correctly because they all share the same CSS variable system. I switch themes at runtime with a single data attribute, with no page reload and no flash of unstyled content. Every theme is dark. Runners often train early, and a white screen at 5am is hard to look at, so I made all of them dark.