Themes
Pages use the dark theme by default, no class needed. Add light-theme or dark-theme to any element to switch it and everything inside it, so one page can mix both.
| Class | Description |
|---|---|
dark-theme | Dark colours for this element and everything inside it (the default) |
light-theme | Light colours for this element and everything inside it |
<div class="light-theme" style="padding: 1em">
<p>Light section <span class="label">NEW</span></p>
<div class="dark-theme" style="padding: 1em">
<p>Dark section inside it <span class="label">NEW</span></p>
</div>
</div>Theme colours
Each theme is a set of CSS variables:
| Variable | :root,.dark-theme | .light-theme |
|---|---|---|
--modesta-highlight | #181818 | #f5f5f5 |
--modesta-primary | #282828 | #ececec |
--modesta-secondary | #303030 | #d9d9d9 |
--modesta-text | #fff | #000 |
To change a theme's colours without recompiling, override its variables on the same selector:
:root, .dark-theme {
--modesta-primary: #1b2838;
--modesta-secondary: #2a475e;
}
These classes use the current theme's colours:
| Class | Description |
|---|---|
highlight-bg | Highlight colour as the background |
primary-bg | Primary colour as the background |
secondary-bg | Secondary colour as the background |
highlight-text | Highlight colour as the text colour |
primary-text | Primary colour as the text colour |
secondary-text | Secondary colour as the text colour |
theme-text | The theme's text colour |
<div class="highlight-bg" style="padding: 1em">highlight-bg</div>
<div class="primary-bg" style="padding: 1em">primary-bg</div>
<div class="secondary-bg" style="padding: 1em">secondary-bg</div>