Getting Started
Core Concepts
Components
Customization
Layout
Helpers
Utilities
Modern browsers come with a way to detect if a user has set their theme preference to
light or dark by using the prefers-color-scheme keyword.
This value can be used in a media query to change a website's styles by overwriting
the :root class when a certain mode is selected.
Haze uses the light mode as default for the :root class and
changes it automatically to dark depending on the user preferences. However, there's
also the possibility to reverse the user preference of force a certain mode.
It's also possible to use multiple modes within a website or even a single page, although not officially supported. There are certain limitations which will be briefly touched in the scope of this page.
In order to force a specific mode onto a section or even a specific element, use
the .bg-light and .bg-dark
classes.
The background color for the following declaration will always be light, disregarding the system theme:
<div class="bg-light"></div>The background color for the following declaration will always be dark, disregarding the system theme:
<div class="bg-dark"></div>In order to force a specific mode the whole page, use the .bg-light or .bg-dark classes on
the body element.
<body class="bg-dark"></body>Doing so will apply the pre-defined styling to the whole page. This behavior can be later overwridden within specific sections, on demand, using the same classes.
<body class="bg-dark">
<p>This text will be dark</p>
<div class="bg-light">
<p>This text will be light</p>
</div>
</body>
Haze includes the .bg-auto class, which functions similarly
to having no specific background class applied. Thus, the system theme will be
globally applied unless overridden.
The .bg-auto class is designed to work alongside the .bg-reverse class, enabling the integration of both light and
dark themes within a single page. To illustrate this concept, consider the following
example:
<body class="bg-auto">
<p>This text will be based on the system settings</p>
<div class="bg-reverse">
<p>This text will be based on the system settings but reversed</p>
</div>
</body>
In the provided example, the body will be split into two sections. The upper half will be a light theme when the system theme is set to light, while the lower half will be dark. Conversely, when the system theme is dark, the sections will reverse: the upper section will be dark, and the lower one will be light.
The variables used for all classes are initially defined within the :root class, with a default light theme. These variables are
overridden with darker colors based on the user's preferred color scheme. This
principle extends to paired classes like .bg-light and
.bg-dark, as well as .bg-auto and
.bg-reverse.
:root,
.bg-auto *,
.bg-light * {
--background: #eee;
--background-main: #fff;
--background-alt: #fafafa;
}
@media (prefers-color-scheme: dark) {
:root,
.bg-auto * {
--background: #161f27;
--background-main: #202b38;
--background-alt: #1a242f;
}
}
.bg-reverse *,
.bg-dark * {
--background: #161f27;
--background-main: #202b38;
--background-alt: #1a242f;
}
@media (prefers-color-scheme: dark) {
.bg-reverse * {
--background: #eee;
--background-main: #fff;
--background-alt: #fafafa;
}
}
The color schemes for each theme are conveniently adjustable, as all relevant declarations are located at the beginning of the file. Additionally, the range of themes can be expanded by defining new classes in a similar manner.
For more information on customization refer to the Customization/ Variables section. Additionally, more information about color modes can be found in the Customization/ Color Modes section.
When combining multiple theme classes, unexpected behavior may occur. For instance,
using the .bg-auto class within the .bg-dark class will always override .bg-auto due to their order of definition.
<div class="bg-dark">
<p>This text will be dark</p>
<div class="bg-auto">
<p>This text will be dark as well</p>
</div>
</div>
Similarly, when the .bg-reverse class is used within the
.bg-light class, the .bg-reverse
appears to be partially be overridden.
<div class="bg-light">
<p>This text will be light</p>
<div class="bg-reverse">
<p>This text will be partially dark</p>
</div>
</div>
We hope to address these limitation in a future version of Haze.