updated dark theme

Author: ariflogs

app/global.css

@@ -53,24 +53,25 @@
   --border: #000;
   --background-image: url("/images/banner_void_2.svg");
 }
+
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
-  --background-image: url("/images/bg_void_3.png");
+  --border: #3a3a3a;
+  --background-image: url("/images/bg_void_3.svg"); /* Optional: A different image for dark mode */
 }
 
 .bg-image {

components/retroui/Checkbox.tsx

@@ -6,7 +6,7 @@ import { Check } from "lucide-react";
 const checkboxVariants = cva("border-2", {
   variants: {
     variant: {
-      default: "data-[state=checked]:bg-primary",
+      default: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ",
       outline: "",
       solid:
         "data-[state=checked]:bg-foreground data-[state=checked]:text-background",

components/retroui/Select.tsx

@@ -72,7 +72,7 @@ const SelectItem = ({
 }: SelectPrimitive.SelectItemProps) => (
   <SelectPrimitive.Item
     className={cn(
-      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary hover:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}

components/retroui/Tab.tsx

@@ -35,7 +35,7 @@ const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
   return (
     <Tab
       className={cn(
-        "px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:font-semibold focus:outline-hidden",
+        "px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-semibold focus:outline-hidden",
         className,
       )}
       {...props}

components/retroui/Tooltip.tsx

@@ -12,7 +12,7 @@ const tooltipContentVariants = cva(
     variants: {
       variant: {
         default: "bg-background text-foreground",
-        primary: "bg-primary text-foreground",
+        primary: "bg-primary text-primary-foreground",
         solid: "bg-black text-white",
       },
     },

content/docs/install/nextjs.mdx

@@ -157,22 +157,22 @@ Save your theme as CSS variables in `global.css`:
 }
 
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
+  --border: #3a3a3a;
 }
 ```
 

content/docs/install/vite.mdx

@@ -188,22 +188,22 @@ Save your theme as CSS variables in `styles.css` file:
 }
 
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
+  --border: #3a3a3a;
 }
 ```