https://erickouassi.com/darkmode.js

1var app = document.getElementsByTagName("BODY")[0];
2if (localStorage.lightMode == "dark") {
3  app.setAttribute("light-mode", "dark");
4}
5
6function toggle_light_mode() {
7  var app = document.getElementsByTagName("BODY")[0];
8  if (localStorage.lightMode == "dark") {
9    localStorage.lightMode = "light";
10    app.setAttribute("light-mode", "light");
11  } else {
12    localStorage.lightMode = "dark";
13    app.setAttribute("light-mode", "dark");
14  }
15}
16window.addEventListener("storage", function() {
17  if (localStorage.lightMode == "dark") {
18    app.setAttribute("light-mode", "dark");
19  } else {
20    app.setAttribute("light-mode", "light");
21  }
22}, false);
23
24/* // Add to the bottom the html page
25    
26<!--toggle mode button-->
27    <button class="light-mode-button" aria-label="Toggle Light Mode" onclick="toggle_light_mode()">
28      <span></span>
29      <span></span>
30    </button>
31
32*/
33
34
35// Your CSS as text
36var styles = `
37/* messages CSS*/
38
39/* Light Mode Button
40--------------------------- */
41.light-mode-button {
42background: 0;
43border: 0;
44box-sizing: border-box;
45cursor: pointer;
46width: 30px;
47height: 16px;
48position: relative;
49border: 1px solid rgba(255, 255, 255, 0);
50/* Fixed position for this demo */
51position: fixed;
52top: 16px;
53right: 16px;
54}
55
56.light-mode-button:focus {
57outline: none;
58/* Not ideal for accessibility */
59}
60
61.light-mode-button span:nth-child(1) {
62position: absolute;
63top: 0;
64left: 0;
65width: 30px;
66height: 16px;
67background-color: #d6d7db;
68border-radius: 9px;
69box-shadow: inset 1px 1px 3px 0 rgb(0 0 0 / 40%);
70transition: .3s;
71}
72
73.light-mode-button span:nth-child(2) {
74position: absolute;
75top: 3px;
76left: 3px;
77width: 10px;
78height: 10px;
79background-color: #fff;
80border-radius: 50%;
81box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 40%);
82transition: .3s;
83}
84
85/* Light & Dark Mode Styles
86--------------------------- */
87body {
88background-color: #f6f6f6;
89transition: background-color .3s;
90}
91
92body[light-mode=dark] {
93background-color: #141516;
94color: #ced4e2;
95}
96
97body[light-mode="dark"] .light-mode-button span:nth-child(1) {
98background-color: #ced4e2;
99color: #141516;
100}
101
102body[light-mode=dark] .light-mode-button span:nth-child(2) {
103left: 17px;
104background-color: #141516;
105}
106
107`
108var styleSheet = document.createElement("style")
109styleSheet.innerText = styles
110document.head.appendChild(styleSheet)