Theme CSS example

An example of multiple theme support using CSS variables.

DEMO

Solution

Global CSS variables are usually defined in the :root selector. Because of legacy browser support, you should define all css variables here.

Default variables:

:root {
    --font-family: Georgia, Cambria, san-serif;
    --text-color: #000;
}

Default variables:

:root {
    --font-family: 'Open Sans', sans-serif;
    --text-color: #666;
}

Add the theme variables to the page below the default variables. Et voilà!

Support for IE and legacy browser

css-vars-ponyfill provides support for legacy browsers and it's implementation is pretty straight-forward.