Knowledge · Guidelines · sveltekit

Dual Theme Contrast

Ensure all UI components maintain readable contrast in both light and dark themes

Metadata

sveltekit sveltekit

Description

shredbx.com supports dual themes via @media (prefers-color-scheme). Every UI component must be visually tested in BOTH light and dark mode before completion. Hardcoded color values (#fff, #000, rgba(255,...), white, black) are prohibited — use CSS custom properties exclusively so theme switching works automatically.

Rules

  • DTC-1 — NEVER use hardcoded color values in component CSS — use CSS custom properties exclusively
  • DTC-2 — Every new or modified UI component must be verified in both light and dark themes
  • DTC-3 — Use semantic color tokens, not raw palette values
  • DTC-4 — Buttons and badges on accent backgrounds need --color-text-on-accent for contrast