Theming support

[zefhemel]

Currently all styles are hard-coded in various SCSS files, we probably will want a theming system.

Plenty of design decisions to be made here:

• Should themes be defined in plain CSS or e.g. JSON? We’d want to be able to hot load and unload these and likely namespace them somehow.
• Should themes be plugs, part of plug YAML definitions maybe even, or be something completely different?
• CodeMirror has its own theming mechanism should we leverage this somehow?
• Custom syntax in plug YAML can define styling as well, such as colors. How would this interact with themes?

[Pinjasaur]

Loosely related to #2. :)

[zefhemel]

Very related indeed

[zefhemel]

See #58 for a discussion

[kjk]

Roam Research has a nice and easy to use (from user point of view) theming system: you can create a special page roam/css page and put the css as a code block (or @import a .css file from url) and that CSS will-override the built-in CSS.

This is easy to use for users and easy for developers because updating the CSS in that page takes immediate effect in the app so you see changes quickly. It's a live update system.

They also have a bunch of themes created by people (and they are nice).

So one option would be to adopt Roam's CSS classes (to get instant access to their themes) and implement similar system of a special page.

See e.g.:

• https://nesslabs.com/the-best-css-themes-for-roam-research
• https://roamthemes.io/
• https://www.goedel.io/p/a-craft-like-theme-for-roam-research
• https://www.keepproductive.com/blog/best-roam-research-css-themes

[zefhemel]

Having the CSS classes match is not likely to happen. I do like the idea of embedding styles in a page though, that's a pretty SB style solution... 🤔

[rktic]

I have yet to find a theming solution based on utilizing CSS files, that's bearable to use for the average human. Including most of the developers I know, who all passionately hate CSS. :) Even though I love CSS.

That said, I firmly believe there's an accessible, sustainable and scalable approach. Leveraging SCSS variables and a cleverly written CSS framework. For this specific use-case.

Based on having defined the purpose of theming in Silver Bullet. As well as its extend.

Mind you: Nobody ever changes a colour for the sake of changing a colour ;) And I"d like to help defining what that purpose is in the scope of SB, to then figure out a solution that's simple to use for everyone. If anyone's interested.

(I personally challenged myself to create a markdown specific CSS "framework", that's as small and user-friendly as possible. And already found and use an approach to it.)

[firasdib]

I would approach this through css variables. Try to create a minimum set of variables that handle different aspects of the website, and then use that throughout.

This would then be the foundation for any theme, simply stick a bunch of variables into a THEME.md file and go from there.

[onespaceman]

Any interest in reducing the theme to a framework of color variables like so:

--bg0: #eff1f5;
--bg1: #ccd0da;
--bg3: #bcc0cc;
--fg2: #6c6f85;
--fg1: #5c5f77;
--fg0: #4c4f69;
--red: #7287fd;
--red-dark: #1e66f5;
--blue: #209fb5;
--blue-dark #04a5e5;
etc.

I set up the catppuccin theme for myself (here) using their framework, but it's probably not the best for adapting to other color schemes, with colors like flamingo and 3 different shades of blue. Something like gruvbox's or base16 framework is better.

I'll try to keep the default theme as close as possible to the current colors, but this will make it easy to customize, only needing to define the color variables for the light and dark theme, without having to think about individual components.