Dark mode is a first-class citizen in the Alius Design System, not an afterthought. Many Alius users are developers, engineers, and researchers who prefer dark interfaces for extended work sessions. The dark mode design must be intentional, comfortable, and maintain full information hierarchy.

Core Principle

Dark mode is not a simple color inversion. Inverting a light theme produces high-contrast, garish results that are uncomfortable to read. Instead, the dark theme is designed independently with its own color values while maintaining the same structural relationships as the light theme.

Background Levels

Define at least three background levels for dark mode:

  • Base background: The deepest layer — the page canvas
  • Elevated background: Cards, panels, and containers sitting above the base
  • Overlay background: Modals, drawers, and elements above elevated surfaces

Rules:

  • Backgrounds should be dark grays, not pure black (#000000)
  • Each level should be visually distinct but not dramatically different
  • The step between levels should feel natural, not jarring

Text Levels

Define at least four text levels:

  • Primary text: High contrast against the background — the main reading color
  • Secondary text: Slightly subdued — for descriptions, metadata, timestamps
  • Tertiary text: Further subdued — for placeholders, hints, disabled text
  • Inverted text: Used on dark surfaces that require light text (e.g., on brand-colored backgrounds)

Rules:

  • Primary text must meet WCAG AA contrast requirements against its background
  • Avoid pure white (#FFFFFF) for body text — use a slightly softened white to reduce glare
  • Maintain the same hierarchy relationships as the light theme

Border Levels

  • Borders in dark mode should use subtle dark grays
  • Borders should be visible but not prominent — they define structure, not decoration
  • Active borders (focused inputs, selected items) should use brand color or a lighter neutral

Brand Color Dark Adaptation

  • The brand color may need slight adjustment for dark backgrounds
  • Ensure the brand color meets contrast requirements against dark surfaces
  • If the brand color is used for text on dark backgrounds, verify readability
  • Brand color used for buttons and accents should feel equally vibrant in both modes

Code Block Dark Style

  • Code blocks should use a distinct background that differs from the page background
  • Syntax highlighting colors must be recalibrated for dark backgrounds — light-theme syntax colors will be too dim
  • Maintain clear distinction between keywords, strings, comments, variables, and types
  • Line numbers should be subdued but readable

Table Dark Style

  • Header rows should have a distinct background from data rows
  • Alternating row colors (zebra striping) should use very subtle background differences
  • Table borders should follow the standard dark mode border rules
  • Hover states on rows should be visible but not bright

Chart Dark Style

  • Chart backgrounds should match the page or card background
  • Grid lines and axis labels should use subdued colors
  • Data series colors must be recalibrated for dark backgrounds
  • Legends and annotations should maintain readability

General Guidelines

  • Comfortable for extended reading — this is the primary use case
  • Tech-user friendly — the dark mode should feel like a developer tool, not a media player
  • No overly bright or fluorescent colors — avoid electric blue, neon green, or hot pink accents
  • Clear information hierarchy must be maintained — dark mode should not flatten the visual structure
  • All interactive states (hover, active, focus, disabled) must be clearly distinguishable
  • Images and illustrations should adapt or use transparency to blend naturally with dark backgrounds