Implement Comprehensive Dark Mode Color Palette in Tailwind Configuration

package.json

@@ -5,7 +5,8 @@
 	"main": "src/server.js",
 	"type": "module",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
+		"test": "vitest run tests/tailwind-dark-mode.test.js",
+		"test:watch": "vitest watch tests/tailwind-dark-mode.test.js",
 		"start": "node .",
 		"dev": "nodemon . --ignore 'src/assets/js/*.js' --ignore 'cypress/**/*.js' --ignore 'test/**/*.js'",
 		"css": "npx tailwindcss -i ./src/tailwind.css -o ./src/assets/css/index.css --watch",
@@ -56,6 +57,6 @@
 		"nodemon": "^3.0.2",
 		"supertest": "^6.3.3",
 		"tailwindcss": "^3.1.8",
-		"vitest": "^3.0.7"
+		"vitest": "^3.1.4"
 	}
 }

tailwind.config.cjs

@@ -1,47 +1,80 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./src/views/**/*.pug", "./src/assets/js/*.js"],
-	theme: {
-		screens: {
-			xs: "640px",
-			sm: "780px",
-			md: "926px",
-			lg: "1024px",
-			xl: "1280px",
-			"2xl": "1536px",
-		},
-		extend: {
-			fontFamily: {
-				logo: ["Orienta", "serif"],
-				main: ["Poppins", "sans-serif"],
-				awesome: ['"Font Awesome 6 Free"'],
-			},
-			colors: {
-				twilight: {
-					50: "#f1f8fa",
-					100: "#E8F3F7",
-					200: "#bfe0ee",
-					300: "#9ed0e5",
-					400: "#7ec0dd",
-					500: "#5eb1d4",
-					600: "#3ea1cc",
-					700: "#2e86ab",
-					800: "#226581",
-					900: "#153f51",
-				},
-			},
-			textUnderlineOffset: {
-				6: "6px",
-			},
-			textDecorationThickness: {
-				3: "3px",
-			},
-			maxWidth: {
-				"1/3": "33%",
-				80: "20rem",
-			},
-		},
-	},
-	plugins: [require("@tailwindcss/forms")],
-	safelist: ["flash-success", "flash-error", "flash-info"],
-};
+    content: ["./src/views/**/*.pug", "./src/assets/js/*.js"],
+    darkMode: 'class', // Enable dark mode via class
+    theme: {
+        screens: {
+            xs: "640px",
+            sm: "780px",
+            md: "926px",
+            lg: "1024px",
+            xl: "1280px",
+            "2xl": "1536px",
+        },
+        extend: {
+            fontFamily: {
+                logo: ["Orienta", "serif"],
+                main: ["Poppins", "sans-serif"],
+                awesome: ['"Font Awesome 6 Free"'],
+            },
+            colors: {
+                // Light Mode (Existing Colors)
+                twilight: {
+                    50: "#f1f8fa",
+                    100: "#E8F3F7",
+                    200: "#bfe0ee",
+                    300: "#9ed0e5",
+                    400: "#7ec0dd",
+                    500: "#5eb1d4",
+                    600: "#3ea1cc",
+                    700: "#2e86ab",
+                    800: "#226581",
+                    900: "#153f51",
+                },
+
+                // Dark Mode Color Palette
+                'dark-twilight': {
+                    50: "#0a1418", // Darkest background
+                    100: "#111f26", // Dark background
+                    200: "#1c2d3a", // Slightly lighter background
+                    300: "#2a3f4d", // Background elements
+                    400: "#3c5565", // Surface/card backgrounds
+                    500: "#4e6b7f", // Muted text and borders
+                    600: "#608298", // Secondary text
+                    700: "#7299b3", // Active/hover states
+                    800: "#8bb1cc", // Highlighted elements
+                    900: "#a6c8e6", // Brightest text/accent
+                },
+
+                // Additional Dark Mode Semantic Colors
+                'dark-text': {
+                    DEFAULT: '#e6f1fa',    // Primary text
+                    secondary: '#8bb1cc',  // Secondary text
+                    muted: '#4e6b7f',      // Muted text
+                },
+                'dark-bg': {
+                    DEFAULT: '#0a1418',     // Primary background
+                    secondary: '#111f26',   // Secondary background
+                    surface: '#1c2d3a',     // Surface/card background
+                },
+                'dark-accent': {
+                    DEFAULT: '#8bb1cc',     // Primary accent
+                    hover: '#a6c8e6',       // Hover state
+                    active: '#7299b3',      // Active state
+                }
+            },
+            textUnderlineOffset: {
+                6: "6px",
+            },
+            textDecorationThickness: {
+                3: "3px",
+            },
+            maxWidth: {
+                "1/3": "33%",
+                80: "20rem",
+            },
+        },
+    },
+    plugins: [require("@tailwindcss/forms")],
+    safelist: ["flash-success", "flash-error", "flash-info", "dark"],
+};

tests/tailwind-dark-mode.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import tailwindConfig from '../tailwind.config.cjs';
+
+describe('Tailwind Dark Mode Configuration', () => {
+    it('should have dark mode configuration', () => {
+        expect(tailwindConfig.darkMode).toBe('class');
+    });
+
+    it('should have extended color palette for dark mode', () => {
+        const colors = tailwindConfig.theme.extend.colors;
+
+        // Check dark twilight color palette
+        expect(colors['dark-twilight']).toBeDefined();
+        expect(Object.keys(colors['dark-twilight'])).toHaveLength(10);
+
+        // Check semantic dark mode colors
+        expect(colors['dark-text']).toBeDefined();
+        expect(colors['dark-bg']).toBeDefined();
+        expect(colors['dark-accent']).toBeDefined();
+    });
+
+    it('should have full range of dark mode color shades', () => {
+        const darkTwilight = tailwindConfig.theme.extend.colors['dark-twilight'];
+        const expectedShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+        expectedShades.forEach(shade => {
+            expect(darkTwilight[shade]).toBeDefined();
+            expect(darkTwilight[shade]).toMatch(/^#[0-9A-Fa-f]{6}$/);
+        });
+    });
+
+    it('should include dark mode in safelist', () => {
+        expect(tailwindConfig.safelist).toContain('dark');
+    });
+
+    it('should have semantic color structure', () => {
+        const semanticColors = [
+            'dark-text', 
+            'dark-bg', 
+            'dark-accent'
+        ];
+
+        semanticColors.forEach(colorGroup => {
+            const colors = tailwindConfig.theme.extend.colors[colorGroup];
+            expect(colors).toBeDefined();
+            expect(colors.DEFAULT).toBeDefined();
+        });
+    });
+});