Allow users to manually select dark mode or light mode.
andrewculver opened this issue · comments
Right now the theme only supports going in and out of dark mode based on the system setting. However, we should also have a way of allowing users to select dark mode even when they're OS is light mode, and they should be able to select light mode even when their OS is dark mode, e.g. the following example from Basecamp (provided by @juliancheal):
I can handle adding the option to the user configuration. For this issue, let's just limit the scope to making it work where we can add dark or light as a class to the <html> tag and it will do one or the other. This will also make it easier for developers who want to fix their application in one or the other 100% of the time.
It looks like Tailwind CSS has some guidance on making this work? However, if there is JS involved we should do that in https://github.com/bullet-train-co/bullet_train-base .
The way I've been doing it is storing it in Local Storage as a variable.
+1 on that strategy of using Tailwind's "class strategy" and having some Javascript living in bullet_train-base.
I also suggest dispatching a customEvent called color-scheme:changed on the window so that on a Stimulus controlled element we can register the data-action="color-scheme:changed@window->chart#redrawChart"
Also color-scheme:changed could include the new current scheme in event.detail.scheme = ("light"|"dark")