Skip to content

feat: three-state dark mode toggle (light / system / dark) #25

@gregoryfoster

Description

@gregoryfoster

Summary

The current dark mode toggle (added in #19) writes `pm-color-scheme` as either `"dark"` or `"light"` on every click. Once a user clicks the toggle, there is no UI path to return to the `"absent"` state (follow OS `prefers-color-scheme`). Users must manually clear `localStorage` via DevTools to restore system-following behavior.

Current behavior

localStorage value Behavior
`"dark"` Force dark
`"light"` Force light
absent Follow OS

The toggle cycles between `"dark"` ↔ `"light"` only. `"absent"` is never written.

Proposed behavior

Add a third state to the toggle: light → system → dark → light (or a dedicated reset affordance). Writing `"system"` (or clearing the key) to localStorage would return to OS-following mode.

Scope

  • Update `dark-mode.js` to support a three-state cycle or explicit reset
  • Update FOUC prevention script to handle a `"system"` stored value (treat as absent)
  • Update STYLE.md section 3 localStorage key table and toggle button documentation
  • Add tests

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions