Skip to main content

Theme

HyperionX uses a dark trading-focused interface with a clean light mode for documentation, review, and lower-intensity workflows. Theme consistency is a product requirement because traders keep charts, DOM tools, property grids, Code Lab, Validator, Optimizer, Rion, and error windows open for long sessions.

Every public window should be readable in both themes. A control is not production-ready if it has black text on a black background, a white popup in dark mode, a blue focus outline that fights the design system, or a hidden check mark.

Dark Mode Tokens​

Recommended dark theme tokens:

Background: #0B0F14
Surface: #101820
Surface raised: #111821
Surface hover: #2A3038
Selection: #3A3A3A
Border: #263442
Text: #E5E7EB
Muted text: #9CA3AF
HyperionX blue: #00A3FF
Connection green: #00E676
Warning: #F59E0B
Danger: #EF4444

Dark mode rules:

  • Window backgrounds use Background.
  • Panels, dialogs, menus, and popups use Surface.
  • Raised panels and tool surfaces use Surface raised.
  • Hover and selected rows use neutral gray, not bright blue.
  • Focus states use subtle border contrast, not a neon outline.
  • Scrollbars stay dark and visible.
  • Text stays light enough to meet contrast requirements.

Light Mode Tokens​

Recommended light theme tokens:

Background: #F6F9FC
Surface: #FFFFFF
Surface hover: #E8EEF5
Selection: #DDEAF7
Border: #D3DEE8
Text: #0B0F14
Muted text: #52606D
HyperionX blue: #0078D4
Connection green: #008F5A
Warning: #B7791F
Danger: #C53030

Light mode rules:

  • White surfaces need visible borders.
  • Muted text must still be readable.
  • Active controls can use HyperionX blue, but dense rows should stay calm.
  • Provider logos should use the logo variant intended for the active theme.

Interaction Rules​

  • Use HyperionX blue for primary actions, active navigation, and brand accents.
  • Use gray hover and selection states in dark trading UI.
  • Avoid neon blue selection highlights on dense property grids, dropdowns, and list rows.
  • Keep dark mode dropdowns, context menus, scroll bars, and popup windows on the same dark surface system.
  • Keep light mode readable with strong borders and no washed-out text.

Component Rules​

ComponentProduction expectation
ButtonsPrimary actions use HyperionX blue. Secondary actions use neutral surfaces. Destructive actions use red when appropriate.
Text boxesText, placeholder text, caret, selection, and context menu must be readable in both themes.
Check boxesCheck marks remain visible. Dark mode check marks should not turn black on a dark box.
Combo boxesDropdowns open reliably, scrollbars are usable, and popup rows follow the active theme.
Property gridsRow selection uses neutral gray and never hides the value text.
TablesHeaders, selected rows, hover rows, and grid lines stay readable at dense trading sizes.
ScrollbarsThumb and track contrast must be visible without switching to a light system scrollbar in dark mode.
Error dialogsError text and buttons follow theme, remain readable, and do not block the app longer than necessary.

Chart Rules​

Chart visuals need their own theme checks:

  • Crosshairs should be light gray in dark mode.
  • Axis labels should stay readable over chart backgrounds.
  • Chart buttons should sit inside the chart area and not cover price axis labels.
  • Order and position banners should remain visible after timeframe changes.
  • Indicator labels, arrows, icons, and text should not draw white boxes unless explicitly styled.
  • Drawing handles should be visible but not visually louder than candles or order lines.

AI And Tool Windows​

Rion chat, Agent Builder, Validator, Optimizer, News, DOM, Time and Sales, and import windows must use the same theme system as charts.

Rules:

  • Streaming or thinking states should use subtle motion or text shimmer, not a heavy unrelated background.
  • Confirmation prompts should be compact and readable.
  • Agent tool rows should not sit inside unnecessary dark bubbles.
  • Settings panels should fit without hiding the save button.
  • Right-click menus should follow theme in every input field.

Release Checklist​

Before a release, test these in both themes:

  1. Main window.
  2. Chart windows.
  3. Chart Trader.
  4. Indicator and strategy property windows.
  5. Validator and Optimizer.
  6. Level 2, Time and Sales, SuperDOM, and Mega DOM.
  7. Code Lab.
  8. Connections and wallet flows.
  9. Options and historical data import.
  10. Rion chat and Agent Builder.
  11. News window and NewsEcon indicator UI.
  12. Error dialogs and context menus.