mirror of https://github.com/jpanther/congo.git
🚧 Add dark mode toggle button
James Panther
parent
35a35f5e32
commit
9d42b7be2b
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
|
||||
|
After Width: | Height: | Size: 531 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
|
||||
|
After Width: | Height: | Size: 813 B |
|
|
@ -16,26 +16,50 @@
|
|||
</ul>
|
||||
</nav>
|
||||
{{ end }}
|
||||
{{/* Copyright */}}
|
||||
<p class="text-sm text-neutral-400 dark:text-neutral-500">
|
||||
{{- with .Site.Copyright }}
|
||||
{{ . | emojify | markdownify }}
|
||||
{{- else }}
|
||||
©
|
||||
{{ now.Format "2006" }}
|
||||
{{ .Site.Author.name | markdownify | emojify }}
|
||||
{{- end }}
|
||||
</p>
|
||||
{{/* Theme attribution */}}
|
||||
{{ if .Site.Params.attribution | default true }}
|
||||
<p class="text-xs text-neutral-300 dark:text-neutral-600">
|
||||
{{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
|
||||
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
|
||||
}}
|
||||
{{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
|
||||
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
|
||||
</p>
|
||||
{{ end }}
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
{{/* Copyright */}}
|
||||
<p class="text-sm text-neutral-400 dark:text-neutral-500">
|
||||
{{- with .Site.Copyright }}
|
||||
{{ . | emojify | markdownify }}
|
||||
{{- else }}
|
||||
©
|
||||
{{ now.Format "2006" }}
|
||||
{{ .Site.Author.name | markdownify | emojify }}
|
||||
{{- end }}
|
||||
</p>
|
||||
{{/* Theme attribution */}}
|
||||
{{ if .Site.Params.attribution | default true }}
|
||||
<p class="text-xs text-neutral-300 dark:text-neutral-600">
|
||||
{{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
|
||||
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
|
||||
}}
|
||||
{{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
|
||||
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
|
||||
</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>
|
||||
</div>
|
||||
{{/* Extend footer - eg. for extra scripts, etc. */}}
|
||||
{{ if templates.Exists "partials/extend-footer.html" }}
|
||||
{{ partialCached "extend-footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,24 @@
|
|||
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');
|
||||
}
|
||||
}
|
||||
function setPreferredScheme(scheme) {
|
||||
if (scheme == "default") {
|
||||
localStorage.removeItem("preferredScheme");
|
||||
} else {
|
||||
localStorage.preferredScheme = scheme;
|
||||
}
|
||||
loadPreferredScheme();
|
||||
}
|
||||
loadPreferredScheme();
|
||||
</script>
|
||||
{{/* Icons */}}
|
||||
{{ if templates.Exists "partials/favicons.html" }}
|
||||
{{ partialCached "favicons.html" .Site }}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ module.exports = {
|
|||
"./themes/congo/content/**/*.{html,md}",
|
||||
],
|
||||
},
|
||||
darkMode: "media",
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
|
|
|
|||
Loading…
Reference in New Issue