Theme & Color System

Theme colors are named responsibilities, not isolated swatches. Luna Sites lets sections, blocks, presets, text, and global surfaces reference the same seven roles so a palette change stays coordinated instead of creating scattered color fixes.

Inspect the palette controls

Open Site Design → Edit Palette and read the roles in the order shown. Compare each swatch with the page canvas, cards, text, controls, hover states, Navbar, and Footer—not only with the neighboring swatches.

Use the seven roles consistently

Assign one recurring responsibility to each role so blocks and presets remain predictable.

Background

Use Background for the main page canvas and the default surface behind article content.

Light 1 and Light 2

Use the two light roles for cards, alternate sections, inputs, and quiet separation. They should remain visibly distinct from Background and from each other.

Primary and Accent

Use Primary for the main brand or action responsibility. Reserve Accent for selected states, badges, highlights, or a deliberate secondary emphasis so both roles do not compete everywhere.

Dark 1 and Dark 2

Use the dark roles for strong text, dark surfaces, navigation, and high-contrast controls. Keep enough difference to support hierarchy without weakening readability.

Build a dark-themed site

Luna Sites does not currently provide a site-wide dark-mode control for page content. To build a dark-themed site, choose Dark 1 or Dark 2 under Theme Preset for each section, then review text, links, controls, media overlays, the Navbar, and the Footer for contrast. Keep the choice consistent across pages and verify every section at Desktop, Tablet, and Mobile.

Review the palette in context

Contrast depends on the effective surface: a section color, image, gradient, translucent block, or interaction state. Check normal, hover, focus, disabled, and selected combinations on both light and dark surfaces. A transparent control may need a subtle border when its boundary would otherwise disappear.

Theme role, preset, or local override?

Change a theme role when the responsibility should update site-wide. Change a named preset when one reusable block variant needs a different treatment. Use a custom or local Style value only for a composition-specific exception, and record why it should not be shared.

Quick palette recipe

1. Set Background. 2. Choose Light 1 and Light 2 with visible separation. 3. Assign Primary to the main action responsibility. 4. Give Accent one supporting role. 5. Choose Dark 1 and Dark 2 for text and dark surfaces. 6. Test every text/surface pair on Desktop, Tablet, and Mobile.

Next steps

Continue with Fonts & Typography, then build Style Presets that reference these roles. Finish by checking local Style overrides for hard-coded colors that should return to the theme system.