feat(theme): Add automatic dark mode support

Author: ChernegaSergiy

styles/Converter.module.css

@@ -1,10 +1,10 @@
 .container {
-    background: #ffffff;
-    border: 4px solid #1a1a1a;
+    background: var(--background-container);
+    border: 4px solid var(--border-primary);
     padding: 30px;
     max-width: 800px;
     width: 100%;
-    box-shadow: 8px 8px 0px #1a1a1a;
+    box-shadow: 8px 8px 0px var(--shadow-primary);
 }
 
 .title {

styles/Examples.module.css

@@ -1,6 +1,6 @@
 .examples {
-    background: #f0f0f0;
-    border: 3px solid #1a1a1a;
+    background: var(--background-secondary);
+    border: 3px solid var(--border-primary);
     padding: 25px;
     margin-top: 25px;
 }
@@ -18,8 +18,8 @@
     font-size: 0.9rem;
     font-weight: bold;
     padding: 8px;
-    background: #ffffff;
-    border-left: 4px solid #1a1a1a;
+    background: var(--background-container);
+    border-left: 4px solid var(--border-primary);
     line-height: 1.4;
 }
 
@@ -36,4 +36,4 @@
     .exampleItem {
         font-size: 0.8rem;
     }
-}
+}

styles/Form.module.css

@@ -30,22 +30,22 @@
 .inputField input, .baseField select, .baseField input {
     width: 100%;
     padding: 12px;
-    border: 3px solid #1a1a1a;
+    border: 3px solid var(--border-primary);
     font-size: 16px;
-    background: #ffffff;
-    color: #1a1a1a;
+    background: var(--background-container);
+    color: var(--text-primary);
     font-family: 'Ubuntu Sans Mono', monospace;
 }
 
 .inputField input:focus, .baseField input:focus, .baseField select:focus {
     outline: none;
-    background: #f0f0f0;
-    border-color: #000;
+    background: var(--background-input-focus);
+    border-color: var(--border-primary);
 }
 
 .convertBtn {
-    background: #1a1a1a;
-    color: #ffffff;
+    background: var(--background-primary-accent);
+    color: var(--text-inverted);
     border: none;
     padding: 16px 30px;
     font-size: 16px;
@@ -62,9 +62,9 @@
 }
 
 .convertBtn:hover {
-    background: #333;
+    background: var(--background-primary-accent-hover);
     transform: translate(-2px, -2px);
-    box-shadow: 4px 4px 0px #1a1a1a;
+    box-shadow: 4px 4px 0px var(--shadow-primary);
 }
 
 .convertBtn:active {
@@ -102,6 +102,6 @@
 .baseField input:-webkit-autofill:hover,
 .baseField input:-webkit-autofill:focus,
 .baseField input:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 30px #e9e9e9 inset !important;
-    -webkit-text-fill-color: #1a1a1a !important;
-}
+    -webkit-box-shadow: 0 0 0 30px var(--background-autofill) inset !important;
+    -webkit-text-fill-color: var(--text-primary) !important;
+}

styles/Result.module.css

@@ -1,6 +1,6 @@
 .resultSection {
-    background: #f8f8f8;
-    border: 3px solid #1a1a1a;
+    background: var(--background-tertiary);
+    border: 3px solid var(--border-primary);
     padding: 25px;
     margin-top: 20px;
     text-align: center;
@@ -11,17 +11,17 @@
     font-weight: bold;
     margin: 15px 0;
     word-break: break-all;
-    background: #1a1a1a;
-    color: #ffffff;
+    background: var(--background-primary-accent);
+    color: var(--text-inverted);
     padding: 12px;
-    border: 2px solid #1a1a1a;
+    border: 2px solid var(--border-primary);
     overflow-wrap: break-word;
 }
 
 .error {
-    background: #ffffff;
-    border: 3px solid #d32f2f;
-    color: #d32f2f;
+    background: var(--background-container);
+    border: 3px solid var(--color-error);
+    color: var(--color-error);
     padding: 15px;
     margin: 15px 0;
     text-align: center;
@@ -52,4 +52,4 @@
         font-size: 1.5rem;
         margin: 10px 0;
     }
-}
+}

styles/Steps.module.css

@@ -1,6 +1,6 @@
 .stepsSection {
-    background: #f8f8f8;
-    border: 3px solid #1a1a1a;
+    background: var(--background-tertiary);
+    border: 3px solid var(--border-primary);
     padding: 20px;
     margin-top: 20px;
 }
@@ -17,8 +17,8 @@
 .step {
     margin: 15px 0;
     padding: 15px;
-    background: #ffffff;
-    border: 2px solid #1a1a1a;
+    background: var(--background-container);
+    border: 2px solid var(--border-primary);
     font-size: 0.95rem;
     line-height: 1.5;
     transition: opacity 0.3s ease-in-out;
@@ -31,7 +31,7 @@
 .stepTitle {
     font-weight: bold;
     margin-bottom: 8px;
-    color: #1a1a1a;
+    color: var(--text-primary);
     text-transform: uppercase;
     font-size: 0.9rem;
     letter-spacing: 0.5px;
@@ -45,7 +45,7 @@
 .toggleSteps {
     background: none;
     border: none;
-    color: #1a1a1a;
+    color: var(--text-primary);
     text-decoration: underline;
     cursor: pointer;
     font-size: 0.9rem;
@@ -55,12 +55,12 @@
 }
 
 .toggleSteps:hover {
-    color: #333;
+    color: var(--background-primary-accent-hover);
 }
 
 @media (max-width: 768px) {
     .step {
         padding: 10px;
         font-size: 0.85rem;
     }
-}
+}

styles/globals.css

@@ -5,9 +5,43 @@
     font-family: 'Ubuntu Sans Mono', monospace;
 }
 
+:root {
+    --background-body: #f5f5f5;
+    --text-primary: #1a1a1a;
+    --text-inverted: #ffffff;
+    --background-container: #ffffff;
+    --background-secondary: #f0f0f0;
+    --background-tertiary: #f8f8f8;
+    --border-primary: #1a1a1a;
+    --background-primary-accent: #1a1a1a;
+    --background-primary-accent-hover: #333333;
+    --background-input-focus: #f0f0f0;
+    --background-autofill: #e9e9e9;
+    --color-error: #d32f2f;
+    --shadow-primary: #1a1a1a;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-body: #1c1c1c;
+        --text-primary: #f0f0f0;
+        --text-inverted: #1a1a1a;
+        --background-container: #2a2a2a;
+        --background-secondary: #3a3a3a;
+        --background-tertiary: #252525;
+        --border-primary: #f0f0f0;
+        --background-primary-accent: #f0f0f0;
+        --background-primary-accent-hover: #cccccc;
+        --background-input-focus: #3a3a3a;
+        --background-autofill: #4a4a4a;
+        --color-error: #ff6b6b;
+        --shadow-primary: #f0f0f0;
+    }
+}
+
 body {
-    background-color: #f5f5f5;
-    color: #1a1a1a;
+    background-color: var(--background-body);
+    color: var(--text-primary);
     min-height: 100vh;
     display: flex;
     align-items: center;
@@ -19,4 +53,4 @@ body {
     body {
         padding: 10px;
     }
-}
+}