Implementing Themes for web application

I'm building a web application and I would like to have different color themes that user can select.

I can have different stylesheets and then I can load the one that I want but I think this would be a lot of code ( even if I just take out the theme level CSS into a separate file ).

I want to know if there is a way that I can somehow set global theme parameter and then all CSS properties can use it to calculate colors suitable for that theme parameter value.

Answers


One solution you can do is to use a CSS preprocessor like SASS. Create you stylesheets as normal but instead of writing colours directly create variables for them in separate theme .scss files to be used as a reference.

Example in a light_theme.scss file:

$page_background_color: #f7f7f7;

In a dark_theme.scss file:

$page_background_color: #333;

Then your main .scss file:

body {
     background-color: $page_background_color;
}

So the result of this when compiled with SASS would be two .css stylesheets. Include them both in your each with a title attribute. Add the meta tag of Default-style then using JavaScript set that meta tag to be the correct stylesheet. This enables you to dynamically change which stylesheet your page uses.

Depending on your usecase, you could use localstorage to save the users choice of stylesheet and check for that upload page load.

I have a Gist of the above - https://gist.github.com/jmwhittaker/4540000

Hopefully this will point you in the right direction.


Using multiple style sheets isn't that bad, you just need a few lines of JavaScript in the <head> section of your page:

 <script type="text/javascript">
    function switchCSS(NewCSS)
    {
        document.getElementById("theme").href=NewCSS;
    }
 </script>

a named link to the stylesheet:

 <link id="theme" rel="stylesheet" href="css/gray.css" type="text/css" />

then in the <body> provide a way to switch themes by listing them in a combo box:

<select onchange="switchCSS(value);">
    <option value="gray.css">Gray</option>
    <option value="blue.css">Blue</option>
    <option value="red.css">Red</option>
</select>

Need Your Help

Log the reason for process termination with C++ on Linux

c++ linux logging handle terminate

Is there any way to log, handle or otherwise leave some clue about why a process terminates, covering as many termination-causing events as possible?

Android Honeycomb and USB Devices

android api usb android-3.0-honeycomb device

According to Android Honeycomb it supports USB peripherals. I am interested in connecting a credit card reader with usb and another device. My questions are the following: