[html/css] design themes

[Chaosy]

So I was tinkering on a website, mostly to try to make a clean template with bootstrap 4

I figured I there should be an option for color theme.

For starters, a dark/light theme. This would mean:

• Colors of text tags such as h3, p and a would change through css
• the html would use different classes btn-dark and btn-light respectively

I am aware that this is technically possible by modifying the files through javascript when confirming a configuration.
This feels like a very ugly solution however. My other idea was to somehow have presets, meaning multiple copies of css and html files which feels terribly inconvenient since updating one page force you to update the others.

But I was hoping for other ideas/solutions.

 

[TriggerHappy]

So I was tinkering on a website, mostly to try to make a clean template with bootstrap 4

I figured I there should be an option for color theme.

For starters, a dark/light theme. This would mean:

• Colors of text tags such as h3, p and a would change through css
• the html would use different classes btn-dark and btn-light respectively

I am aware that this is technically possible by modifying the files through javascript when confirming a configuration.
This feels like a very ugly solution however. My other idea was to somehow have presets, meaning multiple copies of css and html files which feels terribly inconvenient since updating one page force you to update the others.

But I was hoping for other ideas/solutions.

You can use something like bootswatch, or your own custom CSS files. I think having a .css for each theme would be the best option if there are plenty of differences between each theme. If not, like you said you can use javascript to dynamically change a few colors.

 

[Chaosy]

That seems to be a pretty decent solution actually. I'll see if I can get that to work.

 

[SpectreD]

If you're going to be using another css file. Use SASS and have preset variables for colors

This will make it easier for you to edit your colour scheme with just a few lines