Skip to content

Add system-aware dark mode #2

Description

@dinsley

Summary

Add a dark theme for the Stream Deck+ encoder display and key surfaces that follows the host operating system appearance. The result should reflect the palette and visual hierarchy of Amp Code's dark mode while remaining an independent implementation.

Current behavior

The rendering layer uses a fixed cream background with dark ink in:

  • src/rendering/encoder-surface.ts
  • src/rendering/command-surface.ts
  • src/rendering/busy-indicator.ts

The hardware UI therefore remains light when macOS or Windows is using dark mode.

Scope

  • Define shared light and dark palette tokens instead of embedding colors in individual renderers.
  • Detect the system appearance on macOS 13.5+ and Windows 10+ when the plugin starts.
  • React to system appearance changes without requiring a Stream Deck or plugin restart.
  • Apply the active palette to encoder slices, command keys, busy indicators, progress bars, borders, status text, and unavailable or error feedback.
  • Use Amp Code's dark mode as the visual reference for backgrounds, text hierarchy, borders, and status treatment.
  • Keep status colors legible on physical Stream Deck hardware.
  • Fall back safely to light mode if the system appearance cannot be detected.
  • Do not copy or bundle additional Amp artwork.

Acceptance criteria

  • Light system appearance preserves the current light presentation.
  • Dark system appearance renders every generated surface with the dark palette.
  • Changing system appearance while the plugin is running refreshes all visible actions automatically.
  • Text, icons, borders, and state colors remain readable on a physical Stream Deck+.
  • Rendering tests and documentation screenshots cover both palettes.
  • npm run check passes.

Implementation note

First confirm whether the Stream Deck SDK exposes a host appearance signal. If it does not, isolate the macOS and Windows detection behind a small platform interface so it can be tested without coupling the renderers to host commands.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestjavascriptPull requests that update javascript code

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions