feat: add dark mode and dasyUI pagination closes #521

AmadeusITGroup · Feb 26, 2024 · 726b0b6 · 726b0b6
1 parent 8f70950
commit 726b0b6
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 171 deletions.
diff --git a/demo/src/lib/stackblitz/svelte-tailwind/package-lock.json b/demo/src/lib/stackblitz/svelte-tailwind/package-lock.json
diff --git a/demo/src/lib/stackblitz/svelte-tailwind/package.json b/demo/src/lib/stackblitz/svelte-tailwind/package.json
@@ -13,15 +13,16 @@
 		"@floating-ui/dom": "^1.6.3",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@tsconfig/svelte": "^5.0.2",
+		"autoprefixer": "^10.4.17",
 		"bootstrap-icons": "^1.11.3",
+		"daisyui": "^4.7.2",
+		"postcss": "^8.4.35",
 		"sass": "^1.71.1",
 		"svelte": "^4.2.12",
 		"svelte-check": "^3.6.4",
+		"tailwindcss": "^3.4.1",
 		"tslib": "^2.6.2",
 		"typescript": "~5.3.3",
-		"vite": "^5.1.4",
-		"autoprefixer": "^10.4.17",
-		"postcss": "^8.4.35",
-		"tailwindcss": "^3.4.1"
+		"vite": "^5.1.4"
 	}
 }
diff --git a/demo/src/lib/stackblitz/svelte-tailwind/tailwind.config.js b/demo/src/lib/stackblitz/svelte-tailwind/tailwind.config.js
@@ -3,5 +3,9 @@ module.exports = {
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [require('daisyui')],
+	darkMode: ['selector', '[data-theme="dark"]'],
+	daisyui: {
+		themes: ['light', 'dark'],
+	},
 };
diff --git a/demo/src/routes/docs/[framework]/components/pagination/headless/+page.svelte b/demo/src/routes/docs/[framework]/components/pagination/headless/+page.svelte
@@ -4,6 +4,6 @@
 	import Section from '$lib/layout/Section.svelte';
 </script>
 
-<Section label="Default" id="default" level={2}>
-	<Sample title="Default example" sample={tailwind} height={395} />
+<Section label="Tailwind" id="default" level={2}>
+	<Sample title="Tailwind example" sample={tailwind} height={395} />
 </Section>
diff --git a/package-lock.json b/package-lock.json
diff --git a/svelte/demo/package.json b/svelte/demo/package.json
@@ -71,6 +71,7 @@
 		"@sveltejs/package": "^2.2.7",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"autoprefixer": "^10.4.17",
+		"daisyui": "^4.7.2",
 		"eslint-plugin-svelte": "^2.35.1",
 		"postcss": "^8.4.35",
 		"prettier-plugin-svelte": "^3.2.1",

diff --git a/svelte/demo/src/app-tailwind/App.svelte b/svelte/demo/src/app-tailwind/App.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
 	import './app.css';
 	import AppCommon from '../common/AppCommon.svelte';
+	import {onMount} from 'svelte';
 	const componentsToBeProcessed = import.meta.glob('./samples/*/*.route.svelte');
+	onMount(() => {
+		window.addEventListener('storage', (event) => {
+			if (event.key === 'theme') {
+				if (event.newValue) {
+					document.documentElement.setAttribute('data-theme', event.newValue);
+				}
+			}
+		});
+	});
 </script>
 
 <div class="container mx-auto p-3">

diff --git a/svelte/demo/src/app-tailwind/index.html b/svelte/demo/src/app-tailwind/index.html
@@ -6,6 +6,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="../common/agnosui-logo.svg" />
 		<title>Svelte App</title>
+		<script>
+			const theme = window.localStorage.getItem('theme');
+			if (theme === 'dark' || ((theme === 'auto' || !theme) && (window.parent ?? window).matchMedia('(prefers-color-scheme: dark)').matches)) {
+				document.documentElement.setAttribute('data-theme', 'dark');
+			}
+		</script>
 	</head>
 	<body>
 		<div id="root"></div>