aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 8 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Dark mode svg

This commit is contained in:
Leni Aniva 2025-06-22 16:21:39 -07:00
parent 33ebd62026
commit 8d0fb521d4
Signed by: aniva
GPG Key ID: D5F96287843E8DFB
3 changed files with 5328 additions and 4969 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4959
src/lib/Cover.svelte
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 148 KiB

5275
src/lib/cover-work.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

63
src/routes/+page.svelte
View File

@ -3,7 +3,7 @@
import { derived } from 'svelte/store' import { derived } from 'svelte/store'
import { routes } from "$lib/sitemap.ts" import { routes } from "$lib/sitemap.ts"
import { Separator } from "$lib/components/ui/separator/index.js"; import { Separator } from "$lib/components/ui/separator/index.js";
import { theme, getThemeObject } from '$lib/theme' import { theme, setTheme, getThemeObject } from '$lib/theme'
import { Rss } from "lucide-svelte"; import { Rss } from "lucide-svelte";
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte" import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
import Cover from "$lib/Cover.svelte" import Cover from "$lib/Cover.svelte"
@ -13,9 +13,25 @@
let button_blog; let button_blog;
function toggleTheme() {
theme.update((currentTheme) => {
const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
document.documentElement.setAttribute('color-scheme', newTheme)
localStorage.setItem('color-scheme', newTheme)
if (newTheme === "tokiwa") {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
setTheme(newTheme);
return newTheme
})
}
onMount(() => { onMount(() => {
let entity_blog = document.getElementById("visor"); let entity_switch = document.getElementById("switch");
let link_about = document.getElementById("link-about"); entity_switch.addEventListener("click", toggleTheme);
}); });
function onScroll() { function onScroll() {
if (scrollHeight > 1) { if (scrollHeight > 1) {
@ -48,18 +64,16 @@
}; };
const iconLinks: [string, string][] = Object.entries(metadata.links).map( const iconLinks: [string, string][] = Object.entries(metadata.links).map(
([key, link]) => [iconMap[key], link]); ([key, link]) => [iconMap[key], link]);
const frontCover = derived(
theme,
($theme) => getThemeObject($theme, metadata.frontCover)
)
</script> </script>
<svelte:head> <svelte:head>
<title>{metadata.name}</title> <title>{metadata.name}</title>
</svelte:head> </svelte:head>
<div id="cover" style="opacity: {1 - progress}"> <div
id="cover"
style="opacity: {1 - progress}; --grid-line: #999; --grid-cell: #707078"
>
<Cover /> <Cover />
</div> </div>
@ -116,9 +130,9 @@
<style> <style>
#cover { #cover {
background: background:
repeating-linear-gradient(129deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 60px), repeating-linear-gradient(129deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 60px),
repeating-linear-gradient(11deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 40px), repeating-linear-gradient(11deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px),
#707078 var(--grid-cell)
; ;
/* /*
position: absolute; position: absolute;
@ -126,6 +140,16 @@
background-position: center center; */ background-position: center center; */
z-index: -10; z-index: -10;
overscroll-behaviour: none; overscroll-behaviour: none;
display: flex;
justify-content: center;
flex-direction: column;
}
:global(.dark #cover) {
background:
repeating-linear-gradient(129deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 60px),
repeating-linear-gradient(11deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px),
black
;
} }
:global(#cover > svg) { :global(#cover > svg) {
max-width: 100svw; max-width: 100svw;
@ -152,9 +176,24 @@
} }
} }
} }
:global(.dark .shadow) {
visibility: hidden;
}
:global(svg .shadow) { :global(svg .shadow) {
pointer-events: none; pointer-events: none;
} }
:global(#switch-right) {
visibility: hidden;
}
:global(#switch-left) {
visibility: visible;
}
:global(.dark #switch-right) {
visibility: visible;
}
:global(.dark #switch-left) {
visibility: hidden;
}
.nav-link { .nav-link {
display: inline-block; display: inline-block;
} }