dark

test.css

@@ -29,3 +29,12 @@ padding: 10px;
 .tabs > div {
 padding: 10px;
 }
+
+body {
+background-color: white;
+color: black;
+}
+body.dark {
+background-color: black;
+color: white;
+}

test.html

@@ -12,6 +12,7 @@
 <!----------------------------------------------------------------------------->
 
 <h1>Tabs</h1>
+<input type="checkbox" id="theme" onclick="swap()">Dark</input>
 <ul>
 <li><a href="test.html">test.html</a></li>
 <li><a href="test.html?tab=2/3">test.html?tab=2/3</a></li>

test.js

@@ -6,16 +6,13 @@ function check(tab) {
         document.getElementById(path).checked = true
     }
 }
-
 function push(tab) {
     window.history.pushState(null, null, `?tab=${tab}`)
 }
-
 function update(id) {
     const tab = id.split('/').slice(1).join('/')
     push(tab)
 }
-
 function main() {
     let tab = (new URL(document.location)).searchParams.get('tab')
     if (tab) {
@@ -26,3 +23,7 @@ function main() {
         push(tab)
     }
 }
+
+function swap() {
+    document.body.classList.toggle('dark')
+}