fixed css
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m40s
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m40s
This commit is contained in:
parent
e31a64658e
commit
e0c0b9a887
@ -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,7 +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 '../app.css';
|
||||||
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
||||||
import { DarkMode } from 'flowbite-svelte';
|
import { DarkMode } from 'flowbite-svelte';
|
||||||
|
Loading…
Reference in New Issue
Block a user