refactor: use tailwind utils for theme change

shootermv · Nov 11, 2024 · c050dbb · c050dbb
1 parent e548cfc
commit c050dbb
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -13,9 +13,7 @@
   </head>
 
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
   </body>
   <script type="module" src="/src/index.tsx"></script>

diff --git a/src/Layout/Footer/Footer.css b/src/Layout/Footer/Footer.css
@@ -1,6 +1,4 @@
-footer {
-  background: var(--primary-color);
-  color: #fefefe;
+footer { 
   padding: 1.2em;
 }
 footer a:visited {

diff --git a/src/Layout/Footer/Footer.tsx b/src/Layout/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import "./Footer.css";
 export default function Footer() {
   return (
-    <footer>
+    <footer className="bg-primary text-secondary">
       made by{" "}
       <a
         href="https://gs500coder.blogspot.com"

diff --git a/src/styles.css b/src/styles.css
@@ -14,15 +14,23 @@ body,
 }
 :root {
   --primary-color: #04aa6d;
+  --secondary: #fefefe;
   --header-footer-bg-color: #04aa6d;
   --header-footer-font-color: #fff;
   --secondary-color: #333;
   --secondary-text-color: #333;
   --font-color: #000;
   --bg-color: #fff;
   --secondary-bg-color: #eee;
+
+}
+[data-theme="light"] {
+  --primary: #04aa6d;
+  --secondary: #fefefe;
 }
 [data-theme="dark"] {
+  --primary: #9a97f3;
+  --secondary: #fefefe;
   --primary-color: #9a97f3;
   --header-footer-bg-color: #9a97f3;
   --header-footer-font-color: #fff;
@@ -32,6 +40,12 @@ body,
   --bg-color: #161625;
   --secondary-bg-color: #818cab;
 }
+.light{
+  --primary: #04aa6d;
+}
+.dark{
+  --primary: #9a97f3;
+}
 .MainWrap {
   flex: 1;
   display: flex;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,19 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: ["selector", '[data-mode="dark"]'],
   theme: {
     extend: {
-      colors: {},
+      colors: {
+        ...colors,
+        primary: {
+          DEFAULT: "var(--primary)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+        },
+      },
     },
   },
   plugins: [],