Styled modules
The theme includes styles and templates for these modules, so they follow your colors, fonts and dark mode:
| Module | What is styled |
|---|---|
| Blog | Blog index, tag, category and author pages and the Blog posts block use the theme's templates; single posts, comments and code samples are styled for both color schemes. |
| Oral Archivist | Player and segment pages, with the sticky header taken into account. |
| Chatbot | The floating chat button, chat panel and chat block, and semantic search. |
| BlockSuite (1.2 or later) | Every block (hero, call to action, statistics, timeline, search box, sliders, tabs, accordions, columns), including inside colored sections. |
| Data Visualization Builder | Chart and dashboard frames. |
| Value Splitter | Split values. |
| Mapping | Map popups, group labels and cluster counts in both color schemes. |
| Universal Viewer, Mirador and IIIF Server | The viewers keep their own interface: the theme's headings, buttons and links don't reach into them. |
| Transcript | The transcript panel and the player's accent follow your colors, in both color schemes. |
| Access | The access status sits in the sidebar like the theme's own panels, and the request form opens over the page in your colors. |
| Advanced Search | The search page sits in the page column; its fields, date range, facets and results take your colors, with the facets above the results on phones. |
| Block Plus | Showcases and item set showcases as cards, share buttons as buttons, and result lists with their pictures. |
Values from Value Suggest, Custom Vocab and Numeric Data Types show like any other value.
Other modules
Any module's public pages inherit the theme's styles for headings, text, links, forms, buttons, tables, messages and pagination, in both color schemes. A module's own pages sit in the page column like the theme's, and content that modules add to item and media pages (for example, players or maps shown before or after the metadata) is placed in the page container so it lines up with the rest of the page. A module's block in an item page's sidebar (Configure resource pages) gets the same panel as the theme's own sidebar blocks.
For module developers
The theme publishes a neutral set of custom properties that any module can read with a fallback, so the module looks right in every RefBytes theme and in other themes:
.my-module-button { background: var(--theme-primary, #3a6fa8); color: var(--theme-on-primary, #fff); }
| Property | Meaning |
|---|---|
--theme-primary, --theme-on-primary, --theme-primary-text |
Primary color, text on it, primary as readable text |
--theme-accent, --theme-on-accent |
Accent color and text on it |
--theme-surface, --theme-surface-alt, --theme-dark, --theme-on-dark |
Backgrounds |
--theme-text, --theme-text-muted, --theme-heading, --theme-link |
Text |
--theme-border, --theme-border-strong, --theme-focus |
Lines and focus |
--theme-radius, --theme-radius-button |
Corners |
--theme-font-body, --theme-font-heading |
Fonts |
--theme-sticky-offset |
Height of the sticky header, for scroll offsets |
Every text color in the set reaches 4.5:1 on every surface color, in both schemes. The set is declared again inside colored sections, so a module's markup inside a dark band picks up that band's colors.
Templates keep Omeka's view.show.before/after and view.browse.before/after events, so modules that add content to resource pages keep working.