Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-07-19 17:13:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Add config parameters for dark appearance

Browse Source
This commit is contained in:
James Panther
2021-10-29 12:07:21 +11:00
parent 9d42b7be2b
commit 81824a1a00
5 changed files with 54 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/baseof.html
+4 -1
View File
@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
<html
lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}"
{{ if .Site.Params.darkMode | default false }}class="dark"{{ end }}
>
{{- partial "head.html" . -}}
<body
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
layouts/partials/footer.html
+23 -20
View File
@@ -39,26 +39,29 @@
</p>
{{ end }}
</div>
<div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
<button
id="dark-toggle"
onclick="setPreferredScheme('dark');"
oncontextmenu="setPreferredScheme('default'); return false;"
class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
title="Switch to dark mode"
>
{{ partial "icon.html" "moon" }}
</button>
<button
id="light-toggle"
onclick="setPreferredScheme('light');"
oncontextmenu="setPreferredScheme('default'); return false;"
class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
title="Switch to light mode"
>
{{ partial "icon.html" "sun" }}
</button>
</div>
{{/* Dark mode toggle */}}
{{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }}
<div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
<button
id="dark-toggle"
onclick="setPreferredAppearance('dark');"
oncontextmenu="setPreferredAppearance('default'); return false;"
class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
title="Switch to dark appearance"
>
{{ partial "icon.html" "moon" }}
</button>
<button
id="light-toggle"
onclick="setPreferredAppearance('light');"
oncontextmenu="setPreferredAppearance('default'); return false;"
class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
title="Switch to light appearance"
>
{{ partial "icon.html" "sun" }}
</button>
</div>
{{ end }}
</div>
{{/* Extend footer - eg. for extra scripts, etc. */}}
{{ if templates.Exists "partials/extend-footer.html" }}
layouts/partials/head.html
+23 -16
View File
@@ -62,24 +62,31 @@
integrity="{{ $customStyles.Data.Integrity }}"
/>
{{ end }}
<script>
function loadPreferredScheme() {
if (localStorage.preferredScheme === 'dark' || (!('preferredScheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
{{ if eq (.Site.Params.darkMode | default "auto") "auto" }}
<script>
function loadPreferredAppearance() {
if (localStorage.preferredAppearance === "dark" || (!("preferredAppearance" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
}
function setPreferredScheme(scheme) {
if (scheme == "default") {
localStorage.removeItem("preferredScheme");
} else {
localStorage.preferredScheme = scheme;
function setPreferredAppearance(scheme) {
if (scheme == "default") {
localStorage.removeItem("preferredAppearance");
} else {
localStorage.preferredAppearance = scheme;
}
loadPreferredAppearance();
}
loadPreferredScheme();
}
loadPreferredScheme();
</script>
loadPreferredAppearance();
window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
</script>
{{ else }}
<script>
localStorage.removeItem("preferredAppearance");
</script>
{{ end }}
{{/* Icons */}}
{{ if templates.Exists "partials/favicons.html" }}
{{ partialCached "favicons.html" .Site }}