diff --git a/src/components/skeletons/ModelInfoSkeleton.tsx b/src/components/skeletons/ModelInfoSkeleton.tsx
index 73b1fe8..46aa5b7 100644
--- a/src/components/skeletons/ModelInfoSkeleton.tsx
+++ b/src/components/skeletons/ModelInfoSkeleton.tsx
@@ -1,8 +1,10 @@
import { ChevronDown } from "lucide-react";
-export function ModelInfoSkeleton() {
+export function ModelInfoSkeleton({ isDark }: { isDark: boolean }) {
return (
-
+
@@ -10,12 +12,18 @@ export function ModelInfoSkeleton() {
-
+
@@ -25,25 +33,32 @@ export function ModelInfoSkeleton() {
className="flex items-center gap-3 rounded-lg border border-border/40 bg-secondary/50 p-3"
>
))}
- {/* Footer info */}
{[1, 2, 3].map((i) => (
- {/* label */}
-
- {/* value */}
-
+
+
))}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index b45e2b5..b35bfda 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -19,7 +19,9 @@ const buttonVariants = cva(
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
- primary: "bg-primary text-card"
+ primary: "bg-primary text-card",
+ darkMode:
+ "bg-gray-800 text-white hover:bg-gray-900 border border-gray-700",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 448b84e..26770ee 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -55,7 +55,7 @@ function PaginationLink({
data-active={isActive}
className={cn(
buttonVariants({
- variant: isActive ? "primary" : "ghost",
+ variant: isActive ? "darkMode" : "ghost",
size,
}),
className,
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index a0944e6..25b14c7 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -44,7 +44,7 @@ function SelectTrigger({
>
{children}
-
+
);
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..5803a5c
--- /dev/null
+++ b/src/context/ThemeContext.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface ThemeContextType {
+ darkMode: boolean;
+ toggleDarkMode: () => void;
+ mounted: boolean;
+}
+
+const ThemeContext = createContext
(undefined);
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+ const [darkMode, setDarkMode] = useState(false);
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ const stored = localStorage.getItem("theme");
+ setDarkMode(stored === "dark");
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+ localStorage.setItem("theme", darkMode ? "dark" : "light");
+ }, [darkMode, mounted]);
+
+ const toggleDarkMode = () => setDarkMode((prev) => !prev);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (!context) throw new Error("useTheme must be used within ThemeProvider");
+ return context;
+};
diff --git a/src/hooks/useDashboard.ts b/src/hooks/useDashboard.ts
index 9c7baab..09c2165 100644
--- a/src/hooks/useDashboard.ts
+++ b/src/hooks/useDashboard.ts
@@ -16,7 +16,6 @@ export const useDashboards = () => {
negative: 0,
neutral: 0,
});
- const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
async function fetchStats() {
@@ -85,8 +84,6 @@ export const useDashboards = () => {
selectedBrand,
loading,
modelData,
- darkMode,
- setDarkMode,
setSelectedBrand,
percentage,
scrollToResult,
diff --git a/src/types/index.ts b/src/types/index.ts
index 2e75582..b119c31 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -299,6 +299,7 @@ export interface ExtendedModalProps extends ProfileModalProps {
userData: any;
onOptimisticUpdate: (data: ProfileFormData) => void;
router: any;
+ darkMode: boolean;
}
export interface ProfileState {
diff --git a/src/utils/datas.ts b/src/utils/datas.ts
index c6b615c..939ca7e 100644
--- a/src/utils/datas.ts
+++ b/src/utils/datas.ts
@@ -19,11 +19,11 @@ export const setWordCloud = ({ maxValue, minValue }: WordCloudConfig) => {
const getColor = (sentiment: WordItem["sentiment"]) => {
switch (sentiment) {
case "POSITIVE":
- return "text-sentiment-positive hover:bg-sentiment-positive-light";
+ return "text-sentiment-positive hover:bg-sentiment-positive/10";
case "NEGATIVE":
- return "text-sentiment-negative hover:bg-sentiment-negative-light";
+ return "text-sentiment-negative hover:bg-sentiment-negative/10";
case "NEUTRAL":
- return "text-sentiment-neutral hover:bg-sentiment-neutral-light";
+ return "text-sentiment-neutral hover:bg-sentiment-neutral/10";
default:
return "hover:bg-primary hover:text-card";
}