Theme Viewer

Theme:

w3-theme-l5
w3-theme-l4
w3-theme-l3
w3-theme-l2
w3-theme-l1
w3-theme
w3-theme-d1
w3-theme-d2
w3-theme-d3
w3-theme-d4
w3-theme-d5
w3-theme-d1-bdr

These are the available colour tones in this theme. There are also styles for text and borders to match. The styles for these are:  w3-theme-l5, w3-theme-d5 and w3-theme for background and foreground together, and  w3-border w3-theme-bdr  used for borders only.

There are two generic schemes;  w3-theme-light  and  w3-theme-dark  as well as the primary  w3-theme  style. Please note that if your borders do not change colour, you may need to edit the w3Pro.css style sheet to remove the '!important' from all the w3-border styles.

No cookies are used to retain this information.

More information

All theme colours are declared as css variables making it easy to use theme colours directly on your html page or in additional stylesheets.

To use a theme colour in your html code just add 'var(--<variable>)' instead of the hex code for the colour. E.g.

<span style="border:1px solid var(--l1)"> highlighted text </span>

How this page works

When you select a theme, it is stored locally in your browser. Your choice of theme remains inplace for  your current session only ; if you close the tab/window this information will be deleted and the page will revert to the default theme as set in the head section. If you browse to other template pages (but not weather pages) they will also use your chosen theme.

You can download the current theme simply by clicking on the download button in the page menu. To use it, just upload it to your web server as 'colours.css'.

×

Modal title

The modal popup displayes a whole screen overley that in most themes is set to 0.3 transparency.

By viewing this popup, you can see if this needs to be adjusted.