fixed css
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m40s

This commit is contained in:
christian 2024-05-19 17:24:28 +02:00
parent e31a64658e
commit e0c0b9a887
2 changed files with 0 additions and 49 deletions

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,7 +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';