I'd like my web app to have different colored themes:
So now I have:
RedTheme.css
BlueTheme.css
And I load each dynamically at runtime. Depending what user selects in his options menu. And that works, but I don't like having a separate file for each theme.
Option 1. I'm wondering if there's any way I can do something like:
Theme.css?Theme=Red and then within the css to have it figure out which one to use based on that variable.
Option 2. I'm also wondering if maybe I can do something like inside the CSS to do:
background-color: @themeBackgroundColor
and then somehow set this variable at runtime via javascript or something.
If Option 1 and Option 2 are not available, do you have any other suggestions for theming apart from keeping a different file for each theme? b/c maybe I'd like an option where the user can choose custom colors in the future.
I'd like my web app to have different colored themes:
So now I have:
RedTheme.css
BlueTheme.css
And I load each dynamically at runtime. Depending what user selects in his options menu. And that works, but I don't like having a separate file for each theme.
Option 1. I'm wondering if there's any way I can do something like:
Theme.css?Theme=Red and then within the css to have it figure out which one to use based on that variable.
Option 2. I'm also wondering if maybe I can do something like inside the CSS to do:
background-color: @themeBackgroundColor
and then somehow set this variable at runtime via javascript or something.
If Option 1 and Option 2 are not available, do you have any other suggestions for theming apart from keeping a different file for each theme? b/c maybe I'd like an option where the user can choose custom colors in the future.
Share Improve this question asked Mar 30, 2012 at 16:06 Shai UIShai UI 51.9k77 gold badges217 silver badges316 bronze badges 1- 2 I'm from the future. use css variables – Shai UI Commented Oct 15, 2019 at 19:44
3 Answers
Reset to default 11If you want to use variables in your CSS, have a look at Less or Sass, both have client side solutions for this.
To switch styles you could:
- Use a ID attribute for the body like
<body id="red">and have css prefixed with this id. So#red myelement.myclass{}or something. Then switch the ID with javascripts. - You could have a base CSS file and several theme CSS files on the server side(like gmail does for example) and swap between them with javascript by changing the URL, this would generate a new request in the browser to get the other CSS.
- You could look for or write some small framework of your own which adds the proper styling inside the html itself as a style attribute (like done here), or which adds inline style elements to the html where you define the custom styles and swap them out with javascript.
Any changes to the CSS of elements or HTML by javascript as far as i've seen will trigger the browser to render the page again.
Changing the CSS files on your clients hardisk directly is not possible since javascript does not allow this. You can however change the CSS in the cache or html.
Benjamin's suggestion was one of my suggestions. The other less known trick is that you can set a disabled property on a stylesheet and that will disable that style sheet
Say you have two stylesheets
<link rel="stylesheet" type="text/css" href="blue-theme.css" id="blue-theme"/>
<link rel="stylesheet" type="text/css" href="red-theme.css" id="red-theme"/>
You can easily enable just one of them
function setTheme(theme) {
var themes = ["blue-theme", "red-theme"];
for (var i=0; i < themes.length; i++) {
var styleSheet = document.getElementById(themes[i]);
if (themes[i] == theme) {
styleSheet.removeAttribute("disabled");
} else {
styleSheet.setAttribute("disabled", "disabled");
}
}
}
The easiest way to do this would be to use LESS. A more complicated way, but one that could be more useful if you plan to do this alot, would be to have your css file handled by php or asp.net (depending on your platform) and use code to output the css (making sure to output the proper headers for a CSS file).