site: move theme switch to footer

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-10-28 15:55:48 +01:00
parent 60bf7c8406
commit a0bb017467
3 changed files with 26 additions and 11 deletions

View File

@ -41,6 +41,7 @@
"Docker-Compose",
"Docker-Desktop",
"Docker-Hub",
"Docker-Scout-Dashboard",
"Download",
"Editor-or-IDE",
"Entra-ID",
@ -86,6 +87,7 @@
"Node",
"Non-compliant",
"Okta",
"Okta-SAML",
"Old-Dockerfile",
"PHP",
"PowerShell",
@ -479,7 +481,6 @@
"space-y-4",
"sticky",
"svg-container",
"svg-icon",
"syntax-light",
"systemd-networkd",
"text-2xl",

View File

@ -62,10 +62,33 @@
>Legal</a>
</div>
</div>
<div>
<div class="flex justify-between items-center">
<button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
Cookies Settings
</button>
<div class="flex items-center gap-2">
<span>Theme:</span>
<button
aria-label="Theme switch"
id="theme-switch"
class="rounded bg-blue-light px-4 py-1 text-white transition
hover:bg-blue-light-400 dark:bg-blue-dark-400
dark:hover:bg-blue-dark"
x-data="{ theme: localStorage.getItem('theme-preference') }"
x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
})"
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
>
<span class="icon-svg icon-sm dark:hidden"
>Light {{ partialCached "icon" "light_mode" "light_mode" }}</span
>
<span class="icon-svg icon-sm hidden dark:block"
>Dark {{ partialCached "icon" "dark_mode" "dark_mode" }}</span
>
</button>
</div>
</div>
</div>
</div>

View File

@ -37,15 +37,6 @@
<span>Ask&nbsp;AI</span>
<img src="{{ (resources.Get "images/ai-stars.svg").Permalink }}" alt="AI Stars" />
</button>
<button aria-label="Theme switch" id="theme-switch" class="svg-icon"
x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
})" @click="theme = (theme === 'dark' ? 'light' : 'dark')">
<span class="icon-svg dark:hidden">{{ partialCached "icon" "light_mode" "light_mode"}}</span>
<span class="icon-svg hidden dark:block">{{ partialCached "icon" "dark_mode" "dark_mode"}}</span>
</button>
</div>
</div>
</header>