fix(): Update theme.

.storybook/preview-head.html

@@ -3,7 +3,7 @@
 
 <!-- Or you can load custom head-tag JavaScript: -->
 
- <script
+<script
   src="dist/src/utils/syncTheme.js"
   type="application/javascript"
 ></script>

package.json

@@ -79,6 +79,7 @@
     "serve": "^14.2.1",
     "sonner": "^1.4.1",
     "storybook": "^7.6.5",
+    "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7"
   },
   "dependencies": {

src/tailwindTheme.ts

@@ -2,7 +2,7 @@ import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import animate from "tailwindcss-animate";
 export const tailwindTheme = {
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ['selector', '[data-theme="dark"]'],
   theme: {
     container: {
       center: true,

src/tokens.css

@@ -36,23 +36,23 @@
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
 
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
+  --card: var(--background);
+  --card-foreground: var(--foreground);
 
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
 
-  --primary: 0 0% 98%;
+  --primary: var(--foreground);
   --primary-foreground: 240 5.9% 10%;
 
   --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
+  --secondary-foreground: var(--foreground);
 
-  --muted: 240 3.7% 15.9%;
+  --muted: var(--secondary);
   --muted-foreground: 240 5% 64.9%;
 
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
+  --accent: var(--secondary);
+  --accent-foreground: var(--foreground);
 
   --destructive: 0 84% 60%;
   --destructive-foreground: 240 10% 3.9%;

src/utils/syncTheme.ts

@@ -2,7 +2,6 @@ import { subscribeToTheme } from "./darkMode"
 
 // This script sets up event listeners to set the appropriate css class in the DOM for the current theme. It's intended to be executed in the head of the document hence it is immediately invoked (IIFE).
 (() =>  {
-
     subscribeToTheme(({isDark}) => {
         document.body.setAttribute("data-theme",  isDark ? "dark" : 'light') 
     })

stories/shadcn/button.stories.tsx

@@ -8,5 +8,5 @@ const meta: Meta<typeof Button> = {
 export default meta;
 
 export const Default: StoryObj<typeof Button> = {
-  args: { children: "Button Text", variant: "destructive" },
+  args: { children: "Button Text", variant: "default" },
 };

tailwind.config.ts

@@ -1,6 +1,7 @@
 import { Config } from "tailwindcss";
 import { tailwindTheme } from "./src";
 export default {
+  darkMode: ['selector', '[data-theme="dark"]'],
   content: ["./src/**/*.{ts,tsx}", "./stories/**/*.{ts,tsx}"],
   presets: [tailwindTheme],
 } satisfies Config;