(https://just-the-docs.com/docs/customization/#define-a-custom-scheme for reference)
I am using just the docs (jekyll theme) + github pages to create a webpage and trying to have two separate colour schemes: a normal and high contrast option.
I am using a custom style with “_sass/custom/custom.scss” to set all the colours, layout configurations, etc. because there are some options that are not available using “_sass/color_schemes/foo.scss” such as more control over the colours of different elements.
However, I cannot find in the docs how to make it possible to easily switch with a custom.scss. One option is to create two github pages sites, one with high contrast and the other with normal colours, but that’s really janky. just-the-docs seems to only allow you to create switchable colour schemes if you use “color_schemes/foo.scss” rather than “custom/custom.scss”.
Am I forced to create a second github pages site for high contrast, or is there a way to switch between two different custom.scss?
Sorry, just saw your reply. Great question! That’s the beauty of a variable. If they’re all supposed to use the same values, then it’s one place to control them, one place to update them. Single Responsibility Principal! 😎
That means you won’t run into the bug of updating it in one place, but forgetting /not knowing to update it in another.
It’s also where tokens (ie: 2-layered variables) shine. All links should use the accent colour. Single variable for that high level concept, but each theme can specify what the low level concept should be (eg: theme 1 uses your design system’s green-bright)
And if that concept’s concretion (ie: actual / raw value) needs to change (eg: the green is now a different shade), it’s still only one place that needs to change
It also helps identify what areas use the same concept (eg: how many use the accent colour) and opportunities to combine/ deduplicate