diff --git a/apps/wr/src/app/index.tsx b/apps/wr/src/app/index.tsx
index 4cf2ad5fa..692b55ef0 100644
--- a/apps/wr/src/app/index.tsx
+++ b/apps/wr/src/app/index.tsx
@@ -1,9 +1,5 @@
 import "./styles/base.css";
 import "./styles/components.css";
-import "./styles/components-black.css";
-import "./styles/components-blue.css";
-import "./styles/components-green.css";
-import "./styles/components-red.css";
 import "@fontsource-variable/noto-sans-kr";
 
 import { AppProvider } from "./providers";
diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css
index 60549b226..fe7565b5a 100644
--- a/apps/wr/src/app/styles/components.css
+++ b/apps/wr/src/app/styles/components.css
@@ -18,7 +18,162 @@
     @apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
   }
 
-  
+  [data-theme="black"] {
+    .card {
+      color: #fff;
+      background-color: #0a0a0a !important;
+    }
+    form {
+      color: rgb(255 255 255);
+    }
+    label {
+      color: rgb(241, 241, 241);
+    }
+    input {
+      height: 3.2rem;
+      background-color: #1a1a1a;
+      border: 1px solid #262626;
+      border-radius: 4px;
+    }
+    input.text-gray-600 {
+      color: #f1f1f1;
+    }
+    button[role="combobox"] {
+      color: #f1f1f1;
+      background-color: rgb(26, 26, 26);
+    }
+    div [role="tablist"] {
+      border: unset;
+      gap: 4px;
+    }
+    .tabs-trigger[data-state="inactive"] {
+      color: #a4b7bf;
+      background: #55595d;
+    }
+    .tabs-trigger[data-state="inactive"]:hover {
+      color: #6bbaff;
+      background: #4c4f52;
+    }
+    .card-border {
+      box-shadow: 0 0 10px -1px #0000000f;
+      border: 1px solid #393939;
+    }
+    a[aria-current="page"] {
+      background-color: rgb(32, 148, 250);
+      color: #000;
+    }
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#5e7b9c] text-[#fff];
+    }
+
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
+
+    input[type="file"] {
+      background-color: #1a1a1a;
+      border-color: #262626;
+      color: #f1f1f1;
+    }
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#eaf3fb] text-[#647784];
+    }
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#ebf7f7] text-[#64908f];
+    }
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#f6f6f9] text-[#808080];
+    }
+  }
 
   input[type="file"] {
     @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;