Skip to content

Support switchable Dark Mode #14

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.

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

Open
acbart opened this issue Feb 27, 2022 · 0 comments
Open

Support switchable Dark Mode #14

acbart opened this issue Feb 27, 2022 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@acbart
Copy link
Collaborator

acbart commented Feb 27, 2022

Students are requesting a dark mode, so I spent a little time looking into it.

The just-the-docs theme we are using DOES have a switchable dark mode. In theory, you'd just want to add some code like this:

mode = localStorage.getItem("mode") || "light";
jtd.setTheme(mode);

And then have a button somewhere hovering around that would run:

const newMode = mode === "light" ? "dark" : "light";
localStorage.setItem("mode", newMode);
jtd.setTheme(newMode);

However, currently, the dark mode site looks terrible because of the Bootstrap and Ace Editor CSS rules. I believe that the simple solution is to move the Bootstrap rules to be before anything else. However, I'm not sure there's an easy solution when it comes to the Ace Editor stuff (I was never happy with having to use Ace, but whatever). Someone probably needs to play with it and add custom scheme rules instead of just using the just-the-doc's default dark theme, to change how Ace looks.

@acbart acbart added enhancement New feature or request good first issue Good for newcomers labels Feb 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant