Theming

Scorton UI is dark-first. Theme is controlled with data-theme on a root element.

Dark (default)

:root, [data-theme="dark"] {
  --color-bg-primary: #0F0F13;
  --color-bg-alt: #110032;
  --color-accent: #F9C92B;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #AFAFAF;
}

Light

[data-theme="light"] {
  --color-bg-primary: #FFFFFF;
  --color-text-primary: #0F172A;
  --color-accent: #F9C92B;
}

CTA rule

Primary actions always use:

• Background #F9C92B
• Label #000000
• Hover #F7C318 with a slight lift

Do not invert to white-on-yellow for primary CTAs on product surfaces.

shadcn RGB channels

For Tailwind/shadcn interop, RGB channels are provided:

--primary: 249 201 43;
--primary-foreground: 0 0 0;
--secondary: 17 0 50; /* #110032 */

Switching in the docs

Docs sync the VitePress appearance toggle with html.dark and data-theme. Product apps should set data-theme="dark" (or "light") on the root element explicitly.