style: dark mode using CSS custom properties

src/pages/help/Help.module.scss

@@ -3,7 +3,7 @@
 .container {
   width: 100%;
   min-height: 100vh;
-  background-color: $bg-white;
+  background-color: var(--color-bg);
   display: flex;
   flex-direction: column;
 }
@@ -34,13 +34,13 @@
 .heroTitle {
   font-size: $font-4xl;
   font-weight: $font-bold;
-  color: $black;
+  color: var(--color-text);
   margin-bottom: 12px;
 }
 
 .heroDesc {
   font-size: $font-lg;
-  color: $gray-5;
+  color: var(--color-text-secondary);
 }
 
 .categoryBlock {
@@ -54,7 +54,7 @@
 .categoryTitle {
   font-size: $font-2xl;
   font-weight: $font-bold;
-  color: $black;
+  color: var(--color-text);
   margin-bottom: 32px;
   padding-bottom: 16px;
   border-bottom: 2px solid $blue-7;
@@ -77,7 +77,7 @@
   border-radius: 50%;
   border: none;
   cursor: pointer;
-  background-color: $bg-white;
+  background-color: var(--color-bg);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   padding: 0;
   overflow: hidden;

src/pages/help/components/HelpSection.module.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   gap: 20px;
   padding-bottom: 64px;
-  border-bottom: 1px solid $gray-1;
+  border-bottom: 1px solid var(--color-border);
 
   &:last-child {
     border-bottom: none;
@@ -16,7 +16,7 @@
 .title {
   font-size: $font-xl;
   font-weight: $font-bold;
-  color: $black;
+  color: var(--color-text);
   line-height: 1.4;
 }
 
@@ -35,7 +35,7 @@
   min-width: 0;
   border-radius: $radius-4;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid $gray-1;
+  border: 1px solid var(--color-border);
   width: 100%;
   height: auto;
   display: block;
@@ -45,6 +45,6 @@
 .description {
   font-size: $font-md;
   font-weight: $font-regular;
-  color: $gray-6;
+  color: var(--color-text-muted);
   line-height: 1.75;
 }

src/pages/help/components/HelpSidebar.module.scss

@@ -8,7 +8,7 @@
   height: calc(100vh - 72px);
   overflow-y: auto;
   padding: 40px 0;
-  border-right: 1px solid $gray-1;
+  border-right: 1px solid var(--color-border);
 }
 
 .nav {
@@ -26,7 +26,7 @@
 .navCategory {
   font-size: $font-xs;
   font-weight: $font-bold;
-  color: $gray-4;
+  color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   padding: 0 24px;
@@ -49,14 +49,14 @@
   cursor: pointer;
   font-size: $font-sm;
   font-weight: $font-regular;
-  color: $gray-5;
+  color: var(--color-text-secondary);
   padding: 8px 24px;
   border-radius: 0;
   transition: color 0.15s ease, background-color 0.15s ease;
 
   &:hover {
-    color: $black;
-    background-color: $gray-1;
+    color: var(--color-text);
+    background-color: var(--color-border);
   }
 
   &.active {
@@ -79,8 +79,8 @@
     height: calc(100vh - 60px);
     width: 280px;
     min-width: 280px;
-    background-color: $bg-white;
-    border-right: 1px solid $gray-1;
+    background-color: var(--color-bg);
+    border-right: 1px solid var(--color-border);
     transform: translateX(-100%);
     transition: transform 0.25s ease;
     display: block;

src/pages/landing/Landing.module.scss

@@ -1,7 +1,7 @@
 .container {
   width: 100%;
   min-height: 100vh;
-  background-color: $bg-white;
+  background-color: var(--color-bg);
 }
 
 .mainContainer {

src/shared/navbar/Navbar.module.scss

@@ -3,13 +3,13 @@
   position: fixed;
   z-index: 100;
   width: 100%;
-  background-color: $bg-white;
+  background-color: var(--color-bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 24px;
   height: 60px;
-  border-bottom: 1px solid $gray-1;
+  border-bottom: 1px solid var(--color-border);
 
   .logoBox {
     display: flex;
@@ -25,15 +25,15 @@
   .logoTitle {
     font-size: $font-xl;
     font-weight: $font-bold;
-    color: $black;
+    color: var(--color-text);
   }
 
   .navLinks {
     display: flex;
     gap: 24px;
     font-size: $font-md;
     font-weight: $font-medium;
-    color: $black;
+    color: var(--color-text);
 
     div {
       cursor: pointer;
@@ -82,7 +82,7 @@
     background: none;
     border: none;
     cursor: pointer;
-    color: $black;
+    color: var(--color-text);
     padding: 4px;
     line-height: 0;
   }
@@ -129,19 +129,19 @@
       left: 0;
       right: 0;
       z-index: 99;
-      background-color: $bg-white;
-      border-bottom: 1px solid $gray-1;
+      background-color: var(--color-bg);
+      border-bottom: 1px solid var(--color-border);
       padding: 8px 0;
 
       div {
         font-size: $font-md;
         font-weight: $font-medium;
-        color: $black;
+        color: var(--color-text);
         cursor: pointer;
         padding: 14px 24px;
 
         &:hover {
-          background-color: $gray-1;
+          background-color: var(--color-border);
         }
       }
 

src/styles/common.scss

@@ -2,6 +2,24 @@
 @use "fonts" as *;
 @use "radius" as *;
 
+:root {
+  --color-bg: #{$bg-white};
+  --color-text: #{$black};
+  --color-text-secondary: #{$gray-5};
+  --color-text-muted: #{$gray-6};
+  --color-border: #{$gray-1};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #121218;
+    --color-text: #f0f0f5;
+    --color-text-secondary: #{$gray-4};
+    --color-text-muted: #{$gray-3};
+    --color-border: #2c2c3a;
+  }
+}
+
 @font-face {
   font-family: 'Pretendard';
   src: url('../assets/fonts/PretendardVariable.ttf') format('truetype');
@@ -17,6 +35,11 @@
   box-sizing: border-box;
   font-family: 'Pretendard', sans-serif;
 }
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
 
 a, a:link, a:visited{
     color:inherit;