Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added theme selector

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -8,7 +8,8 @@
"name": "deprived-main-website", "name": "deprived-main-website",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"svelte-media-queries": "^1.6.2" "svelte-media-queries": "^1.6.2",
"theme-change": "^2.5.0"
}, },
"devDependencies": { "devDependencies": {
"@poppanator/sveltekit-svg": "^4.2.1", "@poppanator/sveltekit-svg": "^4.2.1",
@ -4651,6 +4652,11 @@
"b4a": "^1.6.4" "b4a": "^1.6.4"
} }
}, },
"node_modules/theme-change": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.5.0.tgz",
"integrity": "sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ=="
},
"node_modules/thenify": { "node_modules/thenify": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",

3
package.json
View File

@ -32,6 +32,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"svelte-media-queries": "^1.6.2" "svelte-media-queries": "^1.6.2",
"theme-change": "^2.5.0"
} }
} }

2
src/app.html
View File

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

58
src/routes/+layout.svelte
View File

@ -28,10 +28,13 @@
}); });
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { themeChange } from 'theme-change'
onMount(() => { onMount(() => {
const lock = document.createElement('meta'); const lock = document.createElement('meta');
lock.name = 'darkreader-lock'; lock.name = 'darkreader-lock';
document.head.appendChild(lock); document.head.appendChild(lock);
themeChange(false) // false parameter is required for svelte
}); });
</script> </script>
@ -50,6 +53,26 @@
<h3 id="logo-text">The Deprived Devs</h3> <h3 id="logo-text">The Deprived Devs</h3>
</a> </a>
<div class="nav-spacer" /> <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="/">Home</a>
<a href="https://botalex.itch.io/">Games</a> <a href="https://botalex.itch.io/">Games</a>
<!-- <a href="/posts">Blog</a> <!-- <a href="/posts">Blog</a>
@ -68,6 +91,41 @@
</div> </div>
{#if !navbarHidden} {#if !navbarHidden}
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> <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="/">Home</a>
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a> <a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
<!-- <a on:click={resetNavBar} href="/posts">Blog</a> <!-- <a on:click={resetNavBar} href="/posts">Blog</a>

25
tailwind.config.js
View File

@ -5,5 +5,26 @@ export default {
extend: {}, extend: {},
}, },
plugins: [require("@tailwindcss/typography"), require('daisyui'),], plugins: [require("@tailwindcss/typography"), require('daisyui'),],
} daisyui: {
themes: [
"light",
"dark",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"forest",
"aqua",
"black",
"luxury",
"dracula",
"business",
"night",
"coffee",
"dim",
"sunset",
],
},
}