diff --git a/src/style.css b/src/style.css
index b5c61c95..2c25f20c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --text-main: #333;
+    --text-secondary: #4b525d;
+    --bg-card: #fff;
+    --bg-active: #fbfbfc;
+    --bg-hover: #eee;
+  }
+
+  html.dark {
+    --text-main: #f7f7f7;
+    --text-secondary: #6f6e84;
+    --bg-card: #28334e;
+    --bg-active: #242b40;
+    --bg-hover: #303044;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e50eb1c7..bbade89b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,12 +5,15 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        main: '#5973fe',
         yes: '#3fb68b',
         no: '#ff5353',
         info: '#00b2ff',
-        textMain: '#333',
         primary: '#666cff',
+        main: 'var(--text-main)',
+        secondary: 'var(--text-secondary)',
+        card: 'var(--bg-card)',
+        hover: 'var(--bg-hover)',
+        active: 'var(--bg-active)',
       },
     },
   },