NatSkin CSS-Variables

Introduction

CSS variables are a key technology to manage theming in modern web design. While NatSkin does have the ability to switch between different sets of CSS files, CSS variables offer a wide range of configurability without creating yet another theme. CSS variables are stored in pub/System/NatSkin/src/vars.uncompressed.css for the base set of variables as well as pub/System/MatterTheme/src/vars.uncompressed.css for the MatterTheme. CSS variables are organized in tires to best flexibility. On the first tire all basic color values, fonts and geometries are defined. The second tire uses those variables by applying them to the according HTML element such as a button or a menu, tables, dialogs, a part of the page such as the top bar, sidebar or bottom bar.

Note that only the base style and MatterTheme fully suport css variables. Legacy styles such as JazzyNoteTheme or CustomatoTheme are not customizable that way. Do not use them as a base theme for your own themes.

CSS variables can be set either in a full theme of its own to customize a base style or via the HtmlHead WebComponent. For example use this to change basic typographic properties such as font sizes

:root {
   --font-size: 14;
   --line-height: 1.5;
   --font-family-regular: Arial, FreeSans, sans-serif;

   --font-size-h1: 2rem;
   --font-size-h2: 1.6rem;
   --font-size-h3: 1.5rem;
   --font-size-h4: 1.4rem;
   --font-size-h5: 1.3rem;
   --font-size-h6: 1.2rem;
}

Note that all values of css variables are specified in the :root namespace. Colors for dark mode are in :root[data-theme='dark']. For example the page background color for light and dark mode is specified like this:

:root {
   --color-background:#fff;   
}
:root[data-theme='dark'] {
   --color-background:#000;   
}

In general only colors differ in dark and light mode but you may change other settings as well of course.