Advanced › Custom CSS adds your own styles after the theme's.
Use the design tokens
All of the theme's styling comes from --v-* custom properties, computed from your settings. Use them in your rules so your styles follow your colors, presets and dark mode:
.block-html blockquote { border-color: var(--v-accent); }
.my-note { background: var(--v-surface-alt); color: var(--v-text); }
| Tokens | For |
|---|---|
--v-bg, --v-surface, --v-surface-alt, --v-surface-sunken |
Backgrounds |
--v-text, --v-text-muted, --v-heading, --v-link |
Text |
--v-primary / --v-on-primary, and secondary, accent, dark |
Brand colors and the text color that reads on each |
--v-primary-text |
The primary color as readable text |
--v-border, --v-border-strong, --v-focus |
Lines and focus |
--v-font-body, --v-font-heading, --v-font-mono |
Fonts |
--v-step-n2 … --v-step-6 |
Type sizes |
--v-space-3xs … --v-space-3xl |
Spacing |
--v-radius, --v-container, --v-measure |
Shape and widths |
The Style book page template lists every token with its current value in both color schemes.
No specificity battles
The theme's styles live in CSS cascade layers, so your custom CSS, and Omeka's and modules' styles, override them without !important or long selectors.
For module developers
The theme also publishes a neutral set of --theme-* properties that any module can read with a fallback, such as var(--theme-primary, #3a6fa8). See Module integrations.