search

amelioro / ameliorate

A tool for analyzing debatable problems effectively, collaboratively, and with an open mind.
https://ameliorate.app
MIT License
26 stars 9 forks source link

Dark mode #68

Open keyserj opened 1 year ago

keyserj commented 1 year ago

Is your feature request related to a problem? Please describe. Some people prefer a dark theme (it can be easier on the eyes).

Describe the solution you'd like Here's what the app currently looks like when passing mode: dark for the theme image

Material UI accepts a mode to automatically attempt to create dark mode, but

  1. the colors don't seem to contrast as well as they do with light mode
  2. not everything uses the Material theme for coloring (specifically react flow's background stands out)
  3. node colors should remain the same general color, but maybe the shades will have to change

Let's make this look nice, and add a toggle for dark mode in the navbar (next to the GitHub icon probably)

Describe alternatives you've considered

Additional context

Technical ideas

keyserj commented 2 weeks ago

The new oklch color notation seems like it could make this much easier to figure out https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Seems like we could pick a standard Light and Chroma (saturation) value for node type colors, then just change the Hue for each. And dark mode could just flip the Light value?!

This blog post has a nice demo where you can adjust oklch and see if the color passes APCA/WCAG 2.1 on white/black text. It seems like 75 Lightness and 0.12 Chroma enable all Hue values to pass on black text, and 0.6 Lightness and 0.10 Chrome enable all Hue values to pass on white text (at least for AA). EvilMartian's oklch color picker makes it easy to see which values are possible to be rendered on today's monitors.

Note: bottom of article mentions stylelint which can use linting to ensure we're picking colors that can be rendered by monitors

keyserj commented 1 week ago

Extracted color theme change to #526 - that should make this ticket easier.