feat: more themes

This commit is contained in:
mehedi-hasan 2024-04-13 16:52:44 +06:00
parent 08c9073d28
commit dad01cd7a8
3 changed files with 226 additions and 38 deletions

View File

@ -3,7 +3,7 @@
@tailwind utilities;
@layer base {
:root {
/* :root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
@ -46,6 +46,40 @@
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
} */
:root {
--gradient: #00f5a0;
--background: 169 65% 3.84%;
--foreground: 169 10% 97.4%;
--muted: 169 50% 14.399999999999999%;
--muted-foreground: 169 10% 54.8%;
--popover: 169 45% 6.24%;
--popover-foreground: 169 10% 97.4%;
--card: 169 45% 6.24%;
--card-foreground: 169 10% 97.4%;
--border: 169 50% 14.399999999999999%;
--input: 169 50% 14.399999999999999%;
--primary: 169 100% 48%;
--primary-foreground: 169 10% 4.8%;
--secondary: 169 50% 14.399999999999999%;
--secondary-foreground: 169 10% 97.4%;
--accent: 169 50% 14.399999999999999%;
--accent-foreground: 169 10% 97.4%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 169 10% 97.4%;
--ring: 169 100% 48%;
--radius: 0.5rem;
}
.violett {
@ -136,7 +170,7 @@
--ring: 20.5 90.2% 48.2%;
}
.foo {
.maya-blue {
/* CSS: .bg-gradient { background: var(--gradient) } */
--gradient: #72c6ef;
@ -170,7 +204,7 @@
--ring: 212 80% 69%;
}
.foo2 {
.spring-green {
/* CSS: .bg-gradient { background: var(--gradient) } */
--gradient: #00f5a0;
@ -239,37 +273,163 @@
}
.bright-turquoise {
/* CSS: .bg-gradient { background: var(--gradient) } */
--gradient: #00dbde;
/* CSS: .bg-gradient { background: var(--gradient) } */
--gradient: #00dbde;
--background: 192 65% 3.52%;
--foreground: 192 10% 97.2%;
--background: 192 65% 3.52%;
--foreground: 192 10% 97.2%;
--muted: 192 50% 13.2%;
--muted-foreground: 192 10% 54.4%;
--muted: 192 50% 13.2%;
--muted-foreground: 192 10% 54.4%;
--popover: 192 45% 5.72%;
--popover-foreground: 192 10% 97.2%;
--popover: 192 45% 5.72%;
--popover-foreground: 192 10% 97.2%;
--card: 192 45% 5.72%;
--card-foreground: 192 10% 97.2%;
--card: 192 45% 5.72%;
--card-foreground: 192 10% 97.2%;
--border: 192 50% 13.2%;
--input: 192 50% 13.2%;
--border: 192 50% 13.2%;
--input: 192 50% 13.2%;
--primary: 192 100% 44%;
--primary-foreground: 192 10% 97.2%;
--primary: 192 100% 44%;
--primary-foreground: 192 10% 97.2%;
--secondary: 192 50% 13.2%;
--secondary-foreground: 192 10% 97.2%;
--secondary: 192 50% 13.2%;
--secondary-foreground: 192 10% 97.2%;
--accent: 192 50% 13.2%;
--accent-foreground: 192 10% 97.2%;
--accent: 192 50% 13.2%;
--accent-foreground: 192 10% 97.2%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 192 10% 97.2%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 192 10% 97.2%;
--ring: 192 100% 44%;
--ring: 192 100% 44%;
}
.gold {
--background: 16, 43%, 34%;
--foreground: 38, 77%, 88%;
--muted: 28, 46%, 56%;
--muted-foreground: 38, 77%, 88%;
--popover: 16, 43%, 34%;
--popover-foreground: 38, 77%, 88%;
--border: 28, 46%, 56%;
--input: 28, 46%, 56%;
--card: 16, 43%, 34%;
--card-foreground: 38, 77%, 88%;
--primary: 28, 46%, 56%;
--primary-foreground: 60, 70%, 90%;
--secondary: 39, 100%, 73%;
--secondary-foreground: 16, 43%, 34%;
--accent: 39, 100%, 52%;
--accent-foreground: 16, 43%, 34%;
--destructive: 38, 77%, 88%;
--destructive-foreground: 16, 43%, 34%;
--ring: 28, 46%, 56%;
}
.dracula {
--background: 231, 15%, 18%;
--foreground: 60, 30%, 96%;
--muted: 232, 14%, 31%;
--muted-foreground: 60, 30%, 96%;
--popover: 231, 15%, 18%;
--popover-foreground: 60, 30%, 96%;
--border: 232, 14%, 31%;
--input: 225, 27%, 51%;
--card: 232, 14%, 31%;
--card-foreground: 60, 30%, 96%;
--primary: 265, 89%, 78%;
--primary-foreground: 60, 30%, 96%;
--secondary: 326, 100%, 74%;
--secondary-foreground: 60, 30%, 96%;
--accent: 225, 27%, 51%;
--accent-foreground: 60, 30%, 96%;
--destructive: 0, 100%, 67%;
--destructive-foreground: 60, 30%, 96%;
--ring: 225, 27%, 51%;
}
.nord {
--background: 220, 16%, 16%;
--foreground: 222, 20%, 96%;
--muted: 215, 14%, 25%;
--muted-foreground: 222, 20%, 96%;
--popover: 220, 16%, 16%;
--popover-foreground: 222, 20%, 96%;
--border: 222, 20%, 40%;
--input: 222, 20%, 40%;
--card: 220, 16%, 16%;
--card-foreground: 222, 20%, 96%;
--primary: 222, 20%, 65%;
--primary-foreground: 220, 16%, 16%;
--secondary: 215, 14%, 25%;
--secondary-foreground: 222, 20%, 96%;
--accent: 215, 14%, 25%;
--accent-foreground: 222, 20%, 96%;
--destructive: 0, 80%, 50%;
--destructive-foreground: 222, 20%, 96%;
--ring: 222, 20%, 40%;
}
.laracon {
--background: 25, 13%, 18%;
--foreground: 0, 0%, 100%;
--muted: 0, 0%, 50%;
--muted-foreground: 0, 0%, 100%;
--popover: 0, 0%, 5%;
--popover-foreground: 0, 0%, 100%;
--border: 37, 17%, 35%;
--input: 37, 17%, 35%;
--card: 2, 94%, 57%;
--card-foreground: 0, 0%, 100%;
--primary: 254, 96%, 94%;
--primary-foreground: 0, 0%, 0%;
--secondary: 25, 13%, 18%;
--secondary-foreground: 0, 0%, 0%;
--accent: 2, 94%, 57%;
--accent-foreground: 0, 0%, 100%;
--destructive: 37, 17%, 35%;
--destructive-foreground: 0, 0%, 100%;
--link-text: 2, 94%, 57%; /* Variant of the accent color for link text */
--ring: 2, 94%, 57%;
}
}

View File

@ -22,7 +22,7 @@ export default function RootLayout({
<body className={cn(inter.className, "overflow-x-hidden")}>
<ThemeProvider
attribute="class"
defaultTheme="foo2"
defaultTheme="spring-green"
enableSystem
disableTransitionOnChange
>

View File

@ -36,17 +36,17 @@ export function ThemeToggle() {
</DropdownMenuItem> */}
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "foo");
document.documentElement.setAttribute("class", "maya-blue");
}}
>
Light Blue
Maya Blue
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "foo2");
document.documentElement.setAttribute("class", "spring-green");
}}
>
Light Green
Spring Green
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
@ -62,6 +62,34 @@ export function ThemeToggle() {
>
Bright Turquoise
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "gold");
}}
>
Gold
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "dracula");
}}
>
Dracula
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "nord");
}}
>
Nord
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "laracon");
}}
>
Laracon
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "violett");