Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow users to manually select dark mode or light mode. #41

Open
andrewculver opened this issue Jul 31, 2022 · 4 comments
Open

Allow users to manually select dark mode or light mode. #41

andrewculver opened this issue Jul 31, 2022 · 4 comments
Assignees
@jorbs @ps-ruby

Comments

@andrewculver
Copy link
Contributor

andrewculver commented Jul 31, 2022 •
edited
Loading

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):

image

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.
@andrewculver
Copy link
Contributor Author

andrewculver commented Jul 31, 2022 •
edited
Loading

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 .

@juliancheal
Copy link

The way I've been doing it is storing it in Local Storage as a variable.

@pascallaliberte
Copy link
Member

+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"

@pascallaliberte
Copy link
Member

Also color-scheme:changed could include the new current scheme in event.detail.scheme = ("light"|"dark")

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

@jorbs jorbs

@ps-ruby ps-ruby

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@juliancheal @pascallaliberte @andrewculver @jorbs @ps-ruby