Skip to content

Support switchable Dark Mode #14

Open
@acbart

Description

@acbart

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions