fixed darkmode switch position
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m1s

This commit is contained in:
christian 2024-05-19 17:28:46 +02:00
parent 06e2860c51
commit c7a8bf8d0f
3 changed files with 4 additions and 52 deletions

View File

@ -6,5 +6,5 @@ body {
transition: transition:
background-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
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;
} }

View File

@ -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>

View File

@ -1,8 +1,6 @@
<script> <script>
import { blur } from 'svelte/transition'; import { blur } from 'svelte/transition';
import '../app.css'; import '../app.css';
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css';
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte'; import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
import { DarkMode } from 'flowbite-svelte'; import { DarkMode } from 'flowbite-svelte';
@ -74,7 +72,9 @@
{/each} {/each}
</ul> </ul>
{/key} {/key}
<DarkMode /> <div class="absolute top-6 right-6">
<DarkMode />
</div>
</nav> </nav>
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center"> <div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot /> <slot />