html - Implementing Themes for web application -

i'm building web application , have different color themes user can select.

i can have different stylesheets , can load 1 want think lot of code ( if take out theme level css separate file ).

i want know if there way can somehow set global theme parameter , css properties can use calculate colors suitable theme parameter value.

one solution can use css preprocessor sass. create stylesheets normal instead of writing colours directly create variables them in separate theme .scss files used reference.

example in light_theme.scss file:

$page_background_color: #f7f7f7; 

in dark_theme.scss file:

$page_background_color: #333; 

then main .scss file:

body {      background-color: $page_background_color; } 

so result of when compiled sass 2 .css stylesheets. include them both in each title attribute. add meta tag of default-style using javascript set meta tag correct stylesheet. enables dynamically change stylesheet page uses.

depending on usecase, use localstorage save users choice of stylesheet , check upload page load.

i have gist of above - https://gist.github.com/jmwhittaker/4540000

hopefully point in right direction.