Theme CSS example

An example of multiple theme support using CSS variables.

DEMO

Solution

Global CSS variables are usually defined in the :root selector.

Default variables:

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

Default variables:

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