Logo
NeoArc Studio

Theming Reference

Complete reference for viewer theming including light and dark modes, colour customisation, and CSS variables.

The published viewer supports light and dark themes with customisable colours.

Theme Modes

Available theme modes
ModeDescription
LightLight background with dark text, optimised for daytime viewing
DarkDark background with light text, reduces eye strain in low light
SystemFollows operating system preference automatically

Colour Configuration

Brand colour settings
PropertyDescription
primaryColorMain brand colour for links, buttons, and primary accents
secondaryColorSupporting brand colour for secondary elements
tertiaryColorAdditional accent colour for subtle highlights

Component Colours

CSS Variables

Theme CSS variables
VariableDescription
--primary-colorPrimary brand colour
--secondary-colorSecondary brand colour
--background-colorPage background colour
--text-colorPrimary text colour
--border-colorBorder and separator colour

Theme-Aware Content

Best Practices