mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
|
---
|
||
|
|
title: Themes in Bulma
|
||
|
|
layout: docs
|
||
|
|
markdown: true
|
||
|
|
theme: features
|
||
|
|
doc-tab: features
|
||
|
|
doc-subtab: themes
|
||
|
|
breadcrumb:
|
||
|
|
- home
|
||
|
|
- documentation
|
||
|
|
- features
|
||
|
|
- features-themes
|
||
|
|
---
|
||
|
|
|
||
|
|
|
||
|
|
In Bulma, a **theme** is a **collection** of CSS variables.
|
||
|
|
|
||
|
|
Bulma comes with 2 themes:
|
||
|
|
|
||
|
|
- `light.scss` (required)
|
||
|
|
- `dark.scss` (optional)
|
||
|
|
|
||
|
|
## The default themes
|
||
|
|
|
||
|
|
Because Bulma requires a default value for all CSS variables, it comes with a **default light theme** located at `/sass/themes/light.scss`.
|
||
|
|
|
||
|
|
It also comes with a **dark theme** located at `/sass/themes/dark.scss`.
|
||
|
|
|
||
|
|
The file `/sass/themes/_index.scss` takes care of including both themes, each in two ways:
|
||
|
|
|
||
|
|
* with the `@media (prefers-color-scheme: $name)` media query
|
||
|
|
* with an HTML attribute `[data-theme=$name]` and CSS class `.theme-$name` selector
|
||
|
|
|
||
|
|
The only difference is that the light theme is also defined at the top-level: `:root` (equivalent to the `html` element, the ancestor of all HTML elements on a webpage). This ensures that a **default** value is set for all CSS variables.
|
||
|
|
|
||
|
|
The CSS output of that theme resembles the following:
|
||
|
|
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
/* CSS Variables */
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root {
|
||
|
|
/* CSS Variables */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
/* CSS Variables */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=light],
|
||
|
|
.theme-light {
|
||
|
|
/* CSS Variables */
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark],
|
||
|
|
.theme-dark {
|
||
|
|
/* CSS Variables */
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Creating a custom theme
|
||
|
|
|
||
|
|
Creating a theme is essentially **setting your own CSS variables**. A custom theme requires:
|
||
|
|
|
||
|
|
* a name like `sunrise`
|
||
|
|
* a scope like `:root`, `[data-theme=sunrise]`, `.theme-sunrise` or all three
|
||
|
|
* a set of CSS variables and their new value
|
||
|
|
|
||
|
|
### Customizing in the browser
|
||
|
|
|
||
|
|
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
|
||
|
|
|
||
|
|
To test out the CSS method, simply follow these steps:
|
||
|
|
|
||
|
|
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
|
||
|
|
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
|
||
|
|
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
|
||
|
|
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}
|