refactor: upgrade daisyui

package.json

@@ -25,20 +25,22 @@
 		"@sveltejs/kit": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@tailwindcss/typography": "^0.5.13",
+		"@tailwindcss/postcss": "^4.1.4",
 		"autoprefixer": "^10.4.19",
+		"daisyui": "^5.0.28",
 		"postcss": "^8.4.38",
 		"prettier-plugin-svelte": "^3.2.3",
 		"svelte": "^4.2.16",
 		"svelte-check": "^3.7.1",
 		"svelte-preprocess": "^5.1.4",
-		"tailwindcss": "^3.4.3",
+		"tailwindcss": "^4.1.4",
+		"theme-change": "^2.5.0",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.11"
 	},
 	"type": "module",
 	"dependencies": {
 		"@svelte-plugins/tooltips": "^3.0.1",
-		"daisyui": "^4.10.5",
 		"graphql": "^16.8.1",
 		"graphql-request": "^6.1.0"
 	}

postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		'@tailwindcss/postcss': {}
+	}
+};

src/app.css

@@ -1,3 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin "daisyui" {
+    themes: all;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+}

src/lib/Nav.svelte

@@ -24,6 +24,41 @@
 		getNextDeadline();
 		getSemester();
 	});
+
+	const themes = [
+		'light',
+		'dark',
+		'cupcake',
+		'bumblebee',
+		'emerald',
+		'corporate',
+		'synthwave',
+		'retro',
+		'cyberpunk',
+		'valentine',
+		'halloween',
+		'garden',
+		'forest',
+		'aqua',
+		'lofi',
+		'pastel',
+		'fantasy',
+		'wireframe',
+		'black',
+		'luxury',
+		'dracula',
+		'cmyk',
+		'autumn',
+		'business',
+		'acid',
+		'lemonade',
+		'night',
+		'coffee',
+		'winter',
+		'dim',
+		'nord',
+		'sunset'
+	];
 </script>
 
 <div class="navbar bg-base-100">
@@ -108,6 +143,13 @@
 				<li><a href="/primuss/exams">Prüfungslisten</a></li>
 			</ul>
 		</div>
+		Theme:
+		<select data-choose-theme class="select select-xs w-32">
+			<option disabled selected>Wähle ein Thema</option>
+			{#each themes as theme}
+				<option value={theme}>{theme}</option>
+			{/each}
+		</select>
 		<div class="dropdown dropdown-end">
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label tabindex="-1" class="badge mx-4"> {semester} </label>

src/routes/+layout.svelte

@@ -1,6 +1,11 @@
 <script>
 	import '../app.css';
 	import Nav from '$lib/Nav.svelte';
+	import { themeChange } from 'theme-change';
+	import { onMount } from 'svelte';
+	onMount(() => {
+		themeChange(false);
+	});
 </script>
 
 <svelte:head><title>Plexams</title></svelte:head>

svelte.config.js

@@ -3,11 +3,11 @@ import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: [
-		preprocess({
-			postcss: true
-		})
-	],
+	// preprocess: [
+	// 	preprocess({
+	// 		postcss: true
+	// 	})
+	// ],
 	kit: {
 		adapter: adapter()
 	}

tailwind.config.cjs

@@ -3,9 +3,9 @@ module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
-	},
-	daisyui: {
-		themes: ['light', 'dark', 'cupcake', 'retro']
-	},
-	plugins: [require('@tailwindcss/typography'), require('daisyui')]
+	}
+	// daisyui: {
+	// 	themes: ['light', 'dark', 'cupcake', 'retro']
+	// },
+	// plugins: [require('@tailwindcss/typography'), require('daisyui')]
 };