Merge pull request #9 from MBeggiato/8-add-dark-mode-support

feat: Add Dark Mode Support
MBeggiato · Nov 6, 2024 · 0432f5f · 0432f5f
2 parents 1523b48 + 8101b37
commit 0432f5f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,15 @@
 <!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+<html lang="en" class="dark">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-800">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Select, Label, Input, Button, Toggle, P } from 'flowbite-svelte';
+	import { Select, Label, Input, Button, Toggle, P, DarkMode, Tooltip } from 'flowbite-svelte';
+
 	let selected = $state('feat');
 	let commitTypes = [
 		{ value: 'build', name: 'build' },
@@ -34,6 +35,12 @@
 </script>
 
 <form>
+	<div class="flex justify-end m-5">
+		<DarkMode
+			class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-xl p-2"
+		/>
+		<Tooltip>Toggle dark mode</Tooltip>
+	</div>
 	<div class="m-auto flex w-[80%] items-center space-x-2 mt-10">
 		<div class="flex flex-col" style="width: 20%;">
 			<P class="mb-2">Select commit type*:</P>
@@ -59,9 +66,9 @@
 		<Button class="mt-4" on:click={copyToClipboard}>Copy</Button>
 	</div>
 	<div class="m-auto mt-4 w-[80%]">
-		<p class="text-slate-600 text-left">* required</p>
-		<p class="text-center">Your commit message will be:</p>
-		<p class="text-center">{commitMessage()}</p>
+		<P class="text-left text-sm">* required</P>
+		<P class="text-center">Your commit message will be:</P>
+		<P class="text-center text-xl">{commitMessage()}</P>
 	</div>
 </form>
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,7 +7,7 @@ export default {
         './src/**/*.{html,js,svelte,ts}',
         './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
     ],
-    darkMode: 'selector',
+    darkMode: 'class',
     theme: {
         extend: {
             colors: {