From d3ff6297c4034bbf45f4a60e287e12cfa1f0ad1a Mon Sep 17 00:00:00 2001
From: Prat <616399+pt2121@users.noreply.github.com>
Date: Tue, 9 Aug 2022 08:34:47 -0700
Subject: Use OS color scheme to init light/dark mode (#2611)

Closes #2591
---
 plugins/base/src/main/resources/dokka/templates/base.ftl | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

(limited to 'plugins/base/src/main/resources/dokka/templates/base.ftl')

diff --git a/plugins/base/src/main/resources/dokka/templates/base.ftl b/plugins/base/src/main/resources/dokka/templates/base.ftl
index 78ce21e2..ed19d5f3 100644
--- a/plugins/base/src/main/resources/dokka/templates/base.ftl
+++ b/plugins/base/src/main/resources/dokka/templates/base.ftl
@@ -12,10 +12,18 @@
     <#-- This script doesn't need to be there but it is nice to have
     since app in dark mode doesn't 'blink' (class is added before it is rendered) -->
     <script>const storage = localStorage.getItem("dokka-dark-mode")
-const savedDarkMode = storage ? JSON.parse(storage) : false
-if(savedDarkMode === true){
-    document.getElementsByTagName("html")[0].classList.add("theme-dark")
-}</script>
+    if (storage == null) {
+        const osDarkSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        if (osDarkSchemePreferred === true) {
+            document.getElementsByTagName("html")[0].classList.add("theme-dark")
+        }
+    } else {
+        const savedDarkMode = JSON.parse(storage)
+        if(savedDarkMode === true) {
+            document.getElementsByTagName("html")[0].classList.add("theme-dark")
+        }
+    }
+    </script>
     <#-- Resources (scripts, stylesheets) are handled by Dokka.
     Use customStyleSheets and customAssets to change them. -->
     <@resources/>
-- 
cgit