How to change and maintain multiple color themes at runtime using css?

I want my web app to have different color themes:

So now I have:

RedTheme.css
BlueTheme.css

And I load each one dynamically at runtime. Depending on which user selects from their options menu. And it works, but I don't like having a separate file for each theme.

Option 1. I am wondering if I can do something like:

Theme.css? Theme = Red and then inside css to figure out which one to use based on that variable.

Option 2. I'm also wondering if I can do something like CSS:

background-color: @themeBackgroundColor

and then somehow set that variable at runtime via javascript or something.


If Option 1 and Option 2 are not available, do you have any other suggestions for a topic besides saving a different file for each topic? b / c, maybe I need an option where the user can select custom colors in the future.

+3


source to share


3 answers


If you want to use variables in your CSS check out Less or Sass , there are client side solutions for that.

To switch styles, you can:

  • Use an ID attribute for the body for example <body id="red">

    and css prefixed with that id. So something #red myelement.myclass{}

    or something. Then switch the id using javascripts.
  • You can have a base CSS file and several server side theme CSS files (like gmail, for example) and exchange them for javascript by changing the url, this will create a new request in the browser to get a different CSS.
  • You can search or write a little structure of your own that adds the correct styling within the html itself as a style attribute ( as done here ), or that adds inline styling elements to the html where you define custom styles and swap them using javascript.


Any changes to CSS elements or HTML using javascript, as far as I have seen, will force the browser to render the page again.

Changing the CSS files on your clients' hard drive directly is not possible as javascript does not allow it. However, you can change the CSS in the cache or html.

+8


source


Benjamin's suggestion was one of my suggestions. Another lesser known trick is that you can set a disabled property in a stylesheet and disable that stylesheet

Let's 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 only 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");
      }      
    }
}

      

+3


source


The easiest way to do this is using LESS . A more complex way, but one that might be more useful if you plan on doing this a lot, would be to have your css file handled by php or asp.net (depending on your platform) and use the code to output the css (making sure to output the correct headers for the CSS file).

0


source







All Articles