Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-28 09:19:37 +02:00
Code Issues Releases Activity

Add Nord theme option to theme selection dropdown in Navbar.svelte

Browse source
This commit is contained in:
Sean Morley 2024-04-17 00:20:56 +00:00
parent 5efb2912c0
commit f0eb5441f0
4 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/lib/components/Navbar.svelte
View file

@ -8,6 +8,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import InfoModal from "./InfoModal.svelte"; import InfoModal from "./InfoModal.svelte";
import infoIcon from "$lib/assets/info.svg"; import infoIcon from "$lib/assets/info.svg";
import type { SubmitFunction } from "@sveltejs/kit";
async function goHome() { async function goHome() {
goto("/"); goto("/");
} }
@ -27,6 +28,13 @@
goto("/worldtravel"); goto("/worldtravel");
} }
const submitUpdateTheme: SubmitFunction = ({ action }) => {
const theme = action.searchParams.get("theme");
if (theme) {
document.documentElement.setAttribute("data-theme", theme);
}
};
let count = 0; let count = 0;
let infoModalOpen = false; let infoModalOpen = false;
@ -104,10 +112,11 @@
tabindex="0" tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
> >
<form method="POST"> <form method="POST" use:enhance={submitUpdateTheme}>
<li><button formaction="/?/setTheme&theme=light">Light</button></li> <li><button formaction="/?/setTheme&theme=light">Light</button></li>
<li><button formaction="/?/setTheme&theme=dark">Dark</button></li> <li><button formaction="/?/setTheme&theme=dark">Dark</button></li>
<li><button formaction="/?/setTheme&theme=night">Night</button></li> <li><button formaction="/?/setTheme&theme=night">Night</button></li>
<!-- <li><button formaction="/?/setTheme&theme=nord">Nord</button></li> -->
<!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> --> <!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
<li><button formaction="/?/setTheme&theme=forest">Forest</button></li> <li><button formaction="/?/setTheme&theme=forest">Forest</button></li>
</form> </form>

2
src/routes/+layout.svelte
View file

@ -2,8 +2,8 @@
export let data; export let data;
import Footer from "$lib/components/Footer.svelte"; import Footer from "$lib/components/Footer.svelte";
import Navbar from "$lib/components/Navbar.svelte"; import Navbar from "$lib/components/Navbar.svelte";
import type { SubmitFunction } from "@sveltejs/kit";
import "../app.css"; import "../app.css";
// only show footer if scrolled to the bottom
</script> </script>
<!-- passes the user object to the navbar component --> <!-- passes the user object to the navbar component -->

2
src/routes/+page.server.ts
View file

@ -31,7 +31,7 @@ export const actions: Actions = {
setTheme: async ( { url, cookies }) => { setTheme: async ( { url, cookies }) => {
const theme = url.searchParams.get("theme"); const theme = url.searchParams.get("theme");
// change the theme only if it is one of the allowed themes // change the theme only if it is one of the allowed themes
if (theme && ["light", "dark", "night", "retro", "forest"].includes(theme)) { if (theme && ["light", "dark", "night", "retro", "forest", "nord"].includes(theme)) {
cookies.set("colortheme", theme, { cookies.set("colortheme", theme, {
path: "/", path: "/",
maxAge: 60 * 60 * 24 * 365, maxAge: 60 * 60 * 24 * 365,

2
tailwind.config.js
View file

@ -6,6 +6,6 @@ export default {
}, },
plugins: [require("@tailwindcss/typography"), require("daisyui")], plugins: [require("@tailwindcss/typography"), require("daisyui")],
daisyui: { daisyui: {
themes: ["light", "dark", "night", "retro", "forest"], themes: ["light", "dark", "night", "retro", "forest", "nord"],
}, },
}; };