Add support for 'prefers-color-scheme' save our eyes @ night (just-th…

…e-docs#966) Co-authored-by: Alexander Taran <Alexander-Taran@users.noreply.github.com>
simonebortolin · Dec 25, 2022 · 1cad819 · 1cad819
1 parent 3515f2b
commit 1cad819
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -2,8 +2,9 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
-
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | relative_url }}" media="(prefers-color-scheme: light)">
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-dark.css' | relative_url }}" media="(prefers-color-scheme: dark)">
+
   {% if site.ga_tracking != nil %}
     {% assign ga_tracking_ids = site.ga_tracking | split: "," %}
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ ga_tracking_ids.first }}"></script>

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
@@ -448,12 +448,21 @@ function searchLoaded(index, docs) {
 // Switch theme
 
 jtd.getTheme = function() {
-  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  if(cssFile.hasAttribute('media')) return 'auto';
+
+  var cssFileHref = cssFile.getAttribute('href');
   return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
 }
 
 jtd.setTheme = function(theme) {
-  var cssFile = document.querySelector('[rel="stylesheet"]');
+  var cssFiles = [...document.querySelectorAll('[rel="stylesheet"]')];
+  var cssFile = cssFiles[0];
+  if(cssFiles.length >= 1) {
+    cssFiles.shift();
+    cssFiles.forEach(it => it.remove());
+    cssFile.removeAttribute('media');
+  }
   cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
 }