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.
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 thepage 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:
color-scheme: light darklight-dark()function,https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
positive/negative amount colors, sidebar, and register/journal rows
prefers-color-schemewith no toggle to start; a manualoverride 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.