DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added theme selector

Browse source
This commit is contained in:
BOTAlex 2024-10-12 05:11:55 +02:00
parent 1f77e03da2
commit 2feaecc54c
5 changed files with 91 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="sunset">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

58
src/routes/+layout.svelte
View file

@ -28,10 +28,13 @@
});
import { onMount } from 'svelte';
import { themeChange } from 'theme-change'
onMount(() => {
const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
document.head.appendChild(lock);
themeChange(false) // false parameter is required for svelte
});
</script>
@ -50,6 +53,26 @@
<h3 id="logo-text">The Deprived Devs</h3>
</a>
<div class="nav-spacer" />
<select class="prose" data-choose-theme>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="synthwave">Synthwave</option>
<option value="retro">Retro</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="valentine">Valentine</option>
<option value="halloween">Halloween</option>
<option value="forest">Forest</option>
<option value="aqua">Aqua</option>
<option value="black">Black</option>
<option value="luxury">Luxury</option>
<option value="dracula">Dracula</option>
<option value="business">Business</option>
<option value="night">Night</option>
<option value="coffee">Coffee</option>
<option value="dim">Dim</option>
<option value="sunset" selected>Sunset</option>
</select>
<a href="/">Home</a>
<a href="https://botalex.itch.io/">Games</a>
<!-- <a href="/posts">Blog</a>
@ -68,6 +91,41 @@
</div>
{#if !navbarHidden}
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
<select data-choose-theme>
<option value="light">Default</option>
<option value="dark">Dark</option>
<option value="cupcake">Cupcake</option>
<option value="bumblebee">Bumblebee</option>
<option value="emerald">Emerald</option>
<option value="corporate">Corporate</option>
<option value="synthwave">Synthwave</option>
<option value="retro">Retro</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="valentine">Valentine</option>
<option value="halloween">Halloween</option>
<option value="garden">Garden</option>
<option value="forest">Forest</option>
<option value="aqua">Aqua</option>
<option value="lofi">Lofi</option>
<option value="pastel">Pastel</option>
<option value="fantasy">Fantasy</option>
<option value="wireframe">Wireframe</option>
<option value="black">Black</option>
<option value="luxury">Luxury</option>
<option value="dracula">Dracula</option>
<option value="cmyk">CMYK</option>
<option value="autumn">Autumn</option>
<option value="business">Business</option>
<option value="acid">Acid</option>
<option value="lemonade">Lemonade</option>
<option value="night">Night</option>
<option value="coffee">Coffee</option>
<option value="winter">Winter</option>
<option value="dim">Dim</option>
<option value="nord">Nord</option>
<option value="sunset">Sunset</option>
</select>
<a on:click={resetNavBar} href="/">Home</a>
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>