Advanced › Custom CSS on the theme's settings page (Appearance › Themes › Configure Theme) adds your own styles after the theme's. Type CSS rules only, without a <style> tag.
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:
.v-prose 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 |
To see the values in use, open a page of your site in the browser's developer tools: the tokens are in the <style id="vitrine-tokens"> element of the page's head (the same name in every RefBytes theme), for the light scheme and the dark one.
Light and dark
The tokens change with the color scheme, so a rule written with them works in both. For a rule that applies in dark mode only:
:root[data-color-scheme="dark"] .my-note { border-color: var(--v-border-strong); }
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="light"]) .my-note { border-color: var(--v-border-strong); }
}
The first rule covers a visitor who chose dark with the light/dark switch, the second a visitor whose device is set to dark.
No specificity battles
The theme's styles live in CSS cascade layers, so your custom CSS, and the styles of Omeka and its plugins, override them without !important or long selectors.
Page classes
The page's <body> has classes for the theme and its main settings, which custom CSS can use: the theme's folder name (such as vitrine), v-preset-… for the style preset or palette, v-header-… for the header layout, v-cards-…, v-buttons-…, and v-sticky-header, v-has-topbar when they apply. Omeka adds its own: items show on an item page, exhibits show on an exhibit page, simple-page on a Simple Page, and the page's slug as the body's id. The theme's For developers page lists the classes of its own settings.
Saving
Omeka's HTML filter (Settings › Security) stores a > in the custom CSS as >. The theme reads it back as you wrote it, so child selectors such as .v-card > a work.
With the Design Studio plugin, custom CSS restyles the preview as you type.
For plugin developers
The theme also publishes a neutral set of --theme-* properties that any plugin can read with a fallback, such as var(--theme-primary, #3a6fa8). See Plugin integrations.