Doc Dark mode request for solution

Feature requests
1

Is there a way to download the entire Doc or to traverse it on Dark Mode with a dark background?

2

the doc’s repository is open source! you can build is locally and change the template. we also accept PRs if you want to submit a theme-change feature.

3 Likes
3

i dont have time to do it myself but i can pipe in and suggest what i found works best across any type of application.

  1. you create a css file with a class for each theme and css variables in each class , eg .
.light {
 --content-bg-1: #f1f1f1;
}

.dark {
 --content-bg-1: #333;
}

then all your css for you site uses these variables , eg

.container-type-1 {
  display: block;
  width: 100%;
  padding: 0;
  background-color: var(--content-bg-1);
  border: 0 !important;
}

finally you simply append the theme class to the body or some top most div , whenever you change it , all the css using the variables get updated automagically.

6 Likes
4

I ended up using an extension for applying CSS in real time with the following:

* :not(a, img, svg, span, button, p) {
 background-color: #000000;
 color: #00cdff;
}

Which gave result like this:

image
image1600×771 60.5 KB

CSS is not my best; feel free to suggest better ~

1 Like
5

I did not know the use of variables in CSS var(--content-bg-1);.
Thank you for the info. We learn every day.

1 Like
6

Learning and making will spark new ideas :star_struck:

Also useful is; declaring global variables.
Put :root { } at the top of your CSS with variables in it:

:root {
 --my-variable-1: value;
 --cool-blue: #00cdff;
}

Using a variable example:

color: var(--cool-blue);
7

Is there a way I can contribute to make a dark theme button for the documentation using my set of skills:

  • HTML
  • CSS
  • Javascript
  • Git
  • Bash

Or would I have to build using your set of skills used for making the documentation like Typescript etc.

8

Doc page is, as i said, open sourced. This would be the place to suggest the change.

Note - please don’t simply move the page to dark mode. Add a theme-change button, and make it possible to switch from one to the other.

1 Like