frontend-fun / frontend-fun/react-hooks-typescript-tome

Support switchable Dark Mode

Open
#14 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
Dominant language
No language data
Stars
1
Forks
8
PR merge metrics
No merged PRs in 30d

Description

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](https://pmarsceill.github.io/just-the-docs/docs/customization/#switchable-custom-scheme). In theory, you'd just want to add some code like this:

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

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

```javascript
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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.