KBD dark theme settings

Author: OzzyCzech

readme.md

@@ -28,14 +28,16 @@ npm i cmd-dialog
 ### From CDN
 
 ```html
+
 <script type="module" src="https://esm.run/cmd-dialog"></script>
 ```
 
 or inside module script
 
 ```html
+
 <script type="module">
-import cmdDialog from 'https://esm.run/cmd-dialog';
+	import cmdDialog from 'https://esm.run/cmd-dialog';
 </script>
 ```
 
@@ -47,10 +49,10 @@ import cmdDialog from 'https://esm.run/cmd-dialog';
 
 ## Credits
 
-- [Ninja Keys](https://github.com/ssleptsov/ninja-keys) - Keyboard shortcuts for any web application.
-- 
+- [Lucide](https://lucide.dev/) - A collection of open-source icons, used for the dialog actions.
 
+This project is inspired by [Ninja Keys](https://github.com/ssleptsov/ninja-keys).
 
 ## License
 
-[MIT]()
+[MIT](./LICENSE)

src/style.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 @layer base {
 
@@ -16,13 +17,11 @@
 		@apply bg-neutral-50;
 		@apply absolute mx-auto mt-[20vh];
 
-		&.dark {
-			@apply bg-neutral-900;
-			@apply text-neutral-300;
-			@apply border-neutral-800;
-			@apply divide-neutral-800;
-			@apply shadow-neutral-500/10;
-		}
+		@apply dark:bg-neutral-900;
+		@apply dark:text-neutral-300;
+		@apply dark:border-neutral-800;
+		@apply dark:divide-neutral-800;
+		@apply dark:shadow-neutral-500/10;
 
 		form {
 			@apply flex flex-row justify-between items-center;
@@ -79,13 +78,8 @@
 	}
 
 	kbd {
-		/*
-		@apply font-mono font-semibold whitespace-nowrap text-center tracking-wider;
-		@apply rounded-sm bg-neutral-700/20 dark:bg-neutral-800;
-		@apply inline-flex items-center px-1 py-0.5;
-		 */
-
-		@apply px-1.5 py-1 text-xs font-semibold text-gray-800 bg-gray-300 border border-gray-200 rounded-md dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500;
+		@apply px-1.5 py-1 text-xs font-semibold text-gray-800 bg-gray-300 border border-gray-200 rounded-md;
+		@apply dark:bg-neutral-600 dark:text-neutral-100 dark:border-neutral-500;
 		@apply inline-flex items-center justify-center;
 	}
 }