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`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) keyword.
This value can be used in a media query to change a website's styles accordingly:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
```
However, it's not possible for a website to alter this preference. That's why it's preferable to **also** add a `data-theme` HTML attribute or a `theme-dark` CSS class.
This is how Bulma defines its dark theme:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
[data-theme=dark],
.theme-dark {
/* Update CSS variables */
}
```
With these rules:
* the website will be **light by default**, if no user preference is set
* it will also be **light** if the user has set their preference to `light`
* the website will be **dark** if the user has set their preference to `dark`
{% include docs/elements/anchor.html name="Force Dark Mode within a page" %}
You can **enable** Dark Mode in part of your HTML by simply using the HTML attribute or the CSS class:
```html
<div>
This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>
<divdata-theme="dark">
This is in Dark Mode
</div>
<divclass="theme-dark">
This is also in Dark Mode
</div>
```
{% include docs/elements/anchor.html name="Force Dark Mode for a whole webpage" %}
If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the `<html>` element:
```html
<htmldata-theme="dark">
<!-- Or -->
<htmlclass="theme-dark">
```
{% include docs/elements/anchor.html name="How the Dark theme is created" %}
This is the content of the `sass/themes/dark.scss` file:
```scss
@use "sass/utilities/initial-variables" as iv;
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
@use "sass/themes/setup";
// The main lightness of this theme
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
// The main scheme color, used to make calculations
This mixin outputs a list of CSS variables and their new value.
To use this theme with the `prefer-color-scheme` media query, write the following:
```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@include cv.system-theme($name: "dark") {
@include dark.dark-theme;
}
```
To use this theme with the `[data-theme=dark]` and `.theme-dark` selectors, write the following:
```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";
@include cv.bulma-theme($name: "dark") {
@include dark.dark-theme;
@include setup.setup-theme;
}
```
### The `bulma-theme()` mixin
This mixin will allow you to generate a CSS rule-set with both an appropriate HTML attribute selector and a CSS class selector, which names are defined by the `$name` parameter.
```scss
@use "sass/utilities/css-variables" as cv;
@include cv.bulma-theme($name: "my-theme") {
// Your code
}
```
This will output the following:
```css
[data-theme=my-theme],
.theme-my-theme {
/* Your code */
}
```
### The `system-theme()` mixin
This mixin will generate a `@media (prefers-color-scheme: $name)` media query.
```scss
@use "sass/utilities/css-variables" as cv;
@include cv.system-theme($name: "dark") {
// Your code
}
```
This will output the following:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Your code */
}
}
```
### The `register-vars()` function
All Bulma CSS variables are prefixed with `bulma-`. This prefix is defined with the `$cssvars-prefix: "bulma-";` Sass variable.
Because writing all CSS variables with this prefix can be cumbersome, Bulma provides a Sass function to register new variables: `register-vars()`.
This function accepts a Sass map of `name: value` pairs.
```scss
@use "sass/utilities/css-variables" as cv;
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
@include cv.bulma-theme($name: "my-theme") {
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
}
```
### Updating the lightness
For Dark Mode, Bulma will keep the same hue and saturation of the main scheme color. It will however **invert the lightness** of background, borders, text colors, and hover/active states.
* {% include docs/elements/color-swatch.html background="var(--bulma-background)" %} backgrounds
* {% include docs/elements/color-swatch.html background="var(--bulma-border)" %} borders
* text shades
* {% include docs/elements/color-swatch.html background="var(--bulma-text-strong)" %} strong text
* {% include docs/elements/color-swatch.html background="var(--bulma-text-weak)" %} weak text
* {% include docs/elements/color-swatch.html background="var(--bulma-title-color)" %} title text
* {% include docs/elements/color-swatch.html background="var(--bulma-text)" %} and normal text
For each of the 7 primary colors {% include docs/elements/primary-colors.html %}, the default Bulma theme generates **on scheme** shades, meaning shades of each color that will look decent on the main scheme color.
<td>{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
</tr>
{% endfor %}
</tbody>
</table>
Because in Dark Mode we are inverting the lightness of these colors, the page background will go from white {% include docs/elements/color-swatch.html background="#fff" %} to black {% include docs/elements/color-swatch.html background="#141414" %}. We thus need to update the `-on-scheme` colors of all 7 primary colors.
<tdclass="theme-dark">{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
</tr>
{% endfor %}
</tbody>
</table>
If you are creating your own theme, you can automatically generate new `-on-scheme` colors by using the `generate-on-scheme-colors()` for **each** color. It takes 3 parameters:
*`$name` which is a string. E.g. `"primary"`
*`$color` which is the color value. E.g.
*`$scheme-main` which is the theme's main scheme color (the one used as the page background). E.g. `#fff`
In Bulma, some CSS variables reference other CSS variables. For example, `--bulma-scheme-main` is defined like this:
```css
:root {
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
```
Because of how CSS variables work, if you update the value of `--bulma-scheme-main-l`, you need to define `--bulma-scheme-main` again. That is what `setup-theme()` does.
```css
[data-theme=my-theme],
.theme-my-theme {
--bulma-scheme-main-l: 7%;
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
```
If you create your own theme, simply call this function _after_ having set your own CSS variables:
