From 644ce5453f8274c5f548c6d957d4d9ded3f87f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AC=B8=EC=A7=84=ED=98=81?= <octopus121@naver.com>
Date: Thu, 21 May 2026 12:27:41 +0900
Subject: [PATCH] =?UTF-8?q?#648=20=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=97=90=EB=94=94=ED=84=B0=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 다크모드 배경색을 프로그래머스와 유사한 톤(#263238)으로 변경
- 문제 본문 텍스트 색상이 하드코딩(#111111)되어 다크모드에서도
  검게 보이던 문제를 CSS 변수(--ps-content-text-color)로 수정
- 코드 에디터(ayu-mirage 테마) 배경색을 좌측 패널과 통일하여
  전체적으로 일관된 다크모드 UI 제공
---
 frontend/src/pages/oj/App.vue                    | 16 ++++++++--------
 .../problemSolvingComponent/CodeEditor.vue       | 10 ++++++++++
 .../ProblemDetailFlexibleContainer.vue           |  2 +-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/oj/App.vue b/frontend/src/pages/oj/App.vue
index 2a3dbbd6..baf44bb3 100644
--- a/frontend/src/pages/oj/App.vue
+++ b/frontend/src/pages/oj/App.vue
@@ -167,15 +167,15 @@ h1.main-title {
 
 :root.dark.problem {
   /* Problem Solving Page */
-  --ps-background-color: #181c25;
+  --ps-background-color: #263238;
   /* Problem Solving Page - Inner Content */
-  --ps-content-color: #1f2430;
-  --ps-content-text-color: #b2c0cc;
+  --ps-content-color: #2e3c43;
+  --ps-content-text-color: #ececec;
   --ps-content-title-color: #ffffff;
-  --ps-content-pre-background-color: #1a1f29;
-  --ps-content-pre-border-color: rgba(140, 140, 140, 0.29);
-  --ps-content-code-background-color: #1b212c;
-  --ps-content-code-text-color: #ffffff;
+  --ps-content-pre-background-color: #233038;
+  --ps-content-pre-border-color: rgba(160, 160, 160, 0.2);
+  --ps-content-code-background-color: #1e2a30;
+  --ps-content-code-text-color: #ececec;
   /* Code Submission */
   --submit-btn-color: #343f5a;
   --submit-btn-hover-color: #364361;
@@ -213,7 +213,7 @@ h1.main-title {
   --ai-assistant-close-hover-text-color: #ffffff;
   --ai-assistant-error-text-color: #ff9e9e;
 
-  --bg-color: #1f2430;
+  --bg-color: #263238;
   --text-color: #ffffff;
   --difficulty-color: #5a6885;
   --custom-btn-hover-color: #465477;
diff --git a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
index 44ddd534..30d92292 100644
--- a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
+++ b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
@@ -210,6 +210,16 @@ export default {
   border: 1px solid var(--border-color);
 }
 
+.cm-s-ayu-mirage.CodeMirror,
+.cm-s-ayu-mirage .CodeMirror-scroll {
+  background-color: #2e3c43 !important;
+}
+
+.cm-s-ayu-mirage .CodeMirror-gutters {
+  background-color: #263238 !important;
+  border-right: 1px solid rgba(160, 160, 160, 0.15) !important;
+}
+
 .cm-s-ayu-mirage .CodeMirror-matchingbracket {
   text-decoration: none !important;
   color: white !important;
diff --git a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
index 1462a331..794c8e5f 100644
--- a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
+++ b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
@@ -421,7 +421,7 @@ export default defineComponent({
       font-weight: 400;
       line-height: 1.6;
       letter-spacing: 0.01em;
-      color: #111111 !important;
+      color: var(--ps-content-text-color) !important;
     }
 
     .sample {