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

feat: Front cover theme switch #40

Open
aniva wants to merge 2 commits from home/background into main
pull from: home/background
merge into: aniva:main
Conversation 1 Commits 2 Files Changed 3 +20 -4
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<meta name="theme-color" content="#028760" />
</head> </head>
<body data-sveltekit-preload-data="hover" class="font-serif"> <body data-sveltekit-preload-data="hover" class="font-serif">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

10
src/lib/theme.ts
View File

@ -1,4 +1,4 @@
import { writable } from 'svelte/store' import { writable, get } from 'svelte/store'
import { browser } from "$app/environment" import { browser } from "$app/environment"
type Theme = 'tokiwa' | 'star' type Theme = 'tokiwa' | 'star'
@ -11,3 +11,11 @@ export const theme = writable(userTheme ?? 'tokiwa')
export function setTheme(newTheme: Theme) { export function setTheme(newTheme: Theme) {
theme.set(newTheme) theme.set(newTheme)
} }
export function getThemeObject(key: string, obj: { [key in Theme]: string } | string) {
if (typeof obj === 'object') {
return obj[key];
} else {
return obj;
}
}

13
src/routes/+page.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
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 { Rss } from "lucide-svelte"; import { Rss } from "lucide-svelte";
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte" import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
let scrollPosition: number = .5; let scrollPosition: number = .5;
@ -38,6 +40,11 @@
}; };
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>
@ -46,7 +53,7 @@
<div <div
id="background" id="background"
style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')" style="opacity: {1 - progress}; background-image: url('{$frontCover}')"
> >
</div> </div>
@ -113,8 +120,8 @@
background-position: center center; background-position: center center;
z-index: -10; z-index: -10;
position: absolute; position: absolute;
min-width: 100vw; min-width: 100svw;
height: 100vh; height: 100svh;
overscroll-behaviour: none; overscroll-behaviour: none;
} }
#front { #front {