How to use the color system

Color Modes

In the current state of the color system, two different color modes are supported - Light Mode and Dark Mode. Each comes with definitions for each scheme and nested scheme.

To use the Light Mode no class or the -light-mode class needs to be added to the container, which should be shown in Light Mode.

The Dark Mode can be activated in a similar way, by adding -dark-mode class to the desired container. Additionally the Dark Mode can also be used with the @media (prefers-color-scheme: dark), for more information please see How to use / Styles in smaller chunks page.

Backgrounds and nested backgrounds

The FROK provides 3 different backgrounds - Primary, Secondary and Contrast. Each will change the colors of each available scheme and nested scheme.

In addtition to to 3 basic backgrounds, FROK will also provide nested backgrounds. Those will also overwrite the colors of each scheme. With the overwrite colors of the nested components will be unified around the nested color scheme. For example when choosing the emphasis-purple-nested, all nested components will change colors around purple.