style: add gruvbox dark & gruvbox light themes

tailwind.config.ts

@@ -3,28 +3,51 @@ import typography from '@tailwindcss/typography';
 import type { Config } from 'tailwindcss';
 
 export default {
+	darkMode: 'class', // important for theme switching
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 
 	theme: {
-		extend: {},
+		extend: {
 			colors: {
-			foundation: '#282828',
+				// Gruvbox Light
-			primary: '#282828',
+				gruvboxLight: {
-			secondary: '#000000',
+					bg: '#fbf1c7',
-			accent: '#ff0000',
+					fg: '#3c3836',
+					primary: '#458588',
+					secondary: '#b16286',
+					accent: '#d79921',
+					neutral: '#a89984',
+					muted: '#7c6f64',
+					red: '#cc241d',
+					green: '#98971a',
+					blue: '#458588',
+					yellow: '#d79921',
+					orange: '#d65d0e',
+					purple: '#b16286',
+					aqua: '#689d6a'
+				},
 
-			neutral: '#000000',
+				// Gruvbox Dark
-
+				gruvboxDark: {
-			primary_text: '#fbf1c7',
+					bg: '#282828',
-			muted_text: '#a89984',
+					fg: '#ebdbb2',
-			accent_text: '#fb4934',
+					primary: '#83a598',
-
+					secondary: '#d3869b',
-			red: '#000000',
+					accent: '#fabd2f',
-			green: '#000000',
+					neutral: '#928374',
+					muted: '#7c6f64',
+					red: '#fb4934',
+					green: '#b8bb26',
 					blue: '#83a598',
-			yellow: '#000000'
+					yellow: '#fabd2f',
+					orange: '#fe8019',
+					purple: '#d3869b',
+					aqua: '#8ec07c'
+				}
+			}
 		}
 	},
 
 	plugins: [typography, containerQueries]
 } satisfies Config;
+