+ {images.map((s) => (
+
setBackground(s)}
+ />
+ ))}
+
+
+
+ 🎁 Get abstract{" "}
+
+ wallpapers
+
+
+
+
+
Change your password here.
+
+
+
setBackground(e.currentTarget.value)}
+ />
+
+
+ );
+}
+
+const GradientButton = ({
+ background,
+ children,
+}: {
+ background: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+ );
+};
diff --git a/src/components/providers.tsx b/src/components/providers.tsx
index bdc2084..38c2e4a 100644
--- a/src/components/providers.tsx
+++ b/src/components/providers.tsx
@@ -4,16 +4,19 @@ import {
ThemeProvider as NextThemesProvider,
type ThemeProviderProps,
} from "next-themes";
+import { ThemeProvider as ColorThemeProvider } from "@/providers/color";
import { NuqsAdapter } from "nuqs/adapters/next/app";
import { TooltipProvider } from "@/components/ui/tooltip";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return (
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
+
);
}
diff --git a/src/components/setting/items.tsx b/src/components/setting/items.tsx
index 0cc0463..d5abd93 100644
--- a/src/components/setting/items.tsx
+++ b/src/components/setting/items.tsx
@@ -1,4 +1,4 @@
-import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
+import { Bell, Cable, Home, Palette } from "lucide-react";
// Menu items.
export const userItems = [
@@ -36,10 +36,14 @@ export const siteItems = [
},
{
id: "api",
- icon: Home,
+ icon: Cable,
},
{
id: "notification",
- icon: Home,
+ icon: Bell,
+ },
+ {
+ id: "theme",
+ icon: Palette,
},
];
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..0f4caeb
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/providers/color/index.tsx b/src/providers/color/index.tsx
new file mode 100644
index 0000000..a005661
--- /dev/null
+++ b/src/providers/color/index.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+import type { Theme } from "./types";
+
+export const defaultTheme: Theme = {
+ name: "default",
+ light: {
+ background: "hsl(0 0% 100%)",
+ foreground: "hsl(240 10% 3.9%)",
+ muted: "hsl(240 4.8% 95.9%)",
+ "muted-foreground": "hsl(240 3.8% 46.1%)",
+ popover: "hsl(0 0% 100%)",
+ "popover-foreground": "hsl(240 10% 3.9%)",
+ card: "hsl(0 0% 100%)",
+ "card-foreground": "hsl(240 10% 3.9%)",
+ border: "hsl(240 5.9% 90%)",
+ input: "hsl(240 5.9% 90%)",
+ primary: "hsl(240 5.9% 10%)",
+ "primary-foreground": "hsl(0 0% 98%)",
+ secondary: "hsl(240 4.8% 95.9%)",
+ "secondary-foreground": "hsl(240 5.9% 10%)",
+ accent: "hsl(240 4.8% 95.9%)",
+ "accent-foreground": "hsl(240 5.9% 10%)",
+ destructive: "hsl(0 84.2% 60.2%)",
+ "destructive-foreground": "hsl(0 0% 98%)",
+ ring: "hsl(240 5% 64.9%)",
+ radius: "0.5rem",
+ "chart-1": "hsl(220 70% 50%)",
+ "chart-2": "hsl(340 75% 55%)",
+ "chart-3": "hsl(30 80% 55%)",
+ "chart-4": "hsl(280 65% 60%)",
+ "chart-5": "hsl(160 60% 45%)",
+ "chart-6": "hsl(180 50% 50%)",
+ "chart-7": "hsl(216 50% 50%)",
+ "chart-8": "hsl(252 50% 50%)",
+ "chart-9": "hsl(288 50% 50%)",
+ "chart-10": "hsl(324 50% 50%)",
+ timing: "cubic-bezier(0.4, 0, 0.2, 1)",
+ "sidebar-background": "hsl(0 0% 98%)",
+ "sidebar-foreground": "hsl(240 5.3% 26.1%)",
+ "sidebar-primary": "hsl(240 5.9% 10%)",
+ "sidebar-primary-foreground": "hsl(0 0% 98%)",
+ "sidebar-accent": "hsl(240 4.8% 95.9%)",
+ "sidebar-accent-foreground": "hsl(240 5.9% 10%)",
+ "sidebar-border": "hsl(220 13% 91%)",
+ "sidebar-ring": "hsl(217.2 91.2% 59.8%)",
+ },
+ dark: {
+ background: "hsl(240 10% 3.9%)",
+ foreground: "hsl(0 0% 98%)",
+ muted: "hsl(240 3.7% 15.9%)",
+ "muted-foreground": "hsl(240 5% 64.9%)",
+ popover: "hsl(240 10% 3.9%)",
+ "popover-foreground": "hsl(0 0% 98%)",
+ card: "hsl(240 10% 3.9%)",
+ "card-foreground": "hsl(0 0% 98%)",
+ border: "hsl(240 3.7% 15.9%)",
+ input: "hsl(240 3.7% 15.9%)",
+ primary: "hsl(0 0% 98%)",
+ "primary-foreground": "hsl(240 5.9% 10%)",
+ secondary: "hsl(240 3.7% 15.9%)",
+ "secondary-foreground": "hsl(0 0% 98%)",
+ accent: "hsl(240 3.7% 15.9%)",
+ "accent-foreground": "hsl(0 0% 98%)",
+ destructive: "hsl(0 62.8% 30.6%)",
+ "destructive-foreground": "hsl(0 85.7% 97.3%)",
+ ring: "hsl(240 3.7% 15.9%)",
+ radius: "0.5rem",
+ "chart-1": "hsl(220 70% 50%)",
+ "chart-2": "hsl(340 75% 55%)",
+ "chart-3": "hsl(30 80% 55%)",
+ "chart-4": "hsl(280 65% 60%)",
+ "chart-5": "hsl(160 60% 45%)",
+ "chart-6": "hsl(180 50% 50%)",
+ "chart-7": "hsl(216 50% 50%)",
+ "chart-8": "hsl(252 50% 50%)",
+ "chart-9": "hsl(288 50% 50%)",
+ "chart-10": "hsl(324 50% 50%)",
+ timing: "cubic-bezier(0.4, 0, 0.2, 1)",
+ "sidebar-background": "hsl(240 5.9% 10%)",
+ "sidebar-foreground": "hsl(240 4.8% 95.9%)",
+ "sidebar-primary": "hsl(224.3 76.3% 48%)",
+ "sidebar-primary-foreground": "hsl(0 0% 100%)",
+ "sidebar-accent": "hsl(240 3.7% 15.9%)",
+ "sidebar-accent-foreground": "hsl(240 4.8% 95.9%)",
+ "sidebar-border": "hsl(240 3.7% 15.9%)",
+ "sidebar-ring": "hsl(217.2 91.2% 59.8%)",
+ },
+};
+
+type ThemeContextType = {
+ theme: Theme | null;
+ setTheme: (theme: Theme | null) => void;
+};
+
+const ThemeContext = createContext(undefined);
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+}
+
+export function ThemeProvider({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const [theme, setTheme] = useState(null);
+
+ useEffect(() => {
+ if (!theme) return;
+
+ const remove = () => {
+ const oldStyle = document.getElementById("theme-vars");
+ if (oldStyle) {
+ oldStyle.remove();
+ }
+ };
+
+ const style = document.createElement("style");
+ style.setAttribute("id", "theme-vars");
+
+ const lightCssVars = Object.entries(theme.light)
+ .map(([key, value]) => `--${key}: ${value};`)
+ .join("\n");
+ const darkCssVars = Object.entries(theme.dark)
+ .map(([key, value]) => `--${key}: ${value};`)
+ .join("\n");
+ style.innerHTML = `
+ :root {
+ ${lightCssVars}
+ }
+ .dark {
+ ${darkCssVars}
+ }
+ `;
+ remove();
+ document.head.appendChild(style);
+
+ return () => {
+ style.remove();
+ };
+ }, [theme]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/providers/color/script.tsx b/src/providers/color/script.tsx
new file mode 100644
index 0000000..9722fcb
--- /dev/null
+++ b/src/providers/color/script.tsx
@@ -0,0 +1,49 @@
+import type { DerivedTheme, Theme } from "./types";
+
+const testTheme: Theme = {
+ name: "test",
+ light: {
+ primary: "red",
+ },
+ dark: {
+ primary: "blue",
+ },
+};
+const getTheme = async (): Promise => {
+ const theme = testTheme;
+ const lightCssVars = Object.entries(theme.light)
+ .map(([key, value]) => {
+ const cssVar = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+ return `--${cssVar}: ${value};`;
+ })
+ .join("\n");
+ const darkCssVars = Object.entries(theme.dark)
+ .map(([key, value]) => {
+ const cssVar = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+ return `--${cssVar}: ${value};`;
+ })
+ .join("\n");
+ return {
+ name: theme.name,
+ light: lightCssVars,
+ dark: darkCssVars,
+ };
+};
+
+export async function ThemeScript() {
+ const theme = await getTheme();
+ const styleContent = `
+ :root {
+ ${theme.light}
+ }
+ .dark {
+ ${theme.dark}
+ }
+ `;
+ return (
+
+ );
+}
diff --git a/src/providers/color/types.ts b/src/providers/color/types.ts
new file mode 100644
index 0000000..1e68634
--- /dev/null
+++ b/src/providers/color/types.ts
@@ -0,0 +1,59 @@
+export interface ThemeColors {
+ background: string;
+ foreground: string;
+ card: string;
+ "card-foreground": string;
+ popover: string;
+ "popover-foreground": string;
+ primary: string;
+ "primary-foreground": string;
+ secondary: string;
+ "secondary-foreground": string;
+ muted: string;
+ "muted-foreground": string;
+ accent: string;
+ "accent-foreground": string;
+ destructive: string;
+ "destructive-foreground": string;
+
+ border: string;
+ input: string;
+ ring: string;
+
+ "chart-1": string;
+ "chart-2": string;
+ "chart-3": string;
+ "chart-4": string;
+ "chart-5": string;
+ "chart-6": string;
+ "chart-7": string;
+ "chart-8": string;
+ "chart-9": string;
+ "chart-10": string;
+
+ "sidebar-background": string;
+ "sidebar-foreground": string;
+ "sidebar-primary": string;
+ "sidebar-primary-foreground": string;
+ "sidebar-accent": string;
+ "sidebar-accent-foreground": string;
+ "sidebar-border": string;
+ "sidebar-ring": string;
+}
+
+export interface ThemeVariables extends ThemeColors {
+ radius: string;
+ timing: string;
+}
+
+export interface Theme {
+ name: string;
+ light: Partial;
+ dark: Partial;
+}
+
+export interface DerivedTheme {
+ name: string;
+ light: string;
+ dark: string;
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8a36031..f4af160 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,112 +4,98 @@
@layer base {
:root {
- --background: 0 0% 100%;
- --foreground: 240 10% 3.9%;
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(240 10% 3.9%);
- --muted: 240 4.8% 95.9%;
- --muted-foreground: 240 3.8% 46.1%;
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
- --popover: 0 0% 100%;
- --popover-foreground: 240 10% 3.9%;
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
- --card: 0 0% 100%;
- --card-foreground: 240 10% 3.9%;
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
- --border: 240 5.9% 90%;
- --input: 240 5.9% 90%;
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
- --primary: 240 5.9% 10%;
- --primary-foreground: 0 0% 98%;
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
- --secondary: 240 4.8% 95.9%;
- --secondary-foreground: 240 5.9% 10%;
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
- --accent: 240 4.8% 95.9%;
- --accent-foreground: 240 5.9% 10%;
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 0 0% 98%;
+ --destructive: hsl(0 84.2% 60.2%);
+ --destructive-foreground: hsl(0 0% 98%);
- --ring: 240 5% 64.9%;
+ --ring: hsl(240 5% 64.9%);
--radius: 0.5rem;
- --chart-1: 220 70% 50%;
- --chart-2: 340 75% 55%;
- --chart-3: 30 80% 55%;
- --chart-4: 280 65% 60%;
- --chart-5: 160 60% 45%;
- --chart-6: 180 50% 50%;
- --chart-7: 216 50% 50%;
- --chart-8: 252 50% 50%;
- --chart-9: 288 50% 50%;
- --chart-10: 324 50% 50%;
+ --chart-1: hsl(220 70% 50%);
+ --chart-2: hsl(340 75% 55%);
+ --chart-3: hsl(30 80% 55%);
+ --chart-4: hsl(280 65% 60%);
+ --chart-5: hsl(160 60% 45%);
+ --chart-6: hsl(180 50% 50%);
+ --chart-7: hsl(216 50% 50%);
+ --chart-8: hsl(252 50% 50%);
+ --chart-9: hsl(288 50% 50%);
+ --chart-10: hsl(324 50% 50%);
--timing: cubic-bezier(0.4, 0, 0.2, 1);
- --sidebar-background: 0 0% 98%;
-
- --sidebar-foreground: 240 5.3% 26.1%;
-
- --sidebar-primary: 240 5.9% 10%;
-
- --sidebar-primary-foreground: 0 0% 98%;
-
- --sidebar-accent: 240 4.8% 95.9%;
-
- --sidebar-accent-foreground: 240 5.9% 10%;
-
- --sidebar-border: 220 13% 91%;
-
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar-background: hsl(0 0% 98%);
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-border: hsl(220 13% 91%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
}
.dark {
- --background: 240 10% 3.9%;
- --foreground: 0 0% 98%;
-
- --muted: 240 3.7% 15.9%;
- --muted-foreground: 240 5% 64.9%;
-
- --popover: 240 10% 3.9%;
- --popover-foreground: 0 0% 98%;
-
- --card: 240 10% 3.9%;
- --card-foreground: 0 0% 98%;
-
- --border: 240 3.7% 15.9%;
- --input: 240 3.7% 15.9%;
-
- --primary: 0 0% 98%;
- --primary-foreground: 240 5.9% 10%;
-
- --secondary: 240 3.7% 15.9%;
- --secondary-foreground: 0 0% 98%;
-
- --accent: 240 3.7% 15.9%;
- --accent-foreground: 0 0% 98%;
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 0 85.7% 97.3%;
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
- --ring: 240 3.7% 15.9%;
+ --popover: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(0 0% 98%);
- --sidebar-background: 240 5.9% 10%;
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
- --sidebar-foreground: 240 4.8% 95.9%;
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
- --sidebar-primary: 224.3 76.3% 48%;
+ --primary: hsl(0 0% 98%);
+ --primary-foreground: hsl(240 5.9% 10%);
- --sidebar-primary-foreground: 0 0% 100%;
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
- --sidebar-accent: 240 3.7% 15.9%;
+ --accent: hsl(240 3.7% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
- --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive-foreground: hsl(0 85.7% 97.3%);
- --sidebar-border: 240 3.7% 15.9%;
+ --ring: hsl(240 3.7% 15.9%);
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar-background: hsl(240 5.9% 10%);
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-primary: hsl(224.3 76.3% 48%);
+ --sidebar-primary-foreground: hsl(0 0% 100%);
+ --sidebar-accent: hsl(240 3.7% 15.9%);
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-border: hsl(240 3.7% 15.9%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
}
}
@@ -130,7 +116,8 @@
@layer base {
* {
- @apply border-border outline-ring/50;
+ /* @apply border-border outline-ring/50; */
+ outline-color: rgb(var(--ring) / 0.5);
}
body {
@apply bg-background text-foreground;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 040e50f..25cf87b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,48 +14,48 @@ export default {
},
extend: {
colors: {
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
+ border: 'var(--border)',
+ input: 'var(--input)',
+ ring: 'var(--ring)',
+ background: 'var(--background)',
+ foreground: 'var(--foreground)',
primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))'
+ DEFAULT: 'var(--primary)',
+ foreground: 'var(--primary-foreground)'
},
secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))'
+ DEFAULT: 'var(--secondary)',
+ foreground: 'var(--secondary-foreground)'
},
destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))'
+ DEFAULT: 'var(--destructive)',
+ foreground: 'var(--destructive-foreground)'
},
muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))'
+ DEFAULT: 'var(--muted)',
+ foreground: 'var(--muted-foreground)'
},
accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))'
+ DEFAULT: 'var(--accent)',
+ foreground: 'var(--accent-foreground)'
},
popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))'
+ DEFAULT: 'var(--popover)',
+ foreground: 'var(--popover-foreground)'
},
card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))'
+ DEFAULT: 'var(--card)',
+ foreground: 'var(--card-foreground)'
},
sidebar: {
- DEFAULT: 'hsl(var(--sidebar-background))',
- foreground: 'hsl(var(--sidebar-foreground))',
- primary: 'hsl(var(--sidebar-primary))',
- 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
- accent: 'hsl(var(--sidebar-accent))',
- 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
- border: 'hsl(var(--sidebar-border))',
- ring: 'hsl(var(--sidebar-ring))'
+ DEFAULT: 'var(--sidebar-background)',
+ foreground: 'var(--sidebar-foreground)',
+ primary: 'var(--sidebar-primary)',
+ 'primary-foreground': 'var(--sidebar-primary-foreground)',
+ accent: 'var(--sidebar-accent)',
+ 'accent-foreground': 'var(--sidebar-accent-foreground)',
+ border: 'var(--sidebar-border)',
+ ring: 'var(--sidebar-ring)'
}
},
borderRadius: {