From d1802df8fc4be67a8517de9979e4b4d2538f52bb Mon Sep 17 00:00:00 2001 From: mroxso <24775431+mroxso@users.noreply.github.com> Date: Sun, 25 May 2025 00:17:33 +0200 Subject: [PATCH] =?UTF-8?q?Styling:=20More=20Themes=20=F0=9F=AA=AE=20(#124?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add purple light and dark themes to theme selection * feat: add vintage light and dark theme options to DropdownThemeMode * feat: add vintage light and dark theme options to theme selection * add even more designs --------- Co-authored-by: highperfocused --- app/globals.css | 376 ++++++++++++++++++ app/layout.tsx | 1 + .../headerComponents/DropdownThemeMode.tsx | 24 ++ 3 files changed, 401 insertions(+) diff --git a/app/globals.css b/app/globals.css index 580234f..418e63e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -48,6 +48,382 @@ --input: 215 27.9% 16.9%; --ring: 263.4 70% 50.4%; } + + .purple-light { + --background: 260 23.0769% 97.4510%; + --foreground: 243.1579 13.6691% 27.2549%; + --card: 0 0% 100%; + --card-foreground: 243.1579 13.6691% 27.2549%; + --popover: 0 0% 100%; + --popover-foreground: 243.1579 13.6691% 27.2549%; + --primary: 260.4000 22.9358% 57.2549%; + --primary-foreground: 260 23.0769% 97.4510%; + --secondary: 258.9474 33.3333% 88.8235%; + --secondary-foreground: 243.1579 13.6691% 27.2549%; + --muted: 258.0000 15.1515% 87.0588%; + --muted-foreground: 247.5000 10.3448% 45.4902%; + --accent: 342.4615 56.5217% 77.4510%; + --accent-foreground: 343.4483 23.9669% 23.7255%; + --destructive: 0 62.1891% 60.5882%; + --destructive-foreground: 260 23.0769% 97.4510%; + --border: 258.7500 17.3913% 81.9608%; + --input: 260.0000 23.0769% 92.3529%; + --ring: 260.4000 22.9358% 57.2549%; + --chart-1: 260.4000 22.9358% 57.2549%; + --chart-2: 342.4615 56.5217% 77.4510%; + --chart-3: 158.7692 31.4010% 59.4118%; + --chart-4: 35.7576 76.7442% 74.7059%; + --chart-5: 215.8209 54.4715% 75.8824%; + --sidebar: 260.0000 23.0769% 94.9020%; + --sidebar-foreground: 243.1579 13.6691% 27.2549%; + --sidebar-primary: 260.4000 22.9358% 57.2549%; + --sidebar-primary-foreground: 260 23.0769% 97.4510%; + --sidebar-accent: 342.4615 56.5217% 77.4510%; + --sidebar-accent-foreground: 343.4483 23.9669% 23.7255%; + --sidebar-border: 261.4286 18.4211% 85.0980%; + --sidebar-ring: 260.4000 22.9358% 57.2549%; + --font-sans: Geist, sans-serif; + --font-serif: "Lora", Georgia, serif; + --font-mono: "Fira Code", "Courier New", monospace; + --radius: 0.5rem; + --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03); + --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03); + --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); + --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); + --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06); + --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06); + --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06); + --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15); + } + + .purple-dark { + --background: 250.9091 18.6441% 11.5686%; + --foreground: 250.0000 36.0000% 90.1961%; + --card: 251.2500 20% 15.6863%; + --card-foreground: 250.0000 36.0000% 90.1961%; + --popover: 251.2500 20% 15.6863%; + --popover-foreground: 250.0000 36.0000% 90.1961%; + --primary: 263.0769 32.5000% 68.6275%; + --primary-foreground: 250.9091 18.6441% 11.5686%; + --secondary: 254.4828 14.8718% 38.2353%; + --secondary-foreground: 250.0000 36.0000% 90.1961%; + --muted: 254.1176 20.9877% 15.8824%; + --muted-foreground: 258.9474 10.3825% 64.1176%; + --accent: 271.7647 15.5963% 21.3725%; + --accent-foreground: 345.5172 69.0476% 83.5294%; + --destructive: 0 68.6747% 67.4510%; + --destructive-foreground: 250.9091 18.6441% 11.5686%; + --border: 252 18.5185% 21.1765%; + --input: 249.4737 19.5876% 19.0196%; + --ring: 263.0769 32.5000% 68.6275%; + --chart-1: 263.0769 32.5000% 68.6275%; + --chart-2: 345.5172 69.0476% 83.5294%; + --chart-3: 158.7692 31.4010% 59.4118%; + --chart-4: 35.7576 76.7442% 74.7059%; + --chart-5: 215.8209 54.4715% 75.8824%; + --sidebar: 252 20.0000% 9.8039%; + --sidebar-foreground: 250.0000 36.0000% 90.1961%; + --sidebar-primary: 263.0769 32.5000% 68.6275%; + --sidebar-primary-foreground: 250.9091 18.6441% 11.5686%; + --sidebar-accent: 271.7647 15.5963% 21.3725%; + --sidebar-accent-foreground: 345.5172 69.0476% 83.5294%; + --sidebar-border: 249.4737 19.5876% 19.0196%; + --sidebar-ring: 263.0769 32.5000% 68.6275%; + --font-sans: Geist, sans-serif; + --font-serif: "Lora", Georgia, serif; + --font-mono: "Fira Code", "Courier New", monospace; + --radius: 0.5rem; + --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03); + --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03); + --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); + --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); + --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06); + --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06); + --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06); + --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15); + } + + .vintage-light { + --background: 44.0000 42.8571% 93.1373%; + --foreground: 28.5714 16.5354% 24.9020%; + --card: 42.0000 100.0000% 98.0392%; + --card-foreground: 28.5714 16.5354% 24.9020%; + --popover: 42.0000 100.0000% 98.0392%; + --popover-foreground: 28.5714 16.5354% 24.9020%; + --primary: 30.0000 33.8710% 48.6275%; + --primary-foreground: 0 0% 100%; + --secondary: 40.6452 34.8315% 82.5490%; + --secondary-foreground: 28.9655 18.7097% 30.3922%; + --muted: 39 34.4828% 88.6275%; + --muted-foreground: 32.3077 18.4834% 41.3725%; + --accent: 42.8571 32.8125% 74.9020%; + --accent-foreground: 28.5714 16.5354% 24.9020%; + --destructive: 9.8438 54.7009% 45.8824%; + --destructive-foreground: 0 0% 100%; + --border: 40.0000 31.4286% 79.4118%; + --input: 40.0000 31.4286% 79.4118%; + --ring: 30.0000 33.8710% 48.6275%; + --chart-1: 30.0000 33.8710% 48.6275%; + --chart-2: 31.3846 29.9539% 42.5490%; + --chart-3: 33.6842 32.9480% 33.9216%; + --chart-4: 29.1176 30.9091% 56.8627%; + --chart-5: 30 33.6842% 62.7451%; + --sidebar: 39 34.4828% 88.6275%; + --sidebar-foreground: 28.5714 16.5354% 24.9020%; + --sidebar-primary: 30.0000 33.8710% 48.6275%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 42.8571 32.8125% 74.9020%; + --sidebar-accent-foreground: 28.5714 16.5354% 24.9020%; + --sidebar-border: 40.0000 31.4286% 79.4118%; + --sidebar-ring: 30.0000 33.8710% 48.6275%; + --font-sans: Libre Baskerville, serif; + --font-serif: Lora, serif; + --font-mono: IBM Plex Mono, monospace; + --radius: 0.25rem; + --shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06); + --shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06); + --shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); + --shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); + --shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12); + --shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12); + --shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12); + --shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30); + } + + .vintage-dark { + --background: 25.0000 15.3846% 15.2941%; + --foreground: 39 34.4828% 88.6275%; + --card: 25.7143 13.7255% 20%; + --card-foreground: 39 34.4828% 88.6275%; + --popover: 25.7143 13.7255% 20%; + --popover-foreground: 39 34.4828% 88.6275%; + --primary: 30 33.6842% 62.7451%; + --primary-foreground: 25.0000 15.3846% 15.2941%; + --secondary: 24.7059 12.9771% 25.6863%; + --secondary-foreground: 39 34.4828% 88.6275%; + --muted: 25.7143 13.7255% 20%; + --muted-foreground: 38.4000 17.7305% 72.3529%; + --accent: 24.4444 17.8808% 29.6078%; + --accent-foreground: 39 34.4828% 88.6275%; + --destructive: 9.8438 54.7009% 45.8824%; + --destructive-foreground: 0 0% 100%; + --border: 24.7059 12.9771% 25.6863%; + --input: 24.7059 12.9771% 25.6863%; + --ring: 30 33.6842% 62.7451%; + --chart-1: 30 33.6842% 62.7451%; + --chart-2: 29.1176 30.9091% 56.8627%; + --chart-3: 30.0000 33.8710% 48.6275%; + --chart-4: 31.3846 29.9539% 42.5490%; + --chart-5: 33.6842 32.9480% 33.9216%; + --sidebar: 25.0000 15.3846% 15.2941%; + --sidebar-foreground: 39 34.4828% 88.6275%; + --sidebar-primary: 30 33.6842% 62.7451%; + --sidebar-primary-foreground: 25.0000 15.3846% 15.2941%; + --sidebar-accent: 24.4444 17.8808% 29.6078%; + --sidebar-accent-foreground: 39 34.4828% 88.6275%; + --sidebar-border: 24.7059 12.9771% 25.6863%; + --sidebar-ring: 30 33.6842% 62.7451%; + --font-sans: Libre Baskerville, serif; + --font-serif: Lora, serif; + --font-mono: IBM Plex Mono, monospace; + --radius: 0.25rem; + --shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06); + --shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06); + --shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); + --shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); + --shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12); + --shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12); + --shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12); + --shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30); + } + + .neo-brutalism-light { + --background: 0 0% 100%; + --foreground: 0 0% 0%; + --card: 0 0% 100%; + --card-foreground: 0 0% 0%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 0%; + --primary: 0 100% 60%; + --primary-foreground: 0 0% 100%; + --secondary: 60 100% 50%; + --secondary-foreground: 0 0% 0%; + --muted: 0 0% 94.1176%; + --muted-foreground: 0 0% 20%; + --accent: 216 100% 50%; + --accent-foreground: 0 0% 100%; + --destructive: 0 0% 0%; + --destructive-foreground: 0 0% 100%; + --border: 0 0% 0%; + --input: 0 0% 0%; + --ring: 0 100% 60%; + --chart-1: 0 100% 60%; + --chart-2: 60 100% 50%; + --chart-3: 216 100% 50%; + --chart-4: 120 100% 40%; + --chart-5: 300 100% 40%; + --sidebar: 0 0% 94.1176%; + --sidebar-foreground: 0 0% 0%; + --sidebar-primary: 0 100% 60%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 216 100% 50%; + --sidebar-accent-foreground: 0 0% 100%; + --sidebar-border: 0 0% 0%; + --sidebar-ring: 0 100% 60%; + --font-sans: DM Sans, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: Space Mono, monospace; + --radius: 0px; + --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50); + --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50); + --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); + --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); + --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00); + --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00); + --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00); + --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50); + } + + .neo-brutalism-dark { + --background: 0 0% 0%; + --foreground: 0 0% 100%; + --card: 0 0% 20%; + --card-foreground: 0 0% 100%; + --popover: 0 0% 20%; + --popover-foreground: 0 0% 100%; + --primary: 0 100.0000% 70%; + --primary-foreground: 0 0% 0%; + --secondary: 60 100% 60%; + --secondary-foreground: 0 0% 0%; + --muted: 0 0% 20%; + --muted-foreground: 0 0% 80%; + --accent: 210 100% 60%; + --accent-foreground: 0 0% 0%; + --destructive: 0 0% 100%; + --destructive-foreground: 0 0% 0%; + --border: 0 0% 100%; + --input: 0 0% 100%; + --ring: 0 100.0000% 70%; + --chart-1: 0 100.0000% 70%; + --chart-2: 60 100% 60%; + --chart-3: 210 100% 60%; + --chart-4: 120 60.0000% 50%; + --chart-5: 300 60.0000% 50%; + --sidebar: 0 0% 0%; + --sidebar-foreground: 0 0% 100%; + --sidebar-primary: 0 100.0000% 70%; + --sidebar-primary-foreground: 0 0% 0%; + --sidebar-accent: 210 100% 60%; + --sidebar-accent-foreground: 0 0% 0%; + --sidebar-border: 0 0% 100%; + --sidebar-ring: 0 100.0000% 70%; + --font-sans: DM Sans, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: Space Mono, monospace; + --radius: 0px; + --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50); + --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50); + --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); + --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); + --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00); + --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00); + --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00); + --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50); + } + + .nature-light { + --background: 37.5000 36.3636% 95.6863%; + --foreground: 8.8889 27.8351% 19.0196%; + --card: 37.5000 36.3636% 95.6863%; + --card-foreground: 8.8889 27.8351% 19.0196%; + --popover: 37.5000 36.3636% 95.6863%; + --popover-foreground: 8.8889 27.8351% 19.0196%; + --primary: 123.0380 46.1988% 33.5294%; + --primary-foreground: 0 0% 100%; + --secondary: 124.6154 39.3939% 93.5294%; + --secondary-foreground: 124.4776 55.3719% 23.7255%; + --muted: 33.7500 34.7826% 90.9804%; + --muted-foreground: 15.0000 25.2874% 34.1176%; + --accent: 122 37.5000% 84.3137%; + --accent-foreground: 124.4776 55.3719% 23.7255%; + --destructive: 0 66.3866% 46.6667%; + --destructive-foreground: 0 0% 100%; + --border: 33.9130 27.0588% 83.3333%; + --input: 33.9130 27.0588% 83.3333%; + --ring: 123.0380 46.1988% 33.5294%; + --chart-1: 122.4242 39.4422% 49.2157%; + --chart-2: 122.7907 43.4343% 38.8235%; + --chart-3: 123.0380 46.1988% 33.5294%; + --chart-4: 124.4776 55.3719% 23.7255%; + --chart-5: 125.7143 51.2195% 8.0392%; + --sidebar: 33.7500 34.7826% 90.9804%; + --sidebar-foreground: 8.8889 27.8351% 19.0196%; + --sidebar-primary: 123.0380 46.1988% 33.5294%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 122 37.5000% 84.3137%; + --sidebar-accent-foreground: 124.4776 55.3719% 23.7255%; + --sidebar-border: 33.9130 27.0588% 83.3333%; + --sidebar-ring: 123.0380 46.1988% 33.5294%; + --font-sans: Montserrat, sans-serif; + --font-serif: Merriweather, serif; + --font-mono: Source Code Pro, monospace; + --radius: 0.5rem; + --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); + --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); + --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); + --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); + --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); + --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); + } + + .nature-dark { + --background: 132.8571 20% 13.7255%; + --foreground: 32.7273 26.8293% 91.9608%; + --card: 124.6154 12.6214% 20.1961%; + --card-foreground: 32.7273 26.8293% 91.9608%; + --popover: 124.6154 12.6214% 20.1961%; + --popover-foreground: 32.7273 26.8293% 91.9608%; + --primary: 122.4242 39.4422% 49.2157%; + --primary-foreground: 125.7143 51.2195% 8.0392%; + --secondary: 115.3846 9.6296% 26.4706%; + --secondary-foreground: 114.0000 13.8889% 85.8824%; + --muted: 124.6154 12.6214% 20.1961%; + --muted-foreground: 34.7368 19.1919% 80.5882%; + --accent: 122.7907 43.4343% 38.8235%; + --accent-foreground: 32.7273 26.8293% 91.9608%; + --destructive: 0 66.3866% 46.6667%; + --destructive-foreground: 32.7273 26.8293% 91.9608%; + --border: 115.3846 9.6296% 26.4706%; + --input: 115.3846 9.6296% 26.4706%; + --ring: 122.4242 39.4422% 49.2157%; + --chart-1: 122.5714 38.4615% 64.3137%; + --chart-2: 122.8235 38.4615% 56.6667%; + --chart-3: 122.4242 39.4422% 49.2157%; + --chart-4: 122.5806 40.9692% 44.5098%; + --chart-5: 122.7907 43.4343% 38.8235%; + --sidebar: 132.8571 20% 13.7255%; + --sidebar-foreground: 32.7273 26.8293% 91.9608%; + --sidebar-primary: 122.4242 39.4422% 49.2157%; + --sidebar-primary-foreground: 125.7143 51.2195% 8.0392%; + --sidebar-accent: 122.7907 43.4343% 38.8235%; + --sidebar-accent-foreground: 32.7273 26.8293% 91.9608%; + --sidebar-border: 115.3846 9.6296% 26.4706%; + --sidebar-ring: 122.4242 39.4422% 49.2157%; + --font-sans: Montserrat, sans-serif; + --font-serif: Merriweather, serif; + --font-mono: Source Code Pro, monospace; + --radius: 0.5rem; + --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); + --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); + --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); + --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); + --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); + --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); + } } /* @layer base { diff --git a/app/layout.tsx b/app/layout.tsx index 9e043cb..42ab822 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -59,6 +59,7 @@ export default function RootLayout({ defaultTheme="dark" enableSystem disableTransitionOnChange + themes={["light", "dark", "purple-light", "purple-dark", "vintage-light", "vintage-dark", "neo-brutalism-light", "neo-brutalism-dark", "nature-light", "nature-dark", "system"]} > diff --git a/components/headerComponents/DropdownThemeMode.tsx b/components/headerComponents/DropdownThemeMode.tsx index f56bb74..e952707 100644 --- a/components/headerComponents/DropdownThemeMode.tsx +++ b/components/headerComponents/DropdownThemeMode.tsx @@ -31,6 +31,30 @@ export function DropdownThemeMode() { setTheme("dark")}> Dark + setTheme("purple-light")}> + Purple Light + + setTheme("purple-dark")}> + Purple Dark + + setTheme("vintage-light")}> + Vintage Light + + setTheme("vintage-dark")}> + Vintage Dark + + setTheme("neo-brutalism-light")}> + Neo Brutalism Light + + setTheme("neo-brutalism-dark")}> + Neo Brutalism Dark + + setTheme("nature-light")}> + Nature Light + + setTheme("nature-dark")}> + Nature Dark + setTheme("system")}> System