Switches the site to a high-contrast light theme designed for use on tablets and phones in bright sunlight. Toggle takes effect site-wide immediately — no preview step needed. Turn it off when back indoors to restore the standard dark theme.
Changes here save to the database and apply site-wide within seconds. You do not need to edit any files. Use Reset to Defaults to remove all overrides and return to the original design.
A catalogue of the CSS class names that control the appearance of standard
UI elements across the site. Use these names when asking an AI assistant to
make a specific formatting change — e.g. "make .section-label
font size larger". Click Copy to copy the class name
directly to your clipboard.
.section-heading
Main section title used on member and public pages (e.g. "Upcoming Deployments", "Planned Calendar"). Wrap one word in a <span> to highlight it in the accent color.
.section-label
Small all-caps label that sits above a .section-heading, providing context for the section (e.g. "Sign Up to Volunteer"). Appears in the accent color.
.eyebrow + .eyebrow span
Eyebrow label with a short decorative line to its left. Used at the top of page headers on public-facing pages to add context (e.g. "Members Only"). Color is gold.
.admin-eyebrow
Eyebrow label used on admin page headers (above the page title). Displays the word "Admin" in the accent color with wide letter spacing.
.panel-label
Small label above a sidebar list or panel on admin pages (e.g. "All Deployments", "All Posts"). Smaller and more muted than a section label.
.form-section-title
Section divider label inside an admin form, used to group related fields (e.g. "Shifts", "Volunteer Roster"). Renders in muted white with a top border.
.btn .btn-primary-green
Primary action button — green fill. Use for Save, Add, Confirm actions. Always pair .btn with a color class. Corner radius and font size are controlled by the theme tokens above.
.btn .btn-red
Danger/destructive action button — red fill. Use for Delete and Remove actions. The red color is controlled by the --red theme token.
.btn .btn-ghost
Secondary / ghost button — transparent with white text. Use for Cancel, Back, or secondary actions alongside a primary button.
.btn .btn-sm
Small button variant. Always pair with a color class — e.g. .btn .btn-sm .btn-primary-green. Reduces padding and font size for use in tight spaces like table rows.
.dep-list-status.open
Green pill badge shown next to a deployment name in the admin sidebar when its status is open (accepting signups).
.dep-list-status.closed
Red pill badge shown next to a deployment name when its status is closed. Text color is adjustable via the Red Text / Closed Badge control in Part 1.
.cert-tag
Gold certification tag shown on member profile rows in the Members admin table (e.g. DC, DDC, PC, Driver). Each certification a member holds gets its own tag.
Each time you use Preview on Site or Restore, the current theme is automatically backed up here. Up to 10 backups are kept. Click Restore on any entry to preview it on the site.