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. The comment form's button takes your primary color, or Blog Settings › Primary color when it is set (Blog 1.4.2 or later). |
| 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.
A module's own color setting
When a module lets an admin pick a color for its markup, and the theme styles that markup itself, the theme can only follow the setting if the module says when it is set. A module's own variable with a built-in default (Blog's --blog-accent) always has a value, so the module declares a second pair only while the setting has one, and the theme reads it with its own color as the fallback:
.comment-form button {
background: var(--blog-primary-color, var(--v-primary));
color: var(--blog-on-primary-color, var(--v-on-primary));
}
| Module | Properties | Declared |
|---|---|---|
| Blog 1.4.2 or later | --blog-primary-color (Blog Settings › Primary color, #rrggbb), --blog-on-primary-color (white or #111, whichever contrasts more; black on the few mid-tones where neither reaches 4.5:1) |
On :root, on blog pages and pages with a Blog Posts block, only while the setting has a value |
The theme uses the pair for the comment form's button and Blog's Read more buttons, in both color schemes. On hover the admin's color stays and the label is underlined in its text color: a lighter or darker shade the theme did not derive could lose its contrast. With the setting blank the buttons take the theme's primary color and its hover, as before.
Templates keep Omeka's view.show.before/after and view.browse.before/after events, so modules that add content to resource pages keep working.