diff options
| author | Prat <616399+pt2121@users.noreply.github.com> | 2022-08-09 08:34:47 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-09 17:34:47 +0200 |
| commit | d3ff6297c4034bbf45f4a60e287e12cfa1f0ad1a (patch) | |
| tree | bf1737f0d71c6da116a0641d419ca8264941d8d6 /plugins/base/src | |
| parent | efed96e969d8f5afe21197805851aca65ceb643a (diff) | |
| download | dokka-d3ff6297c4034bbf45f4a60e287e12cfa1f0ad1a.tar.gz dokka-d3ff6297c4034bbf45f4a60e287e12cfa1f0ad1a.tar.bz2 dokka-d3ff6297c4034bbf45f4a60e287e12cfa1f0ad1a.zip | |
Use OS color scheme to init light/dark mode (#2611)
Closes #2591
Diffstat (limited to 'plugins/base/src')
| -rw-r--r-- | plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js | 5 | ||||
| -rw-r--r-- | plugins/base/src/main/resources/dokka/templates/base.ftl | 16 |
2 files changed, 15 insertions, 6 deletions
diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index de5c6b15..def9dae8 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -31,9 +31,10 @@ window.addEventListener('load', () => { const darkModeSwitch = () => { const localStorageKey = "dokka-dark-mode" const storage = localStorage.getItem(localStorageKey) - const savedDarkMode = storage ? JSON.parse(storage) : false + const osDarkSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches + const darkModeEnabled = storage ? JSON.parse(storage) : osDarkSchemePreferred const element = document.getElementById("theme-toggle-button") - initPlayground(savedDarkMode ? samplesDarkThemeName : samplesLightThemeName) + initPlayground(darkModeEnabled ? samplesDarkThemeName : samplesLightThemeName) element.addEventListener('click', () => { const enabledClasses = document.getElementsByTagName("html")[0].classList 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/> |