From d6a9298458eb1d6352f85aebd004dfb01bfff4e3 Mon Sep 17 00:00:00 2001
From: coderzhaxor <ajanuantara@gmail.com>
Date: Sat, 15 Nov 2025 13:49:30 +0700
Subject: [PATCH] fix: css dark theme mode

---
 ui/content/docs/components/tabs.mdx |  2 +-
 ui/public/trakteer/index.css        | 56 ++++++++++++++---------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/ui/content/docs/components/tabs.mdx b/ui/content/docs/components/tabs.mdx
index a068857..7db1103 100644
--- a/ui/content/docs/components/tabs.mdx
+++ b/ui/content/docs/components/tabs.mdx
@@ -45,7 +45,7 @@ bunx --bun @fydemy/ui@latest add tabs
 ```
 
 ```jsx
-<Tabs defaultValue="home">
+<Tabs defaultValue="home" className="scheme-only-dark">
   <TabsList>
     <TabsTrigger value="home">Home</TabsTrigger>
     <TabsTrigger value="profile">Profile</TabsTrigger>
diff --git a/ui/public/trakteer/index.css b/ui/public/trakteer/index.css
index 20cbe84..f26d100 100644
--- a/ui/public/trakteer/index.css
+++ b/ui/public/trakteer/index.css
@@ -29,36 +29,36 @@
   --trakteer-text-muted: #a0a0a0;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --trakteer-default: #3cd278;
-    --trakteer-default-border: #2b9555;
-    --trakteer-default-color: #f8f8f8;
-
-    --trakteer-outline: #333333;
-    --trakteer-outline-border: #666666;
-    --trakteer-outline-color: #a0a0a0;
-
-    --trakteer-destructive: #ff4757;
-    --trakteer-destructive-border: #c23342;
-    --trakteer-destructive-color: #f8f8f8;
-
-    --trakteer-dark: #fefefe;
-    --trakteer-dark-border: #333333;
-    --trakteer-dark-color: #242525;
-
-    --trakteer-bg-primary: #1a1a1a;
-    --trakteer-bg-secondary: #242424;
-
-    --trakteer-border-light: #333333;
-    --trakteer-border-medium: #444444;
-
-    --trakteer-text-primary: #fefefe;
-    --trakteer-text-secondary: #a0a0a0;
-    --trakteer-text-muted: #888888;
-  }
+
+html.dark {
+  --trakteer-default: #3cd278;
+  --trakteer-default-border: #2b9555;
+  --trakteer-default-color: #f8f8f8;
+
+  --trakteer-outline: #333333;
+  --trakteer-outline-border: #666666;
+  --trakteer-outline-color: #a0a0a0;
+
+  --trakteer-destructive: #ff4757;
+  --trakteer-destructive-border: #c23342;
+  --trakteer-destructive-color: #f8f8f8;
+
+  --trakteer-dark: #fefefe;
+  --trakteer-dark-border: #333333;
+  --trakteer-dark-color: #242525;
+
+  --trakteer-bg-primary: #1a1a1a;
+  --trakteer-bg-secondary: #242424;
+
+  --trakteer-border-light: #333333;
+  --trakteer-border-medium: #444444;
+
+  --trakteer-text-primary: #fefefe;
+  --trakteer-text-secondary: #a0a0a0;
+  --trakteer-text-muted: #888888;
 }
 
+
 [data-theme="trakteer"] {
   margin: 0;
   padding: 0;