[go: up one dir, main page]
Skip to content

Add Dark Mode

asdfkcdkrequested to merge
asdfkcdk/cactus-client:css-dark-mode into main

This PR introduces Dark Mode as proposed in #64 (closed). Also fixes #60 (closed).

Currently, this is how it looks like

Light

light2

Light Login

lightpop2

Dark

dark2

Dark Login

darkpop2

For more details, see the documentation (currently, in the README) and also the individual commit messages.

There are still a few things to be ironed out:

  • What default colors to use? The ones set currently look decent on white/black sites. I think that's what CC may want to optimise for? Notice, that it can't look good on any site by default (already without this PR it doesn't). Try to color the site green or blue and you'll know what I mean. See #64 (comment 652003746) for more details.
  • What properties to expose as variables? Currently there are few variables such that customisability is as easy as possible. This requires using variables for multiple purposes internally, e.g. passive text color and active background for avatar placeholder, button color for close button, etc. We might consider if this is worth it or not. For example, the default button color for light mode needs to be dark enough to make the closing button "x" visible enough. Or maybe we want to provide the user the customisability for the avatar placeholder? Another variable we might want to expose is gap to allow an easy control of the spacing between things.
  • Box shadow... Currently the variable exposes only the color to make customisability easier. My hope was to find a box shadow setting that looks decent in both light and dark with just changing color. But I'm not sure about the current defaults. Maybe the variable should expose the whole property value?
  • Where should the documentation go? Currently, it's in the README but probably the homepage would be a better place.
  • Note, the light/dark class to manually toggle light and dark mode is on the <html> element, not the <body>. This is the common place to put such general site properties like variables. Without updating, dark mode won't work for existing users which use a class on the <body> like cactus.chat, just as it doesn't work for them right now.

(Note, this PR also reverts a 1em increase in height of the textarea due to the additional padding introduced in !8 (merged). I noticed this only now! 🥲)

Edited by asdfkcdk

Merge request reports