17h ago

how to create two switchable custom.scss in just-the-docs?

(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?

2 comments

Tokenise your styles with variable layers. Eg: put a class on your body tag for each theme, eg: dark-mode, high-contrast
Then define your components by abstract style variables, eg: button-color, heading-weight,
Then define the style variables for each theme:
body { --button-color: green; }
body.dark-mode { --button-color: blue; }
button { backgroud: var(--button-color); }
Then all you need to do is a simple JS function to set the appropriate theme class on your document body!
This way your components are compliant to your style guide, without needing to know the implementation details of your themeing Very SRP, much Demeter, such OCP
Apologies for psudocode, LMK if you have any furthers :)
- would that work with the jekyll theme?