Themes

[bates64]

Questions:

• What themes should we add? (note: any imported themes must support both the site itself and monaco)
• What should be the default theme on prefers-color-scheme: dark?
• What should be the default theme on prefers-color-scheme: light?
• What should be the default theme (light or dark) where no prefers-color-scheme is provided?

Tasks:

• [ ] Use CSS variables for colours on the site
• [ ] Use CSS variables for colours in the diff
• [ ] Load a theme JSON, or, somehow, CSS variables, into Monaco
• [ ] Add a bunch of themes
• [ ] Default to a good theme based on the user's prefers-color-scheme setting
• [ ] Add a theme switcher component and place it in some account settings popup

[bates64]

Something to consider is that we have three theme 'contexts':

1. The website in general
2. Monaco (note that my custom C/C++ language definition that styles macros etc. in special ways will not be properly supported by existing Monaco themes without special effort)
3. The diff

If we decide to import themes from elsewhere, we will need to write some kind of converter that emits CSS (for (1) and (3)) and a JSON Monaco theme supporting our language definition (for (2)).

Places we could write tooling to convert themes from:

• https://github.com/brijeshb42/monaco-themes/ (trivial)
• http://www.chriskempson.com/projects/base16/ (trivial)
• https://vscodethemes.com (widest net, as it includes both the above sources + much more)

We could also skip the tool and implement themes manually as people request them.