Colors

Colors used by the current theme, with their purpose and live rendered values.

Previewing changes this page only. Your saved theme and tag-category colors stay the same. Translucent swatches appear over a checkerboard.

Page and surfaces

Page backgrounds, layered panels, text, and borders.

Page background --emalm-ui-page-bg

The main page canvas.

--emalm-ui-page-bg
Page foreground --emalm-ui-page-text

The base foreground paired with the page background.

--emalm-ui-page-text
Text --emalm-ui-text

Normal body and form text.

--emalm-ui-text
Muted text --emalm-ui-text-muted

The base secondary-text color.

--emalm-ui-text-muted
Readable muted text --emalm-ui-readable-muted

The derived secondary text used for hints and metadata.

--emalm-ui-readable-muted
Surface 1 --emalm-ui-surface-1

Cards, inputs, dialogs, and content panels.

--emalm-ui-surface-1
Surface 2 --emalm-ui-surface-2

Secondary panels and alternating surfaces.

--emalm-ui-surface-2
Surface 3 --emalm-ui-surface-3

Raised or emphasized surface layers.

--emalm-ui-surface-3
Surface text --emalm-ui-surface-text

Text on cards and panels.

--emalm-ui-surface-text
Border --emalm-ui-border

Normal panel and control borders.

--emalm-ui-border
Strong border --emalm-ui-border-strong

Emphasized outlines and separators.

--emalm-ui-border-strong

Navigation

Header and footer colors. Subnavigation and the footer also use a slight fill mixed from the header colors.

Header base background --emalm-ui-header-bg

The theme navigation background; a theme gradient can override this base.

--emalm-ui-header-bg
Header text --emalm-ui-header-text

Text paired with the header background.

--emalm-ui-header-text
Header link --emalm-ui-header-link

Navigation links; falls back to the normal link color.

--emalm-ui-header-link
Header link hover --emalm-ui-header-link-hover

Hovered navigation links; falls back to the normal hover color.

--emalm-ui-header-link-hover
Footer base background --emalm-ui-footer-bg

The theme footer background before the navigation fill is applied.

--emalm-ui-footer-bg
Footer text --emalm-ui-footer-text

Footer links and secondary text.

--emalm-ui-footer-text
Subnav and footer fill color-mix: navigation fill

The slight filled background used below the main navigation.

color-mix: navigation fill
Rendered header header.emalm-top-header

The actual header background, including theme gradients.

header.emalm-top-header
Rendered subnavigation .emalm-subnav-menu

The actual filled subnavigation background.

.emalm-subnav-menu
Rendered footer .emalm-footer

The actual footer background after theme overrides.

.emalm-footer

Controls and tables

Buttons, form inputs, focus, selection, autocomplete, and table rows.

Primary button --emalm-ui-primary-bg

The rendered primary button background.

--emalm-ui-primary-bg
Primary button hover --emalm-ui-primary-hover-bg

The hovered primary button background.

--emalm-ui-primary-hover-bg
Primary button text --emalm-ui-primary-text

Text on primary buttons.

--emalm-ui-primary-text
Control hover --emalm-ui-control-hover-bg

Hovered controls and action links.

--emalm-ui-control-hover-bg
Control selected --emalm-ui-control-active-bg

Selected modes and active controls.

--emalm-ui-control-active-bg
Focus ring --emalm-ui-focus

The translucent keyboard-focus outline.

--emalm-ui-focus
Input background --form-input-background

Text fields, dropdowns, and textareas.

--form-input-background
Input border --form-input-border-color

Form control outlines.

--form-input-border-color
Autocomplete border --emalm-ui-autocomplete-border

Suggestion popup borders and separators.

--emalm-ui-autocomplete-border
Autocomplete selection --emalm-ui-autocomplete-selected-bg

The active suggestion background.

--emalm-ui-autocomplete-selected-bg
Alternating table row --table-even-row-background

The striped table background.

--table-even-row-background
Table row hover --table-row-hover-background

The hovered table row background.

--table-row-hover-background
Table heading border --table-header-border-color

The separator below table headings.

--table-header-border-color
Table row border --table-row-border-color

The separators between table rows.

--table-row-border-color

Notices and validation

Base status palettes and their rendered, readable surfaces and text.

Information base background --emalm-ui-info-bg

The base status background before surface mixing.

--emalm-ui-info-bg
Information border --emalm-ui-info-border

The outline used for this status.

--emalm-ui-info-border
Information base text --emalm-ui-info-text

The base status foreground before readability mixing.

--emalm-ui-info-text
Information rendered background --emalm-ui-info-surface

The mixed background actually used by notices.

--emalm-ui-info-surface
Information rendered text --emalm-ui-info-readable-text

The readable foreground actually used by notices.

--emalm-ui-info-readable-text
Success base background --emalm-ui-success-bg

The base status background before surface mixing.

--emalm-ui-success-bg
Success border --emalm-ui-success-border

The outline used for this status.

--emalm-ui-success-border
Success base text --emalm-ui-success-text

The base status foreground before readability mixing.

--emalm-ui-success-text
Success rendered background --emalm-ui-success-surface

The mixed background actually used by notices.

--emalm-ui-success-surface
Success rendered text --emalm-ui-success-readable-text

The readable foreground actually used by notices.

