diff options
| author | Wang Chucheng <ccwangchn@gmail.com> | 2020-11-18 19:08:23 +0300 |
|---|---|---|
| committer | Wang Chucheng <ccwangchn@gmail.com> | 2020-11-18 19:08:23 +0300 |
| commit | 1fc544b7cd8c578f4fc9daf810e42761b7a1e8c5 (patch) | |
| tree | 26e2ea5b99d7f31ea62955a6e55e9dc1f59a9700 | |
| parent | 96741f4b4da8079b96e9c7d342b0b03235f4654b (diff) | |
feat: customize default color scheme
| -rw-r--r-- | assets/js/eureka.js | 13 | ||||
| -rw-r--r-- | exampleSite/config/_default/params.toml | 3 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/partials/header.html | 66 |
4 files changed, 68 insertions, 16 deletions
diff --git a/assets/js/eureka.js b/assets/js/eureka.js index 923756f..bcc3d14 100644 --- a/assets/js/eureka.js +++ b/assets/js/eureka.js @@ -120,19 +120,6 @@ function getcolorscheme() { let targets = targetDiv.getElementsByTagName('span'); let screen = document.getElementById('is-open'); - if (storageColorScheme == null || storageColorScheme == 'Auto') { - switchMode('Auto') - } - if (storageColorScheme == 'Light') { - element.firstElementChild.setAttribute("data-icon", 'sun') - element.firstElementChild.classList.remove('fa-adjust') - element.firstElementChild.classList.add('fa-sun') - } else if (storageColorScheme == 'Dark') { - element.firstElementChild.setAttribute("data-icon", 'moon') - element.firstElementChild.classList.remove('fa-adjust') - element.firstElementChild.classList.add('fa-moon') - } - element.addEventListener('click', () => { targetDiv.classList.toggle('hidden') screen.classList.toggle('hidden') diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 098fb47..93543cb 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -7,6 +7,9 @@ repoEditURL = "" dateFormat = "" +# Options: auto, light and dark. Default is auto. +colorScheme = "" + # E.g. Person, Organization, LocalBusiness, Project, EducationalOrganization siteType = "Person" icon = "images/icon.png" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b9b31f9..003c52f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang='{{ .Site.LanguageCode }}'> +<html lang='{{ .Site.LanguageCode }}' {{ if eq .Site.Params.colorScheme "dark" }}class="dark"{{ end }}> {{- partial "head.html" . -}} <body class="flex flex-col min-h-screen"> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 84003c8..6183e16 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,11 +1,24 @@ <script> let storageColorScheme = localStorage.getItem("lightDarkMode") - if (((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) - || storageColorScheme == "Dark") { + {{ if eq .Site.Params.colorScheme "light" }} + if (storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) { document.getElementsByTagName('html')[0].classList.add('dark') + } else if (storageColorScheme == "Dark") { + document.getElementsByTagName('html')[0].classList.add('dark') + } + {{ else if eq .Site.Params.colorScheme "dark" }} + if (storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) { + document.getElementsByTagName('html')[0].classList.remove('dark') } else if (storageColorScheme == "Light") { document.getElementsByTagName('html')[0].classList.remove('dark') } + {{ else }} + if ((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) { + document.getElementsByTagName('html')[0].classList.add('dark') + } else if (storageColorScheme == "Dark") { + document.getElementsByTagName('html')[0].classList.add('dark') + } + {{ end }} </script> <nav class="flex items-center justify-between flex-wrap p-4"> <a href="{{ "/" | relLangURL }}" class="mr-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a> @@ -26,7 +39,13 @@ <div class="flex"> <div class="relative pt-4 md:pt-0"> <div class="cursor-pointer hover:text-eureka" id="lightDarkMode"> + {{ if eq .Site.Params.colorScheme "dark" }} + <i class="fas fa-moon"></i> + {{ else if eq .Site.Params.colorScheme "light" }} + <i class="fas fa-sun"></i> + {{ else }} <i class="fas fa-adjust"></i> + {{ end }} </div> <div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open"> </div> @@ -63,6 +82,49 @@ </nav> <script> + let element = document.getElementById('lightDarkMode') + {{ if eq .Site.Params.colorScheme "light" }} + if (storageColorScheme == 'Auto') { + element.firstElementChild.classList.remove('fa-sun') + element.firstElementChild.setAttribute("data-icon", 'adjust') + element.firstElementChild.classList.add('fa-adjust') + document.addEventListener('DOMContentLoaded', () => { + switchMode('Auto') + }) + } else if (storageColorScheme == "Dark") { + element.firstElementChild.classList.remove('fa-sun') + element.firstElementChild.setAttribute("data-icon", 'moon') + element.firstElementChild.classList.add('fa-moon') + } + {{ else if eq .Site.Params.colorScheme "dark" }} + if (storageColorScheme == 'Auto') { + element.firstElementChild.classList.remove('fa-moon') + element.firstElementChild.setAttribute("data-icon", 'adjust') + element.firstElementChild.classList.add('fa-adjust') + document.addEventListener('DOMContentLoaded', () => { + switchMode('Auto') + }) + } else if (storageColorScheme == "Light") { + element.firstElementChild.classList.remove('fa-moon') + element.firstElementChild.setAttribute("data-icon", 'sun') + element.firstElementChild.classList.add('fa-sun') + } + {{ else }} + if (storageColorScheme == null || storageColorScheme == 'Auto') { + document.addEventListener('DOMContentLoaded', () => { + switchMode('Auto') + }) + } else if (storageColorScheme == "Light") { + element.firstElementChild.classList.remove('fa-adjust') + element.firstElementChild.setAttribute("data-icon", 'sun') + element.firstElementChild.classList.add('fa-sun') + } else if (storageColorScheme == "Dark") { + element.firstElementChild.classList.remove('fa-adjust') + element.firstElementChild.setAttribute("data-icon", 'moon') + element.firstElementChild.classList.add('fa-moon') + } + {{ end }} + document.addEventListener('DOMContentLoaded', () => { getcolorscheme(); switchBurger(); |