Appearance
A saved appearance object sets HTML attributes and CSS variables. An inline boot script applies device preferences before hydration.
Stored values
qccrm.appearance in localStorage holds theme, palette, layout, vision mode,
font choice, font size, sidebar mode, and animation duration. Defaults are system theme,
palette one, classic layout, standard vision, system font, 16px, hidden sidebar, and
moderate motion. Current code has 16 palettes and a 12–32px font-size range in steps of
two.
First paint and account sync
The root layout injects appearanceBootScript into the head. It sets the dark
class, color scheme, data attributes, and root font size from normalized saved
preferences. AppearanceProvider repeats normalization on mount and reacts to
system theme changes. Reduced-motion preference overrides animation duration.
Signed-in account controls copy preferences to Clerk unsafe metadata. User changes notify subscribers; remote synchronization avoids another write loop. Local storage remains available when account synchronization fails. Legacy IDs and named font sizes are normalized for existing users.
CSS and fonts
styles/palettes.css defines light/dark palette tokens and vision overlays,
and styles/shell.css has the classic/workbench/desk layout selectors.
Components use semantic tokens so overlays can change colors. The root layout registers
font families with preload: false; the browser downloads faces when selected
styles use them.
Changing appearance
Keep normalization, boot-script output, preference controls, and CSS attributes aligned. Run appearance tests for defaults, legacy values and color pairs, then relevant browser tests for layout, font size and hydration. These tests are specific checks, not a blanket accessibility certification. Layout changes also affect loading previews and navigation feedback.