add optional dark mode to API docs

kubernetes · Sep 17, 2023 · 4b0cc8d · 4b0cc8d
1 parent fdb1bda
commit 4b0cc8d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/static/css/style_apiref.css b/static/css/style_apiref.css
@@ -52,6 +52,14 @@ light grey - rgb(161, 160, 158)
     background-color: Gainsboro;
 }
 
+body.bg-dark .body-content table tr:nth-child(odd) > td {
+    background-color: #30363c;
+}
+
+body.bg-dark .body-content table tr:nth-child(even) > td {
+    background-color: #2b3035;
+}
+
 .body-content dt {
     font-weight: bold;
 }
@@ -65,6 +73,10 @@ light grey - rgb(161, 160, 158)
     margin-top: 0;
 }
 
+body.text-light a {
+    color: #47a0ff;
+}
+
 /* Brodoc CSS */
 
 body > #wrapper {
@@ -93,6 +105,14 @@ body > #wrapper {
     padding: 0 5px;
 }
 
+body.bg-dark #sidebar-wrapper {
+    background: #343a40;
+}
+
+body.text-light #sidebar-wrapper a {
+    color: #f8f9fa;
+}
+
 #sidebar-wrapper ul {
     list-style: none;
 }
@@ -122,7 +142,7 @@ body > #wrapper {
 }
 
 #page-content-wrapper {
-    padding-top: 60px;
+    padding-top: 30px;
 }
 
 #page-content-wrapper table tr td:first-child {
@@ -150,12 +170,16 @@ body > #wrapper {
 
 .body-content p code {
     text-overflow: ellipsis;
-    color: #802060;
+    color: brown;
     display: inline-block;
     font-size: smaller;
     word-break: break-word;
 }
 
+body.text-light .body-content code {
+    color: #d05252;
+}
+
 .body-content blockquote {
     border-left: 0;
     border-radius: 5px;
@@ -180,10 +204,6 @@ body > #wrapper {
   white-space: pre;
 }
 
-.body-content code {
-  color: Brown !important;
-}
-
 .code-block {
     display: none;
     width: 60%;
@@ -254,3 +274,12 @@ body > #wrapper {
     font-weight: bold;
     font-family: monospace;
 }
+
+/* button for toggling light/dark mode */
+.btn.switch-theme {
+    white-space: pre;
+    color: #f8f9fa;
+
+    /* button is only useful with JavaScript enabled, so the button is hidden by default */
+    display: none;
+}
diff --git a/static/js/scroll-apiref.js b/static/js/scroll-apiref.js
@@ -104,3 +104,18 @@ jQuery(function($) {
   // perform an initial update on the navigation
   repaint();
 });
+
+/* handle dark/light mode */
+jQuery(function($) {
+  let button = $('.switch-theme');
+  button.show();
+
+  button.on('click', function() {
+    $('body').toggleClass('bg-dark text-light');
+  });
+
+  // enable dark mode if desired by the user agent
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    $('body').toggleClass('bg-dark text-light');
+  }
+});