--emalm-ui-success-readable-text
Warning base background --emalm-ui-warning-bg

The base status background before surface mixing.

--emalm-ui-warning-bg
Warning border --emalm-ui-warning-border

The outline used for this status.

--emalm-ui-warning-border
Warning base text --emalm-ui-warning-text

The base status foreground before readability mixing.

--emalm-ui-warning-text
Warning rendered background --emalm-ui-warning-surface

The mixed background actually used by notices.

--emalm-ui-warning-surface
Warning rendered text --emalm-ui-warning-readable-text

The readable foreground actually used by notices.

--emalm-ui-warning-readable-text
Error base background --emalm-ui-danger-bg

The base status background before surface mixing.

--emalm-ui-danger-bg
Error border --emalm-ui-danger-border

The outline used for this status.

--emalm-ui-danger-border
Error base text --emalm-ui-danger-text

The base status foreground before readability mixing.

--emalm-ui-danger-text
Error rendered background --emalm-ui-danger-surface

The mixed background actually used by notices.

--emalm-ui-danger-surface
Error rendered text --emalm-ui-danger-readable-text

The readable foreground actually used by notices.

--emalm-ui-danger-readable-text

Tag categories

These colors come from the separate tag-category configuration. Changing the preview theme preserves this bespoke palette.

System --emalm-tag-system-color

The configured system tag color.

--emalm-tag-system-color
General --emalm-tag-general-color

The configured general tag color.

--emalm-tag-general-color
Artist --emalm-tag-artist-color

The configured artist tag color.

--emalm-tag-artist-color
Copyright --emalm-tag-copyright-color

The configured copyright tag color.

--emalm-tag-copyright-color
Character --emalm-tag-character-color

The configured character tag color.

--emalm-tag-character-color
Meta --emalm-tag-meta-color

The configured meta tag color.

--emalm-tag-meta-color

User ranks

Rendered user-link colors and configured hover tokens. Some page-specific rules retain the normal rank color when hovered.

Owner --user-owner-color

The rendered owner user-link color.

--user-owner-color
Owner hover token --user-owner-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-owner-hover-color
Admin --user-admin-color

The rendered admin user-link color.

--user-admin-color
Admin hover token --user-admin-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-admin-hover-color
Moderator --user-moderator-color

The rendered moderator user-link color.

--user-moderator-color
Moderator hover token --user-moderator-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-moderator-hover-color
Approver --user-approver-color

The rendered approver user-link color.

--user-approver-color
Approver hover token --user-approver-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-approver-hover-color
Contributor --user-contributor-color

The rendered contributor user-link color.

--user-contributor-color
Contributor hover token --user-contributor-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-contributor-hover-color
Builder --user-builder-color

The rendered builder user-link color.

--user-builder-color
Builder hover token --user-builder-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-builder-hover-color
Platinum --user-platinum-color

The rendered platinum user-link color.

--user-platinum-color
Platinum hover token --user-platinum-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-platinum-hover-color
Gold --user-gold-color

The rendered gold user-link color.

--user-gold-color
Gold hover token --user-gold-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-gold-hover-color
Member --user-member-color

The rendered member user-link color.

--user-member-color
Member hover token --user-member-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-member-hover-color
Restricted --user-restricted-color

The rendered restricted user-link color.

--user-restricted-color
Restricted hover token --user-restricted-hover-color

The optional hover palette token. Page-specific rules can retain the normal rank color; an undefined token is shown using that normal color.

--user-restricted-hover-color
Banned / deleted a.user.user-banned

The muted, struck-through color for banned and deleted accounts.

a.user.user-banned

Image notes

Note boxes, editing handles, previews, and editing-state outlines.

Note box --note-box-background-color

The note overlay background.

--note-box-background-color
Note box border --note-box-border-color

The note overlay outline.

--note-box-border-color
Note body --note-body-background-color

The expanded note text background.

--note-body-background-color
Note text --note-body-text-color

Text inside expanded notes.

--note-body-text-color
Note body border --note-body-border-color

The expanded note outline.

--note-body-border-color
Resize handle --note-resize-handle-background-color

The note resizing handle.

--note-resize-handle-background-color
Note preview --note-preview-background-color

The note preview background.

--note-preview-background-color
Unsaved note --note-unsaved-border-color

An unsaved edit outline.

--note-unsaved-border-color
Movable note --note-movable-border-color

The outline of a note being moved.

--note-movable-border-color
Highlighted note --note-highlight-color

A selected or highlighted note.

--note-highlight-color

Overlays and shadows

Translucent backdrops, selection highlights, and panel elevation.

Overlay --emalm-ui-overlay

The backdrop behind dialogs and mobile navigation.

--emalm-ui-overlay
Soft shadow --emalm-ui-shadow-soft

Elevation for cards, popups, and selected actions.

--emalm-ui-shadow-soft
Strong shadow --emalm-ui-shadow-strong

Elevation for dialogs and prominent panels.

--emalm-ui-shadow-strong
Text selection color-mix: text selection

The translucent background of selected text.

color-mix: text selection

Component examples

Rendered interface states using the existing notice, button, and post-action styles. Favorites use the fixed pink/orange gradient; likes and dislikes follow the status palette. These are visual samples.

Information notice
Success notice
Warning notice
Error notice
Liked Disliked
Favorited Fixed favorite gradient