Programming

18918 readers

283 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Follow the programming.dev instance rules
Keep content related to programming in some way
If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev

founded 2 years ago

MODERATORS

snowe@programming.dev

Ategon@programming.dev

MaungaHikoi@lemmy.nz

how to create two switchable custom.scss in just-the-docs? (lemmy.world)

submitted 1 week ago by scheep@lemmy.world to c/programming@programming.dev

6 comments fedilink hide all child comments

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

you are viewing a single comment's thread
view the rest of the comments

[–] orockwell@lemmy.world 2 points 1 week ago* (last edited 1 week ago) (1 children)

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 :)

[–] scheep@lemmy.world 1 points 1 week ago (1 children)

would that work with the jekyll theme?

[–] orockwell@lemmy.world 1 points 1 week ago (1 children)

Yep! This pattern will work on any website. You only need to be able to write CSS, and apply a class to the body tag.

AFAIK Jekyll uses Liquid for template flow control - you could set the class; or even load specific CSS that way too

[–] scheep@lemmy.world 1 points 1 week ago (1 children)

what if there’s loads of different elements where the colour could he changed such as texts, links, and different ohjects like the nav bar?

[–] orockwell@lemmy.world 2 points 2 days ago

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