fixed darkmode switch position
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m1s
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m1s
This commit is contained in:
parent
06e2860c51
commit
c7a8bf8d0f
@ -6,5 +6,5 @@ body {
|
||||
transition:
|
||||
background-color 0.2s ease-in-out,
|
||||
color 0.2s ease-in-out;
|
||||
@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
|
||||
@apply bg-stone-100 dark:bg-gray-900 text-slate-600 dark:text-stone-100 text-center;
|
||||
}
|
||||
|
@ -1,48 +0,0 @@
|
||||
<script>
|
||||
// On click function for darkmode switch
|
||||
import { browser } from '$app/environment';
|
||||
let darkMode = true;
|
||||
function handleSwitchDarkMode() {
|
||||
darkMode = !darkMode;
|
||||
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
|
||||
darkMode
|
||||
? document.documentElement.classList.add('dark')
|
||||
: document.documentElement.classList.remove('dark');
|
||||
}
|
||||
if (browser) {
|
||||
if (
|
||||
localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
document.documentElement.classList.add('dark');
|
||||
darkMode = true;
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
darkMode = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<input checked={darkMode} on:click={handleSwitchDarkMode} type="checkbox" id="theme-toggle" />
|
||||
<label for="theme-toggle" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#theme-toggle {
|
||||
@apply invisible;
|
||||
}
|
||||
|
||||
#theme-toggle + label {
|
||||
@apply inline-block cursor-pointer h-6 w-6 fixed top-4 right-4 rounded-full duration-300 content-[''];
|
||||
}
|
||||
|
||||
#theme-toggle:not(:checked) + label {
|
||||
@apply bg-yellow-200;
|
||||
}
|
||||
|
||||
#theme-toggle:checked + label {
|
||||
@apply bg-transparent;
|
||||
box-shadow: inset -7px -5px 1px 1px #ddd;
|
||||
}
|
||||
</style>
|
@ -1,8 +1,6 @@
|
||||
<script>
|
||||
import { blur } from 'svelte/transition';
|
||||
import '../app.css';
|
||||
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
|
||||
import '../app.css';
|
||||
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
||||
import { DarkMode } from 'flowbite-svelte';
|
||||
|
||||
@ -74,7 +72,9 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/key}
|
||||
<div class="absolute top-6 right-6">
|
||||
<DarkMode />
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
||||
<slot />
|
||||
|
Loading…
Reference in New Issue
Block a user