Theming & Dark Mode

The design system supports dynamic theming. By default, it operates in a high-contrast dark mode representing the SCION EDGE console, but supports a clean neutral light mode.

CSS Variables

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 24 100% 50%; /* Phantom Orange #FF6600 */
  --primary-foreground: 0 0% 98%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --border: 0 0% 89.8%;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 24 100% 50%; /* Phantom Orange #FF6600 */
  --primary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --border: 0 0% 14.9%;
}