Skip to content

web: support both light and dark color schemes #2706

Description

@acinader

Depends on the css scrub (#2705).

hledger-web's UI is light-only. Users who keep their OS in dark mode
(or have it switch automatically at night) get a bright page, and
browser-drawn widgets (suggestion popups, date picker, scrollbars) can
come out mismatched with the page around them.

A first small step goes into #2702: declaring color-scheme: light (https://web.dev/articles/color-scheme) tells the browser the
page is light-only, so it draws its widgets light to match. That fixes
the mismatched-popup problem but leaves dark-mode users with a bright
page.

This issue proposes going further and actually supporting both
schemes. Roughly:

  • declare color-scheme: light dark
  • define the palette in one place (css custom properties or the newer
    light-dark() function,
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
  • pick dark equivalents for the UI colors, including the
    positive/negative amount colors, sidebar, and register/journal rows
  • respect prefers-color-scheme with no toggle to start; a manual
    override could come later if wanted

No javascript is needed for any of this. The main work is choosing a
dark palette that keeps the reports readable and the red/green amount
colors distinguishable.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-WISHSome kind of improvement request or proposal.webThe hledger-web tool.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions