diff --git a/docs/releases/2.0.0_en.md b/docs/releases/2.0.0_en.md
index 6520cd476..bbce029fe 100644
--- a/docs/releases/2.0.0_en.md
+++ b/docs/releases/2.0.0_en.md
@@ -9,6 +9,7 @@
   - The main toolbar, properties panel, settings, modals, popups, pickers, and minimap now share one visual and behavioral baseline.
   - The first-run default preset and the default styles for keys, knobs, graphs, stats, counters, and notes have been rebuilt.
   - Replaced the app icon.
+  - The new key design was created with inspiration from [@DominoKorean](https://github.com/DominoKorean)'s [custom CSS skins](https://github.com/DominoKorean/DM-Note-skins).
 
 - Moved settings into the Side Panel
   - Sound, font, Custom CSS, and plugin settings are managed on the current screen without a separate manager window.
@@ -54,6 +55,7 @@
   - `Combined` triggers only while all bound keys are held.
   - Keyboard, mouse, and HID buttons (Windows) can be mixed within the same slot.
   - Add or remove keys and switch the trigger mode directly in the binding popup.
+  - [@superalan89](https://github.com/superalan89) suggested [multi-key binding support](https://github.com/DmNote-App/DmNote/issues/71). 🎉
 
 ### Color, Image, and Font
 
@@ -148,6 +150,7 @@
 
 - Added Intel Mac support [Issues 125](https://github.com/DmNote-App/DmNote/issues/125)
   - macOS builds are now universal binaries, so the same DMG runs on both Intel and Apple silicon Macs.
+  - [@ByrenYan1](https://github.com/ByrenYan1) suggested [Intel Mac support](https://github.com/DmNote-App/DmNote/issues/125). 🎉
 
 - Added support for high refresh rate displays on macOS [Issues 122](https://github.com/DmNote-App/DmNote/issues/122)
   - The overlay and editing screen update more smoothly on 120Hz and faster displays.
@@ -173,6 +176,7 @@
 - Image, sound, and font files are now quarantined in a per-session trash for 30 days instead of being deleted immediately
 - Fixed half-written state after a conflict or crash by making save file replacement, asset restore, and failure rollback atomic
 - Fixed custom images on knobs disappearing after a restart [Issues 91](https://github.com/DmNote-App/DmNote/issues/91)
+  - [@superalan89](https://github.com/superalan89) reported [custom images on knobs going missing](https://github.com/DmNote-App/DmNote/issues/91). 🎉
 - Fixed an issue where older undo/redo steps revived already-deleted sound, image, counter motion, and plugin references
 
 ### Panel, Popup, and Input
@@ -193,6 +197,7 @@
 - Lowered the minimum note corner radius to 0 and changed the default `Glow Size` to 10
 - Fixed short notes disappearing abruptly or looking cut off at the display boundary
 - Reduced key event delivery latency by enabling low-latency transmission on the OBS WebSocket [Issues 72](https://github.com/DmNote-App/DmNote/issues/72)
+  - [@aigonanMTE](https://github.com/aigonanMTE) reported [key viewer stuttering in OBS mode](https://github.com/DmNote-App/DmNote/issues/72). 🎉
 
 ### Color, Image, Font, and CSS
 
@@ -205,6 +210,7 @@
 
 - Fixed plugin JavaScript failures being reported as success, and truncated error messages
 - Fixed the pressed state in the key viewer flickering every time a plugin updated its state [Issues 111](https://github.com/DmNote-App/DmNote/issues/111)
+  - [@hjg-06](https://github.com/hjg-06) contributed to [the pressed state flickering on plugin state updates](https://github.com/DmNote-App/DmNote/issues/111). 🎉
 - Fixed an exception in a plugin's `onMount` blanking the entire overlay
 - Fixed late writes from a failed or removed plugin overwriting the new run state
 - Restored compatibility for native `window` methods, async context, and existing global APIs used by plugins
@@ -217,6 +223,7 @@
 - Fixed the overlay on macOS not reaching the top of the screen and leaving empty space below it [Issues 121](https://github.com/DmNote-App/DmNote/issues/121)
   - `Snap to Edge` now measures from the screen edge instead of the work area, removing the gap left by the Dock and the taskbar
   - The track height reserved at the top is excluded from the window height when note effects are off
+  - [@AL-Pinecore](https://github.com/AL-Pinecore) contributed to [overlay placement on macOS](https://github.com/DmNote-App/DmNote/issues/121). 🎉
 - Added a quit item to the macOS app menu and stabilized Dock quit, restart, and helper process cleanup
 - macOS no longer raises the accessibility permission prompt on its own while the app is running
 - Fixed cancellations being reported as failures and the UI blocking by making file and preset dialogs async and parented to the calling window
diff --git a/docs/releases/2.0.0_ko.md b/docs/releases/2.0.0_ko.md
index 9cb62a4ac..0059af5a2 100644
--- a/docs/releases/2.0.0_ko.md
+++ b/docs/releases/2.0.0_ko.md
@@ -9,6 +9,7 @@
   - 메인 툴바, 속성 패널, 설정, 모달, 팝업, 피커, 미니맵의 디자인과 동작을 하나의 기준으로 통일했습니다.
   - 첫 실행 기본 프리셋과 키, 노브, 그래프, 통계, 카운터, 노트의 기본 스타일을 새로 구성했습니다.
   - 앱 아이콘을 교체했습니다.
+  - 신규 키 디자인은 @DominoKorean 님의 [커스텀 CSS 스킨](https://github.com/DominoKorean/DM-Note-skins)에서 영감을 받아 만들었습니다.
 
 - 설정을 사이드 패널로 이동
   - 사운드, 폰트, 커스텀 CSS, 플러그인 설정을 별도 관리 창 없이 현재 화면에서 바로 관리할 수 있습니다.
@@ -54,6 +55,7 @@
   - `동시 입력`은 등록한 키를 모두 누르고 있는 동안에만 반응합니다.
   - 키보드, 마우스, HID 버튼(Windows)을 한 슬롯 안에서 섞어 쓸 수 있습니다.
   - 매핑 팝업에서 키를 추가, 제거하고 반응 방식을 바로 선택할 수 있습니다.
+  - @superalan89 님이 [다중 키 매핑 지원](https://github.com/DmNote-App/DmNote/issues/71)을 제안해주셨습니다. 🎉
 
 ### 색상, 이미지 및 폰트
 
@@ -148,6 +150,7 @@
 
 - 인텔 맥 지원 [Issues 125](https://github.com/DmNote-App/DmNote/issues/125)
   - macOS 빌드를 유니버설 바이너리로 전환해 인텔 맥과 애플 실리콘 맥에서 같은 DMG를 사용합니다.
+  - @ByrenYan1 님이 [인텔 맥 지원](https://github.com/DmNote-App/DmNote/issues/125)을 제안해주셨습니다. 🎉
 
 - macOS 고주사율 디스플레이 지원 [Issues 122](https://github.com/DmNote-App/DmNote/issues/122)
   - 120Hz 이상 디스플레이에서 오버레이와 편집 화면이 더 부드럽게 갱신됩니다.
@@ -173,6 +176,7 @@
 - 이미지, 사운드, 폰트 파일을 즉시 삭제하지 않고 세션별 휴지통에 30일 격리하도록 변경
 - 저장 파일 교체, 자산 복원, 실패 롤백을 원자적으로 처리해 충돌이나 크래시 뒤 일부 상태만 남던 문제 수정
 - 노브에 적용한 커스텀 이미지가 재실행 후 사라지던 문제 수정 [Issues 91](https://github.com/DmNote-App/DmNote/issues/91)
+  - @superalan89 님이 [노브 커스텀 이미지 누락 문제](https://github.com/DmNote-App/DmNote/issues/91)를 제보해주셨습니다. 🎉
 - 사운드, 이미지, 카운터 모션, 플러그인 데이터를 삭제한 뒤 과거 Undo/Redo가 이미 삭제된 참조를 복원하던 문제 수정
 
 ### 패널, 팝업 및 입력
@@ -193,6 +197,7 @@
 - 노트 라운딩 최솟값을 0으로 조정하고 기본 글로우 범위를 10으로 변경
 - 짧은 노트가 표시 경계에서 갑자기 사라지거나 길이가 끊겨 보이던 문제 수정
 - OBS WebSocket에 저지연 전송 옵션을 적용해 키 이벤트 전달 지연을 줄임 [Issues 72](https://github.com/DmNote-App/DmNote/issues/72)
+  - @aigonanMTE 님이 [OBS 모드 키뷰어 끊김 문제](https://github.com/DmNote-App/DmNote/issues/72)를 제보해주셨습니다. 🎉
 
 ### 색상, 이미지, 폰트 및 CSS
 
@@ -205,6 +210,7 @@
 
 - 플러그인 JavaScript 실행 실패를 성공으로 표시하거나 오류 안내가 잘려 보이던 문제 수정
 - 플러그인이 상태를 갱신할 때마다 키뷰어의 눌림 표시가 깜빡이던 문제 수정 [Issues 111](https://github.com/DmNote-App/DmNote/issues/111)
+  - @hjg-06 님이 [플러그인 상태 갱신 시 눌림 표시 깜빡임](https://github.com/DmNote-App/DmNote/issues/111)에 기여해주셨습니다. 🎉
 - 플러그인 `onMount` 예외가 오버레이 전체를 비우던 문제 수정
 - 실패했거나 제거된 플러그인의 늦은 저장이 새 실행 상태를 덮어쓰던 문제 수정
 - 플러그인이 사용하는 `window`의 네이티브 메서드, 비동기 컨텍스트, 기존 전역 API 호환성 복구
@@ -217,6 +223,7 @@
 - macOS 오버레이가 화면 위쪽에 닿지 않고 빈 공간이 남던 문제 수정 [Issues 121](https://github.com/DmNote-App/DmNote/issues/121)
   - `화면 모서리에 맞추기` 기준을 작업 영역에서 화면 끝으로 정정해 독과 작업 표시줄 영역만큼 떠 있던 여백 제거
   - 노트 효과를 끄면 상단에 예약되던 트랙 높이를 창 높이에서 함께 제외
+  - @AL-Pinecore 님이 [macOS 오버레이 배치 문제](https://github.com/DmNote-App/DmNote/issues/121)에 기여해주셨습니다. 🎉
 - macOS 앱 메뉴에 종료 항목을 추가하고 Dock 종료, 재시작, 헬퍼 프로세스 정리 안정화
 - macOS에서 앱 실행 중 접근성 권한 요청창이 저절로 뜨지 않도록 변경
 - 파일과 프리셋 선택창을 호출한 창에 붙는 비동기 다이얼로그로 통일해, 취소를 실패로 알리거나 UI를 막던 문제 수정
diff --git a/src-tauri/src/commands/keys/keys.rs b/src-tauri/src/commands/keys/keys.rs
index 01ea3fdf0..7c3b4836a 100644
--- a/src-tauri/src/commands/keys/keys.rs
+++ b/src-tauri/src/commands/keys/keys.rs
@@ -571,7 +571,8 @@ fn keys_reset_all_inner(
                     &stat_positions,
                     &app_data_dir,
                 );
-                let settings_diff = apply_patch_to_store(store, &settings_patch);
+                let settings_diff = apply_patch_to_store(store, &settings_patch)
+                    .map_err(crate::services::settings::settings_patch_validation_error)?;
                 Ok((settings_diff, cleared_tab_css_ids))
             },
         )?;
diff --git a/src-tauri/src/commands/layout/settings.rs b/src-tauri/src/commands/layout/settings.rs
index f88382859..914a09eda 100644
--- a/src-tauri/src/commands/layout/settings.rs
+++ b/src-tauri/src/commands/layout/settings.rs
@@ -36,9 +36,8 @@ pub async fn settings_update(
                 state
                     .store
                     .commit_history_overlap_mutation_with_admission(admission, |store| {
-                        Ok(crate::services::settings::apply_patch_to_store(
-                            store, &patch,
-                        ))
+                        crate::services::settings::apply_patch_to_store(store, &patch)
+                            .map_err(crate::services::settings::settings_patch_validation_error)
                     })?;
             if let Some(previous) = previous.as_ref() {
                 state.resync_global_css_watcher(previous, &state.store.snapshot());
diff --git a/src-tauri/src/commands/preset/load.rs b/src-tauri/src/commands/preset/load.rs
index 3d442d414..615ddbaa8 100644
--- a/src-tauri/src/commands/preset/load.rs
+++ b/src-tauri/src/commands/preset/load.rs
@@ -520,7 +520,8 @@ fn preset_load_from_path(
                 }
                 rekey_full_preset_elements(store);
                 crate::state::migration::clear_dangling_group_ids(store);
-                let diff = apply_patch_to_store(store, &settings_patch);
+                let diff = apply_patch_to_store(store, &settings_patch)
+                    .map_err(crate::services::settings::settings_patch_validation_error)?;
                 Ok((
                     diff,
                     previous_tab_css_overrides,
@@ -824,7 +825,9 @@ fn preset_load_tab_from_path(
                                 ..SettingsPatchInput::default()
                             },
                         )
-                    });
+                    })
+                    .transpose()
+                    .map_err(crate::services::settings::settings_patch_validation_error)?;
                 crate::state::migration::clear_dangling_group_ids(store);
                 Ok((
                     settings_diff,
@@ -1791,6 +1794,7 @@ mod tests {
         }];
         let mut store = AppStoreData {
             custom_css_history: history.clone(),
+            ui_theme: crate::models::UiTheme::Light,
             ..AppStoreData::default()
         };
         let mut preset = PresetFile {
@@ -1802,6 +1806,8 @@ mod tests {
             ..PresetFile::default()
         };
         let resolved = resolve_full_preset_settings(&mut preset, &store);
+        let preset_wire = serde_json::to_value(&preset).expect("preset 직렬화");
+        assert!(preset_wire.get("uiTheme").is_none());
         let patch = SettingsPatchInput {
             use_custom_css: Some(resolved.use_custom_css),
             custom_css: Some(CustomCssPatch {
@@ -1811,9 +1817,10 @@ mod tests {
             ..SettingsPatchInput::default()
         };
 
-        apply_patch_to_store(&mut store, &patch);
+        apply_patch_to_store(&mut store, &patch).expect("preset 설정 적용");
 
         assert_eq!(store.custom_css_history, history);
+        assert_eq!(store.ui_theme, crate::models::UiTheme::Light);
     }
 
     #[test]
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 15a15aa3d..6889f3218 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -37,7 +37,6 @@ const INTERACTION_BENCHMARK_ENV: &str = "DMN_INTERACTION_WEBVIEW_BENCHMARK";
 // 메인 창 논리 크기 - 고정 크기이고, 분리 패널이 이 사각형을 기준으로 옆에 붙는다
 const MAIN_WINDOW_WIDTH: f64 = 902.0;
 const MAIN_WINDOW_HEIGHT: f64 = 488.0;
-
 fn is_interaction_benchmark_mode() -> bool {
     std::env::var_os(INTERACTION_BENCHMARK_ENV).is_some()
 }
@@ -595,6 +594,11 @@ fn apply_main_window_configuration(
         log::debug!("failed to hide main window before configuration: {err}");
     }
 
+    let preference = app.state::<AppState>().store.snapshot().ui_theme;
+    if let Err(err) = state::window_theme::apply_main_window_theme(&window, preference) {
+        log::warn!("failed to synchronize main window theme: {err:#}");
+    }
+
     if cfg!(target_os = "windows") {
         if let Err(err) = window.set_decorations(false) {
             log::warn!("failed to disable decorations: {err}");
diff --git a/src-tauri/src/models/mod.rs b/src-tauri/src/models/mod.rs
index dc59c88f6..a6cc4ebe5 100644
--- a/src-tauri/src/models/mod.rs
+++ b/src-tauri/src/models/mod.rs
@@ -2394,11 +2394,45 @@ pub struct LayerGroupDef {
 
 pub type LayerGroups = HashMap<String, Vec<LayerGroupDef>>;
 
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq, Default)]
+#[serde(rename_all = "lowercase")]
+pub enum UiTheme {
+    #[default]
+    System,
+    Light,
+    Dark,
+}
+
+impl TryFrom<&str> for UiTheme {
+    type Error = ();
+
+    fn try_from(value: &str) -> Result<Self, Self::Error> {
+        match value {
+            "system" => Ok(Self::System),
+            "light" => Ok(Self::Light),
+            "dark" => Ok(Self::Dark),
+            _ => Err(()),
+        }
+    }
+}
+
+impl UiTheme {
+    pub(crate) fn as_tauri_theme(self) -> Option<tauri::Theme> {
+        match self {
+            Self::System => None,
+            Self::Light => Some(tauri::Theme::Light),
+            Self::Dark => Some(tauri::Theme::Dark),
+        }
+    }
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct AppStoreData {
     pub hardware_acceleration: bool,
     pub always_on_top: bool,
+    #[serde(default)]
+    pub ui_theme: UiTheme,
     pub overlay_locked: bool,
     #[serde(default)]
     pub overlay_visible: bool,
@@ -2500,6 +2534,7 @@ impl Default for AppStoreData {
         Self {
             hardware_acceleration: true,
             always_on_top: true,
+            ui_theme: UiTheme::default(),
             overlay_locked: false,
             overlay_visible: false,
             note_effect: false,
@@ -2560,6 +2595,7 @@ impl AppStoreData {
         SettingsState {
             hardware_acceleration: self.hardware_acceleration,
             always_on_top: self.always_on_top,
+            ui_theme: self.ui_theme,
             overlay_locked: self.overlay_locked,
             note_effect: self.note_effect,
             note_settings: self.note_settings.clone(),
@@ -2820,6 +2856,8 @@ pub struct DefaultsPayload {
 pub struct SettingsState {
     pub hardware_acceleration: bool,
     pub always_on_top: bool,
+    #[serde(default)]
+    pub ui_theme: UiTheme,
     pub overlay_locked: bool,
     pub note_effect: bool,
     #[serde(default)]
@@ -2888,6 +2926,7 @@ pub struct NoteSettingsPatch {
 pub struct SettingsPatchInput {
     pub hardware_acceleration: Option<bool>,
     pub always_on_top: Option<bool>,
+    pub ui_theme: Option<String>,
     pub overlay_locked: Option<bool>,
     pub note_effect: Option<bool>,
     pub note_settings: Option<NoteSettingsPatch>,
@@ -2949,6 +2988,7 @@ impl SettingsDiff {
         [
             p.hardware_acceleration.is_some(),
             p.always_on_top.is_some(),
+            p.ui_theme.is_some(),
             p.overlay_locked.is_some(),
             p.note_effect.is_some(),
             p.note_settings.is_some(),
@@ -2984,6 +3024,8 @@ pub struct SettingsPatch {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub always_on_top: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    pub ui_theme: Option<UiTheme>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub overlay_locked: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub note_effect: Option<bool>,
diff --git a/src-tauri/src/services/settings.rs b/src-tauri/src/services/settings.rs
index abe79bd91..640dfc5fe 100644
--- a/src-tauri/src/services/settings.rs
+++ b/src-tauri/src/services/settings.rs
@@ -5,9 +5,9 @@ use anyhow::{Context, Result};
 use crate::models::{
     AppStoreData, CustomCss, CustomCssPatch, CustomJs, CustomJsPatch, FontType, NoteSettings,
     NoteSettingsPatch, SettingsDiff, SettingsPatch, SettingsPatchInput, SettingsState,
-    ShortcutsState,
+    ShortcutsState, UiTheme,
 };
-use crate::state::AppStore;
+use crate::{errors::EditorCommitError, state::AppStore};
 
 #[derive(Clone)]
 pub struct SettingsService {
@@ -28,7 +28,7 @@ impl SettingsService {
         self.store.update(|state| {
             diff = Some(apply_patch_to_store(state, &patch));
         })?;
-        diff.context("settings patch did not produce a diff")
+        diff.context("settings patch did not produce a diff")?
     }
 }
 
@@ -36,16 +36,21 @@ pub(crate) fn settings_from_store(store: &AppStoreData) -> SettingsState {
     store.settings_state()
 }
 
+pub(crate) fn settings_patch_validation_error(error: anyhow::Error) -> EditorCommitError {
+    EditorCommitError::validation("INVALID_SETTINGS_PATCH", error.to_string())
+}
+
 pub(crate) fn apply_patch_to_store(
     store: &mut AppStoreData,
     patch: &SettingsPatchInput,
-) -> SettingsDiff {
+) -> Result<SettingsDiff> {
     let current = settings_from_store(store);
-    let normalized = normalize_patch(patch, &current);
+    let normalized = normalize_patch(patch, &current)?;
     let next = apply_changes(current, &normalized);
 
     store.hardware_acceleration = next.hardware_acceleration;
     store.always_on_top = next.always_on_top;
+    store.ui_theme = next.ui_theme;
     store.overlay_locked = next.overlay_locked;
     store.note_effect = next.note_effect;
     store.note_settings = next.note_settings.clone();
@@ -67,13 +72,13 @@ pub(crate) fn apply_patch_to_store(
     store.shortcuts = next.shortcuts.clone();
     store.obs_mode_enabled = next.obs_mode_enabled;
 
-    SettingsDiff {
+    Ok(SettingsDiff {
         changed: normalized,
         full: Some(next),
-    }
+    })
 }
 
-fn normalize_patch(patch: &SettingsPatchInput, current: &SettingsState) -> SettingsPatch {
+fn normalize_patch(patch: &SettingsPatchInput, current: &SettingsState) -> Result<SettingsPatch> {
     let mut normalized = SettingsPatch::default();
     if let Some(value) = patch.hardware_acceleration {
         normalized.hardware_acceleration = Some(value);
@@ -81,6 +86,12 @@ fn normalize_patch(patch: &SettingsPatchInput, current: &SettingsState) -> Setti
     if let Some(value) = patch.always_on_top {
         normalized.always_on_top = Some(value);
     }
+    if let Some(value) = patch.ui_theme.as_deref() {
+        normalized.ui_theme = Some(
+            UiTheme::try_from(value)
+                .map_err(|()| anyhow::anyhow!("invalid uiTheme value: {value}"))?,
+        );
+    }
     if let Some(value) = patch.overlay_locked {
         normalized.overlay_locked = Some(value);
     }
@@ -195,7 +206,7 @@ fn normalize_patch(patch: &SettingsPatchInput, current: &SettingsState) -> Setti
     if let Some(value) = patch.obs_mode_enabled {
         normalized.obs_mode_enabled = Some(value);
     }
-    normalized
+    Ok(normalized)
 }
 
 fn apply_changes(mut current: SettingsState, patch: &SettingsPatch) -> SettingsState {
@@ -205,6 +216,9 @@ fn apply_changes(mut current: SettingsState, patch: &SettingsPatch) -> SettingsS
     if let Some(value) = patch.always_on_top {
         current.always_on_top = value;
     }
+    if let Some(value) = patch.ui_theme {
+        current.ui_theme = value;
+    }
     if let Some(value) = patch.overlay_locked {
         current.overlay_locked = value;
     }
@@ -350,6 +364,7 @@ mod tests {
 
         assert!(d.hardware_acceleration);
         assert!(d.always_on_top);
+        assert_eq!(d.ui_theme, UiTheme::System);
         assert!(!d.overlay_locked);
         assert!(!d.note_effect);
         if cfg!(target_os = "macos") {
@@ -499,6 +514,7 @@ mod tests {
         let expected_a = SettingsState {
             hardware_acceleration: false,
             always_on_top: false,
+            ui_theme: UiTheme::Light,
             overlay_locked: true,
             note_effect: true,
             note_settings: expected_note.clone(),
@@ -531,6 +547,7 @@ mod tests {
         let patch_a = SettingsPatchInput {
             hardware_acceleration: Some(false),
             always_on_top: Some(false),
+            ui_theme: Some("light".to_string()),
             overlay_locked: Some(true),
             note_effect: Some(true),
             note_settings: Some(NoteSettingsPatch {
@@ -579,13 +596,14 @@ mod tests {
         };
 
         let mut store = AppStoreData::default();
-        let diff_a = apply_patch_to_store(&mut store, &patch_a);
+        let diff_a = apply_patch_to_store(&mut store, &patch_a).expect("첫 patch 적용");
         assert_eq!(diff_a.full.expect("full snapshot 반환"), expected_a);
         assert_eq!(settings_from_store(&store), expected_a);
 
         // 같은 기본값을 공유하는 bool 쌍이 서로 반대가 되도록 절반만 반전
         let patch_b = SettingsPatchInput {
             always_on_top: Some(true),
+            ui_theme: Some("dark".to_string()),
             note_effect: Some(false),
             developer_mode_enabled: Some(false),
             auto_update_enabled: Some(true),
@@ -595,6 +613,7 @@ mod tests {
         };
         let expected_b = SettingsState {
             always_on_top: true,
+            ui_theme: UiTheme::Dark,
             note_effect: false,
             developer_mode_enabled: false,
             auto_update_enabled: true,
@@ -603,8 +622,8 @@ mod tests {
             ..expected_a
         };
 
-        let diff_b = apply_patch_to_store(&mut store, &patch_b);
-        assert_eq!(diff_b.changed_count(), 6);
+        let diff_b = apply_patch_to_store(&mut store, &patch_b).expect("두 번째 patch 적용");
+        assert_eq!(diff_b.changed_count(), 7);
         assert_eq!(diff_b.full.expect("full snapshot 반환"), expected_b);
         assert_eq!(settings_from_store(&store), expected_b);
         // 교차 매핑 검출 핵심 쌍, use_custom_css와 use_custom_js가 서로 반대
@@ -619,7 +638,8 @@ mod tests {
         let from_empty_store = settings_from_store(&AppStoreData::default());
 
         let mut store = AppStoreData::default();
-        let diff = apply_patch_to_store(&mut store, &SettingsPatchInput::default());
+        let diff = apply_patch_to_store(&mut store, &SettingsPatchInput::default())
+            .expect("빈 patch 적용");
         assert_eq!(diff.changed_count(), 0);
         let from_empty_patch = diff.full.expect("빈 patch도 full snapshot 반환");
 
@@ -628,4 +648,37 @@ mod tests {
         // 빈 patch가 store 기본값을 변경하지 않음
         assert_eq!(settings_from_store(&store), from_default);
     }
+
+    #[test]
+    fn unknown_ui_theme_is_rejected_without_mutating_store() {
+        let mut store = AppStoreData::default();
+        let before = store.clone();
+        let patch = SettingsPatchInput {
+            ui_theme: Some("neon".to_string()),
+            ..SettingsPatchInput::default()
+        };
+
+        let error = apply_patch_to_store(&mut store, &patch).expect_err("미지 테마 거절");
+
+        assert!(error.to_string().contains("invalid uiTheme value: neon"));
+        assert_eq!(store, before);
+    }
+
+    #[test]
+    fn ui_theme_uses_camel_case_in_settings_payloads() {
+        let mut store = AppStoreData::default();
+        let diff = apply_patch_to_store(
+            &mut store,
+            &SettingsPatchInput {
+                ui_theme: Some("light".to_string()),
+                ..SettingsPatchInput::default()
+            },
+        )
+        .expect("테마 patch 적용");
+
+        let wire = serde_json::to_value(diff).expect("설정 diff 직렬화");
+        assert_eq!(wire["changed"]["uiTheme"], "light");
+        assert_eq!(wire["full"]["uiTheme"], "light");
+        assert!(wire["changed"].get("ui_theme").is_none());
+    }
 }
diff --git a/src-tauri/src/state/app_state.rs b/src-tauri/src/state/app_state.rs
index 67fd8353c..27a423b83 100644
--- a/src-tauri/src/state/app_state.rs
+++ b/src-tauri/src/state/app_state.rs
@@ -48,7 +48,7 @@ use crate::{
         CommittedEditorChange, DefaultsPayload, EditorCommitRequest, GestureCommitRequest,
         HistoryStatus, KeyCounterSettings, KeyCounters, KeyMappings, KeyPositions, KeySlot,
         KeySoundOutputBackendPersist, OverlayBounds, OverlayResizeAnchor, PanelBounds,
-        SettingsDiff, SettingsState, TabCssOverrides,
+        SettingsDiff, SettingsState, TabCssOverrides, UiTheme,
     },
     services::{
         css_watcher::CssWatcher,
@@ -1341,7 +1341,7 @@ impl AppState {
     fn attach_main_window_handlers(&self, app: &AppHandle) {
         let overlay_force_close = self.overlay_force_close.clone();
         if let Some(window) = app.get_webview_window("main") {
-            attach_main_window_close_handler(window, overlay_force_close, app.clone());
+            attach_main_window_event_handler(window, overlay_force_close, app.clone());
             return;
         }
 
@@ -1350,7 +1350,7 @@ impl AppState {
         thread::spawn(move || {
             for _ in 0..15 {
                 if let Some(window) = app_handle.get_webview_window("main") {
-                    attach_main_window_close_handler(
+                    attach_main_window_event_handler(
                         window,
                         overlay_force_close.clone(),
                         app_handle.clone(),
@@ -3607,6 +3607,10 @@ impl AppState {
         let snapshot = self.store.snapshot();
         let stored_bounds = snapshot.panel_bounds;
         let layout = resolve_panel_window_layout(stored_bounds, main_rect, monitors, None);
+        let native_theme = app
+            .get_webview_window("main")
+            .and_then(|window| window.theme().ok());
+        let resolved_theme = super::window_theme::resolve_theme(snapshot.ui_theme, native_theme);
 
         // about:blank는 runtime-wry가 초기 네비게이션을 건너뛴다 - opener가 문서를 채우고,
         // WebView2의 "NewWindow는 네비게이션 전이어야 함" 요건도 이걸로 맞는다.
@@ -3636,6 +3640,7 @@ impl AppState {
         // (유틸리티 패널 관례 - 버튼이 첫 클릭에 바로 동작)
         .accept_first_mouse(true)
         .visible(false)
+        .theme(snapshot.ui_theme.as_tauri_theme())
         .inner_size(PANEL_WIDTH, layout.height)
         .min_inner_size(PANEL_WIDTH, layout.min_height)
         .max_inner_size(PANEL_WIDTH, layout.max_height)
@@ -3645,7 +3650,8 @@ impl AppState {
         // 이미 내비게이션이 시작된 뒤라 늦다. 실제 색은 렌더러가 토큰을 읽어 덮는다
         #[cfg(target_os = "windows")]
         {
-            builder = builder.background_color(super::windows_window_corners::SEED_FILL);
+            builder =
+                builder.background_color(super::windows_window_corners::seed_fill(resolved_theme));
         }
 
         if let Some(position) = layout.position {
@@ -3671,7 +3677,7 @@ impl AppState {
             }
         }
 
-        self.configure_panel_window(&window, app, layout.max_height);
+        self.configure_panel_window(&window, app, layout.max_height, resolved_theme);
         Ok(window)
     }
 
@@ -3680,6 +3686,7 @@ impl AppState {
         window: &WebviewWindow,
         app: &AppHandle,
         initial_max_height: f64,
+        _resolved_theme: tauri::Theme,
     ) {
         // 웹 콘텐츠가 그리는 라운딩은 리사이즈 프레임을 못 따라옴 - 실루엣은 컴포지터가 소유
         #[cfg(target_os = "macos")]
@@ -3687,7 +3694,7 @@ impl AppState {
         // Windows는 DWM이 이미 자기 반경으로 자르고 있어 웹 라운딩과 어긋난다 - 반경 지정이
         // 불가능하므로 실루엣을 DWM에 넘기고 웹은 사각으로 채운다 (메인 창과 같은 처리)
         #[cfg(target_os = "windows")]
-        super::windows_window_corners::apply_initial_chrome(window);
+        super::windows_window_corners::apply_initial_chrome(window, _resolved_theme);
 
         let bounds_session = self
             .panel_bounds_persistence
@@ -4073,6 +4080,19 @@ impl AppState {
         // 오버레이가 보이는 상태일 때만 설정 적용
         let is_visible = *self.overlay_visible.read();
 
+        if let Some(value) = diff.changed.ui_theme {
+            if let Some(window) = app.get_webview_window("main") {
+                if let Err(err) = super::window_theme::apply_main_window_theme(&window, value) {
+                    log::warn!("failed to synchronize main window theme: {err:#}");
+                }
+            }
+            if let Some(window) = app.get_webview_window(PANEL_LABEL) {
+                if let Err(err) = window.set_theme(value.as_tauri_theme()) {
+                    log::warn!("failed to apply panel window theme: {err}");
+                }
+            }
+        }
+
         if let Some(value) = diff.changed.always_on_top {
             if is_visible {
                 if let Some(window) = app.get_webview_window(OVERLAY_LABEL) {
@@ -5139,7 +5159,7 @@ mod output_backend_tests {
     }
 }
 
-fn attach_main_window_close_handler(
+fn attach_main_window_event_handler(
     window: WebviewWindow,
     overlay_force_close: Arc<AtomicBool>,
     app_handle: AppHandle,
@@ -5153,8 +5173,17 @@ fn attach_main_window_close_handler(
     }
 
     let main_window = window.clone();
-    window.on_window_event(move |event| {
-        if let WindowEvent::CloseRequested { api, .. } = event {
+    window.on_window_event(move |event| match event {
+        WindowEvent::ThemeChanged(theme)
+            if app_handle.state::<AppState>().store.snapshot().ui_theme == UiTheme::System =>
+        {
+            if let Err(err) =
+                super::window_theme::apply_main_window_background(&main_window, *theme)
+            {
+                log::warn!("failed to follow system theme for main window: {err:#}");
+            }
+        }
+        WindowEvent::CloseRequested { api, .. } => {
             if overlay_force_close.load(Ordering::SeqCst) {
                 return;
             }
@@ -5179,6 +5208,7 @@ fn attach_main_window_close_handler(
             api.prevent_close();
             state.request_frontend_shutdown(app_handle.clone());
         }
+        _ => {}
     });
 }
 
diff --git a/src-tauri/src/state/mod.rs b/src-tauri/src/state/mod.rs
index 8fe9092c7..890ffc8da 100644
--- a/src-tauri/src/state/mod.rs
+++ b/src-tauri/src/state/mod.rs
@@ -19,6 +19,7 @@ pub(crate) mod migration;
 pub(crate) mod native_element_id;
 pub(crate) mod plugin;
 pub mod store;
+pub(crate) mod window_theme;
 #[cfg(target_os = "windows")]
 pub(crate) mod windows_window_corners;
 
diff --git a/src-tauri/src/state/store.rs b/src-tauri/src/state/store.rs
index c9e5a2486..f2f91bdda 100644
--- a/src-tauri/src/state/store.rs
+++ b/src-tauri/src/state/store.rs
@@ -1783,7 +1783,8 @@ impl AppStore {
         let settings_diff = crate::services::settings::apply_patch_to_store(
             &mut scratch,
             &preset_history_settings_patch(&target.settings),
-        );
+        )
+        .map_err(crate::services::settings::settings_patch_validation_error)?;
         crate::state::migration::canonicalize_gradient_pairs(&mut scratch);
         crate::state::migration::canonicalize_image_modes(&mut scratch);
         let candidate = EditorDocumentV1::from_store(&scratch);
@@ -4848,8 +4849,8 @@ mod tests {
             NoteColor, OverlayBounds, PanelBounds, PendingProcessedWavReplacement,
             PluginInstancesCommitRequest, PluginInstancesReconcileRequest, PluginPoint,
             SavedPluginInstance, SettingsPatchInput, SlotMatch, SoundLibraryEntry, SoundSource,
-            StatPosition, StatType, TabCss, TabNoteSettings, EDITOR_COMMIT_SCHEMA_VERSION_V2,
-            EDITOR_OPS_VERSION, EDITOR_SCHEMA_VERSION,
+            StatPosition, StatType, TabCss, TabNoteSettings, UiTheme,
+            EDITOR_COMMIT_SCHEMA_VERSION_V2, EDITOR_OPS_VERSION, EDITOR_SCHEMA_VERSION,
         },
         services::{css_watcher::commit_css_reload, settings::apply_patch_to_store},
         state::{
@@ -17552,7 +17553,8 @@ mod tests {
                                 background_color: Some(format!("#{:06x}", index + 1)),
                                 ..SettingsPatchInput::default()
                             },
-                        );
+                        )
+                        .expect("설정 patch 적용");
                     }
                     Ok(())
                 })
@@ -17570,6 +17572,62 @@ mod tests {
         let _ = std::fs::remove_dir_all(dir);
     }
 
+    #[test]
+    fn ui_theme_change_does_not_invalidate_editor_history() {
+        let dir = test_directory("ui-theme-history-exclusion-test");
+        std::fs::create_dir_all(&dir).unwrap();
+        let store = AppStore::initialize_in_dir(&dir).unwrap();
+        let initial_dx = store.editor_get().document.key_positions["4key"][0].dx;
+
+        store
+            .commit_editor_document(editor_request(
+                store.editor_get().revision,
+                uuid::Uuid::new_v4().to_string(),
+                position_patch(&store, initial_dx + 1.0),
+            ))
+            .unwrap();
+        let operation_id = uuid::Uuid::new_v4().to_string();
+        let gate = store.history_gate();
+        let barrier = gate.close(&operation_id).unwrap();
+        let current_counters = store.snapshot().key_counters;
+        store
+            .apply_history_operation(
+                HistoryDirection::Undo,
+                &operation_id,
+                &current_counters,
+                || {},
+            )
+            .unwrap();
+        drop(barrier);
+        let before = store.history_status();
+        assert!(before.can_redo);
+
+        let transaction = store
+            .commit_history_overlap_mutation(|data| {
+                apply_patch_to_store(
+                    data,
+                    &SettingsPatchInput {
+                        ui_theme: Some("light".to_string()),
+                        ..SettingsPatchInput::default()
+                    },
+                )
+                .map_err(crate::services::settings::settings_patch_validation_error)
+            })
+            .unwrap();
+
+        assert!(transaction.history_status.is_none());
+        assert_eq!(store.snapshot().ui_theme, UiTheme::Light);
+        let after = store.history_status();
+        assert_eq!(after.history_revision, before.history_revision);
+        assert_eq!(after.history_epoch, before.history_epoch);
+        assert_eq!(after.can_undo, before.can_undo);
+        assert_eq!(after.can_redo, before.can_redo);
+        assert_eq!(after.truncated, before.truncated);
+
+        store.flush_and_shutdown().unwrap();
+        let _ = std::fs::remove_dir_all(dir);
+    }
+
     #[test]
     fn unrecorded_legacy_editor_mutations_invalidate_stale_undo_and_redo() {
         let dir = test_directory("legacy-editor-history-invalidation-test");
@@ -20330,7 +20388,8 @@ mod tests {
                             background_color: Some("#123456".to_string()),
                             ..SettingsPatchInput::default()
                         },
-                    );
+                    )
+                    .expect("설정 patch 적용");
                     Ok(())
                 },
             )
@@ -20356,7 +20415,8 @@ mod tests {
                         background_color: Some("#FFFFFF".to_string()),
                         ..SettingsPatchInput::default()
                     },
-                );
+                )
+                .expect("설정 patch 적용");
                 Ok(())
             },
         );
@@ -20810,6 +20870,22 @@ mod tests {
         let _ = std::fs::remove_dir_all(dir);
     }
 
+    #[test]
+    fn ui_theme_missing_field_defaults_to_system() {
+        let dir = test_directory("ui-theme-default-test");
+        std::fs::create_dir_all(&dir).unwrap();
+        let path = dir.join("store.json");
+        let mut fixture = serde_json::to_value(AppStoreData::default()).unwrap();
+        assert!(fixture.as_object_mut().unwrap().remove("uiTheme").is_some());
+        std::fs::write(&path, serde_json::to_vec_pretty(&fixture).unwrap()).unwrap();
+
+        let store = AppStore::initialize_in_dir(&dir).unwrap();
+        assert_eq!(store.snapshot().ui_theme, UiTheme::System);
+        store.flush_and_shutdown().unwrap();
+        drop(store);
+        let _ = std::fs::remove_dir_all(dir);
+    }
+
     #[test]
     fn regular_update_commits_pending_deferred_state() {
         let dir = test_directory("store-deferred-regular-update-test");
diff --git a/src-tauri/src/state/window_theme.rs b/src-tauri/src/state/window_theme.rs
new file mode 100644
index 000000000..ab0dc3b51
--- /dev/null
+++ b/src-tauri/src/state/window_theme.rs
@@ -0,0 +1,74 @@
+use anyhow::{Context, Result};
+use tauri::{window::Color, Theme, WebviewWindow};
+
+use crate::models::UiTheme;
+
+// tokens/dark.css, tokens/light.css의 --ui-bg-app과 같은 값
+const MAIN_DARK_BACKGROUND: Color = Color(0x13, 0x13, 0x15, 0xFF);
+const MAIN_LIGHT_BACKGROUND: Color = Color(0xCC, 0xD3, 0xDC, 0xFF);
+
+pub(crate) fn resolve_theme(preference: UiTheme, native_theme: Option<Theme>) -> Theme {
+    match preference {
+        UiTheme::Light => Theme::Light,
+        UiTheme::Dark => Theme::Dark,
+        UiTheme::System => native_theme.unwrap_or(Theme::Dark),
+    }
+}
+
+fn main_background_color(theme: Theme) -> Color {
+    match theme {
+        Theme::Light => MAIN_LIGHT_BACKGROUND,
+        Theme::Dark => MAIN_DARK_BACKGROUND,
+        _ => MAIN_DARK_BACKGROUND,
+    }
+}
+
+pub(crate) fn apply_main_window_background(window: &WebviewWindow, theme: Theme) -> Result<()> {
+    window
+        .set_background_color(Some(main_background_color(theme)))
+        .context("failed to apply main window background color")
+}
+
+pub(crate) fn apply_main_window_theme(window: &WebviewWindow, preference: UiTheme) -> Result<()> {
+    window
+        .set_theme(preference.as_tauri_theme())
+        .context("failed to apply main window theme")?;
+
+    // System 전환 직후의 실제 테마를 읽어 네이티브 표면과 같은 색을 사용
+    let native_theme = (preference == UiTheme::System)
+        .then(|| window.theme().ok())
+        .flatten();
+    apply_main_window_background(window, resolve_theme(preference, native_theme))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn explicit_theme_ignores_native_theme() {
+        assert_eq!(
+            resolve_theme(UiTheme::Light, Some(Theme::Dark)),
+            Theme::Light
+        );
+        assert_eq!(
+            resolve_theme(UiTheme::Dark, Some(Theme::Light)),
+            Theme::Dark
+        );
+    }
+
+    #[test]
+    fn system_theme_uses_native_theme_with_dark_fallback() {
+        assert_eq!(
+            resolve_theme(UiTheme::System, Some(Theme::Light)),
+            Theme::Light
+        );
+        assert_eq!(resolve_theme(UiTheme::System, None), Theme::Dark);
+    }
+
+    #[test]
+    fn background_color_matches_resolved_theme() {
+        assert_eq!(main_background_color(Theme::Light), MAIN_LIGHT_BACKGROUND);
+        assert_eq!(main_background_color(Theme::Dark), MAIN_DARK_BACKGROUND);
+    }
+}
diff --git a/src-tauri/src/state/windows_window_corners.rs b/src-tauri/src/state/windows_window_corners.rs
index 581550110..800efe632 100644
--- a/src-tauri/src/state/windows_window_corners.rs
+++ b/src-tauri/src/state/windows_window_corners.rs
@@ -1,7 +1,7 @@
 // lib와 bin의 독립 state 모듈 컴파일
 #![allow(dead_code)]
 
-use tauri::{window::Color, WebviewWindow};
+use tauri::{window::Color, Theme, WebviewWindow};
 use windows::Win32::Foundation::COLORREF;
 use windows::Win32::Graphics::Dwm::{
     DwmSetWindowAttribute, DWMWA_BORDER_COLOR, DWMWA_WINDOW_CORNER_PREFERENCE, DWMWCP_ROUND,
@@ -27,24 +27,45 @@ use windows::Win32::Graphics::Dwm::{
 // 첫 페인트 전 구간을 메우는 씨앗값 - tokens.css의 --ui-bg-panel-detached와 같은 값을 유지한다.
 // 창 빌더에 실려 WebView2 컨트롤러 생성 옵션으로 들어가므로 첫 프레임부터 유효하고,
 // 실제 색은 렌더러가 토큰을 읽어 apply_surface_chrome으로 덮는다
-pub(crate) const SEED_FILL: Color = Color(0x1C, 0x1C, 0x1E, 0xFF);
+const DARK_SEED_FILL: Color = Color(0x1C, 0x1C, 0x1E, 0xFF);
+const LIGHT_SEED_FILL: Color = Color(0xEE, 0xF3, 0xF7, 0xFF);
 
 // tokens.css의 --ui-line과 같은 값. DWM 기본 보더는 시스템 색이라 훨씬 진해서, 렌더러가
 // 토큰을 읽어 덮는 순간 선 굵기가 바뀐 것처럼 보인다 - 창 생성 시점에 미리 맞춰 전환을 없앤다
-const SEED_LINE: [f64; 4] = [1.0, 1.0, 1.0, 0.1];
+const DARK_SEED_LINE: [f64; 4] = [1.0, 1.0, 1.0, 0.1];
+// 라이트 --ui-line은 순흑이 아니라 살짝 남색으로 기운 잉크다.
+// 무채색 위 순흑 저알파는 때가 탄 것처럼 보인다
+const LIGHT_SEED_LINE: [f64; 4] = [0.062745, 0.094118, 0.156863, 0.12];
+
+pub(crate) fn seed_fill(theme: Theme) -> Color {
+    match theme {
+        Theme::Light => LIGHT_SEED_FILL,
+        Theme::Dark => DARK_SEED_FILL,
+        _ => DARK_SEED_FILL,
+    }
+}
+
+fn seed_line(theme: Theme) -> [f64; 4] {
+    match theme {
+        Theme::Light => LIGHT_SEED_LINE,
+        Theme::Dark => DARK_SEED_LINE,
+        _ => DARK_SEED_LINE,
+    }
+}
 
-fn seed_fill_components() -> [f64; 4] {
+fn seed_fill_components(theme: Theme) -> [f64; 4] {
+    let fill = seed_fill(theme);
     [
-        f64::from(SEED_FILL.0) / 255.0,
-        f64::from(SEED_FILL.1) / 255.0,
-        f64::from(SEED_FILL.2) / 255.0,
+        f64::from(fill.0) / 255.0,
+        f64::from(fill.1) / 255.0,
+        f64::from(fill.2) / 255.0,
         1.0,
     ]
 }
 
 // 창 생성 시점 - 결과를 기다릴 소비자가 없어 fire-and-forget.
 // Win11의 기본값이 이미 라운드지만, 창 종류에 따라 달라지는 휴리스틱에 기대지 않는다
-pub(crate) fn apply_initial_chrome(window: &WebviewWindow) {
+pub(crate) fn apply_initial_chrome(window: &WebviewWindow, theme: Theme) {
     match set_corner_preference(window) {
         Ok(()) => log::info!(
             "[window-corners] applied native corner preference to '{}'",
@@ -56,8 +77,10 @@ pub(crate) fn apply_initial_chrome(window: &WebviewWindow) {
         ),
     }
 
-    if let Err(reason) = set_border_color(window, composite_over(SEED_LINE, seed_fill_components()))
-    {
+    if let Err(reason) = set_border_color(
+        window,
+        composite_over(seed_line(theme), seed_fill_components(theme)),
+    ) {
         log::debug!(
             "[window-corners] skipped seed border color for '{}': {reason}",
             window.label()
@@ -170,7 +193,8 @@ fn to_colorref(rgb: [f64; 3]) -> COLORREF {
 
 #[cfg(test)]
 mod tests {
-    use super::{composite_over, to_colorref};
+    use super::{composite_over, seed_fill_components, seed_line, to_colorref};
+    use tauri::Theme;
 
     #[test]
     fn opaque_line_replaces_the_fill() {
@@ -190,15 +214,20 @@ mod tests {
 
     // --ui-line rgba(255,255,255,0.1)을 --ui-bg-panel-detached #1c1c1e 위에 올린 값
     #[test]
-    fn translucent_line_blends_toward_the_fill() {
-        let blended = composite_over(
-            [1.0, 1.0, 1.0, 0.1],
-            [28.0 / 255.0, 28.0 / 255.0, 30.0 / 255.0, 1.0],
-        );
+    fn dark_translucent_line_blends_toward_the_fill() {
+        let blended = composite_over(seed_line(Theme::Dark), seed_fill_components(Theme::Dark));
         assert_eq!(super::channel(blended[0]), 51);
         assert_eq!(super::channel(blended[2]), 53);
     }
 
+    // --ui-line rgba(16,24,40,0.12)을 --ui-bg-panel-detached #eef3f7 위에 올린 값
+    #[test]
+    fn light_translucent_line_blends_toward_the_fill() {
+        let blended = composite_over(seed_line(Theme::Light), seed_fill_components(Theme::Light));
+        assert_eq!(super::channel(blended[0]), 211);
+        assert_eq!(super::channel(blended[2]), 222);
+    }
+
     #[test]
     fn colorref_packs_blue_into_the_high_byte() {
         assert_eq!(to_colorref([1.0, 0.0, 0.0]).0, 0x0000_00FF);
diff --git a/src/renderer/__tests__/digitPopAnimationContract.test.ts b/src/renderer/__tests__/digitPopAnimationContract.test.ts
index 3e07aadc5..bfbda96ae 100644
--- a/src/renderer/__tests__/digitPopAnimationContract.test.ts
+++ b/src/renderer/__tests__/digitPopAnimationContract.test.ts
@@ -7,7 +7,7 @@ const mainCss = readFileSync(
   'utf8',
 );
 const tokensCss = readFileSync(
-  resolve(process.cwd(), 'src/renderer/styles/tokens.css'),
+  resolve(process.cwd(), 'src/renderer/styles/tokens/base.css'),
   'utf8',
 );
 
diff --git a/src/renderer/__tests__/glassCanvasSurfaceContract.test.ts b/src/renderer/__tests__/glassCanvasSurfaceContract.test.ts
index 856461fbe..581b675fd 100644
--- a/src/renderer/__tests__/glassCanvasSurfaceContract.test.ts
+++ b/src/renderer/__tests__/glassCanvasSurfaceContract.test.ts
@@ -2,23 +2,40 @@ import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { describe, expect, it } from 'vitest';
 
-const tokensCss = readFileSync(
-  resolve(process.cwd(), 'src/renderer/styles/tokens.css'),
-  'utf8',
-);
-const mainCss = readFileSync(
-  resolve(process.cwd(), 'src/renderer/styles/main.css'),
-  'utf8',
-);
-const tailwindConfig = readFileSync(
-  resolve(process.cwd(), 'tailwind.config.js'),
-  'utf8',
-);
+const read = (path: string) =>
+  readFileSync(resolve(process.cwd(), path), 'utf8');
+
+const darkCss = read('src/renderer/styles/tokens/dark.css');
+const lightCss = read('src/renderer/styles/tokens/light.css');
+const mainCss = read('src/renderer/styles/main.css');
+const tailwindConfig = read('tailwind.config.js');
+
+const themes: [string, string][] = [
+  ['dark', darkCss],
+  ['light', lightCss],
+];
+
+const declared = (css: string, token: string): string | null => {
+  const match = css.match(new RegExp(`${token}:\\s*([^;]+);`));
+  return match ? match[1].trim() : null;
+};
 
 describe('canvas 위 glass 표면 계약', () => {
-  it('일반 glass와 분리된 밝기·채도 clamp를 가진다', () => {
-    expect(tokensCss).toMatch(/--ui-glass-canvas-backdrop-dim:\s*0\.62/);
-    expect(tokensCss).toMatch(/--ui-glass-canvas-backdrop-sat:\s*0\.35/);
+  it('일반 glass와 분리된 밝기·대비·채도 clamp를 가진다', () => {
+    // 캔버스는 사용자가 만든 임의 밝기라 일반 표면과 다른 세기가 필요하다.
+    // 값이 같아지면 분리해 둔 이유가 사라지므로 다르다는 것 자체를 계약으로 고정
+    for (const [name, css] of themes) {
+      for (const dial of ['dim', 'contrast', 'sat']) {
+        const base = declared(css, `--ui-glass-backdrop-${dial}`);
+        const canvas = declared(css, `--ui-glass-canvas-backdrop-${dial}`);
+        expect(base, `${name} ${dial}`).not.toBeNull();
+        expect(canvas, `${name} canvas ${dial}`).not.toBeNull();
+      }
+      expect(
+        declared(css, '--ui-glass-canvas-backdrop-sat'),
+        `${name} canvas sat`,
+      ).not.toBe(declared(css, '--ui-glass-backdrop-sat'));
+    }
     expect(mainCss).toContain(
       ':where(.backdrop-glass-canvas).backdrop-glass {',
     );
@@ -27,7 +44,36 @@ describe('canvas 위 glass 표면 계약', () => {
     );
   });
 
-  it('투명도 축소 media 규칙보다 앞에서 선언된다', () => {
+  it('필터 체인이 세 다이얼을 모두 소비한다', () => {
+    // 토큰만 늘리고 체인에 안 넣으면 라이트의 범위 압축이 조용히 죽는다
+    const filters: string[] = mainCss.match(/backdrop-filter:[^;]+;/g) ?? [];
+    const clamped = filters.filter((rule) => rule.includes('brightness('));
+    expect(clamped.length).toBeGreaterThan(0);
+    for (const rule of clamped) {
+      expect(rule).toContain('contrast(');
+      expect(rule).toContain('saturate(');
+    }
+  });
+
+  it('투명도 축소 폴백이 테마 토큰을 거친다', () => {
+    // 리터럴로 두면 요소 스코프 선언이 테마 루트를 이겨 라이트에서 다크 면이 뜬다
+    const reduced = mainCss.slice(
+      mainCss.indexOf('@media (prefers-reduced-transparency: reduce)'),
+    );
+    expect(reduced).not.toMatch(/--ui-glass[\w-]*:\s*rgba?\(/);
+    for (const [name, css] of themes) {
+      for (const token of [
+        '--ui-glass-reduced',
+        '--ui-glass-heavy-reduced',
+        '--ui-glass-dim-reduced',
+        '--ui-glass-panel-reduced',
+      ]) {
+        expect(declared(css, token), `${name} ${token}`).not.toBeNull();
+      }
+    }
+  });
+
+  it('canvas 규칙이 투명도 축소 media 규칙보다 앞에서 선언된다', () => {
     const canvasSurfaceRule = mainCss.indexOf(
       ':where(.backdrop-glass-canvas).backdrop-glass {',
     );
@@ -38,12 +84,29 @@ describe('canvas 위 glass 표면 계약', () => {
     expect(reducedTransparencyRule).toBeGreaterThan(canvasSurfaceRule);
   });
 
-  it('popup 전용 짧은 shadow가 theme에 연결된다', () => {
-    expect(tokensCss).toMatch(
-      /--ui-shadow-popup:[\s\S]*?0 3px 10px rgba\(0, 0, 0, 0\.28\)/,
-    );
+  it('popup 전용 짧은 shadow가 두 테마에 모두 연결된다', () => {
+    for (const [name, css] of themes) {
+      const popup = declared(css, '--ui-shadow-popup');
+      const modal = declared(css, '--ui-shadow-3');
+      expect(popup, `${name} popup`).not.toBeNull();
+      // 팝업은 모달의 넓은 번짐을 재사용하지 않는다
+      expect(popup, `${name} popup`).not.toBe(modal);
+    }
     expect(tailwindConfig).toContain(
       "'elevation-popup': 'var(--ui-shadow-popup)'",
     );
   });
+
+  it('루미노시티 레이어의 목표 휘도가 glass 틴트와 같은 색이다', () => {
+    // 틴트만 올리고 여기를 두면 캡이 휘도를 도로 끌어당긴다
+    for (const [name, css] of themes) {
+      const tint = declared(css, '--ui-glass-backdrop-lum-tint');
+      const glass = declared(css, '--ui-glass');
+      expect(tint, `${name} lum tint`).toMatch(/^#[0-9a-f]{6}$/);
+      const [r, g, b] = [1, 3, 5].map((i) =>
+        parseInt((tint as string).slice(i, i + 2), 16),
+      );
+      expect(glass, `${name} glass`).toContain(`rgba(${r}, ${g}, ${b},`);
+    }
+  });
 });
diff --git a/src/renderer/__tests__/themeTokenParityContract.test.ts b/src/renderer/__tests__/themeTokenParityContract.test.ts
new file mode 100644
index 000000000..7a413159a
--- /dev/null
+++ b/src/renderer/__tests__/themeTokenParityContract.test.ts
@@ -0,0 +1,176 @@
+import { globSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const read = (name: string) =>
+  readFileSync(resolve(process.cwd(), 'src/renderer/styles', name), 'utf8');
+
+const barrelCss = read('tokens.css');
+const baseCss = read('tokens/base.css');
+const darkCss = read('tokens/dark.css');
+const lightCss = read('tokens/light.css');
+const tailwindConfig = readFileSync(
+  resolve(process.cwd(), 'tailwind.config.js'),
+  'utf8',
+);
+
+const stripComments = (css: string) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+
+// 선언만 뽑는다. var(--x) 참조는 콜론이 없어 걸리지 않는다
+const declaredKeys = (css: string): string[] =>
+  Array.from(stripComments(css).matchAll(/(--[\w-]+)\s*:/g)).map((m) => m[1]);
+
+const darkKeys = declaredKeys(darkCss);
+const lightKeys = declaredKeys(lightCss);
+
+const tokenHex = (css: string, key: string): string => {
+  const match = stripComments(css).match(
+    new RegExp(`${key}\\s*:\\s*(#[0-9a-fA-F]{6})\\b`),
+  );
+  if (!match) throw new Error(`${key} hex token not found`);
+  return match[1];
+};
+
+const relativeLuminance = (hex: string): number => {
+  const channels = hex
+    .slice(1)
+    .match(/.{2}/g)!
+    .map((channel) => Number.parseInt(channel, 16) / 255)
+    .map((channel) =>
+      channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+    );
+  return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+};
+
+const contrastRatio = (foreground: string, background: string): number => {
+  const foregroundLuminance = relativeLuminance(foreground);
+  const backgroundLuminance = relativeLuminance(background);
+  return (
+    (Math.max(foregroundLuminance, backgroundLuminance) + 0.05) /
+    (Math.min(foregroundLuminance, backgroundLuminance) + 0.05)
+  );
+};
+
+const labLightness = (hex: string): number => {
+  const luminance = relativeLuminance(hex);
+  const threshold = 216 / 24389;
+  const transformed =
+    luminance > threshold
+      ? Math.cbrt(luminance)
+      : (24389 / 27 / 116) * luminance + 16 / 116;
+  return 116 * transformed - 16;
+};
+
+describe('테마 토큰 파리티 계약', () => {
+  it('다크와 라이트가 같은 키를 같은 순서로 선언한다', () => {
+    // 순서까지 묶어 두면 두 파일을 나란히 놓고 읽을 수 있다
+    expect(lightKeys).toEqual(darkKeys);
+  });
+
+  it('키가 중복 선언되지 않는다', () => {
+    expect(new Set(darkKeys).size).toBe(darkKeys.length);
+    expect(new Set(lightKeys).size).toBe(lightKeys.length);
+  });
+
+  it('테마 파일은 :root 폴백을 두지 않는다', () => {
+    // 다크가 bare :root에 남으면 라이트에서 빠진 토큰이 조용히 다크로 새어나간다.
+    // :where()로 감싸는 이유는 사용자 CSS의 :root 재정의와 특이도를 맞추기 위함
+    expect(stripComments(darkCss)).toContain(
+      ":root:where([data-theme='dark']) {",
+    );
+    expect(stripComments(lightCss)).toContain(
+      ":root:where([data-theme='light']) {",
+    );
+    expect(stripComments(darkCss)).not.toMatch(/(^|\})\s*:root\s*\{/);
+    expect(stripComments(lightCss)).not.toMatch(/(^|\})\s*:root\s*\{/);
+  });
+
+  it('base는 색을 소유하지 않는다', () => {
+    const body = stripComments(baseCss);
+    expect(body).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
+    expect(body).not.toMatch(/\b(rgba?|hsla?|color-mix|oklch)\(/);
+    expect(body).not.toMatch(/:\s*(white|black)\b/);
+  });
+
+  it('테마 파일은 구조 토큰을 소유하지 않는다', () => {
+    const structural = /(radius|duration|ease|stagger|scale|^--z-)/;
+    expect(darkKeys.filter((key) => structural.test(key))).toEqual([]);
+    expect(lightKeys.filter((key) => structural.test(key))).toEqual([]);
+  });
+
+  it('배럴이 세 파일을 순서대로 로드한다', () => {
+    const order = Array.from(
+      barrelCss.matchAll(/@import\s+'\.\/tokens\/([\w-]+)\.css'/g),
+    ).map((m) => m[1]);
+    expect(order).toEqual(['base', 'dark', 'light']);
+  });
+
+  it('tailwind가 참조하는 토큰이 양쪽 테마에 모두 있다', () => {
+    const referenced = new Set(
+      Array.from(tailwindConfig.matchAll(/var\((--ui-[\w-]+)\)/g)).map(
+        (m) => m[1],
+      ),
+    );
+    const baseKeys = new Set(declaredKeys(baseCss));
+    const missing = Array.from(referenced).filter(
+      (key) =>
+        !baseKeys.has(key) &&
+        !(darkKeys.includes(key) && lightKeys.includes(key)),
+    );
+    expect(missing).toEqual([]);
+  });
+
+  it('소스가 참조하는 토큰이 양쪽 테마에 모두 있다', () => {
+    // 한쪽 테마에만 값이 있거나 아무 데도 없는 토큰을 쓰기 시작한 코드를 막는다.
+    // 사용자 콘텐츠 변수(--dmn-*, --key-*, --counter-* 등)는 앱 테마 대상이 아니다
+    const known = new Set([
+      ...declaredKeys(baseCss),
+      ...darkKeys.filter((key) => lightKeys.includes(key)),
+    ]);
+    const sources = [
+      ...globSync('src/renderer/**/*.{ts,tsx}'),
+      ...globSync('src/renderer/styles/*.css'),
+    ].filter((file) => !file.includes('__tests__') && !file.includes('.test.'));
+
+    const missing = new Map<string, string>();
+    for (const file of sources) {
+      const body = readFileSync(resolve(process.cwd(), file), 'utf8');
+      for (const match of body.matchAll(/var\((--ui-[\w-]+)/g)) {
+        const key = match[1];
+        if (known.has(key) || missing.has(key)) continue;
+        missing.set(key, file);
+      }
+    }
+    expect(Object.fromEntries(missing)).toEqual({});
+  });
+
+  it('라이트 저강도 읽기 텍스트가 앱 바닥과 패널에서 AA 대비를 지킨다', () => {
+    for (const foreground of ['--ui-fg-muted', '--ui-fg-caption']) {
+      for (const surface of [
+        '--ui-bg-app',
+        '--ui-bg-panel',
+        '--ui-bg-panel-detached',
+      ]) {
+        expect(
+          contrastRatio(
+            tokenHex(lightCss, foreground),
+            tokenHex(lightCss, surface),
+          ),
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+
+  it('라이트 muted, caption, 장식 faint의 명도 단계를 분리한다', () => {
+    const muted = tokenHex(lightCss, '--ui-fg-muted');
+    const caption = tokenHex(lightCss, '--ui-fg-caption');
+    const faint = tokenHex(lightCss, '--ui-fg-faint');
+    const mutedLightness = labLightness(muted);
+    const captionLightness = labLightness(caption);
+    const faintLightness = labLightness(faint);
+
+    expect(captionLightness).toBeGreaterThan(mutedLightness);
+    expect(faintLightness).toBeGreaterThan(captionLightness);
+    expect(faintLightness - mutedLightness).toBeGreaterThanOrEqual(8);
+  });
+});
diff --git a/src/renderer/__tests__/zIndexLayerContract.test.ts b/src/renderer/__tests__/zIndexLayerContract.test.ts
index 261685024..f5a246400 100644
--- a/src/renderer/__tests__/zIndexLayerContract.test.ts
+++ b/src/renderer/__tests__/zIndexLayerContract.test.ts
@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest';
 const readSource = (path: string) =>
   readFileSync(resolve(process.cwd(), path), 'utf8');
 
-const TOKENS = readSource('src/renderer/styles/tokens.css');
+const TOKENS = readSource('src/renderer/styles/tokens/base.css');
 
 const tokenValue = (name: string): number => {
   const match = TOKENS.match(new RegExp(`--${name}:\\s*(-?\\d+);`));
@@ -91,7 +91,7 @@ describe('z-index 층 계약', () => {
   });
 
   // 컴포넌트 안에서만 겨루는 작은 값(z-10 등)은 계약 밖이다.
-  // 사다리 구간을 맨숫자로 쓰면 tokens.css가 단일 소스가 아니게 된다
+  // 사다리 구간을 맨숫자로 쓰면 tokens/base.css가 단일 소스가 아니게 된다
   it('크롬 사다리 구간을 맨숫자로 쓰지 않는다', () => {
     const offenders = collectSources('src/renderer').filter((path) => {
       const source = stripComments(readSource(path));
diff --git a/src/renderer/assets/mp4/light/always-on-top.mp4 b/src/renderer/assets/mp4/light/always-on-top.mp4
new file mode 100644
index 000000000..2257d95bd
Binary files /dev/null and b/src/renderer/assets/mp4/light/always-on-top.mp4 differ
diff --git a/src/renderer/assets/mp4/light/custom-css.mp4 b/src/renderer/assets/mp4/light/custom-css.mp4
new file mode 100644
index 000000000..c901d3a6f
Binary files /dev/null and b/src/renderer/assets/mp4/light/custom-css.mp4 differ
diff --git a/src/renderer/assets/mp4/light/custom-js.mp4 b/src/renderer/assets/mp4/light/custom-js.mp4
new file mode 100644
index 000000000..3aa9c3eb5
Binary files /dev/null and b/src/renderer/assets/mp4/light/custom-js.mp4 differ
diff --git a/src/renderer/assets/mp4/light/key-counter.mp4 b/src/renderer/assets/mp4/light/key-counter.mp4
new file mode 100644
index 000000000..7509e5131
Binary files /dev/null and b/src/renderer/assets/mp4/light/key-counter.mp4 differ
diff --git a/src/renderer/assets/mp4/light/note-effect.mp4 b/src/renderer/assets/mp4/light/note-effect.mp4
new file mode 100644
index 000000000..5161aec70
Binary files /dev/null and b/src/renderer/assets/mp4/light/note-effect.mp4 differ
diff --git a/src/renderer/assets/mp4/light/obs-mode.mp4 b/src/renderer/assets/mp4/light/obs-mode.mp4
new file mode 100644
index 000000000..b999dfff6
Binary files /dev/null and b/src/renderer/assets/mp4/light/obs-mode.mp4 differ
diff --git a/src/renderer/assets/mp4/light/overlay-lock.mp4 b/src/renderer/assets/mp4/light/overlay-lock.mp4
new file mode 100644
index 000000000..14ea19821
Binary files /dev/null and b/src/renderer/assets/mp4/light/overlay-lock.mp4 differ
diff --git a/src/renderer/assets/mp4/light/resize-anchor.mp4 b/src/renderer/assets/mp4/light/resize-anchor.mp4
new file mode 100644
index 000000000..9b388dffc
Binary files /dev/null and b/src/renderer/assets/mp4/light/resize-anchor.mp4 differ
diff --git a/src/renderer/assets/mp4/light/tray-enabled.mp4 b/src/renderer/assets/mp4/light/tray-enabled.mp4
new file mode 100644
index 000000000..a24eab349
Binary files /dev/null and b/src/renderer/assets/mp4/light/tray-enabled.mp4 differ
diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index 816b43d5c..f176ca8ef 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -2430,7 +2430,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     );
     if (!sections.some((section) => section.renderVisible)) {
       return (
-        <p className="text-fg-faint text-body text-center">
+        <p className="text-fg-caption text-body text-center">
           {t('propertiesPanel.pluginNoSettings') || '설정할 항목이 없습니다.'}
         </p>
       );
@@ -2602,7 +2602,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               className="flex flex-col gap-[6px]"
             >
               {section.label && (
-                <p className="text-fg-faint text-body text-left px-[2px]">
+                <p className="text-fg-caption text-body text-left px-[2px]">
                   {sectionLabel}
                 </p>
               )}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index ab556f17e..04c9a6c69 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -73,7 +73,7 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
             {t('propertiesPanel.pluginSettings') || '플러그인 설정'}
           </span>
           <span
-            className="text-fg-faint text-body truncate max-w-[100px]"
+            className="text-fg-caption text-body truncate max-w-[100px]"
             title={pluginSettingsPanel.pluginId}
           >
             {pluginSettingsPanel.pluginId}
@@ -100,7 +100,7 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
         </div>
       ) : (
         <div className="flex-1 flex items-center justify-center px-[24px]">
-          <p className="text-fg-faint text-body text-center">
+          <p className="text-fg-caption text-body text-center">
             {t('propertiesPanel.pluginNoSettings') || '설정할 항목이 없습니다.'}
           </p>
         </div>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
index 2eb3e5dc7..3de5c7228 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
@@ -372,7 +372,7 @@ const BatchPanelHeader: React.FC<BatchPanelHeaderProps> = ({
         </span>
       )}
       {!selectedGroupInfo && (
-        <span className="text-fg-faint text-body">({totalCount})</span>
+        <span className="text-fg-caption text-body">({totalCount})</span>
       )}
     </div>
   </div>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
index b1fcfe7c0..8cc8701bf 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
@@ -638,7 +638,7 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
       >
         {layerItems.length === 0 ? (
           <div className="flex items-center justify-center h-full p-[16px]">
-            <p className="text-fg-faint text-body text-center">
+            <p className="text-fg-caption text-body text-center">
               {t('propertiesPanel.noLayers') || 'No layers'}
             </p>
           </div>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.test.ts b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.test.ts
index 301472a9d..69459d177 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.test.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
+import { MINIMAP_SURFACE_CLASS } from '@components/main/Grid/core/minimapChrome';
 import {
   PANEL_HEADER_CLASS,
   PANEL_HEADER_HEIGHT,
@@ -23,7 +24,14 @@ describe('panelChrome', () => {
 
   // 칩은 opacity로 등퇴장한다 - 라이브 블러가 붙으면 WKWebView에서 점멸
   it('접힘 토글 칩은 라이브 블러 없는 솔리드 재질이다', () => {
-    expect(SIDE_PANEL_CHIP_MATERIAL_CLASS).toContain('bg-glass-panel-solid');
+    expect(SIDE_PANEL_CHIP_MATERIAL_CLASS).toContain('-solid');
     expect(SIDE_PANEL_CHIP_MATERIAL_CLASS).not.toContain('backdrop-glass');
   });
+
+  // 칩이 보이는 건 패널이 닫혀 있을 때뿐이고, 그때는 미니맵과 같은 티어의
+  // 캔버스 부유 칩이다. 패널 계열 재질로 되돌리면 라이트에서 두 칩이 8 L* 벌어진다
+  it('접힘 토글 칩은 미니맵과 같은 캔버스 크롬 계열을 쓴다', () => {
+    expect(SIDE_PANEL_CHIP_MATERIAL_CLASS).toContain('bg-glass-dim');
+    expect(MINIMAP_SURFACE_CLASS).toContain('bg-glass-dim');
+  });
 });
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
index f679aea55..471349803 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
@@ -9,8 +9,12 @@ export const SIDE_PANEL_MATERIAL_CLASS =
 // 접힘 토글 칩 - opacity로 등퇴장하므로 라이브 블러 금지
 // (블러+opacity 조합은 WKWebView에서 블러 레이어가 점멸하고, 페이드를 래퍼로
 //  옮겨도 opacity < 1인 조상이 backdrop root가 되어 같은 증상 - Modal.tsx 참조).
-// 프레임과 같은 L*에 서도록 상주 크롬 솔리드 토큰을 쓴다
-export const SIDE_PANEL_CHIP_MATERIAL_CLASS = 'bg-glass-panel-solid';
+// 재질은 패널 계열이 아니라 캔버스 상주 크롬이다 - 칩이 보이는 건 패널이 닫혀 있을
+// 때뿐이고, 그때는 미니맵과 같은 티어의 부유 칩이라 같은 면으로 읽혀야 한다.
+// 열릴 때 프레임과 L*가 어긋나는 구간이 생기지만 그건 페이드 200ms 안이고,
+// 상시 보이는 상태가 우선한다.
+// -solid는 라이브 dim과 같은 L*에 서도록 맞춰 둔 솔리드 쌍둥이다
+export const SIDE_PANEL_CHIP_MATERIAL_CLASS = 'bg-glass-dim-solid';
 
 export const SIDE_PANEL_FRAME_CLASS = `absolute right-0 top-0 bottom-0 w-[240px] ${SIDE_PANEL_MATERIAL_CLASS} shadow-elevation-panel z-[var(--z-chrome-panel)]`;
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
index a889aa2ae..bf438071a 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
@@ -304,7 +304,7 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
           </span>
         </div>
         <div className="flex-1 flex items-center justify-center px-[24px] pb-[48px]">
-          <p className="text-fg-faint text-body text-center">{noticeText}</p>
+          <p className="text-fg-caption text-body text-center">{noticeText}</p>
         </div>
       </div>
     );
@@ -341,13 +341,13 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
               />
             )}
             {!hasSinglePluginSelection && (
-              <p className="text-fg-faint text-body text-center">
+              <p className="text-fg-caption text-body text-center">
                 {t('propertiesPanel.pluginMultiSelection') ||
                   '플러그인 요소는 한 번에 하나만 편집할 수 있습니다.'}
               </p>
             )}
             {hasSinglePluginSelection && showModalHint && (
-              <p className="text-fg-faint text-body text-center">
+              <p className="text-fg-caption text-body text-center">
                 {t('propertiesPanel.pluginModalHint') ||
                   '이 플러그인은 설정 모달을 사용합니다. 요소를 클릭해 설정하세요.'}
               </p>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
index f9fed9ef2..ee6d0647e 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
@@ -726,7 +726,7 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
               {!(slotListening && !slotPickerOpen) && slotParts.extra && (
                 // case 피처: +를 숫자 중심에 맞춘 글리프로 치환.
                 // tracking은 +와 숫자 사이 0.25px 확보용, 끝 글자 뒤 여분은 -mr로 상쇄 (배지는 한 자리 전제)
-                <span className="pl-[3px] tracking-[0.25px] -mr-[0.25px] text-fg-faint [font-feature-settings:'case']">
+                <span className="pl-[3px] tracking-[0.25px] -mr-[0.25px] text-fg-caption [font-feature-settings:'case']">
                   {slotParts.extra}
                 </span>
               )}
diff --git a/src/renderer/components/main/Grid/PropertiesPanelHost.tsx b/src/renderer/components/main/Grid/PropertiesPanelHost.tsx
index 8d6a41ee6..0aca286df 100644
--- a/src/renderer/components/main/Grid/PropertiesPanelHost.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanelHost.tsx
@@ -7,6 +7,7 @@ import { useBlockBrowserShortcuts } from '@hooks/app/useBlockBrowserShortcuts';
 import { usePanelHeaderDrag } from '@hooks/panel/usePanelHeaderDrag';
 import { restoreLenisScroll } from '@hooks/useLenis';
 import { panelWindowApi } from '@api/modules/panelWindowApi';
+import { subscribeResolvedTheme } from '@utils/theme/applyTheme';
 import { flushFocusedEditor } from '@src/renderer/editor/runtime/lifecycleEditorFlush';
 import { isHistoryEditorFlushLocked } from '@src/renderer/editor/runtime/historyEditorFlushLock';
 import {
@@ -392,8 +393,15 @@ const PropertiesPanelHost = ({
       subtree: true,
       characterData: true,
     });
+    // 테마 전환은 html 속성만 바꾼다 - head 옵저버에 안 걸려 네이티브 가장자리가
+    // 옛 색으로 고착된다. 속성이 바뀐 뒤 토큰이 새 값이므로 다음 프레임에 읽는다
+    const unsubscribeTheme = subscribeResolvedTheme(() => {
+      cancelAnimationFrame(scheduled);
+      scheduled = requestAnimationFrame(sync);
+    });
     return () => {
       observer.disconnect();
+      unsubscribeTheme();
       cancelAnimationFrame(scheduled);
     };
   }, [childWindow]);
@@ -405,7 +413,7 @@ const PropertiesPanelHost = ({
       {dockHint && (
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute right-0 top-0 bottom-0 w-[240px] z-[var(--z-chrome-popup)] bg-white/[0.06] shadow-[inset_0_0_0_1px_var(--ui-line)]"
+          className="pointer-events-none absolute right-0 top-0 bottom-0 w-[240px] z-[var(--z-chrome-popup)] bg-fill shadow-[inset_0_0_0_1px_var(--ui-line)]"
         />
       )}
       {createPortal(
diff --git a/src/renderer/components/main/Grid/core/GridMinimap.tsx b/src/renderer/components/main/Grid/core/GridMinimap.tsx
index 7a6d100f0..4f37d3b66 100644
--- a/src/renderer/components/main/Grid/core/GridMinimap.tsx
+++ b/src/renderer/components/main/Grid/core/GridMinimap.tsx
@@ -1,4 +1,5 @@
 import { beginDragCursor, endDragCursor } from '@utils/core/dragCursor';
+import { MINIMAP_SURFACE_CLASS } from './minimapChrome';
 import React, { useState, useRef, useEffect } from 'react';
 import { useGridViewStore } from '@stores/grid/useGridViewStore';
 import { usePluginDisplayElementStore } from '@stores/plugin/usePluginDisplayElementStore';
@@ -442,10 +443,9 @@ const GridMinimap = ({
   return (
     <div
       ref={minimapRef}
-      className="absolute bottom-2 left-2 z-[var(--z-chrome-panel)] select-none bg-glass-dim backdrop-glass-popup backdrop-glass-canvas rounded-[8px] shadow-elevation-chrome overflow-hidden"
+      className={`absolute bottom-2 left-2 z-[var(--z-chrome-panel)] select-none ${MINIMAP_SURFACE_CLASS} rounded-[8px] shadow-elevation-chrome overflow-hidden`}
       // 상주 글래스 표면이라 opacity 페이드 금지 - 블러+opacity 조합은 WKWebView에서
-      // 블러 레이어가 점멸한다 (panelChrome 규칙). 등퇴장이 필요하면 마운트 토글로.
-      // 라이브 블러 유지 조건은 Windows 키 연타 프레임 실측 (미달 시 -solid 토큰 복귀)
+      // 블러 레이어가 점멸한다 (panelChrome 규칙). 등퇴장이 필요하면 마운트 토글로
       style={{
         width: MINIMAP_WIDTH,
         opacity: shouldShow ? 1 : 0,
diff --git a/src/renderer/components/main/Grid/core/minimapChrome.ts b/src/renderer/components/main/Grid/core/minimapChrome.ts
new file mode 100644
index 000000000..c769c5abb
--- /dev/null
+++ b/src/renderer/components/main/Grid/core/minimapChrome.ts
@@ -0,0 +1,7 @@
+// 미니맵 표면 재질 - 캔버스 위에 상주하는 부유 칩.
+// 같은 티어의 패널 접힘 토글 칩(panelChrome의 SIDE_PANEL_CHIP_MATERIAL_CLASS)과
+// 같은 계열을 유지한다. 두 칩이 한 화면에 같이 떠 있어 재질이 갈리면 바로 읽힌다.
+// 칩 쪽은 opacity 페이드 때문에 라이브 블러를 못 써서 -solid 쌍둥이를 쓴다.
+// 라이브 블러 유지 조건은 Windows 키 연타 프레임 실측 (미달 시 -solid 토큰 복귀)
+export const MINIMAP_SURFACE_CLASS =
+  'bg-glass-dim backdrop-glass-popup backdrop-glass-canvas';
diff --git a/src/renderer/components/main/Grid/handles/GradientAxisHandle.tsx b/src/renderer/components/main/Grid/handles/GradientAxisHandle.tsx
index 7a5853fd5..f1276f42f 100644
--- a/src/renderer/components/main/Grid/handles/GradientAxisHandle.tsx
+++ b/src/renderer/components/main/Grid/handles/GradientAxisHandle.tsx
@@ -830,8 +830,8 @@ const GradientAxisOverlay = ({
                   width: ANCHOR_DOT_SIZE,
                   height: ANCHOR_DOT_SIZE,
                   borderRadius: '50%',
-                  background: 'white',
-                  boxShadow: '0 1px 3px rgba(0,0,0,0.5)',
+                  background: 'var(--ui-handle-fill)',
+                  boxShadow: 'var(--ui-handle-shadow)',
                 }}
               />
             </div>
@@ -853,8 +853,8 @@ const GradientAxisOverlay = ({
                     width: STOP_ANCHOR_DOT_SIZE,
                     height: STOP_ANCHOR_DOT_SIZE,
                     borderRadius: '50%',
-                    background: 'white',
-                    boxShadow: '0 1px 3px rgba(0,0,0,0.5)',
+                    background: 'var(--ui-handle-fill)',
+                    boxShadow: 'var(--ui-handle-shadow)',
                     transform: 'translate(-50%, -50%)',
                     pointerEvents: 'none',
                   }}
@@ -875,11 +875,11 @@ const GradientAxisOverlay = ({
                   borderRadius: 4,
                   // 반투명 색은 격자 위 합성으로 표시 - 뒤 요소 비침 방지
                   background: `linear-gradient(${stop.color}, ${stop.color}), var(--ui-checker-pattern) center / var(--ui-checker-size-sm) var(--ui-checker-size-sm) repeat`,
-                  border: '1.5px solid white',
+                  border: '1.5px solid var(--ui-handle-fill)',
                   boxShadow:
                     i === session.selectedIndex
-                      ? '0 0 0 2px var(--ui-selection-border-strong), 0 1px 4px rgba(0,0,0,0.5)'
-                      : '0 1px 4px rgba(0,0,0,0.5)',
+                      ? '0 0 0 2px var(--ui-selection-border-strong), var(--ui-handle-shadow)'
+                      : 'var(--ui-handle-shadow)',
                   transform: 'translate(-50%, -50%)',
                   cursor: dragStop?.index === i ? 'grabbing' : 'default',
                   pointerEvents: 'auto',
@@ -900,7 +900,7 @@ const GradientAxisOverlay = ({
             top: endY - 24,
             padding: '2px 6px',
             borderRadius: 6,
-            background: 'var(--ui-bg-inset-solid, rgba(24,24,29,0.9))',
+            background: 'var(--ui-bg-inset-solid)',
             boxShadow: 'inset 0 0 0 1px var(--ui-line)',
             whiteSpace: 'nowrap',
           }}
@@ -918,7 +918,7 @@ const GradientAxisOverlay = ({
             top: dragStopScreen.y - 24,
             padding: '2px 6px',
             borderRadius: 6,
-            background: 'var(--ui-bg-inset-solid, rgba(24,24,29,0.9))',
+            background: 'var(--ui-bg-inset-solid)',
             boxShadow: 'inset 0 0 0 1px var(--ui-line)',
             whiteSpace: 'nowrap',
           }}
diff --git a/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx b/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
index 616cb368d..e3c36dfb0 100644
--- a/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
+++ b/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
@@ -150,7 +150,9 @@ const getHandleStyle = (
   isHovered: boolean,
 ): React.CSSProperties => {
   const baseStyle: React.CSSProperties = {
-    backgroundColor: isHovered ? 'var(--ui-selection)' : 'white',
+    backgroundColor: isHovered
+      ? 'var(--ui-selection)'
+      : 'var(--ui-handle-fill)',
     border: '2px solid var(--ui-selection-border-strong)',
     pointerEvents: 'none',
     transition: 'background-color 0.15s ease',
@@ -875,7 +877,7 @@ const GroupResizeHandles = ({
               top: bounds.y * zoom + panY - 2,
               width: bounds.width * zoom + 4,
               height: bounds.height * zoom + 4,
-              border: '2px dashed rgba(251, 146, 60, 0.9)',
+              border: '2px dashed var(--ui-warning)',
               borderRadius: '4px',
               pointerEvents: 'none' as const,
               zIndex: 'var(--z-canvas-selection-handle)',
diff --git a/src/renderer/components/main/Grid/handles/ResizeHandles.test.tsx b/src/renderer/components/main/Grid/handles/ResizeHandles.test.tsx
index 92facb413..ca1252583 100644
--- a/src/renderer/components/main/Grid/handles/ResizeHandles.test.tsx
+++ b/src/renderer/components/main/Grid/handles/ResizeHandles.test.tsx
@@ -265,7 +265,7 @@ describe('ResizeHandles 핸들 호버 생명주기', () => {
     expect(hasCursorBodyClass()).toBe(false);
     // 시각적 호버 상태도 켜지지 않음
     const visual = handle.firstElementChild as HTMLElement;
-    expect(visual.style.backgroundColor).toBe('white');
+    expect(visual.style.backgroundColor).toBe('var(--ui-handle-fill)');
   });
 
   it('억제 중 enter는 resume 시 hover로 적용된다', async () => {
@@ -306,7 +306,7 @@ describe('ResizeHandles 핸들 호버 생명주기', () => {
 
     expect(hasCursorBodyClass()).toBe(false);
     const visual = handle.firstElementChild as HTMLElement;
-    expect(visual.style.backgroundColor).toBe('white');
+    expect(visual.style.backgroundColor).toBe('var(--ui-handle-fill)');
   });
 
   it('보류 중 핸들이 unmount되면 pending도 정리한다', async () => {
diff --git a/src/renderer/components/main/Grid/handles/ResizeHandles.tsx b/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
index 7bb0ae95c..f0e0087df 100644
--- a/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
+++ b/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
@@ -143,7 +143,9 @@ const getHandleStyle = (
   isHovered: boolean,
 ): React.CSSProperties => {
   const baseStyle: React.CSSProperties = {
-    backgroundColor: isHovered ? 'var(--ui-selection)' : 'white',
+    backgroundColor: isHovered
+      ? 'var(--ui-selection)'
+      : 'var(--ui-handle-fill)',
     border: '1.5px solid var(--ui-selection-border-strong)',
     pointerEvents: 'none',
     transition: 'background-color 0.15s ease',
diff --git a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
index a5c63cdc5..be62ae7dd 100644
--- a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
@@ -72,7 +72,7 @@ export function PluginDataDeleteModal({
             로케일 문장은 "명사구 + 서술부"로 갈리는 것이 전제다 */}
         <span
           className={`text-body transition-colors duration-fast ${
-            preview ? 'text-warning' : 'text-fg-faint'
+            preview ? 'text-warning' : 'text-fg-caption'
           }`}
         >
           {t('settings.pluginDataScope')}
diff --git a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.accessibility.test.tsx b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.accessibility.test.tsx
new file mode 100644
index 000000000..6a43febfa
--- /dev/null
+++ b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.accessibility.test.tsx
@@ -0,0 +1,66 @@
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import UpdateModal from './UpdateModal';
+
+vi.mock('@contexts/useTranslation', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const updateInfo = {
+  currentVersion: '2.0.0',
+  latestVersion: '2.0.1',
+  releaseUrl: 'https://example.com/release',
+  releaseName: '2.0.1',
+  releaseNotes: '',
+  publishedAt: '',
+};
+
+describe('UpdateModal 접근성 이름', () => {
+  let host: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    host.remove();
+    document.body.innerHTML = '';
+  });
+
+  const renderModal = async (isLatestVersion: boolean) => {
+    await act(async () => {
+      root.render(
+        <UpdateModal
+          isOpen
+          updateInfo={updateInfo}
+          isLatestVersion={isLatestVersion}
+          onClose={vi.fn()}
+          onSkipVersion={vi.fn()}
+        />,
+      );
+    });
+  };
+
+  it('업데이트가 있으면 새 버전 제목을 dialog 이름으로 사용한다', async () => {
+    await renderModal(false);
+
+    expect(
+      document.querySelector('[role="dialog"]')?.getAttribute('aria-label'),
+    ).toBe('update.title');
+  });
+
+  it('최신 버전이면 화면 제목과 같은 dialog 이름을 사용한다', async () => {
+    await renderModal(true);
+
+    expect(
+      document.querySelector('[role="dialog"]')?.getAttribute('aria-label'),
+    ).toBe('update.latestAlready');
+  });
+});
diff --git a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
index c546acbde..0d7bf93f2 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
@@ -93,7 +93,9 @@ const UpdateModal = ({
     <Modal
       motionState={motionState}
       onClick={handleClose}
-      ariaLabel={t('update.title')}
+      ariaLabel={
+        isLatestVersion ? t('update.latestAlready') : t('update.title')
+      }
       contentMountStrategy="after-paint"
     >
       <div
@@ -131,7 +133,7 @@ const UpdateModal = ({
             <div className="flex flex-col gap-[2px]">
               <h2 className="text-fg text-title">{t('update.title')}</h2>
               {publishedLabel && (
-                <p className="text-fg-faint text-caption tabular-nums">
+                <p className="text-fg-caption text-caption tabular-nums">
                   {publishedLabel}
                 </p>
               )}
diff --git a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
index c67530c0f..6188e2031 100644
--- a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
@@ -897,7 +897,7 @@ const CounterAnimationEditorModal = ({
       onClose={onClose}
       title={headerTitle}
       headerInfo={
-        <div className="min-w-0 flex items-center gap-[6px] text-fg-faint">
+        <div className="min-w-0 flex items-center gap-[6px] text-fg-caption">
           <svg
             className="w-[14px] h-[14px] shrink-0"
             viewBox="0 0 24 24"
@@ -1045,7 +1045,7 @@ const CounterAnimationEditorModal = ({
                   cy={p2w.y}
                   r={HANDLE_RADIUS * uns}
                   fill="var(--ui-bg-inset-solid)"
-                  stroke="rgba(255, 255, 255, 0.85)"
+                  stroke="var(--ui-handle-fill)"
                   strokeWidth={2 * uns}
                   style={{ pointerEvents: 'none' }}
                 />
@@ -1293,7 +1293,7 @@ const CounterAnimationEditorModal = ({
               </div>
               {/* 하단 안내 — 스크림 없이 흐린 캡션만 (풀하이트 스테이지라 키와 충돌 없음) */}
               <div className="absolute inset-x-0 bottom-[10px] z-20 text-center pointer-events-none">
-                <span className="text-caption text-fg-faint">
+                <span className="text-caption text-fg-caption">
                   {t('counterSetting.pressToPreview') || '눌러서 미리보기'}
                 </span>
               </div>
diff --git a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
index 3523e4994..b02b7f973 100644
--- a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
+++ b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
@@ -1,5 +1,6 @@
 import { beginDragCursor, endDragCursor } from '@utils/core/dragCursor';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { subscribeResolvedTheme } from '@utils/theme/applyTheme';
 import { useTranslation } from '@contexts/useTranslation';
 import FullSurfaceModalLayout from '@components/main/Modal/FullSurfaceModalLayout';
 import { isTopmostPopupLayer } from '@components/main/Modal/popupLayer';
@@ -750,6 +751,16 @@ const SoundTrimModal = ({
     return () => observer.disconnect();
   }, [isOpen, isPlaying, waveformHost]);
 
+  // 파형은 토큰 계산값을 캔버스에 구워 그린다 - 테마가 바뀌면 다시 그려야
+  // 옛 색이 남지 않는다. 재생 중이면 다음 프레임이 알아서 새 색으로 그린다
+  useEffect(() => {
+    if (!isOpen) return;
+    return subscribeResolvedTheme(() => {
+      if (isPlaying) return;
+      redrawWaveformStatic(pausedAtRatioRef.current);
+    });
+  }, [isOpen, isPlaying]);
+
   const selectFile = () => {
     fileInputRef.current?.click();
   };
@@ -1121,7 +1132,7 @@ const SoundTrimModal = ({
       title={sheetTitle}
       headerInfo={
         headerFileName ? (
-          <span className="min-w-0 text-caption text-fg-faint truncate">
+          <span className="min-w-0 text-caption text-fg-caption truncate">
             {headerFileName}
           </span>
         ) : undefined
@@ -1155,7 +1166,7 @@ const SoundTrimModal = ({
                 <canvas ref={canvasRef} className="w-full h-full block" />
                 {/* 하단 안내 — 스크림 없이 흐린 캡션만 */}
                 <div className="absolute inset-x-0 bottom-[10px] text-center pointer-events-none">
-                  <span className="text-caption text-fg-faint">
+                  <span className="text-caption text-fg-caption">
                     {t('soundTrimModal.dragHint')}
                   </span>
                 </div>
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
index 74142ac6f..8f092f657 100644
--- a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
@@ -147,7 +147,7 @@ export default function CommonListPickerPage<T>({
               strokeLinejoin="round"
             />
           </svg>
-          <span className="text-fg group-hover:text-white text-label leading-none truncate transition-colors duration-fast">
+          <span className="text-fg group-hover:text-fg-strong text-label leading-none truncate transition-colors duration-fast">
             {pageTitle}
           </span>
         </button>
@@ -187,7 +187,7 @@ export default function CommonListPickerPage<T>({
               <div
                 className={`${
                   addRowPlacement === 'end' ? '' : 'flex-1 '
-                }flex items-center justify-center py-[14px] text-fg-faint text-body`}
+                }flex items-center justify-center py-[14px] text-fg-caption text-body`}
               >
                 {emptyText}
               </div>
diff --git a/src/renderer/components/main/Modal/content/pickers/GooeyThumb.tsx b/src/renderer/components/main/Modal/content/pickers/GooeyThumb.tsx
index b9d1cb06f..bb041f34d 100644
--- a/src/renderer/components/main/Modal/content/pickers/GooeyThumb.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/GooeyThumb.tsx
@@ -11,6 +11,8 @@ const GOO_OFFSET = -6;
 // erode의 사각 커널과 달리 방향에 상관없이 링 두께만큼 들어온다
 const INSET_BLUR = 1.5;
 const INSET_CONTRAST = 20;
+// 노브 안쪽 알파 타일. 링이 두 테마 모두 흰색이라 타일도 고정이다 -
+// feImage 데이터 URI라 CSS 변수를 못 받는 것도 같은 결론을 가리킨다
 const CHECKER_CELL = 4;
 const CHECKER_TILE = `data:image/svg+xml,${encodeURIComponent(
   `<svg xmlns="http://www.w3.org/2000/svg" width="${
@@ -189,7 +191,7 @@ const GooeyThumb = ({
           </feMerge>
         </filter>
       </defs>
-      <g filter={`url(#${filterId})`} fill="#fff">
+      <g filter={`url(#${filterId})`} fill="var(--ui-handle-fill)">
         <circle ref={tailRef} r={0} />
         <rect ref={rectRef} />
       </g>
diff --git a/src/renderer/components/main/Modal/content/pickers/GradientFormatControls.tsx b/src/renderer/components/main/Modal/content/pickers/GradientFormatControls.tsx
index 740d095b4..a3ca2948b 100644
--- a/src/renderer/components/main/Modal/content/pickers/GradientFormatControls.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/GradientFormatControls.tsx
@@ -264,10 +264,8 @@ export const GradientStopEditor = ({
           style={{ left: `${stop.pos * 100}%` }}
         >
           <i
-            className={`block w-[14px] h-[14px] rounded-full border-[2px] border-white ${
-              i === selectedIndex
-                ? 'shadow-focus-ring'
-                : 'shadow-[0_1px_4px_rgba(0,0,0,0.5)]'
+            className={`block w-[14px] h-[14px] rounded-full border-[2px] border-handle ${
+              i === selectedIndex ? 'shadow-focus-ring' : 'shadow-handle'
             }`}
             style={{
               // 반투명 색은 격자 위 합성으로 표시 — 트랙 그라데이션 비침 방지
diff --git a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
index f17ed6ed8..2937d8135 100644
--- a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
@@ -77,11 +77,17 @@ const removeDraftPreviewCSS = () => {
 };
 
 const WEBFONT_EDITOR_HIGHLIGHT_STYLE = HighlightStyle.define([
-  { tag: tags.comment, color: '#6A9955' },
-  { tag: [tags.string, tags.special(tags.string)], color: '#CE9178' },
-  { tag: tags.keyword, color: '#C586C0' },
-  { tag: [tags.propertyName], color: '#9CDCFE' },
-  { tag: [tags.bracket, tags.punctuation], color: '#D4D4D4' },
+  { tag: tags.comment, color: 'var(--ui-syntax-comment)' },
+  {
+    tag: [tags.string, tags.special(tags.string)],
+    color: 'var(--ui-syntax-string)',
+  },
+  { tag: tags.keyword, color: 'var(--ui-syntax-keyword)' },
+  { tag: [tags.propertyName], color: 'var(--ui-syntax-property)' },
+  {
+    tag: [tags.bracket, tags.punctuation],
+    color: 'var(--ui-syntax-punctuation)',
+  },
 ]);
 
 // 활성 줄 하이라이트는 제외 — 여러 줄 placeholder가 한 줄에 담겨
@@ -367,7 +373,7 @@ const WebFontInputModal = ({
         {/* CSS 입력 섹션 */}
         <div className="flex-[5] min-w-0 bg-fill-faint rounded-surface p-[10px] flex flex-col gap-[8px]">
           <div className="shrink-0 px-[2px]">
-            <p className="text-caption text-fg-faint">
+            <p className="text-caption text-fg-caption">
               {t('webFontInput.cssLabel') || '@font-face CSS'}
             </p>
           </div>
@@ -382,7 +388,7 @@ const WebFontInputModal = ({
         {/* 미리보기 섹션 — 검증 상태는 결과 옆이 제자리, 색은 무채색 유지 */}
         <div className="flex-[3] min-w-[220px] max-w-[340px] bg-fill-faint rounded-surface p-[10px] flex flex-col gap-[8px]">
           <div className="shrink-0 flex items-center justify-between gap-[8px] px-[2px]">
-            <p className="text-caption text-fg-faint">
+            <p className="text-caption text-fg-caption">
               {t('webFontInput.previewLabel') || '미리보기'}
             </p>
             <span role="status" className="text-caption text-fg-muted truncate">
@@ -420,7 +426,7 @@ const WebFontInputModal = ({
                         key={weight}
                         className="min-w-0 flex items-baseline gap-[6px]"
                       >
-                        <span className="shrink-0 w-[30px] text-caption text-fg-faint tabular-nums">
+                        <span className="shrink-0 w-[30px] text-caption text-fg-caption tabular-nums">
                           {weight}
                         </span>
                         {failedWeights.has(weight) ? (
diff --git a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
index 403e38c2b..bc63f60f8 100644
--- a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
+++ b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
@@ -441,7 +441,7 @@ const NoteSetting = ({
           />
         </PropertyRow>
         <div className="flex justify-between items-center w-full min-h-[32px]">
-          <p className="text-fg-faint text-body">
+          <p className="text-fg-caption text-body">
             {t('laboratory.keyDelayAuto', { value: calculatedDelay })}
           </p>
           <button
diff --git a/src/renderer/components/main/Settings.tsx b/src/renderer/components/main/Settings.tsx
index cd6fbc12f..11e020e6f 100644
--- a/src/renderer/components/main/Settings.tsx
+++ b/src/renderer/components/main/Settings.tsx
@@ -40,7 +40,11 @@ import {
 import { classifyPluginAddResult } from '@utils/plugin/pluginAddResult';
 import { isMac } from '@utils/core/platform';
 import { useUpdateCheck } from '@hooks/app/useUpdateCheck';
-import type { OverlayResizeAnchor } from '@src/types/settings/settings';
+import {
+  isUiThemePreference,
+  type OverlayResizeAnchor,
+  type UiThemePreference,
+} from '@src/types/settings/settings';
 import type { ShortcutsState } from '@src/types/settings/shortcuts';
 import type { SupportedLocale } from '@contexts/I18nContextDef';
 import type {
@@ -144,6 +148,7 @@ const Settings = ({
     jsPlugins,
     language,
     setLanguage,
+    uiTheme,
     overlayResizeAnchor,
     setOverlayResizeAnchor,
     keyCounterEnabled,
@@ -380,6 +385,12 @@ const Settings = ({
     };
   }, []);
 
+  const UI_THEME_OPTIONS: { value: UiThemePreference; label: string }[] = [
+    { value: 'system', label: t('settings.themeSystem') },
+    { value: 'light', label: t('settings.themeLight') },
+    { value: 'dark', label: t('settings.themeDark') },
+  ];
+
   const LANGUAGE_OPTIONS: { value: string; label: string }[] = [
     { value: 'ko', label: '한국어' },
     { value: 'en', label: 'English' },
@@ -989,6 +1000,14 @@ const Settings = ({
     });
   };
 
+  // 백엔드가 확정한 값만 반영해 저장 실패가 첫 화면 캐시까지 남지 않게 한다
+  const handleUiThemeChange = (val: string): void => {
+    if (!isUiThemePreference(val)) return;
+    void settingsApi.update({ uiTheme: val }).catch((error) => {
+      console.error('Failed to update ui theme', error);
+    });
+  };
+
   const requestedBackend = keySoundOutput?.requested;
   const requestedAsioDriver =
     requestedBackend?.kind === 'asio' ? requestedBackend.driverName : null;
@@ -1267,6 +1286,14 @@ const Settings = ({
             </SettingCard>
             {/* 기타 설정 */}
             <SettingCard>
+              <SettingRow label={t('settings.appTheme')}>
+                <Dropdown
+                  options={UI_THEME_OPTIONS}
+                  value={uiTheme}
+                  onChange={handleUiThemeChange}
+                  align="right"
+                />
+              </SettingRow>
               <SettingRow label={t('settings.language')}>
                 <Dropdown
                   options={LANGUAGE_OPTIONS}
diff --git a/src/renderer/components/main/SettingsPanel/SettingsSidePanel.tsx b/src/renderer/components/main/SettingsPanel/SettingsSidePanel.tsx
index 465bacce7..81b9d52d2 100644
--- a/src/renderer/components/main/SettingsPanel/SettingsSidePanel.tsx
+++ b/src/renderer/components/main/SettingsPanel/SettingsSidePanel.tsx
@@ -99,7 +99,7 @@ const SettingsSidePanel = ({
           {activeTitle}
         </span>
         {activePage?.headerBadge ? (
-          <span className="shrink-0 text-body text-fg-faint tabular-nums">
+          <span className="shrink-0 text-body text-fg-caption tabular-nums">
             {activePage.headerBadge}
           </span>
         ) : null}
diff --git a/src/renderer/components/main/SettingsPanel/panelChrome.ts b/src/renderer/components/main/SettingsPanel/panelChrome.ts
index 24516e162..6b4522b23 100644
--- a/src/renderer/components/main/SettingsPanel/panelChrome.ts
+++ b/src/renderer/components/main/SettingsPanel/panelChrome.ts
@@ -46,7 +46,7 @@ export const PANEL_LIST_WELL_CLASS =
 export const PANEL_LIST_SCROLL_CLASS =
   'flex-1 min-h-0 overflow-y-auto modal-content-scroll dmn-scroll-mask-inset px-[14px]';
 export const PANEL_LIST_EMPTY_CLASS =
-  'h-full flex items-center justify-center text-fg-faint text-body';
+  'h-full flex items-center justify-center text-fg-caption text-body';
 export const PANEL_ROW_NAME_CLASS =
   'min-w-0 flex-1 truncate text-left transition-colors duration-fast';
 
diff --git a/src/renderer/components/main/SettingsPreview.tsx b/src/renderer/components/main/SettingsPreview.tsx
index d16bda100..8c2c3b24e 100644
--- a/src/renderer/components/main/SettingsPreview.tsx
+++ b/src/renderer/components/main/SettingsPreview.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import FlaskIcon from '@assets/svgs/flask.svg';
 import { useTranslation } from '@contexts/useTranslation';
 import { PREVIEW_CLIPS, PREVIEW_KEYS } from '@constants/settingsPreviewClips';
+import { useResolvedTheme } from '@hooks/app/useResolvedTheme';
 
 interface SettingsPreviewProps {
   /** 지금 가리키는 설정. 미리보기가 없는 항목이면 기본 화면으로 돌아간다 */
@@ -23,11 +24,19 @@ const SettingsPreview = ({
   hoveredKey,
 }: SettingsPreviewProps): React.ReactElement => {
   const { t } = useTranslation();
+  // 클립은 테마별로 한 벌씩 있다. 색만 다르고 구성·길이는 같다
+  const theme = useResolvedTheme();
   const videosRef = useRef<Record<string, HTMLVideoElement | null>>({});
   const activeKey = hoveredKey && PREVIEW_CLIPS[hoveredKey] ? hoveredKey : null;
   const warmedRef = useRef(false);
+  const themeRef = useRef(theme);
 
   useEffect(() => {
+    // 테마가 바뀌면 아홉 개의 src가 통째로 갈린다 - 데워둔 것도 같이 무효다
+    if (themeRef.current !== theme) {
+      themeRef.current = theme;
+      warmedRef.current = false;
+    }
     // 처음 무엇이든 가리키는 순간 나머지도 받아둔다. 그 전까진 preload가 none이라
     // 설정만 열고 아무것도 안 가리킨 방문에서는 미리 받아두지 않는다.
     // none은 강제가 아니라 힌트라 브라우저가 조금 읽을 수는 있다.
@@ -51,7 +60,7 @@ const SettingsPreview = ({
       video.pause();
       if (video.currentTime !== 0) video.currentTime = 0;
     }
-  }, [activeKey]);
+  }, [activeKey, theme]);
 
   return (
     <div className="relative w-full h-full">
@@ -61,7 +70,7 @@ const SettingsPreview = ({
           ref={(el) => {
             videosRef.current[key] = el;
           }}
-          src={PREVIEW_CLIPS[key].src}
+          src={PREVIEW_CLIPS[key].src[theme]}
           loop
           muted
           playsInline
diff --git a/src/renderer/components/main/Tool/SettingTool.modalLock.test.tsx b/src/renderer/components/main/Tool/SettingTool.modalLock.test.tsx
index 7bb7d36c6..2a749fc09 100644
--- a/src/renderer/components/main/Tool/SettingTool.modalLock.test.tsx
+++ b/src/renderer/components/main/Tool/SettingTool.modalLock.test.tsx
@@ -97,4 +97,39 @@ describe('SettingTool modal lock', () => {
     ).toBe('false');
     expect(useUIStore.getState().isExportImportPopupOpen).toBe(false);
   });
+
+  it('FloatingTooltip 버튼은 접근성 이름만 제공하고 native title을 중복하지 않는다', async () => {
+    await render();
+
+    for (const label of [
+      'tooltip.exportPreset',
+      'tooltip.importExport',
+      'tooltip.overlayClose',
+      'tooltip.settings',
+    ]) {
+      const button = host.querySelector<HTMLButtonElement>(
+        `[aria-label="${label}"]`,
+      );
+      expect(button, label).not.toBeNull();
+      expect(button?.hasAttribute('title')).toBe(false);
+    }
+
+    await act(async () => {
+      host
+        .querySelector<HTMLButtonElement>('[aria-label="tooltip.overlayClose"]')
+        ?.click();
+    });
+    const openOverlayButton = host.querySelector<HTMLButtonElement>(
+      '[aria-label="tooltip.overlayOpen"]',
+    );
+    expect(openOverlayButton).not.toBeNull();
+    expect(openOverlayButton?.hasAttribute('title')).toBe(false);
+
+    await act(async () => root.render(<SettingTool isSettingsOpen />));
+    const backButton = host.querySelector<HTMLButtonElement>(
+      '[aria-label="tooltip.back"]',
+    );
+    expect(backButton).not.toBeNull();
+    expect(backButton?.hasAttribute('title')).toBe(false);
+  });
 });
diff --git a/src/renderer/components/main/Tool/SettingTool.tsx b/src/renderer/components/main/Tool/SettingTool.tsx
index 7cbd4b9ea..43282833d 100644
--- a/src/renderer/components/main/Tool/SettingTool.tsx
+++ b/src/renderer/components/main/Tool/SettingTool.tsx
@@ -221,6 +221,15 @@ SettingToolProps) => {
     }
   };
 
+  const overlayToggleLabel = isObsModeActive
+    ? t('tooltip.overlayObsDisabled')
+    : isOverlayVisible
+    ? t('tooltip.overlayClose')
+    : t('tooltip.overlayOpen');
+  const settingsToggleLabel = isSettingsOpen
+    ? t('tooltip.back')
+    : t('tooltip.settings');
+
   return (
     <div className="flex gap-[8px]">
       {!isSettingsOpen && (
@@ -228,6 +237,7 @@ SettingToolProps) => {
           <div className="flex items-center h-[40px] p-[5px] bg-fill-faint rounded-surface gap-[0px]">
             <FloatingTooltip content={t('tooltip.exportPreset')}>
               <Button
+                ariaLabel={t('tooltip.exportPreset')}
                 icon={
                   <IconMotion motion="tilt">
                     <FolderIcon />
@@ -243,6 +253,7 @@ SettingToolProps) => {
             >
               <ChevronButton
                 ref={exportImportRef}
+                ariaLabel={t('tooltip.importExport')}
                 isSelected={isExportImportOpen}
                 onClick={() => setIsExportImportOpen((prev) => !prev)}
               />
@@ -290,28 +301,18 @@ SettingToolProps) => {
       )}
       <TooltipGroup>
         <div className="flex items-center h-[40px] p-[5px] bg-fill-faint rounded-surface gap-[4px]">
-          <FloatingTooltip
-            content={
-              isObsModeActive
-                ? t('tooltip.overlayObsDisabled')
-                : isOverlayVisible
-                ? t('tooltip.overlayClose')
-                : t('tooltip.overlayOpen')
-            }
-          >
+          <FloatingTooltip content={overlayToggleLabel}>
             <Button
+              ariaLabel={overlayToggleLabel}
               icon={<EyeToggleIcon slashed={isOverlayVisible} />}
               onClick={isObsModeActive ? undefined : toggleOverlay}
               disabled={isObsModeActive}
             />
           </FloatingTooltip>
           <div className="flex items-center">
-            <FloatingTooltip
-              content={
-                isSettingsOpen ? t('tooltip.back') : t('tooltip.settings')
-              }
-            >
+            <FloatingTooltip content={settingsToggleLabel}>
               <Button
+                ariaLabel={settingsToggleLabel}
                 icon={
                   <IconSwap
                     active={isSettingsOpen}
@@ -369,6 +370,7 @@ SettingToolProps) => {
 
 interface ButtonProps {
   icon: React.ReactNode;
+  ariaLabel: string;
   isSelected?: boolean;
   disabled?: boolean;
   onClick?: () => void;
@@ -376,6 +378,7 @@ interface ButtonProps {
 
 const Button = ({
   icon,
+  ariaLabel,
   isSelected = false,
   disabled = false,
   onClick,
@@ -385,6 +388,7 @@ const Button = ({
   return (
     <button
       type="button"
+      aria-label={ariaLabel}
       disabled={disabled}
       {...(disabled ? {} : motionProps)}
       className={`flex items-center justify-center h-[30px] w-[30px] rounded-md transition-colors duration-fast ${
@@ -404,18 +408,20 @@ const Button = ({
 };
 
 interface ChevronButtonProps {
+  ariaLabel: string;
   isSelected?: boolean;
   onClick?: () => void;
 }
 
 const ChevronButton = React.forwardRef<HTMLButtonElement, ChevronButtonProps>(
-  ({ isSelected = false, onClick }, ref) => {
+  ({ ariaLabel, isSelected = false, onClick }, ref) => {
     const { motionProps } = useIconMotion();
 
     return (
       <button
         ref={ref}
         type="button"
+        aria-label={ariaLabel}
         className={`flex items-center justify-center h-[30px] w-[14px] rounded-md transition-colors duration-fast active:bg-fill-hover ${
           isSelected
             ? 'bg-fill-hover text-fg'
diff --git a/src/renderer/components/main/Tool/TabTool.accessibility.test.tsx b/src/renderer/components/main/Tool/TabTool.accessibility.test.tsx
new file mode 100644
index 000000000..59509a122
--- /dev/null
+++ b/src/renderer/components/main/Tool/TabTool.accessibility.test.tsx
@@ -0,0 +1,49 @@
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import TabTool from './TabTool';
+
+vi.mock('@contexts/useTranslation', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+vi.mock('@stores/data/useKeyStore', () => ({
+  useKeyStore: () => ({
+    selectedKeyType: '4key',
+    setSelectedKeyType: vi.fn(),
+    isBootstrapped: true,
+  }),
+}));
+vi.mock('./icons/TabGridIcon', () => ({ default: () => null }));
+vi.mock('../Modal/FloatingPopup', () => ({ default: () => null }));
+vi.mock('../Modal/content/settings/TabList', () => ({ default: () => null }));
+vi.mock('@hooks/useIconMotion', () => ({
+  useIconMotion: () => ({ motionProps: {} }),
+}));
+
+describe('TabTool 접근성 이름', () => {
+  let host: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+  });
+
+  it('커스텀 레이아웃 아이콘 버튼에 번역된 이름과 힌트를 제공한다', () => {
+    act(() => root.render(<TabTool />));
+
+    const button = host.querySelector<HTMLButtonElement>(
+      '[aria-label="tabs.title"]',
+    );
+    expect(button).not.toBeNull();
+    expect(button?.title).toBe('tabs.title');
+  });
+});
diff --git a/src/renderer/components/main/Tool/TabTool.tsx b/src/renderer/components/main/Tool/TabTool.tsx
index c44156b11..19cf22f20 100644
--- a/src/renderer/components/main/Tool/TabTool.tsx
+++ b/src/renderer/components/main/Tool/TabTool.tsx
@@ -38,6 +38,9 @@ const TabTool = () => {
       </div>
       <button
         ref={gridButtonRef}
+        type="button"
+        aria-label={t('tabs.title')}
+        title={t('tabs.title')}
         className="flex items-center justify-center w-[40px] h-[40px] p-[5px] bg-fill-faint rounded-surface"
         onClick={() => {
           if (!isBootstrapped) return;
diff --git a/src/renderer/components/main/Tool/ToolBar.modalLock.test.tsx b/src/renderer/components/main/Tool/ToolBar.modalLock.test.tsx
index d705c4f28..ff16bdfe6 100644
--- a/src/renderer/components/main/Tool/ToolBar.modalLock.test.tsx
+++ b/src/renderer/components/main/Tool/ToolBar.modalLock.test.tsx
@@ -5,6 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { registerPopupLayer } from '../Modal/popupLayer';
 import ToolBar from './ToolBar';
 
+const settingsState = vi.hoisted(() => ({ noteEffect: false }));
+
 vi.mock('./CanvasTool', () => ({
   default: ({ interactionDisabled }: { interactionDisabled?: boolean }) => (
     <button data-testid="canvas" disabled={interactionDisabled} />
@@ -18,6 +20,9 @@ vi.mock('./SettingTool', () => ({
 vi.mock('./TabTool', () => ({
   default: () => <button data-testid="tabs" />,
 }));
+vi.mock('@assets/svgs/github.svg', () => ({ default: () => null }));
+vi.mock('@assets/svgs/code.svg', () => ({ default: () => null }));
+vi.mock('./icons/FaderIcon', () => ({ default: () => null }));
 vi.mock('../Modal/TooltipGroup', () => ({
   TooltipGroup: ({ children }: { children: React.ReactNode }) => children,
 }));
@@ -28,7 +33,7 @@ vi.mock('@contexts/useTranslation', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 vi.mock('@stores/useSettingsStore', () => ({
-  useSettingsStore: () => ({ noteEffect: false }),
+  useSettingsStore: () => settingsState,
 }));
 vi.mock('@hooks/useSingleFlightAction', () => ({
   useSingleFlightAction: () => ({ run: vi.fn(), pending: false }),
@@ -52,6 +57,7 @@ describe('ToolBar modal lock', () => {
   beforeEach(async () => {
     globalThis.IS_REACT_ACT_ENVIRONMENT = true;
     vi.clearAllMocks();
+    settingsState.noteEffect = false;
     host = document.createElement('div');
     document.body.appendChild(host);
     root = createRoot(host);
@@ -122,4 +128,22 @@ describe('ToolBar modal lock', () => {
 
     expect(props.onClosePalette).toHaveBeenCalledOnce();
   });
+
+  it('FloatingTooltip 버튼은 번역된 접근성 이름만 제공한다', async () => {
+    settingsState.noteEffect = true;
+    await act(async () => root.render(<ToolBar {...props} />));
+
+    const trackButton = host.querySelector<HTMLButtonElement>(
+      '[aria-label="tooltip.trackSettings"]',
+    );
+    expect(trackButton).not.toBeNull();
+    expect(trackButton?.hasAttribute('title')).toBe(false);
+
+    await act(async () => root.render(<ToolBar {...props} isSettingsOpen />));
+    const githubButton = host.querySelector<HTMLButtonElement>(
+      '[aria-label="tooltip.github"]',
+    );
+    expect(githubButton).not.toBeNull();
+    expect(githubButton?.hasAttribute('title')).toBe(false);
+  });
 });
diff --git a/src/renderer/components/main/Tool/ToolBar.tsx b/src/renderer/components/main/Tool/ToolBar.tsx
index 51adfd583..c2ad3d7cc 100644
--- a/src/renderer/components/main/Tool/ToolBar.tsx
+++ b/src/renderer/components/main/Tool/ToolBar.tsx
@@ -76,6 +76,8 @@ const ToolBar = ({
             <div className="flex items-center h-[40px] p-[5px] bg-fill-faint rounded-surface gap-[4px]">
               <FloatingTooltip content={t('tooltip.github')}>
                 <button
+                  type="button"
+                  aria-label={t('tooltip.github')}
                   onClick={() =>
                     handleExternal('https://github.com/DmNote-App/DmNote')
                   }
@@ -167,6 +169,7 @@ const TrackSettingButton = ({
         <FloatingTooltip content={t('tooltip.trackSettings') || '트랙 설정'}>
           <button
             type="button"
+            aria-label={t('tooltip.trackSettings') || '트랙 설정'}
             onClick={onOpenNoteSetting}
             className="flex items-center justify-center h-[30px] w-[30px] rounded-md text-fg-muted hover:bg-fill hover:text-fg active:bg-fill-hover transition-colors duration-fast"
             {...motionProps}
diff --git a/src/renderer/components/main/common/Checkbox.test.tsx b/src/renderer/components/main/common/Checkbox.test.tsx
index 736e80c23..f944cfb77 100644
--- a/src/renderer/components/main/common/Checkbox.test.tsx
+++ b/src/renderer/components/main/common/Checkbox.test.tsx
@@ -148,7 +148,7 @@ describe('Checkbox commit 전략', () => {
     const trackWidth = pxOf(track.className, /w-\[(\d+)px\]/);
     const thumbWidth = pxOf(thumb.className, /w-\[(\d+)px\]/);
     const inset = pxOf(thumb.className, /left-\[(\d+)px\]/);
-    const tokens = readFileSync('src/renderer/styles/tokens.css', 'utf8');
+    const tokens = readFileSync('src/renderer/styles/tokens/base.css', 'utf8');
     const travel = Number(
       tokens.match(/--ui-toggle-travel:\s*(\d+)px/)?.[1] ?? NaN,
     );
diff --git a/src/renderer/components/main/common/Checkbox.tsx b/src/renderer/components/main/common/Checkbox.tsx
index 64bcfd1df..529e71ad5 100644
--- a/src/renderer/components/main/common/Checkbox.tsx
+++ b/src/renderer/components/main/common/Checkbox.tsx
@@ -63,14 +63,16 @@ const Checkbox = ({
       role="switch"
       aria-checked={visualChecked}
       className={`dmn-toggle-track relative w-[28px] h-[16px] rounded-full cursor-pointer transition-colors duration-base ease-out-expo ${
-        displayChecked ? 'bg-accent' : 'bg-line-strong hover:bg-white/[0.19]'
+        displayChecked
+          ? 'bg-accent'
+          : 'bg-control-track-off hover:bg-control-track-off-hover'
       }`}
       onClick={handleClick}
       {...drag.handlers}
     >
       {/* 이동량은 --ui-toggle-travel이 소유, 트랙 28 - 노브 12 - 인셋 2×2.
           드래그 훅이 이 클래스로 노브를 찾으므로 클래스명은 계약 */}
-      <div className="dmn-toggle-thumb absolute top-[2px] left-[2px] w-[12px] h-[12px] rounded-full bg-white shadow-elevation-1" />
+      <div className="dmn-toggle-thumb absolute top-[2px] left-[2px] w-[12px] h-[12px] rounded-full bg-control-knob shadow-elevation-1" />
     </div>
   );
 };
diff --git a/src/renderer/components/main/common/Dropdown.tsx b/src/renderer/components/main/common/Dropdown.tsx
index 4b83d71dc..5ea5ef371 100644
--- a/src/renderer/components/main/common/Dropdown.tsx
+++ b/src/renderer/components/main/common/Dropdown.tsx
@@ -447,7 +447,7 @@ const Dropdown: React.FC<DropdownProps> = ({
             }}
           >
             {options.length === 0 ? (
-              <div className="px-[8px] py-[6px] text-body text-fg-faint">
+              <div className="px-[8px] py-[6px] text-body text-fg-caption">
                 옵션 없음
               </div>
             ) : (
diff --git a/src/renderer/constants/settingsPreviewClips.ts b/src/renderer/constants/settingsPreviewClips.ts
index dd06ee2a1..167985367 100644
--- a/src/renderer/constants/settingsPreviewClips.ts
+++ b/src/renderer/constants/settingsPreviewClips.ts
@@ -7,6 +7,16 @@ import customCssClip from '@assets/mp4/custom-css.mp4';
 import customJsClip from '@assets/mp4/custom-js.mp4';
 import resizeAnchorClip from '@assets/mp4/resize-anchor.mp4';
 import obsModeClip from '@assets/mp4/obs-mode.mp4';
+import overlayLockLight from '@assets/mp4/light/overlay-lock.mp4';
+import alwaysOnTopLight from '@assets/mp4/light/always-on-top.mp4';
+import noteEffectLight from '@assets/mp4/light/note-effect.mp4';
+import keyCounterLight from '@assets/mp4/light/key-counter.mp4';
+import trayEnabledLight from '@assets/mp4/light/tray-enabled.mp4';
+import customCssLight from '@assets/mp4/light/custom-css.mp4';
+import customJsLight from '@assets/mp4/light/custom-js.mp4';
+import resizeAnchorLight from '@assets/mp4/light/resize-anchor.mp4';
+import obsModeLight from '@assets/mp4/light/obs-mode.mp4';
+import type { ResolvedUiTheme } from '@src/types/settings/settings';
 
 /*
  * 클립은 1036x748로 렌더한다. 미리보기 창 518x374의 2배다.
@@ -15,25 +25,56 @@ import obsModeClip from '@assets/mp4/obs-mode.mp4';
  * 두 막대의 h-[30px], h-[60px]은 box-sizing이 border-box라 테두리를 포함한다.
  * 테두리를 밖에 더해 372로 잡으면 object-cover가 0.54% 확대하면서 1px 선이
  * 서브픽셀에 퍼지고, 압축 잡음이 선이 흔들리는 것처럼 보인다.
- * 창 크기나 두 막대 높이를 바꾸면 클립도 다시 렌더해야 한다
+ * 창 크기나 두 막대 높이를 바꾸면 클립도 다시 렌더해야 한다.
+ *
+ * 테마별로 한 벌씩 있다. 구성·모션·길이는 완전히 같고 색만 다르다 -
+ * video 프로젝트가 tokens.css를 렌더 시점에 읽으므로 같은 컴포지션을
+ * data-theme만 바꿔 두 번 뽑는다 (video/README.md 참조)
  */
 export interface PreviewClip {
-  src: string;
+  src: Record<ResolvedUiTheme, string>;
   /** 영상 아래에 겹치는 설명 문구의 i18n 키 */
   caption: string;
 }
 
 // 설정 미리보기 영상. 번들에 포함해 오프라인에서도 즉시 재생
 export const PREVIEW_CLIPS: Record<string, PreviewClip> = {
-  overlayLock: { src: overlayLockClip, caption: 'settings.overlayLockDesc' },
-  alwaysOnTop: { src: alwaysOnTopClip, caption: 'settings.alwaysOnTopDesc' },
-  noteEffect: { src: noteEffectClip, caption: 'settings.noteEffectDesc' },
-  keyCounter: { src: keyCounterClip, caption: 'settings.keyCounterDesc' },
-  trayEnabled: { src: trayEnabledClip, caption: 'settings.trayEnabledDesc' },
-  customCSS: { src: customCssClip, caption: 'settings.customCSSDesc' },
-  customJS: { src: customJsClip, caption: 'settings.customJSDesc' },
-  resizeAnchor: { src: resizeAnchorClip, caption: 'settings.resizeAnchorDesc' },
-  obsMode: { src: obsModeClip, caption: 'settings.obsGuide' },
+  overlayLock: {
+    src: { dark: overlayLockClip, light: overlayLockLight },
+    caption: 'settings.overlayLockDesc',
+  },
+  alwaysOnTop: {
+    src: { dark: alwaysOnTopClip, light: alwaysOnTopLight },
+    caption: 'settings.alwaysOnTopDesc',
+  },
+  noteEffect: {
+    src: { dark: noteEffectClip, light: noteEffectLight },
+    caption: 'settings.noteEffectDesc',
+  },
+  keyCounter: {
+    src: { dark: keyCounterClip, light: keyCounterLight },
+    caption: 'settings.keyCounterDesc',
+  },
+  trayEnabled: {
+    src: { dark: trayEnabledClip, light: trayEnabledLight },
+    caption: 'settings.trayEnabledDesc',
+  },
+  customCSS: {
+    src: { dark: customCssClip, light: customCssLight },
+    caption: 'settings.customCSSDesc',
+  },
+  customJS: {
+    src: { dark: customJsClip, light: customJsLight },
+    caption: 'settings.customJSDesc',
+  },
+  resizeAnchor: {
+    src: { dark: resizeAnchorClip, light: resizeAnchorLight },
+    caption: 'settings.resizeAnchorDesc',
+  },
+  obsMode: {
+    src: { dark: obsModeClip, light: obsModeLight },
+    caption: 'settings.obsGuide',
+  },
 };
 
 export const PREVIEW_KEYS = Object.keys(PREVIEW_CLIPS);
diff --git a/src/renderer/defaults.test.ts b/src/renderer/defaults.test.ts
index 32201c923..fe9075e59 100644
--- a/src/renderer/defaults.test.ts
+++ b/src/renderer/defaults.test.ts
@@ -46,6 +46,7 @@ describe('부트스트랩 전 폴백 기본값 (Rust SettingsState::default 파
       },
       fontSettings: { customFonts: [] },
       angleMode: 'd3d11',
+      uiTheme: 'system',
       language: 'ko',
       laboratoryEnabled: false,
       developerModeEnabled: false,
diff --git a/src/renderer/defaults.ts b/src/renderer/defaults.ts
index 541f3b702..691758c93 100644
--- a/src/renderer/defaults.ts
+++ b/src/renderer/defaults.ts
@@ -199,6 +199,7 @@ function FALLBACK_SETTINGS_STATE(): SettingsState {
     fontSettings: { customFonts: [] },
     angleMode: isMac() ? 'metal' : 'd3d11',
     language: 'ko',
+    uiTheme: 'system',
     laboratoryEnabled: false,
     developerModeEnabled: false,
     trayEnabled: false,
diff --git a/src/renderer/hooks/app/useAppBootstrap.ts b/src/renderer/hooks/app/useAppBootstrap.ts
index 005ee7516..365a025a4 100644
--- a/src/renderer/hooks/app/useAppBootstrap.ts
+++ b/src/renderer/hooks/app/useAppBootstrap.ts
@@ -106,6 +106,7 @@ function buildSettingsSnapshot(
     alwaysOnTop: bootstrap.settings.alwaysOnTop,
     overlayLocked: bootstrap.settings.overlayLocked,
     angleMode: bootstrap.settings.angleMode,
+    uiTheme: bootstrap.settings.uiTheme,
     noteEffect: bootstrap.settings.noteEffect,
     noteSettings: bootstrap.settings.noteSettings,
     tabNoteOverrides,
diff --git a/src/renderer/hooks/app/useAppTheme.test.tsx b/src/renderer/hooks/app/useAppTheme.test.tsx
new file mode 100644
index 000000000..767a6aea8
--- /dev/null
+++ b/src/renderer/hooks/app/useAppTheme.test.tsx
@@ -0,0 +1,106 @@
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAppTheme } from './useAppTheme';
+import { useSettingsStore } from '@stores/useSettingsStore';
+import {
+  readCachedThemePreference,
+  THEME_CACHE_KEY,
+} from '@utils/theme/applyTheme';
+
+const Host = () => {
+  useAppTheme();
+  return null;
+};
+
+describe('useAppTheme', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let systemIsLight: boolean;
+  let emitSystemChange: () => void;
+  let addEventListener: ReturnType<typeof vi.fn>;
+  let removeEventListener: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+    systemIsLight = true;
+    const listeners = new Set<() => void>();
+    addEventListener = vi.fn((_type: string, listener: () => void) => {
+      listeners.add(listener);
+    });
+    removeEventListener = vi.fn((_type: string, listener: () => void) => {
+      listeners.delete(listener);
+    });
+    emitSystemChange = () => listeners.forEach((listener) => listener());
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn(() => ({
+        get matches() {
+          return systemIsLight;
+        },
+        media: '(prefers-color-scheme: light)',
+        onchange: null,
+        addEventListener,
+        removeEventListener,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+
+    localStorage.clear();
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.style.backgroundColor = '#131315';
+    useSettingsStore.setState({ uiTheme: 'system' });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    localStorage.clear();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('bootstrap 완료를 기다리지 않고 현재 설정을 적용한다', () => {
+    useSettingsStore.setState({ uiTheme: 'dark' });
+    act(() => root.render(<Host />));
+
+    expect(document.documentElement.dataset.theme).toBe('dark');
+    expect(localStorage.getItem(THEME_CACHE_KEY)).toBe('dark');
+  });
+
+  it('system이면 즉시 OS 변경을 구독하고 명시 테마로 바뀔 때 해제한다', () => {
+    act(() => root.render(<Host />));
+
+    expect(document.documentElement.dataset.theme).toBe('light');
+    expect(addEventListener).toHaveBeenCalledTimes(1);
+
+    systemIsLight = false;
+    act(() => emitSystemChange());
+    expect(document.documentElement.dataset.theme).toBe('dark');
+
+    act(() => useSettingsStore.setState({ uiTheme: 'light' }));
+    expect(removeEventListener).toHaveBeenCalledTimes(1);
+    expect(document.documentElement.dataset.theme).toBe('light');
+  });
+
+  it('캐시가 유효할 때만 초기 설정 힌트로 사용한다', () => {
+    localStorage.setItem(THEME_CACHE_KEY, 'light');
+    expect(readCachedThemePreference('system')).toBe('light');
+
+    localStorage.setItem(THEME_CACHE_KEY, 'invalid');
+    expect(readCachedThemePreference('system')).toBe('system');
+  });
+
+  it('캐시 접근이 실패하면 기본 설정으로 폴백한다', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('storage blocked');
+    });
+
+    expect(readCachedThemePreference('dark')).toBe('dark');
+  });
+});
diff --git a/src/renderer/hooks/app/useAppTheme.ts b/src/renderer/hooks/app/useAppTheme.ts
new file mode 100644
index 000000000..24307dcf8
--- /dev/null
+++ b/src/renderer/hooks/app/useAppTheme.ts
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useSettingsStore } from '@stores/useSettingsStore';
+import {
+  applyResolvedTheme,
+  cacheThemePreference,
+  resolveTheme,
+  subscribeSystemTheme,
+} from '@utils/theme/applyTheme';
+
+/**
+ * 앱 UI 테마를 문서에 반영한다.
+ *
+ * 설정값(system/light/dark)을 실제 테마로 해석해 documentElement에 data-theme으로
+ * 싣는다. 토큰이 [data-theme] 아래에만 있으므로 이 속성이 팔레트의 유일한 스위치다.
+ * system일 때만 OS 변경을 구독한다 - 명시 선택은 OS와 무관해야 한다.
+ *
+ * 메인 창에서만 호출한다. 오버레이와 OBS는 사용자 콘텐츠 대역이라
+ * 문서 html에 다크가 정적으로 박혀 있다
+ */
+export const useAppTheme = () => {
+  const preference = useSettingsStore((state) => state.uiTheme);
+
+  useEffect(() => {
+    cacheThemePreference(preference);
+    applyResolvedTheme(resolveTheme(preference));
+    if (preference !== 'system') return;
+    return subscribeSystemTheme(() => {
+      applyResolvedTheme(resolveTheme('system'));
+    });
+  }, [preference]);
+};
diff --git a/src/renderer/hooks/app/useResolvedTheme.ts b/src/renderer/hooks/app/useResolvedTheme.ts
new file mode 100644
index 000000000..c0890968c
--- /dev/null
+++ b/src/renderer/hooks/app/useResolvedTheme.ts
@@ -0,0 +1,19 @@
+import { useSyncExternalStore } from 'react';
+import {
+  getResolvedTheme,
+  subscribeResolvedTheme,
+} from '@utils/theme/applyTheme';
+import type { ResolvedUiTheme } from '@src/types/settings/settings';
+
+/**
+ * 지금 그려지고 있는 테마를 읽는다.
+ *
+ * CSS 토큰으로 해결되는 것은 이 훅이 필요 없다. 토큰 밖에 있는 자산을
+ * 테마별로 갈아끼워야 할 때만 쓴다 (미리보기 클립 등)
+ */
+export const useResolvedTheme = (): ResolvedUiTheme =>
+  useSyncExternalStore(
+    subscribeResolvedTheme,
+    getResolvedTheme,
+    getResolvedTheme,
+  );
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index 8e2e3bbb9..5673c582b 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -77,6 +77,10 @@
     "pluginDataScope": "Settings and history",
     "pluginDataKeepTail": " stay untouched.",
     "pluginDataWipeTail": " are gone for good.",
+    "appTheme": "Appearance",
+    "themeSystem": "System",
+    "themeLight": "Light",
+    "themeDark": "Dark",
     "language": "Language",
     "selectLanguage": "Select Language",
     "shortcuts": "Shortcuts",
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index e0e797f02..58f97fddb 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -77,6 +77,10 @@
     "pluginDataScope": "설정과 히스토리",
     "pluginDataKeepTail": "는 그대로 남습니다.",
     "pluginDataWipeTail": "까지 사라져 되돌릴 수 없습니다.",
+    "appTheme": "테마",
+    "themeSystem": "시스템 설정",
+    "themeLight": "라이트",
+    "themeDark": "다크",
     "language": "언어 설정",
     "selectLanguage": "언어 선택",
     "shortcuts": "단축키 설정",
diff --git a/src/renderer/locales/ru.json b/src/renderer/locales/ru.json
index 7529d2782..10160c1d7 100644
--- a/src/renderer/locales/ru.json
+++ b/src/renderer/locales/ru.json
@@ -77,6 +77,10 @@
     "pluginDataScope": "Настройки и история",
     "pluginDataKeepTail": " останутся нетронутыми.",
     "pluginDataWipeTail": " исчезнут безвозвратно.",
+    "appTheme": "Оформление",
+    "themeSystem": "Системная",
+    "themeLight": "Светлая",
+    "themeDark": "Тёмная",
     "language": "Язык",
     "selectLanguage": "Выбор языка",
     "shortcuts": "Горячие клавиши",
diff --git a/src/renderer/locales/zh-Hant.json b/src/renderer/locales/zh-Hant.json
index fd5e8e5b1..99e037517 100644
--- a/src/renderer/locales/zh-Hant.json
+++ b/src/renderer/locales/zh-Hant.json
@@ -77,6 +77,10 @@
     "pluginDataScope": "設定與歷史紀錄",
     "pluginDataKeepTail": "會保留。",
     "pluginDataWipeTail": "將永久消失。",
+    "appTheme": "外觀",
+    "themeSystem": "跟隨系統",
+    "themeLight": "淺色",
+    "themeDark": "深色",
     "language": "語言",
     "selectLanguage": "選擇語言",
     "shortcuts": "快捷鍵",
diff --git a/src/renderer/locales/zh-cn.json b/src/renderer/locales/zh-cn.json
index 583948b65..ec94662fa 100644
--- a/src/renderer/locales/zh-cn.json
+++ b/src/renderer/locales/zh-cn.json
@@ -77,6 +77,10 @@
     "pluginDataScope": "设置与历史记录",
     "pluginDataKeepTail": "会保留。",
     "pluginDataWipeTail": "将永久消失。",
+    "appTheme": "外观",
+    "themeSystem": "跟随系统",
+    "themeLight": "浅色",
+    "themeDark": "深色",
     "language": "语言",
     "selectLanguage": "选择语言",
     "shortcuts": "快捷键",
diff --git a/src/renderer/plugins/runtime/api/defineElement.ts b/src/renderer/plugins/runtime/api/defineElement.ts
index 40fae2ff6..b2d9520df 100644
--- a/src/renderer/plugins/runtime/api/defineElement.ts
+++ b/src/renderer/plugins/runtime/api/defineElement.ts
@@ -850,7 +850,7 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
           normalizedSections.some((section) => section.renderVisible)
             ? 'display:none'
             : ''
-        }" class="text-fg-faint text-body text-center">${noSettingsText}</div>`;
+        }" class="text-fg-caption text-body text-center">${noSettingsText}</div>`;
 
         htmlContent += '</div>';
 
diff --git a/src/renderer/plugins/runtime/api/defineSettings.ts b/src/renderer/plugins/runtime/api/defineSettings.ts
index 83d10abad..a15fe6694 100644
--- a/src/renderer/plugins/runtime/api/defineSettings.ts
+++ b/src/renderer/plugins/runtime/api/defineSettings.ts
@@ -433,7 +433,7 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
           normalizedSections.some((section) => section.renderVisible)
             ? 'display:none'
             : ''
-        }" class="text-fg-faint text-body text-center">${noSettingsText}</div>`;
+        }" class="text-fg-caption text-body text-center">${noSettingsText}</div>`;
 
         htmlContent += '</div>';
 
diff --git a/src/renderer/stores/useSettingsStore.initialTheme.test.ts b/src/renderer/stores/useSettingsStore.initialTheme.test.ts
new file mode 100644
index 000000000..4d89eddf9
--- /dev/null
+++ b/src/renderer/stores/useSettingsStore.initialTheme.test.ts
@@ -0,0 +1,29 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { THEME_CACHE_KEY } from '@utils/theme/applyTheme';
+
+describe('useSettingsStore 초기 테마', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it('첫 화면과 같은 유효한 캐시 값으로 초기화한다', async () => {
+    localStorage.setItem(THEME_CACHE_KEY, 'light');
+
+    const { useSettingsStore } = await import('./useSettingsStore');
+
+    expect(useSettingsStore.getState().uiTheme).toBe('light');
+  });
+
+  it('유효하지 않은 캐시는 canonical 기본값으로 폴백한다', async () => {
+    localStorage.setItem(THEME_CACHE_KEY, 'invalid');
+
+    const { useSettingsStore } = await import('./useSettingsStore');
+
+    expect(useSettingsStore.getState().uiTheme).toBe('system');
+  });
+});
diff --git a/src/renderer/stores/useSettingsStore.test.ts b/src/renderer/stores/useSettingsStore.test.ts
index 862060b1b..7a1d216f8 100644
--- a/src/renderer/stores/useSettingsStore.test.ts
+++ b/src/renderer/stores/useSettingsStore.test.ts
@@ -17,6 +17,7 @@ const createSnapshot = (
   alwaysOnTop: true,
   overlayLocked: false,
   angleMode: 'd3d11',
+  uiTheme: 'system',
   noteEffect: true,
   noteSettings: getDefaultNoteSettings(),
   tabNoteOverrides: {},
diff --git a/src/renderer/stores/useSettingsStore.ts b/src/renderer/stores/useSettingsStore.ts
index bfdc80c93..752f73f49 100644
--- a/src/renderer/stores/useSettingsStore.ts
+++ b/src/renderer/stores/useSettingsStore.ts
@@ -4,11 +4,15 @@ import type {
   TabNoteOverrides,
 } from '@src/types/settings/noteSettings';
 import type { FontSettings } from '@src/types/settings/fonts';
-import type { OverlayResizeAnchor } from '@src/types/settings/settings';
+import type {
+  OverlayResizeAnchor,
+  UiThemePreference,
+} from '@src/types/settings/settings';
 import type { JsPlugin } from '@src/types/plugin/js';
 import type { ShortcutsState } from '@src/types/settings/shortcuts';
 import { getDefaultSettingsState } from '@src/renderer/defaults';
 import { stableStringify } from '@utils/core/stableStringify';
+import { readCachedThemePreference } from '@utils/theme/applyTheme';
 
 export interface GridSettings {
   alignmentGuides: boolean;
@@ -35,6 +39,7 @@ interface SettingsState {
   jsPlugins: JsPlugin[];
   backgroundColor: string;
   language: string;
+  uiTheme: UiThemePreference;
   laboratoryEnabled: boolean;
   developerModeEnabled: boolean;
   trayEnabled: boolean;
@@ -65,6 +70,7 @@ interface SettingsState {
   setTabNoteOverrides: (value: TabNoteOverrides) => void;
   setFontSettings: (value: FontSettings) => void;
   setLanguage: (value: string) => void;
+  setUiTheme: (value: UiThemePreference) => void;
   setBackgroundColor: (value: string) => void;
   setOverlayResizeAnchor: (value: OverlayResizeAnchor) => void;
   setKeyCounterEnabled: (value: boolean) => void;
@@ -79,6 +85,7 @@ export type SettingsStateSnapshot = Omit<
   | 'merge'
   | 'syncFromSnapshot'
   | 'setLaboratoryEnabled'
+  | 'setUiTheme'
   | 'setTrayEnabled'
   | 'setAutoUpdateEnabled'
   | 'setHardwareAcceleration'
@@ -123,6 +130,7 @@ const initialState: SettingsStateSnapshot = {
   jsPlugins: settingsDefaults.customJS.plugins,
   backgroundColor: settingsDefaults.backgroundColor,
   language: settingsDefaults.language,
+  uiTheme: readCachedThemePreference(settingsDefaults.uiTheme),
   laboratoryEnabled: settingsDefaults.laboratoryEnabled,
   developerModeEnabled: settingsDefaults.developerModeEnabled,
   trayEnabled: settingsDefaults.trayEnabled,
@@ -233,6 +241,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   setTabNoteOverrides: (value) => set({ tabNoteOverrides: value }),
   setFontSettings: (value) => set({ fontSettings: value }),
   setLanguage: (value) => set({ language: value }),
+  setUiTheme: (value) => set({ uiTheme: value }),
   setLaboratoryEnabled: (value) => set({ laboratoryEnabled: value }),
   setTrayEnabled: (value) => set({ trayEnabled: value }),
   setBackgroundColor: (value) => set({ backgroundColor: value }),
diff --git a/src/renderer/styles/main.css b/src/renderer/styles/main.css
index dde16ef06..9bebed1de 100644
--- a/src/renderer/styles/main.css
+++ b/src/renderer/styles/main.css
@@ -100,33 +100,43 @@ body.dmn-dragging * {
    글래스는 일시 표면(모달·팝업) 전용 유지. 표면 transform은 등퇴장 한 번만
    허용하고, 상주 중 반복 애니메이션은 금지 (프레임마다 재필터를 부름) */
 .backdrop-glass {
-  -webkit-backdrop-filter: blur(32px) brightness(var(--ui-glass-backdrop-dim))
+  -webkit-backdrop-filter: blur(32px)
+    contrast(var(--ui-glass-backdrop-contrast))
+    brightness(var(--ui-glass-backdrop-dim))
     saturate(var(--ui-glass-backdrop-sat));
-  backdrop-filter: blur(32px) brightness(var(--ui-glass-backdrop-dim))
+  backdrop-filter: blur(32px) contrast(var(--ui-glass-backdrop-contrast))
+    brightness(var(--ui-glass-backdrop-dim))
     saturate(var(--ui-glass-backdrop-sat));
 }
 
 .backdrop-glass-popup {
-  -webkit-backdrop-filter: blur(24px) brightness(var(--ui-glass-backdrop-dim))
+  -webkit-backdrop-filter: blur(24px)
+    contrast(var(--ui-glass-backdrop-contrast))
+    brightness(var(--ui-glass-backdrop-dim))
     saturate(var(--ui-glass-backdrop-sat));
-  backdrop-filter: blur(24px) brightness(var(--ui-glass-backdrop-dim))
+  backdrop-filter: blur(24px) contrast(var(--ui-glass-backdrop-contrast))
+    brightness(var(--ui-glass-backdrop-dim))
     saturate(var(--ui-glass-backdrop-sat));
 }
 
 /* canvas 위 표면은 배경색이 재질을 지배하지 않게 clamp 강화 */
 :where(.backdrop-glass-canvas).backdrop-glass {
   -webkit-backdrop-filter: blur(32px)
+    contrast(var(--ui-glass-canvas-backdrop-contrast))
     brightness(var(--ui-glass-canvas-backdrop-dim))
     saturate(var(--ui-glass-canvas-backdrop-sat));
-  backdrop-filter: blur(32px) brightness(var(--ui-glass-canvas-backdrop-dim))
+  backdrop-filter: blur(32px) contrast(var(--ui-glass-canvas-backdrop-contrast))
+    brightness(var(--ui-glass-canvas-backdrop-dim))
     saturate(var(--ui-glass-canvas-backdrop-sat));
 }
 
 :where(.backdrop-glass-canvas).backdrop-glass-popup {
   -webkit-backdrop-filter: blur(24px)
+    contrast(var(--ui-glass-canvas-backdrop-contrast))
     brightness(var(--ui-glass-canvas-backdrop-dim))
     saturate(var(--ui-glass-canvas-backdrop-sat));
-  backdrop-filter: blur(24px) brightness(var(--ui-glass-canvas-backdrop-dim))
+  backdrop-filter: blur(24px) contrast(var(--ui-glass-canvas-backdrop-contrast))
+    brightness(var(--ui-glass-canvas-backdrop-dim))
     saturate(var(--ui-glass-canvas-backdrop-sat));
 }
 
@@ -136,7 +146,7 @@ body.dmn-dragging * {
    블러는 첫 프레임부터 상수, 틴트만 페이드. Windows에서 모달 연 채
    키 연타 프레임 실측이 유지 조건 */
 .backdrop-glass-scrim {
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--ui-scrim);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
 }
@@ -164,15 +174,17 @@ body.dmn-dragging * {
 /* 투명도 축소 설정 존중 — 남는 라이브 글래스(모달 카드·팝오버)를 고알파 솔리드로 강등
    틴트 토큰만 요소 스코프에서 승격해 라운딩·인셋 링 재질은 그대로 유지.
    값은 캔버스 위 라이브 합성 결과 기준 — 고알파 솔리드는 뒷면을 거의 안 받으므로
-   스크림 위 모달에서는 라이브보다 한 톤 밝게 뜬다. blur 없이는 맥락 반영이 불가능 */
+   스크림 위 모달에서는 라이브보다 한 톤 밝게 뜬다. blur 없이는 맥락 반영이 불가능.
+   승격 값을 리터럴로 두면 요소 스코프가 테마 루트를 이겨 라이트에서도 다크 면이 뜬다 -
+   반드시 테마가 소유한 *-reduced 토큰을 거칠 것 */
 @media (prefers-reduced-transparency: reduce) {
   .backdrop-glass,
   .backdrop-glass-popup {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
-    --ui-glass: rgba(26, 26, 30, 0.96);
-    --ui-glass-heavy: rgba(32, 32, 36, 0.96);
-    --ui-glass-dim: rgba(22, 22, 26, 0.94);
+    --ui-glass: var(--ui-glass-reduced);
+    --ui-glass-heavy: var(--ui-glass-heavy-reduced);
+    --ui-glass-dim: var(--ui-glass-dim-reduced);
   }
 
   /* 스크림은 블러만 끄고 알파 딤으로 폴백 */
@@ -189,7 +201,7 @@ body.dmn-dragging * {
 
   /* 글래스 패널 틴트 사용처(사이드 패널 프레임·캔버스 팝업)도 동일 승격 */
   .bg-glass-panel {
-    --ui-glass-panel: rgba(25, 25, 29, 0.96);
+    --ui-glass-panel: var(--ui-glass-panel-reduced);
   }
 }
 
@@ -796,7 +808,7 @@ body.dmn-dragging * {
    램프를 올릴 때마다 거터만 유독 깊게 파인다 */
 .webfont-cm-editor .cm-gutters {
   background: var(--ui-bg-app);
-  color: var(--ui-fg-faint);
+  color: var(--ui-fg-caption);
   border: none;
 }
 
@@ -846,16 +858,16 @@ body.dmn-dragging * {
 }
 
 .webfont-cm-editor .cm-scroller::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
+  background: var(--ui-scrollbar-thumb);
   border-radius: 2px;
 }
 
 .webfont-cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--ui-scrollbar-thumb-hover);
 }
 
 .webfont-cm-editor .cm-scroller::-webkit-scrollbar-thumb:active {
-  background: rgba(255, 255, 255, 0.26);
+  background: var(--ui-scrollbar-thumb-active);
 }
 
 /* 모션 축소 설정 존중 — 이동은 제거, 표시 자체는 유지 */
diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index 70c2f27e6..07a6984cc 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -1,340 +1,14 @@
 /*
- * 디자인 토큰 — 모든 윈도우에서 로드됨
+ * 디자인 토큰 배럴 — 모든 윈도우에서 로드됨
  * UI 색·모션·그림자의 단일 소스. 컴포넌트에서 hex 직접 사용 금지
+ *
+ * base    테마 무관 값 (라운딩, 모션, 레이어 스택)
+ * dark    :root:where([data-theme='dark'])
+ * light   :root:where([data-theme='light'])
+ *
+ * 두 테마 파일은 키 집합과 선언 순서가 같아야 한다.
+ * 다크를 bare :root 폴백으로 두지 않으므로 문서 html에 data-theme이 반드시 있어야 한다
  */
-:root {
-  /* 배경 — 값은 macOS 다크를 실측해서 맞춘 것이다 (같은 디스플레이에서 시스템 설정 창 캡처 +
-     NSColor 다크 카탈로그 직접 조회). 애플 windowBackgroundColor가 정확히 #1e1e1e다.
-
-     중요한 건 절대 밝기가 아니라 단계 폭이다. 애플은 사이드바 30 → 콘텐츠 34(+4) →
-     카드 42(+8) → 인풋 49(+7)로 아주 촘촘하고, 창 픽셀의 92%가 L* 10~19에 들어간다.
-     폭을 벌리면 밝은 쪽 끝이 튀어서 전체가 '밝다'고 읽힌다 — 베이스를 내려도 안 고쳐진다.
-
-     애플 카탈로그는 a*=b*=0으로 완전 무채색이다. 화면에 도는 색조는 팔레트가 심는 게
-     아니라 Desktop Tinting이 만든다. 여기에 색 편향을 넣지 말 것 */
-  --ui-bg-app: #131315;
-  --ui-bg-panel: #1b1b1d;
-  --ui-bg-surface: #232325;
-  --ui-bg-elevated: #1f1f21;
-  /* 컨트롤 필 — 반투명 화이트라 어느 표면 위서든 한 단계 밝게 뜸
-     근흑 배경에선 어두운 홈이 배경과 구분되지 않아 인풋·트랙은 밝은 필이 기준
-     조작면(--ui-fill 0.072)보다 아래 유지 — 정적 홈과 인터랙티브 필의 밝기 구분.
-     같은 정적 면인 --ui-fill-faint와는 같은 단에 둔다
-     알파 기준은 ΔL*가 아니라 베버 대비(ΔsRGB/베이스)다. 어두운 자발광 UI에서
-     인접면 분리는 상대 대비가 지배한다 — L*를 고정하면 베이스가 밝아진 만큼
-     상대 대비가 깎여 면이 뭉갠다 (실측으로 확인) */
-  --ui-bg-inset: rgba(255, 255, 255, 0.035);
-  /* 불투명 웰 — 코드 에디터처럼 배경이 흔들리면 안 되는 표면 전용 */
-  --ui-bg-inset-solid: #161618;
-  /* 분리된 속성 패널 창의 바닥 — 창 자체가 transparent라 알파를 쓰면 데스크톱이 비친다.
-     값은 도킹 상태의 사이드 패널(--ui-glass-panel 합성 결과)과 같은 L*에 맞춰 둠.
-     Windows는 첫 페인트 전 구간을 같은 색으로 메우므로 windows_window_corners.rs의
-     SEED_FILL과 함께 바꿀 것 */
-  --ui-bg-panel-detached: #1c1c1e;
-
-  /* 글래스 표면 — 스모크 재질. 팝업·패널 0.72, 캔버스 크롬 0.6
-     알파 ↓ = 배경 투과 ↑ (글래스 체감의 1차 다이얼). 분리는 그림자 토큰의 인셋 링+상단 하이라이트가 담당, 보더 금지
-     틴트는 backdrop-filter → 루미노시티 캡 → 틴트 3단 합성을 거친 최종 L*에서 역산한 값이라
-     틴트 색만 보고 표면 밝기를 읽으면 안 된다. 캡 틴트도 같이 움직여야 의도한 만큼 올라온다 */
-  --ui-glass: rgba(28, 28, 30, 0.72);
-  /* 모달·시트·피커용 — 중앙 모달은 스크림(.backdrop-glass-scrim 딤+블러)이 뒤에 겹쳐
-     실효 밀도는 스크림×틴트. 스크림 알파와 함께 조절할 것
-     알파는 사이드 패널과 같은 0.72로 맞춰 뒷면 비침을 패널 수준으로 억제.
-     틴트는 밝기 티어상 패널보다 한 톤 위에 서도록 잡음 */
-  --ui-glass-heavy: rgba(36, 36, 38, 0.72);
-  /* 캔버스 상주 크롬용 — 배경보다 한 톤 어두운 스모크 */
-  --ui-glass-dim: rgba(22, 22, 24, 0.6);
-  /* 사이드 패널용 — 캔버스보다 살짝 아래에 둔다. 상주 표면이라 여기를 올리면
-     패널 안 3단(패널/카드/칩)의 베이스가 통째로 밝아져 베버 대비가 깎이고
-     세 면이 한 덩어리로 뭉갠다. 분리는 밝기가 아니라 인셋 링+좌측 드롭섀도가 담당.
-     밝기 티어: 캔버스 칩 < 패널 < 캔버스 < 드롭다운 < 모달 */
-  --ui-glass-panel: rgba(26, 26, 28, 0.72);
-  /* 상주 크롬 솔리드 — 사이드 패널·미니맵처럼 상시 떠 있는 표면은 라이브 블러 대신
-     고알파 틴트로 근사 (Windows에서 backdrop-filter가 매 프레임 면적 비례 재필터)
-     알파가 유일한 다이얼: 낮출수록 배경 투과 ↑, 글래스 질감은 인셋 링+하이라이트가 유지
-     값은 라이브 글래스와 같은 L*에 서도록 맞춰 둠 — 전환 시 단차가 안 생기게 */
-  --ui-glass-panel-solid: rgba(28, 28, 30, 0.96);
-  --ui-glass-dim-solid: rgba(24, 24, 26, 0.94);
-  /* 글래스 백드롭 클램프 — 틴트 전에 배경 밝기를 누르고, 죽은 채도는 보상
-     dim ↓ = 밝은 배경 투과 억제. 과하게 누르면 투과 변화 자체가 죽어 글래스가 안 읽힘 / sat = 색기운 유지량 */
-  --ui-glass-backdrop-dim: 0.8;
-  --ui-glass-backdrop-sat: 1;
-  /* canvas 위 글래스 전용 - blur와 배경 변화는 남기고 색조 지배만 억제 */
-  --ui-glass-canvas-backdrop-dim: 0.62;
-  --ui-glass-canvas-backdrop-sat: 0.35;
-  /* 루미노시티 캡 - 투과 결과의 휘도를 어두운 쪽으로 강제 (색조는 유지)
-     0 = 끔, 1 = 완전 캡. 필터와 독립 동작하는 2차 안전망 */
-  --ui-glass-backdrop-lum: 0.1;
-  /* 캡의 기준 휘도 — --ui-glass 틴트와 같은 색을 유지할 것.
-     여기만 어두운 채로 두면 유리 틴트를 올려도 캡이 휘도를 도로 끌어내린다 */
-  --ui-glass-backdrop-lum-tint: #1c1c1e;
-
-  /* 경계선 — 장식용 금지, 기능적 구획(바/플로팅 크롬/폼 컨트롤)에만 사용.
-     --ui-line 0.1은 애플 separatorColor(화이트 α0.098) 실측값과 일치한다.
-     화면 픽셀에서 역산하면 0.047쯤 나오는데 그건 안티에일리어싱이 섞인 값이라
-     선언값으로 쓰면 선이 절반 이하로 흐려진다. 내리지 말 것 */
-  --ui-line: rgba(255, 255, 255, 0.1);
-  --ui-line-strong: rgba(255, 255, 255, 0.14);
-  /* 캔버스/스테이지 보조 격자선 — 메이저(--ui-line)보다 한 톤 흐림 */
-  --ui-line-faint: rgba(255, 255, 255, 0.06);
-
-  /* 투명 색상 체커 */
-  --ui-checker-pattern: conic-gradient(
-    #666 0.25turn,
-    #999 0.25turn 0.5turn,
-    #666 0.5turn 0.75turn,
-    #999 0.75turn
-  );
-  --ui-checker-size: 8px;
-  /* 소형 스와치(11~23px)용 — 8px 타일은 2×2칸이라 깨진 텍스처로 읽힘 */
-  --ui-checker-size-sm: 4px;
-
-  /* 크롬 필 — 반투명 화이트 오버레이 상태 래더 (idle → hover → active)
-     알파 기준은 베버 대비. --ui-bg-inset 주석 참조 */
-  --ui-fill: rgba(255, 255, 255, 0.072);
-  --ui-fill-hover: rgba(255, 255, 255, 0.108);
-  --ui-fill-active: rgba(255, 255, 255, 0.145);
-  /* 정적 그룹 컨테이너용 — 인터랙션 없는 은은한 면 */
-  --ui-fill-faint: rgba(255, 255, 255, 0.035);
-
-  /* 텍스트 위계 — 애플 실측(1차 L*88.6 / 2차 65.5 / 3차 59.2)에 맞춘 값.
-     체감 눈부심에는 표면보다 텍스트가 더 크게 기여한다. 순백에 가까운 본문색을 두고
-     표면만 조절하면 '밝다'는 인상이 안 잡힌다.
-     애플은 가장 밝은 표면(L*21.7)과 가장 어두운 텍스트(L*59.2) 사이 37 L*를 통째로 비워
-     텍스트와 경쟁하는 면을 두지 않는다.
-     목록 웰의 꺼짐 행 이름(disabled)이 4.5:1에 못 미치는 것은 의도된 값이다 —
-     기준을 맞추는 가장 어두운 회색은 muted와 구분이 안 돼 '꺼짐'으로 읽히지 않는다.
-     근거와 대안 검토는 SettingsPanel/panelChrome.ts 참조 */
-  --ui-fg: #dcdcde;
-  --ui-fg-muted: #9d9d9f;
-  --ui-fg-faint: #8c8c8e;
-  --ui-fg-disabled: #68686a;
-
-  /* 액센트 — 브랜드 퍼플. 인디케이터·포커스 등 작은 지점용 */
-  --ui-accent: #8b5cf6;
-  --ui-accent-hover: #9d74f8;
-  --ui-accent-active: #7a4be0;
-  --ui-accent-muted: rgba(139, 92, 246, 0.16);
-  --ui-accent-fg: #ffffff;
-  /* 큰 면적 CTA용 — 면적이 클수록 휘도·채도를 내림 (다크에서 눈부심 방지) */
-  --ui-accent-deep: #6b4ad0;
-  --ui-accent-deep-hover: #7857d8;
-  --ui-accent-deep-active: #5f40bd;
-
-  /* 캔버스 정렬 가이드 — 선택 크롬(바이올렛)과 색으로 갈라야 하는 별개 신호라
-     시맨틱 danger를 재사용하지 않는다. 오류가 아니라 위치 스냅 표시 */
-  --ui-guide-align: #ff6b6b;
-  --ui-guide-align-glow: rgba(255, 107, 107, 0.5);
-
-  /* 캔버스 선택 크롬 — 셀렉션은 의미 지점이므로 브랜드 바이올렛 */
-  --ui-selection: #8b5cf6;
-  --ui-selection-border: rgba(139, 92, 246, 0.8);
-  --ui-selection-border-strong: rgba(139, 92, 246, 0.9);
-  --ui-selection-fill: rgba(139, 92, 246, 0.15);
-  --ui-selection-glow: rgba(139, 92, 246, 0.5);
-
-  /* 앱 크롬 전역 스택 */
-  --z-chrome-panel: 30;
-  --z-chrome-popup: 40;
-  --z-chrome-modal: 50;
-  --z-chrome-submenu: 60;
-  --z-chrome-tooltip: 70;
-
-  /* 격리된 그리드 안에서만 비교되는 캔버스 내부 스택.
-     카운터 프리뷰와 드래그 프리뷰는 줌·팬 래퍼 안에 있고 그 래퍼가 transform으로
-     자기 컨텍스트를 만든다 - 아래 선택선·핸들·마퀴와는 애초에 겨루지 않는다 */
-  --z-canvas-counter-preview: 12;
-  --z-canvas-selection-outline: 20;
-  --z-canvas-selection-handle: 21;
-  --z-canvas-group-outline: 22;
-  --z-canvas-group-handle: 25;
-  --z-canvas-gradient-editor: 26;
-  --z-canvas-drag-preview: 1000;
-  --z-canvas-marquee: 9998;
-  --z-canvas-smart-guides: 9999;
-
-  /* 시맨틱 */
-  --ui-danger: #e5484d;
-  --ui-danger-hover: #ec5d62;
-  --ui-danger-active: #d93b40;
-  --ui-danger-muted: rgba(229, 72, 77, 0.14);
-  --ui-danger-muted-hover: rgba(229, 72, 77, 0.2);
-  --ui-danger-muted-active: rgba(229, 72, 77, 0.26);
-  --ui-danger-fg: #ff9599;
-  --ui-success: #3dbe7b;
-  --ui-success-muted: rgba(61, 190, 123, 0.14);
-  --ui-warning: #f0b429;
-  --ui-warning-muted: rgba(240, 180, 41, 0.14);
-
-  /* 라운딩 — 4단: 표면 안 요소 6 < 1차 표면 10 < 팝업 셸 14 < 모달 셸 16 */
-  /* 동심 규칙은 코너 밀착 중첩에만 적용 (팝업 14 = 6 + p-8), 컨트롤은 고정 티어 */
-  /* 모달 셸은 창보다 둥글지 않게 유지 */
-  --ui-radius-inner: 6px;
-  --ui-radius-surface: 10px;
-  --ui-radius-popup: 14px;
-  --ui-radius-modal: 16px;
-
-  /* 모션 */
-  --ui-duration-fast: 120ms;
-  --ui-duration-base: 180ms;
-  --ui-duration-slow: 240ms;
-  --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ui-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-
-  /* 토글 노브 - 끝점을 지나쳤다 돌아온다. 세기는 커브의 y값이 소유한다.
-     1.35는 12px 이동에서 0.49px밖에 넘지 않아 눈에 안 띈다. 1.56이면 1.17px로
-     인셋 2px 안에서 끝나면서 확실히 읽힌다.
-     트랙 색은 노브보다 짧은 clock으로 따로 간다 */
-  --ui-toggle-duration: var(--ui-duration-slow);
-  --ui-toggle-travel: 12px;
-  --ui-toggle-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
-  /* 누름 변형 - 원이 아니라 캡슐이 된다.
-     scale로는 만들 수 없다. 원을 비균등 스케일하면 반지름도 같이 눌려 타원이 될 뿐,
-     위아래 평평한 변이 생기지 않는다. 실제 폭·높이를 바꿔야 반지름이 높이의 절반으로
-     고정된 캡슐이 나온다. 노브는 out-of-flow라 형제 레이아웃에는 영향이 없다 */
-  --ui-toggle-thumb-size: 12px;
-  /* 가로는 건드리지 않는다 - 폭까지 자라면 노브가 부푸는 것처럼 보인다.
-     폭이 높이보다 크기만 하면 반지름이 높이 절반으로 잡혀 위아래 평평한 변이 생긴다 */
-  --ui-toggle-press-height: 10px;
-  /* 누르는 동안 천천히 눌리고, 손을 떼면 빠르게 돌아온다 */
-  --ui-toggle-press-duration: 420ms;
-  --ui-toggle-press-ease: cubic-bezier(0.33, 1, 0.68, 1);
-  --ui-toggle-release-duration: var(--ui-duration-base);
-
-  /* 세그먼트 인디케이터 - 전역 base(180ms)+ease-out-expo를 쓰면 이동의 70%가
-     첫 프레임 안에 끝나 "움직였다"가 아니라 "이미 가 있다"로 읽힌다.
-     실측: 클릭 후 첫 프레임에서 진행률 63~75%.
-     커브를 완만하게 펴서 이동 구간을 프레임에 나눠 준다 - 90% 지점이
-     duration의 33%(expo)에서 54%로 밀린다. 업계도 이 대역이다
-     (Material Web 250ms cubic-bezier(.3,0,0,1), Fluent 300ms, MUI 300ms).
-
-     오버슈트는 keyframe이 아니라 커브의 y값이 소유한다 - 토글 노브(--ui-toggle-ease)와
-     같은 원칙. 1.2는 한 칸 이동(69px)에서 0.9px, 두 칸(139px)에서 1.7px 넘어간다.
-     트랙 안쪽 여백이 2px이라 넘어간 만큼이 트랙 밖으로 새지 않는다.
-     조사한 디자인 시스템 15곳 중 세그먼트에 오버슈트를 쓰는 곳은 없다 - 의도적 일탈이고,
-     이 저장소가 토글에서 이미 같은 선택을 한 것과 문법을 맞춘 것이다.
-     이전에는 translate 소수 픽셀이 정착 시 반올림되며 1px 튀는 아티팩트가 이 역할을
-     대신했는데, translate 0%인 첫 탭에서만 안 나타나고 트랙 폭에 따라 사라져서
-     방향 비대칭으로 읽혔다 */
-  --ui-segment-duration: 220ms;
-  --ui-segment-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
-
-  /* 팝업 등퇴장 - 드롭다운, 팝오버, 피커 공통 다이얼.
-     닫힘이 열림보다 짧은 건 의도, 사라지는 걸 기다릴 이유가 없음 */
-  --ui-popup-enter-duration: var(--ui-duration-base);
-  --ui-popup-exit-duration: var(--ui-duration-fast);
-  --ui-popup-ease: cubic-bezier(0.22, 1, 0.36, 1);
-  /* 커브가 앞쪽에 몰려 있어 이동이 30ms 안에 소모된다.
-     duration을 늘리는 대신 폭을 키워 체감을 확보 */
-  --ui-popup-enter-scale: 0.94;
-  --ui-popup-exit-scale: 0.99;
-
-  /* 카드 모달 등퇴장 - 큰 표면이라 팝업보다 느긋하게 */
-  --ui-modal-enter-duration: 250ms;
-  --ui-modal-exit-duration: 150ms;
-  --ui-modal-enter-scale: 0.96;
-  --ui-modal-exit-scale: 0.96;
-
-  /* 패널 페이지 전환 — 사이드 패널 인-패널 내비게이션 다이얼 */
-  --ui-duration-page: 250ms;
-  --ui-ease-page: cubic-bezier(0.22, 1, 0.36, 1);
-  --ui-page-slide-distance: 8px;
-  --ui-page-blur: 3px;
-
-  /* 아이콘 스왑 — 토글 버튼의 SVG 교체 크로스페이드 다이얼 */
-  --ui-icon-swap-duration: var(--ui-duration-base);
-  --ui-icon-swap-ease: ease-in-out;
-  --ui-icon-swap-blur: 2px;
-  --ui-icon-swap-scale: 0.25;
-
-  /* 글자 스왑 - 아이콘과 달리 스케일 대신 세로 이동. 글자가 커졌다 작아지면
-     자간이 흔들려 읽는 눈이 따라가지 못한다 */
-  --ui-text-swap-duration: var(--ui-duration-fast);
-  --ui-text-swap-ease: ease-in-out;
-  --ui-text-swap-blur: 2px;
-  --ui-text-swap-shift: 4px;
-
-  /* 툴바 아이콘 호버 모션 - 호버 진입에 한 번 재생되고 멈춘다. 반복 없음.
-     400ms 아래로 내리면 무슨 동작인지 읽기 전에 끝나므로 다른 모션보다 느긋하다.
-     동작마다 자연스러운 clock이 달라 지속 시간은 용도별로 따로 둔다 */
-  --ui-icon-ease: cubic-bezier(0.65, 0, 0.35, 1);
-  /* 오버슈트는 keyframe이 아니라 커브의 y값(1.4)이 소유한다.
-     토글 노브(--ui-toggle-ease)와 같은 원칙 */
-  --ui-icon-ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
-
-  --ui-icon-expand-duration: 420ms;
-  /* 누름 - 내려갈 땐 손가락을 따라 즉시, 올라올 땐 스프링으로.
-     복귀가 호버 모션만큼 길면 클릭 결과보다 늦게 끝나 굼뜨게 읽힌다 */
-  --ui-icon-press-down-duration: 80ms;
-  --ui-icon-press-duration: 320ms;
-  --ui-icon-press-scale: 0.8;
-  --ui-icon-eye-duration: 440ms;
-  --ui-icon-nod-duration: 500ms;
-  --ui-icon-tilt-duration: 520ms;
-  --ui-icon-wobble-duration: 560ms;
-  --ui-icon-turn-duration: 600ms;
-  --ui-icon-sweep-duration: 620ms;
-  --ui-icon-fan-duration: 700ms;
-  --ui-icon-punch-duration: 700ms;
-  --ui-icon-shift-duration: 800ms;
-  --ui-icon-stagger: 80ms;
-
-  /* 팔레트 물감 구멍이 다시 터질 때의 크기. 여기서만 값이 오버슈트를 소유한다 -
-     반지름 0.875px에서는 커브가 만드는 오버슈트가 소수점 픽셀이라 화면에 안 나온다 */
-  --ui-icon-punch-pop: 1.3;
-
-  /* 숫자 스텝 팝인 - 값이 바뀐 자릿수만 한 번 튀어오른다.
-     누를 때와 뗄 때 한 번씩만 돈다. 꾹 누르는 구간은 값만 바뀌고 재생하지 않는다 -
-     반복 간격이 재생보다 짧아 매 스텝이 이전 재생을 끊으면 숫자가 깜빡이고
-     값을 눈으로 좇을 수 없다.
-     아이콘 호버(400ms+)보다 짧은 건 의도. 손이 값을 기다리는 컨트롤이다.
-     오버슈트는 keyframe이 아니라 커브의 y값이 소유한다 (--ui-icon-ease-back과 같은 원칙) */
-  --ui-digit-duration: 220ms;
-  --ui-digit-stagger: 40ms;
-  --ui-digit-distance: 6px;
-  --ui-digit-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
-
-  /* 오류 흔들기 - 좌우로 한 번 털고 작은 오버슈트로 멈춘다.
-     구간마다 커브를 따로 걸어야 각 다리가 독립적으로 감속한다.
-     구간 비율(80/80/60/60)은 keyframe %가 소유한다 - 선택자 %에는 calc를 못 써서
-     구간 길이를 토큰으로 쪼개도 총 길이만 바뀌고 분할은 그대로다. 다이얼은 총 길이 하나.
-     폭은 필드 기준으로 잡는다 - 60px 칸에서 6px는 10%라 값이 튀어나간 것처럼 보인다.
-     여기서는 "틀렸다"는 신호만 필요하므로 눈에 걸릴 만큼만 움직인다 */
-  --ui-shake-distance: 3px;
-  --ui-shake-overshoot: 1.5px;
-  --ui-shake-duration: 280ms;
-  --ui-shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
-
-  /* 그림자 — 보더 없는 표면 분리의 핵심. 2/3은 인셋 링+상단 하이라이트로 재질 립 포함
-     인셋 알파는 표면이 밝아진 만큼 올려 립의 ΔL*를 유지 */
-  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
-  --ui-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 8px 24px rgba(0, 0, 0, 0.45),
-    0 2px 6px rgba(0, 0, 0, 0.3);
-  /* 3은 모달 카드 - 스크림이 이미 뒤를 어둡히므로 번짐은 popup보다 한 단계만 넓게 */
-  --ui-shadow-3: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 10px 28px rgba(0, 0, 0, 0.4),
-    0 3px 8px rgba(0, 0, 0, 0.25);
-
-  /* 일시 popup - 인접 control을 덮지 않게 lip은 유지하고 외부 번짐만 축소 */
-  --ui-shadow-popup: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 3px 10px rgba(0, 0, 0, 0.28),
-    0 1px 2px rgba(0, 0, 0, 0.2);
-
-  /* 사이드 패널 — 도킹 경계인 좌측 엣지만 헤어라인, 좌측 방향성 드롭으로 캔버스와 분리 */
-  --ui-shadow-panel: inset 1px 0 0 0 rgba(255, 255, 255, 0.09),
-    -12px 0 32px rgba(0, 0, 0, 0.35);
-
-  /* 상주 크롬 — 인셋 링 + 상단 하이라이트가 보더·재질 담당, 드롭섀도는 흔적만 */
-  --ui-shadow-chrome: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 1px 3px rgba(0, 0, 0, 0.2);
-
-  /* 포커스 링 — 보더 대신 그림자 링.
-     표면 위 3:1이 하한이라 알파를 낮추거나 --ui-accent를 그대로 쓰면 안 된다.
-     액센트 원색은 밝아진 표면에서 3.2:1까지 떨어져 링이 면에 잠긴다 */
-  --ui-focus-ring: 0 0 0 1.5px rgba(160, 121, 248, 0.9);
-
-  /* 확정할 수 없는 입력 - 포커스 링과 같은 자리, 같은 두께로 그려 색만 바뀐다.
-     보더를 쓰면 상자 안쪽이 좁아지고 바깥 포커스 링과 나란히 서서 색이 섞인다 */
-  --ui-danger-ring: 0 0 0 1.5px rgba(240, 106, 111, 0.9);
-}
+@import './tokens/base.css';
+@import './tokens/dark.css';
+@import './tokens/light.css';
diff --git a/src/renderer/styles/tokens/base.css b/src/renderer/styles/tokens/base.css
new file mode 100644
index 000000000..9510e9e14
--- /dev/null
+++ b/src/renderer/styles/tokens/base.css
@@ -0,0 +1,171 @@
+/*
+ * 테마 무관 토큰 - 라운딩, 모션, 레이어 스택
+ * 색과 재질은 tokens/dark.css, tokens/light.css가 소유한다.
+ * 여기에는 색으로 읽히는 값(hex, rgb, hsl, color-mix)을 두지 않는다.
+ * themeTokenParityContract 테스트가 이 규칙을 검사한다
+ */
+:root {
+  /* 투명 색상 체커 타일 크기. 무늬 색은 테마가 소유 */
+  --ui-checker-size: 8px;
+  /* 소형 스와치(11~23px)용 — 8px 타일은 2×2칸이라 깨진 텍스처로 읽힘 */
+  --ui-checker-size-sm: 4px;
+
+  /* 앱 크롬 전역 스택 */
+  --z-chrome-panel: 30;
+  --z-chrome-popup: 40;
+  --z-chrome-modal: 50;
+  --z-chrome-submenu: 60;
+  --z-chrome-tooltip: 70;
+
+  /* 격리된 그리드 안에서만 비교되는 캔버스 내부 스택.
+     카운터 프리뷰와 드래그 프리뷰는 줌·팬 래퍼 안에 있고 그 래퍼가 transform으로
+     자기 컨텍스트를 만든다 - 아래 선택선·핸들·마퀴와는 애초에 겨루지 않는다 */
+  --z-canvas-counter-preview: 12;
+  --z-canvas-selection-outline: 20;
+  --z-canvas-selection-handle: 21;
+  --z-canvas-group-outline: 22;
+  --z-canvas-group-handle: 25;
+  --z-canvas-gradient-editor: 26;
+  --z-canvas-drag-preview: 1000;
+  --z-canvas-marquee: 9998;
+  --z-canvas-smart-guides: 9999;
+
+  /* 라운딩 — 4단: 표면 안 요소 6 < 1차 표면 10 < 팝업 셸 14 < 모달 셸 16 */
+  /* 동심 규칙은 코너 밀착 중첩에만 적용 (팝업 14 = 6 + p-8), 컨트롤은 고정 티어 */
+  /* 모달 셸은 창보다 둥글지 않게 유지 */
+  --ui-radius-inner: 6px;
+  --ui-radius-surface: 10px;
+  --ui-radius-popup: 14px;
+  --ui-radius-modal: 16px;
+
+  /* 모션 */
+  --ui-duration-fast: 120ms;
+  --ui-duration-base: 180ms;
+  --ui-duration-slow: 240ms;
+  --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ui-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* 토글 노브 - 끝점을 지나쳤다 돌아온다. 세기는 커브의 y값이 소유한다.
+     1.35는 12px 이동에서 0.49px밖에 넘지 않아 눈에 안 띈다. 1.56이면 1.17px로
+     인셋 2px 안에서 끝나면서 확실히 읽힌다.
+     트랙 색은 노브보다 짧은 clock으로 따로 간다 */
+  --ui-toggle-duration: var(--ui-duration-slow);
+  --ui-toggle-travel: 12px;
+  --ui-toggle-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* 누름 변형 - 원이 아니라 캡슐이 된다.
+     scale로는 만들 수 없다. 원을 비균등 스케일하면 반지름도 같이 눌려 타원이 될 뿐,
+     위아래 평평한 변이 생기지 않는다. 실제 폭·높이를 바꿔야 반지름이 높이의 절반으로
+     고정된 캡슐이 나온다. 노브는 out-of-flow라 형제 레이아웃에는 영향이 없다 */
+  --ui-toggle-thumb-size: 12px;
+  /* 가로는 건드리지 않는다 - 폭까지 자라면 노브가 부푸는 것처럼 보인다.
+     폭이 높이보다 크기만 하면 반지름이 높이 절반으로 잡혀 위아래 평평한 변이 생긴다 */
+  --ui-toggle-press-height: 10px;
+  /* 누르는 동안 천천히 눌리고, 손을 떼면 빠르게 돌아온다 */
+  --ui-toggle-press-duration: 420ms;
+  --ui-toggle-press-ease: cubic-bezier(0.33, 1, 0.68, 1);
+  --ui-toggle-release-duration: var(--ui-duration-base);
+
+  /* 세그먼트 인디케이터 - 전역 base(180ms)+ease-out-expo를 쓰면 이동의 70%가
+     첫 프레임 안에 끝나 "움직였다"가 아니라 "이미 가 있다"로 읽힌다.
+     실측: 클릭 후 첫 프레임에서 진행률 63~75%.
+     커브를 완만하게 펴서 이동 구간을 프레임에 나눠 준다 - 90% 지점이
+     duration의 33%(expo)에서 54%로 밀린다. 업계도 이 대역이다
+     (Material Web 250ms cubic-bezier(.3,0,0,1), Fluent 300ms, MUI 300ms).
+
+     오버슈트는 keyframe이 아니라 커브의 y값이 소유한다 - 토글 노브(--ui-toggle-ease)와
+     같은 원칙. 1.2는 한 칸 이동(69px)에서 0.9px, 두 칸(139px)에서 1.7px 넘어간다.
+     트랙 안쪽 여백이 2px이라 넘어간 만큼이 트랙 밖으로 새지 않는다.
+     조사한 디자인 시스템 15곳 중 세그먼트에 오버슈트를 쓰는 곳은 없다 - 의도적 일탈이고,
+     이 저장소가 토글에서 이미 같은 선택을 한 것과 문법을 맞춘 것이다.
+     이전에는 translate 소수 픽셀이 정착 시 반올림되며 1px 튀는 아티팩트가 이 역할을
+     대신했는데, translate 0%인 첫 탭에서만 안 나타나고 트랙 폭에 따라 사라져서
+     방향 비대칭으로 읽혔다 */
+  --ui-segment-duration: 220ms;
+  --ui-segment-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
+
+  /* 팝업 등퇴장 - 드롭다운, 팝오버, 피커 공통 다이얼.
+     닫힘이 열림보다 짧은 건 의도, 사라지는 걸 기다릴 이유가 없음 */
+  --ui-popup-enter-duration: var(--ui-duration-base);
+  --ui-popup-exit-duration: var(--ui-duration-fast);
+  --ui-popup-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* 커브가 앞쪽에 몰려 있어 이동이 30ms 안에 소모된다.
+     duration을 늘리는 대신 폭을 키워 체감을 확보 */
+  --ui-popup-enter-scale: 0.94;
+  --ui-popup-exit-scale: 0.99;
+
+  /* 카드 모달 등퇴장 - 큰 표면이라 팝업보다 느긋하게 */
+  --ui-modal-enter-duration: 250ms;
+  --ui-modal-exit-duration: 150ms;
+  --ui-modal-enter-scale: 0.96;
+  --ui-modal-exit-scale: 0.96;
+
+  /* 패널 페이지 전환 — 사이드 패널 인-패널 내비게이션 다이얼 */
+  --ui-duration-page: 250ms;
+  --ui-ease-page: cubic-bezier(0.22, 1, 0.36, 1);
+  --ui-page-slide-distance: 8px;
+  --ui-page-blur: 3px;
+
+  /* 아이콘 스왑 — 토글 버튼의 SVG 교체 크로스페이드 다이얼 */
+  --ui-icon-swap-duration: var(--ui-duration-base);
+  --ui-icon-swap-ease: ease-in-out;
+  --ui-icon-swap-blur: 2px;
+  --ui-icon-swap-scale: 0.25;
+
+  /* 글자 스왑 - 아이콘과 달리 스케일 대신 세로 이동. 글자가 커졌다 작아지면
+     자간이 흔들려 읽는 눈이 따라가지 못한다 */
+  --ui-text-swap-duration: var(--ui-duration-fast);
+  --ui-text-swap-ease: ease-in-out;
+  --ui-text-swap-blur: 2px;
+  --ui-text-swap-shift: 4px;
+
+  /* 툴바 아이콘 호버 모션 - 호버 진입에 한 번 재생되고 멈춘다. 반복 없음.
+     400ms 아래로 내리면 무슨 동작인지 읽기 전에 끝나므로 다른 모션보다 느긋하다.
+     동작마다 자연스러운 clock이 달라 지속 시간은 용도별로 따로 둔다 */
+  --ui-icon-ease: cubic-bezier(0.65, 0, 0.35, 1);
+  /* 오버슈트는 keyframe이 아니라 커브의 y값(1.4)이 소유한다.
+     토글 노브(--ui-toggle-ease)와 같은 원칙 */
+  --ui-icon-ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+  --ui-icon-expand-duration: 420ms;
+  /* 누름 - 내려갈 땐 손가락을 따라 즉시, 올라올 땐 스프링으로.
+     복귀가 호버 모션만큼 길면 클릭 결과보다 늦게 끝나 굼뜨게 읽힌다 */
+  --ui-icon-press-down-duration: 80ms;
+  --ui-icon-press-duration: 320ms;
+  --ui-icon-press-scale: 0.8;
+  --ui-icon-eye-duration: 440ms;
+  --ui-icon-nod-duration: 500ms;
+  --ui-icon-tilt-duration: 520ms;
+  --ui-icon-wobble-duration: 560ms;
+  --ui-icon-turn-duration: 600ms;
+  --ui-icon-sweep-duration: 620ms;
+  --ui-icon-fan-duration: 700ms;
+  --ui-icon-punch-duration: 700ms;
+  --ui-icon-shift-duration: 800ms;
+  --ui-icon-stagger: 80ms;
+
+  /* 팔레트 물감 구멍이 다시 터질 때의 크기. 여기서만 값이 오버슈트를 소유한다 -
+     반지름 0.875px에서는 커브가 만드는 오버슈트가 소수점 픽셀이라 화면에 안 나온다 */
+  --ui-icon-punch-pop: 1.3;
+
+  /* 숫자 스텝 팝인 - 값이 바뀐 자릿수만 한 번 튀어오른다.
+     누를 때와 뗄 때 한 번씩만 돈다. 꾹 누르는 구간은 값만 바뀌고 재생하지 않는다 -
+     반복 간격이 재생보다 짧아 매 스텝이 이전 재생을 끊으면 숫자가 깜빡이고
+     값을 눈으로 좇을 수 없다.
+     아이콘 호버(400ms+)보다 짧은 건 의도. 손이 값을 기다리는 컨트롤이다.
+     오버슈트는 keyframe이 아니라 커브의 y값이 소유한다 (--ui-icon-ease-back과 같은 원칙) */
+  --ui-digit-duration: 220ms;
+  --ui-digit-stagger: 40ms;
+  --ui-digit-distance: 6px;
+  --ui-digit-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+  /* 오류 흔들기 - 좌우로 한 번 털고 작은 오버슈트로 멈춘다.
+     구간마다 커브를 따로 걸어야 각 다리가 독립적으로 감속한다.
+     구간 비율(80/80/60/60)은 keyframe %가 소유한다 - 선택자 %에는 calc를 못 써서
+     구간 길이를 토큰으로 쪼개도 총 길이만 바뀌고 분할은 그대로다. 다이얼은 총 길이 하나.
+     폭은 필드 기준으로 잡는다 - 60px 칸에서 6px는 10%라 값이 튀어나간 것처럼 보인다.
+     여기서는 "틀렸다"는 신호만 필요하므로 눈에 걸릴 만큼만 움직인다 */
+  --ui-shake-distance: 3px;
+  --ui-shake-overshoot: 1.5px;
+  --ui-shake-duration: 280ms;
+  --ui-shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
diff --git a/src/renderer/styles/tokens/dark.css b/src/renderer/styles/tokens/dark.css
new file mode 100644
index 000000000..f1638e389
--- /dev/null
+++ b/src/renderer/styles/tokens/dark.css
@@ -0,0 +1,234 @@
+/*
+ * 다크 테마 값
+ *
+ * 선택자는 :where()로 감싸 특이도를 :root와 같은 (0,1,0)에 묶는다.
+ * [data-theme='dark']를 그대로 쓰면 (0,2,0)이 되어 뒤에 주입되는 사용자 CSS의
+ * :root 재정의를 이긴다. 커스텀 CSS 최우선 계약이 깨지는 자리다.
+ *
+ * 다크 값을 bare :root에 폴백으로 남기지 않는다. 라이트에서 토큰 하나가 빠지면
+ * 조용히 다크 값이 새어나와 문법상 정상인 채로 화면만 틀어진다.
+ * 대신 세 창의 html에 data-theme을 정적 속성으로 박아 미정의를 막는다.
+ * 두 테마의 키 집합과 선언 순서는 themeTokenParityContract 테스트가 강제한다
+ */
+:root:where([data-theme='dark']) {
+  /* 배경 — 값은 macOS 다크를 실측해서 맞춘 것이다 (같은 디스플레이에서 시스템 설정 창 캡처 +
+     NSColor 다크 카탈로그 직접 조회). 애플 windowBackgroundColor가 정확히 #1e1e1e다.
+
+     중요한 건 절대 밝기가 아니라 단계 폭이다. 애플은 사이드바 30 → 콘텐츠 34(+4) →
+     카드 42(+8) → 인풋 49(+7)로 아주 촘촘하고, 창 픽셀의 92%가 L* 10~19에 들어간다.
+     폭을 벌리면 밝은 쪽 끝이 튀어서 전체가 '밝다'고 읽힌다 — 베이스를 내려도 안 고쳐진다.
+
+     애플 카탈로그는 a*=b*=0으로 완전 무채색이다. 화면에 도는 색조는 팔레트가 심는 게
+     아니라 Desktop Tinting이 만든다. 여기에 색 편향을 넣지 말 것 */
+  --ui-bg-app: #131315;
+  --ui-bg-panel: #1b1b1d;
+  --ui-bg-surface: #232325;
+  --ui-bg-elevated: #1f1f21;
+  /* 컨트롤 필 — 반투명 화이트라 어느 표면 위서든 한 단계 밝게 뜸
+     근흑 배경에선 어두운 홈이 배경과 구분되지 않아 인풋·트랙은 밝은 필이 기준
+     조작면(--ui-fill 0.072)보다 아래 유지 — 정적 홈과 인터랙티브 필의 밝기 구분.
+     같은 정적 면인 --ui-fill-faint와는 같은 단에 둔다
+     알파 기준은 ΔL*가 아니라 베버 대비(ΔsRGB/베이스)다. 어두운 자발광 UI에서
+     인접면 분리는 상대 대비가 지배한다 — L*를 고정하면 베이스가 밝아진 만큼
+     상대 대비가 깎여 면이 뭉갠다 (실측으로 확인) */
+  --ui-bg-inset: rgba(255, 255, 255, 0.035);
+  /* 불투명 웰 — 코드 에디터처럼 배경이 흔들리면 안 되는 표면 전용 */
+  --ui-bg-inset-solid: #161618;
+  /* 분리된 속성 패널 창의 바닥 — 창 자체가 transparent라 알파를 쓰면 데스크톱이 비친다.
+     값은 도킹 상태의 사이드 패널(--ui-glass-panel 합성 결과)과 같은 L*에 맞춰 둠.
+     Windows는 첫 페인트 전 구간을 같은 색으로 메우므로 windows_window_corners.rs의
+     씨앗 색과 함께 바꿀 것 */
+  --ui-bg-panel-detached: #1c1c1e;
+
+  /* 글래스 표면 — 스모크 재질. 팝업·패널 0.72, 캔버스 크롬 0.6
+     알파 ↓ = 배경 투과 ↑ (글래스 체감의 1차 다이얼). 분리는 그림자 토큰의 인셋 링+상단 하이라이트가 담당, 보더 금지
+     틴트는 backdrop-filter → 루미노시티 캡 → 틴트 3단 합성을 거친 최종 L*에서 역산한 값이라
+     틴트 색만 보고 표면 밝기를 읽으면 안 된다. 캡 틴트도 같이 움직여야 의도한 만큼 올라온다 */
+  --ui-glass: rgba(28, 28, 30, 0.72);
+  /* 모달·시트·피커용 — 중앙 모달은 스크림(.backdrop-glass-scrim 딤+블러)이 뒤에 겹쳐
+     실효 밀도는 스크림×틴트. 스크림 알파와 함께 조절할 것
+     알파는 사이드 패널과 같은 0.72로 맞춰 뒷면 비침을 패널 수준으로 억제.
+     틴트는 밝기 티어상 패널보다 한 톤 위에 서도록 잡음 */
+  --ui-glass-heavy: rgba(36, 36, 38, 0.72);
+  /* 캔버스 상주 크롬용 — 배경보다 한 톤 어두운 스모크 */
+  --ui-glass-dim: rgba(22, 22, 24, 0.6);
+  /* 사이드 패널용 — 캔버스보다 살짝 아래에 둔다. 상주 표면이라 여기를 올리면
+     패널 안 3단(패널/카드/칩)의 베이스가 통째로 밝아져 베버 대비가 깎이고
+     세 면이 한 덩어리로 뭉갠다. 분리는 밝기가 아니라 인셋 링+좌측 드롭섀도가 담당.
+     밝기 티어: 캔버스 칩 < 패널 < 캔버스 < 드롭다운 < 모달 */
+  --ui-glass-panel: rgba(26, 26, 28, 0.72);
+  /* 상주 크롬 솔리드 — 사이드 패널·미니맵처럼 상시 떠 있는 표면은 라이브 블러 대신
+     고알파 틴트로 근사 (Windows에서 backdrop-filter가 매 프레임 면적 비례 재필터)
+     알파가 유일한 다이얼: 낮출수록 배경 투과 ↑, 글래스 질감은 인셋 링+하이라이트가 유지
+     값은 라이브 글래스와 같은 L*에 서도록 맞춰 둠 — 전환 시 단차가 안 생기게 */
+  --ui-glass-panel-solid: rgba(28, 28, 30, 0.96);
+  --ui-glass-dim-solid: rgba(24, 24, 26, 0.94);
+
+  /* 투명도 축소 폴백 — 라이브 블러를 끄고 고알파 솔리드로 강등할 때의 틴트.
+     media 블록이 요소 스코프에서 이 값을 승격하므로 리터럴로 두면 테마 루트를 이긴다.
+     값은 캔버스 위 라이브 합성 결과 기준. 블러 없이는 맥락 반영이 불가능하므로
+     이 값 자체가 목표 휘도와 대비를 혼자 만족해야 한다 */
+  --ui-glass-reduced: rgba(26, 26, 30, 0.96);
+  --ui-glass-heavy-reduced: rgba(32, 32, 36, 0.96);
+  --ui-glass-dim-reduced: rgba(22, 22, 26, 0.94);
+  --ui-glass-panel-reduced: rgba(25, 25, 29, 0.96);
+
+  /* 글래스 백드롭 클램프 — 틴트 전에 배경 밝기를 누르고, 죽은 채도는 보상
+     dim ↓ = 밝은 배경 투과 억제. 과하게 누르면 투과 변화 자체가 죽어 글래스가 안 읽힘 / sat = 색기운 유지량
+     contrast는 다크에서 항등(1). 라이트가 쓰는 범위 압축 항이라 여기서는 켜지 않는다 */
+  --ui-glass-backdrop-dim: 0.8;
+  --ui-glass-backdrop-contrast: 1;
+  --ui-glass-backdrop-sat: 1;
+  /* canvas 위 글래스 전용 - blur와 배경 변화는 남기고 색조 지배만 억제 */
+  --ui-glass-canvas-backdrop-dim: 0.62;
+  --ui-glass-canvas-backdrop-contrast: 1;
+  --ui-glass-canvas-backdrop-sat: 0.35;
+  /* 루미노시티 레이어 - 투과 결과의 휘도를 틴트의 휘도 쪽으로 당긴다 (색조는 유지).
+     0 = 끔, 1 = 완전 치환. 상한이 아니라 목표값으로 끌어당기는 보정이라
+     밝은 픽셀은 내려오고 어두운 픽셀은 올라간다. 필터와 독립 동작하는 2차 안전망 */
+  --ui-glass-backdrop-lum: 0.1;
+  /* 당겨갈 목표 휘도 — --ui-glass 틴트와 같은 색을 유지할 것.
+     여기만 어두운 채로 두면 유리 틴트를 올려도 캡이 휘도를 도로 끌어내린다 */
+  --ui-glass-backdrop-lum-tint: #1c1c1e;
+
+  /* 모달 스크림 — 딤 레시피 단일 소스. 블러는 main.css가 소유 */
+  --ui-scrim: rgba(0, 0, 0, 0.6);
+
+  /* 경계선 — 장식용 금지, 기능적 구획(바/플로팅 크롬/폼 컨트롤)에만 사용.
+     --ui-line 0.1은 애플 separatorColor(화이트 α0.098) 실측값과 일치한다.
+     화면 픽셀에서 역산하면 0.047쯤 나오는데 그건 안티에일리어싱이 섞인 값이라
+     선언값으로 쓰면 선이 절반 이하로 흐려진다. 내리지 말 것 */
+  --ui-line: rgba(255, 255, 255, 0.1);
+  --ui-line-strong: rgba(255, 255, 255, 0.14);
+  /* 캔버스/스테이지 보조 격자선 — 메이저(--ui-line)보다 한 톤 흐림 */
+  --ui-line-faint: rgba(255, 255, 255, 0.06);
+
+  /* 투명 색상 체커 무늬. 타일 크기는 base.css가 소유 */
+  --ui-checker-pattern: conic-gradient(
+    #666 0.25turn,
+    #999 0.25turn 0.5turn,
+    #666 0.5turn 0.75turn,
+    #999 0.75turn
+  );
+
+  /* 크롬 필 — 반투명 화이트 오버레이 상태 래더 (idle → hover → active)
+     알파 기준은 베버 대비. --ui-bg-inset 주석 참조 */
+  --ui-fill: rgba(255, 255, 255, 0.072);
+  --ui-fill-hover: rgba(255, 255, 255, 0.108);
+  --ui-fill-active: rgba(255, 255, 255, 0.145);
+  /* 정적 그룹 컨테이너용 — 인터랙션 없는 은은한 면 */
+  --ui-fill-faint: rgba(255, 255, 255, 0.035);
+
+  /* 코드 에디터 스크롤바 썸 — 크롬 필보다 진하다. 좁은 4px 막대라
+     같은 알파로는 웰 바닥과 안 갈린다 */
+  --ui-scrollbar-thumb: rgba(255, 255, 255, 0.14);
+  --ui-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
+  --ui-scrollbar-thumb-active: rgba(255, 255, 255, 0.26);
+
+  /* 텍스트 위계 — 애플 실측(1차 L*88.6 / 2차 65.5 / 3차 59.2)에 맞춘 값.
+     체감 눈부심에는 표면보다 텍스트가 더 크게 기여한다. 순백에 가까운 본문색을 두고
+     표면만 조절하면 '밝다'는 인상이 안 잡힌다.
+     애플은 가장 밝은 표면(L*21.7)과 가장 어두운 텍스트(L*59.2) 사이 37 L*를 통째로 비워
+     텍스트와 경쟁하는 면을 두지 않는다.
+     목록 웰의 꺼짐 행 이름(disabled)이 4.5:1에 못 미치는 것은 의도된 값이다 —
+     기준을 맞추는 가장 어두운 회색은 muted와 구분이 안 돼 '꺼짐'으로 읽히지 않는다.
+     근거와 대안 검토는 SettingsPanel/panelChrome.ts 참조 */
+  /* 호버에서 한 칸 더 올릴 자리. 본문(--ui-fg)이 이미 순백이 아니라 위가 비어 있다 */
+  --ui-fg-strong: #ffffff;
+  --ui-fg: #dcdcde;
+  --ui-fg-muted: #9d9d9f;
+  /* 작은 안내·수치처럼 반드시 읽혀야 하는 저강도 텍스트 */
+  --ui-fg-caption: #8c8c8e;
+  /* placeholder·장식 아이콘처럼 정보 위계 밖의 보조 표현 */
+  --ui-fg-faint: #8c8c8e;
+  --ui-fg-disabled: #68686a;
+
+  /* 액센트 — 브랜드 퍼플. 인디케이터·포커스 등 작은 지점용 */
+  --ui-accent: #8b5cf6;
+  --ui-accent-hover: #9d74f8;
+  --ui-accent-active: #7a4be0;
+  --ui-accent-muted: rgba(139, 92, 246, 0.16);
+  --ui-accent-fg: #ffffff;
+  /* 큰 면적 CTA용 — 면적이 클수록 휘도·채도를 내림 (다크에서 눈부심 방지) */
+  --ui-accent-deep: #6b4ad0;
+  --ui-accent-deep-hover: #7857d8;
+  --ui-accent-deep-active: #5f40bd;
+
+  /* 토글 노브와 꺼짐 트랙. 노브는 두 테마 모두 흰색이다 - 켜짐은 액센트,
+     꺼짐은 회색 트랙이라 어느 쪽에서도 흰 노브가 트랙 위로 떠오른다 */
+  --ui-control-knob: #ffffff;
+  --ui-control-track-off: rgba(255, 255, 255, 0.14);
+  --ui-control-track-off-hover: rgba(255, 255, 255, 0.19);
+
+  /* 캔버스 핸들 — 사용자가 만든 임의 배경 위에 뜬다. 앱 테마가 아니라
+     아래 콘텐츠가 밝을지 어두울지를 모른다는 게 제약이라 두 테마가 같은 값을 쓴다.
+     분리는 채움색이 아니라 링과 드롭섀도가 담당 */
+  --ui-handle-fill: #ffffff;
+  --ui-handle-ring: rgba(0, 0, 0, 0.35);
+  --ui-handle-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+  /* 캔버스 정렬 가이드 — 선택 크롬(바이올렛)과 색으로 갈라야 하는 별개 신호라
+     시맨틱 danger를 재사용하지 않는다. 오류가 아니라 위치 스냅 표시 */
+  --ui-guide-align: #ff6b6b;
+  --ui-guide-align-glow: rgba(255, 107, 107, 0.5);
+
+  /* 캔버스 선택 크롬 — 셀렉션은 의미 지점이므로 브랜드 바이올렛 */
+  --ui-selection: #8b5cf6;
+  --ui-selection-border: rgba(139, 92, 246, 0.8);
+  --ui-selection-border-strong: rgba(139, 92, 246, 0.9);
+  --ui-selection-fill: rgba(139, 92, 246, 0.15);
+  --ui-selection-glow: rgba(139, 92, 246, 0.5);
+
+  /* 시맨틱 */
+  --ui-danger: #e5484d;
+  --ui-danger-hover: #ec5d62;
+  --ui-danger-active: #d93b40;
+  --ui-danger-muted: rgba(229, 72, 77, 0.14);
+  --ui-danger-muted-hover: rgba(229, 72, 77, 0.2);
+  --ui-danger-muted-active: rgba(229, 72, 77, 0.26);
+  --ui-danger-fg: #ff9599;
+  --ui-success: #3dbe7b;
+  --ui-success-muted: rgba(61, 190, 123, 0.14);
+  --ui-warning: #f0b429;
+  --ui-warning-muted: rgba(240, 180, 41, 0.14);
+
+  /* 코드 에디터 구문 색 — 불투명 웰(--ui-bg-inset-solid) 위 기준 */
+  --ui-syntax-comment: #6a9955;
+  --ui-syntax-string: #ce9178;
+  --ui-syntax-keyword: #c586c0;
+  --ui-syntax-property: #9cdcfe;
+  --ui-syntax-punctuation: #d4d4d4;
+
+  /* 그림자 — 보더 없는 표면 분리의 핵심. 2/3은 인셋 링+상단 하이라이트로 재질 립 포함
+     인셋 알파는 표면이 밝아진 만큼 올려 립의 ΔL*를 유지 */
+  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --ui-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 8px 24px rgba(0, 0, 0, 0.45),
+    0 2px 6px rgba(0, 0, 0, 0.3);
+  /* 3은 모달 카드 - 스크림이 이미 뒤를 어둡히므로 번짐은 popup보다 한 단계만 넓게 */
+  --ui-shadow-3: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 10px 28px rgba(0, 0, 0, 0.4),
+    0 3px 8px rgba(0, 0, 0, 0.25);
+
+  /* 일시 popup - 인접 control을 덮지 않게 lip은 유지하고 외부 번짐만 축소 */
+  --ui-shadow-popup: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 3px 10px rgba(0, 0, 0, 0.28),
+    0 1px 2px rgba(0, 0, 0, 0.2);
+
+  /* 사이드 패널 — 도킹 경계인 좌측 엣지만 헤어라인, 좌측 방향성 드롭으로 캔버스와 분리 */
+  --ui-shadow-panel: inset 1px 0 0 0 rgba(255, 255, 255, 0.09),
+    -12px 0 32px rgba(0, 0, 0, 0.35);
+
+  /* 상주 크롬 — 인셋 링 + 상단 하이라이트가 보더·재질 담당, 드롭섀도는 흔적만 */
+  --ui-shadow-chrome: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.11), 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  /* 포커스 링 — 보더 대신 그림자 링.
+     표면 위 3:1이 하한이라 알파를 낮추거나 --ui-accent를 그대로 쓰면 안 된다.
+     액센트 원색은 밝아진 표면에서 3.2:1까지 떨어져 링이 면에 잠긴다 */
+  --ui-focus-ring: 0 0 0 1.5px rgba(160, 121, 248, 0.9);
+
+  /* 확정할 수 없는 입력 - 포커스 링과 같은 자리, 같은 두께로 그려 색만 바뀐다.
+     보더를 쓰면 상자 안쪽이 좁아지고 바깥 포커스 링과 나란히 서서 색이 섞인다 */
+  --ui-danger-ring: 0 0 0 1.5px rgba(240, 106, 111, 0.9);
+}
diff --git a/src/renderer/styles/tokens/light.css b/src/renderer/styles/tokens/light.css
new file mode 100644
index 000000000..ead25686d
--- /dev/null
+++ b/src/renderer/styles/tokens/light.css
@@ -0,0 +1,276 @@
+/*
+ * 라이트 테마 값
+ *
+ * 키 집합과 선언 순서를 tokens/dark.css와 완전히 일치시킨다. 나란히 놓고 읽는
+ * 것이 이 파일의 사용법이고, themeTokenParityContract 테스트가 어긋남을 막는다.
+ *
+ * 값을 정한 방법: 다크 팔레트의 실제 합성 결과를 재서 같은 단차를 라이트에서
+ * 재현했다. 색을 반전한 게 아니라 단차를 옮긴 것이다. 주요 대조는 이렇다.
+ *
+ *   면 관계            다크 ΔL*   라이트 ΔL*
+ *   패널 -> 카드         +4.0       +4.4
+ *   카드 -> 입력 웰      +3.4       -3.8
+ *   캔버스 -> 격자선     +6.9       -6.5
+ *   유리 -> 둘레 링      +8.2       -7.7
+ *   유리 -> 상단 립      +3.3       +2.9
+ *
+ * 구조적으로 다른 점이 셋 있다.
+ *
+ * 1. 알파의 기준선. 다크는 근흑 베이스라 인접면 분리를 베버 대비가 지배한다.
+ *    밝은 필드에서는 눈이 밝은 쪽에 적응해 같은 상대 대비가 훨씬 세게 읽히므로
+ *    기준을 ΔL*로 바꾼다. 위 표가 그 기준으로 맞춘 결과다.
+ *
+ * 2. 유리의 밝기 바닥. 다크는 backdrop-filter의 brightness로 밝은 배경을 눌러
+ *    어둠을 지켰다. 라이트에서 brightness를 1 위로 올리는 것은 대응물이 아니다.
+ *    sRGB 곱연산이라 검정은 아무리 곱해도 검정이고 밝은 쪽만 먼저 포화한다.
+ *    라이트의 바닥은 밝은 틴트의 알파 합성이 소유한다. 검정 배경에서도 결과가
+ *    최소 알파×틴트로 떠오르기 때문이다. 필터는 범위를 좁히는 보조 역할만 한다.
+ *
+ * 3. 카드가 뜨는 방향. --ui-fill-faint만 다크와 반대로 흰 알파다. 이 토큰은
+ *    상호작용 상태가 아니라 정적 카드 면이고, 카드는 두 테마 모두 아래 면보다
+ *    떠올라야 한다. 밝은 면 위에서 떠오른다는 것은 흰 잉크가 얹힌다는 뜻이다.
+ *    반대로 --ui-fill 계열은 조작면이라 라이트에서도 잉크가 늘어나는 방향을
+ *    유지한다. 누르면 진해지는 것이 손의 기대에 맞는다.
+ *
+ * 잉크는 순흑이 아니라 아주 살짝 남색으로 기운 rgb(16, 24, 40)을 쓴다. 무채색
+ * 위에 얹은 순흑 저알파는 때가 탄 것처럼 보이고, 쿨 그레이 바탕과도 겉돈다
+ */
+:root:where([data-theme='light']) {
+  /* 배경 — 바닥이 회색이고 카드가 흰 쪽으로 떠오른다. 방향은 다크와 같다.
+     폭은 다크(끝에서 끝까지 대비 1.18:1)보다 넓게 잡았다. 밝은 쪽 끝에서는
+     같은 L* 차이가 훨씬 약하게 읽혀, 다크와 같은 폭을 쓰면 네 단이 전부
+     흰색 한 덩어리로 뭉갠다.
+
+     무채색이 아니라 쿨 그레이다. 채널을 R < G < B로 벌려(약 9단계) 회색이
+     탁해 보이지 않게 했다. 다크 팔레트도 같은 방향의 편향을 갖고 있어
+     두 테마가 같은 계열로 읽힌다 */
+  --ui-bg-app: #ccd3dc;
+  --ui-bg-panel: #dee3ea;
+  --ui-bg-surface: #ffffff;
+  --ui-bg-elevated: #f1f5fa;
+  /* 컨트롤 필 — 방향만 뒤집힌다. 다크에서 어두운 홈이 근흑 배경과 안 갈렸듯
+     라이트에서는 밝은 홈이 카드와 안 갈린다. 그래서 인풋·트랙은 어두운 필이 기준.
+     카드(--ui-fill-faint)보다 아래라는 관계는 그대로 유지한다 */
+  --ui-bg-inset: rgba(16, 24, 40, 0.05);
+  /* 불투명 웰 — 코드 에디터처럼 배경이 흔들리면 안 되는 표면 전용 */
+  --ui-bg-inset-solid: #e6ebf1;
+  /* 분리된 속성 패널 창의 바닥 — 창 자체가 transparent라 알파를 쓰면 데스크톱이 비친다.
+     값은 도킹 상태 사이드 패널(--ui-glass-panel 합성 결과)과 같은 L*.
+     windows_window_corners.rs의 라이트 씨앗 색과 함께 바꿀 것 */
+  --ui-bg-panel-detached: #eef3f7;
+
+  /* 글래스 표면 — 밝은 스모크. 알파가 곧 밝기 바닥이라 다크보다 무거운 다이얼이다.
+     알파 ↓ = 배경 투과 ↑ 인 것은 같지만, 여기서는 알파를 내리면 어두운 배경 위에서
+     유리가 회색으로 가라앉는다. 투과를 늘리려면 알파보다 backdrop contrast를 먼저 만질 것.
+     밝기 티어는 다크와 같은 순서다: 캔버스 칩 < 패널 < 캔버스 < 드롭다운 < 모달 */
+  --ui-glass: rgba(242, 246, 251, 0.74);
+  /* 모달·시트·피커용 — 스크림이 뒤를 덮은 뒤 올라오므로 티어 최상단 */
+  --ui-glass-heavy: rgba(249, 251, 254, 0.76);
+  /* 캔버스 상주 크롬용 — 배경보다 한 톤 가라앉은 스모크 */
+  --ui-glass-dim: rgba(214, 221, 231, 0.62);
+  /* 사이드 패널용 — 캔버스보다 살짝 아래에 둔다. 상주 표면이라 여기를 흰 쪽으로
+     올리면 패널 안 3단(패널/카드/칩)의 베이스가 통째로 천장에 붙어 세 면이
+     한 덩어리로 뭉갠다. 밝은 쪽 끝은 다크보다 여유가 훨씬 적어 이 규칙이 더 빡빡하다.
+     분리는 밝기가 아니라 인셋 링+좌측 드롭섀도가 담당 */
+  --ui-glass-panel: rgba(244, 248, 252, 0.74);
+  /* 상주 크롬 솔리드 — 라이브 블러 대신 고알파 틴트로 근사.
+     값은 라이브 글래스와 같은 L*에 서도록 맞춰 둠 */
+  --ui-glass-panel-solid: rgba(240, 244, 249, 0.96);
+  --ui-glass-dim-solid: rgba(217, 224, 233, 0.94);
+
+  /* 투명도 축소 폴백 — 블러가 없으면 배경 맥락이 전혀 안 들어오므로
+     이 값 자체가 목표 휘도와 대비를 혼자 만족해야 한다.
+     라이트에서는 루미노시티 레이어(::after)도 함께 꺼지는데, 밝기 바닥을
+     원래 틴트가 갖고 있어서 손실이 다크보다 작다 */
+  --ui-glass-reduced: rgba(243, 247, 252, 0.96);
+  --ui-glass-heavy-reduced: rgba(250, 252, 254, 0.97);
+  --ui-glass-dim-reduced: rgba(216, 223, 232, 0.94);
+  --ui-glass-panel-reduced: rgba(242, 246, 251, 0.96);
+
+  /* 글래스 백드롭 클램프 — 라이트에서는 dim이 주역이 아니다.
+     contrast를 1 아래로 내려 배경의 밝고 어두운 끝을 중앙으로 모으고,
+     dim은 평균 휘도를 미세 조정하는 정도로만 올린다.
+     sat은 1을 넘기지 않는다. 밝은 유리가 유색 배경을 그대로 받으면 얼룩진
+     플라스틱처럼 읽힌다 */
+  --ui-glass-backdrop-dim: 1.06;
+  --ui-glass-backdrop-contrast: 0.9;
+  --ui-glass-backdrop-sat: 1;
+  /* canvas 위 글래스 전용 — 사용자가 만든 임의 밝기·채도가 아래에 깔린다.
+     어두운 오버레이 위에서 유리가 회색으로 가라앉지 않게 범위 압축을 강하게,
+     색조 지배 억제는 다크와 같은 세기로 */
+  --ui-glass-canvas-backdrop-dim: 1.1;
+  --ui-glass-canvas-backdrop-contrast: 0.74;
+  --ui-glass-canvas-backdrop-sat: 0.35;
+  /* 루미노시티 레이어 — 다크와 같은 장치가 반대 방향으로 쓰인다.
+     밝은 틴트를 주면 어두운 픽셀이 올라온다. 다만 이건 하한이 아니라
+     목표 휘도로 당기는 보정이라 밝은 픽셀은 오히려 내려온다.
+     세게 걸면 배경 색기운이 흰 쪽으로 세탁되므로 낮게 유지하고,
+     실제 밝기 바닥은 위의 틴트 알파에 맡긴다 */
+  --ui-glass-backdrop-lum: 0.12;
+  /* 당겨갈 목표 휘도 — --ui-glass 틴트와 같은 색을 유지할 것 */
+  --ui-glass-backdrop-lum-tint: #f2f6fb;
+
+  /* 모달 스크림 — 방향은 뒤집지 않는다. 밝은 배경을 더 밝게 덮으면 뒤가 지워질 뿐
+     '가려졌다'로 안 읽힌다. 대신 알파를 크게 내린다.
+     밝은 바탕에서는 같은 알파가 훨씬 무겁게 앉는다 */
+  --ui-scrim: rgba(16, 24, 40, 0.34);
+
+  /* 경계선 — 장식용 금지, 기능적 구획(바/플로팅 크롬/폼 컨트롤)에만 사용.
+     다크의 흰 선이 패널 위에서 만드는 단차(약 11 L*)를 맞춘 값이다.
+     0.1로 내리면 다크에서 보이던 구획선이 라이트에서만 사라진다 */
+  --ui-line: rgba(16, 24, 40, 0.12);
+  --ui-line-strong: rgba(16, 24, 40, 0.17);
+  /* 캔버스/스테이지 보조 격자선 — 메이저(--ui-line)보다 한 톤 흐림.
+     캔버스가 회색이라 이 알파에서 격자가 다크와 같은 세기로 읽힌다 */
+  --ui-line-faint: rgba(16, 24, 40, 0.085);
+
+  /* 투명 색상 체커 무늬 — 밝은 표면 위라 두 칸 모두 흰 쪽으로 올린다.
+     다크 값을 그대로 쓰면 스와치가 검은 격자로 튄다 */
+  --ui-checker-pattern: conic-gradient(
+    #cfd5dd 0.25turn,
+    #eaeef4 0.25turn 0.5turn,
+    #cfd5dd 0.5turn 0.75turn,
+    #eaeef4 0.75turn
+  );
+
+  /* 크롬 필 — 조작면이라 라이트에서도 잉크가 늘어나는 방향이다.
+     카드 위에서 한 칸이 약 2.6~3.4 L*로, 다크의 칸 폭과 맞는다 */
+  --ui-fill: rgba(16, 24, 40, 0.085);
+  --ui-fill-hover: rgba(16, 24, 40, 0.125);
+  --ui-fill-active: rgba(16, 24, 40, 0.165);
+  /* 정적 그룹 컨테이너용 — 여기만 방향이 반대다. 상호작용 상태가 아니라
+     카드 면이고, 카드는 두 테마 모두 아래 면보다 떠올라야 한다.
+     패널 위에서 +3.9 L*로 다크의 +4.0과 같은 단차 */
+  --ui-fill-faint: rgba(255, 255, 255, 0.58);
+
+  /* 코드 에디터 스크롤바 썸 — 좁은 4px 막대라 크롬 필보다 진하게.
+     밝은 웰 위에서는 다크보다 조금 더 밀어야 막대가 형태로 잡힌다 */
+  --ui-scrollbar-thumb: rgba(16, 24, 40, 0.2);
+  --ui-scrollbar-thumb-hover: rgba(16, 24, 40, 0.26);
+  --ui-scrollbar-thumb-active: rgba(16, 24, 40, 0.32);
+
+  /* 텍스트 위계 — 다크가 순백을 피하듯 여기서도 순흑을 피한다. 배경과 같은
+     방향의 쿨 편향을 줘 글자만 무채색으로 떠 보이지 않게 했다.
+     밝은 바탕에서는 대비비가 빠르게 압축되므로 읽어야 하는 작은 안내·수치는
+     caption이 맡고, placeholder·장식은 faint에 남긴다. 두 역할을 한 값으로 묶으면
+     앱 바닥의 작은 글자를 살릴 때 muted와 faint가 같은 단계로 뭉친다.
+
+     그 결과 라이트에서는 muted와 caption이 1.6 L*까지 붙는다. 의도된 값이다 -
+     muted가 앱 바닥에서 이미 4.9:1이라 그 아래에 다크만큼(6.5 L*)의 단을 더 둘
+     자리가 없다. 간격이 좁아 보인다고 caption을 밝히면 앱 바닥과 코드 거터의
+     작은 글자가 다시 4.5:1 아래로 떨어진다. 두 단의 구분은 톤이 아니라
+     크기와 위치가 맡는다.
+     꺼짐 행 이름(disabled)이 본문 기준에 못 미치는 것은 다크와 같은 의도다.
+     기준을 맞추면 muted와 구분이 안 돼 '꺼짐'으로 읽히지 않는다 */
+  /* 호버에서 한 칸 더 올릴 자리. 여기서 '올린다'는 잉크를 더 넣는다는 뜻 */
+  --ui-fg-strong: #0d1219;
+  --ui-fg: #242a33;
+  --ui-fg-muted: #4e5665;
+  /* bg-app 위 12px 안내·코드 거터에서 4.5:1 이상 */
+  --ui-fg-caption: #525a66;
+  /* placeholder·장식 아이콘 전용, muted와 약 11.3 L* 분리 */
+  --ui-fg-faint: #69727f;
+  --ui-fg-disabled: #949ca9;
+
+  /* 액센트 — 색상환 위치는 브랜드 그대로 두고 명도만 내린다.
+     다크의 원색은 흰 바탕에서 4.0:1까지 떨어져 흰 글자를 얹는 버튼으로 못 쓴다.
+     호버 방향도 다크와 반대다. 밝은 바탕에서 상태가 세지는 것은 잉크가 늘어나는 것 */
+  --ui-accent: #7c47e8;
+  --ui-accent-hover: #6f3ade;
+  --ui-accent-active: #6230cc;
+  --ui-accent-muted: rgba(124, 71, 232, 0.13);
+  --ui-accent-fg: #ffffff;
+  /* 큰 면적 CTA용 — 넓은 채도면은 밝은 바탕에서도 눈을 찌른다. 한 단계 더 깊게 */
+  --ui-accent-deep: #6b39d8;
+  --ui-accent-deep-hover: #5d2bca;
+  --ui-accent-deep-active: #5225b4;
+
+  /* 토글 노브와 꺼짐 트랙. 노브는 두 테마 모두 흰색이다 - 켜짐은 액센트,
+     꺼짐은 회색 트랙이라 어느 쪽에서도 흰 노브가 트랙 위로 떠오른다 */
+  --ui-control-knob: #ffffff;
+  --ui-control-track-off: rgba(16, 24, 40, 0.15);
+  --ui-control-track-off-hover: rgba(16, 24, 40, 0.21);
+
+  /* 캔버스 핸들 — 다크와 같은 값이다. 아래 깔리는 것이 앱 표면이 아니라
+     사용자가 만든 임의 콘텐츠라 앱 테마로 밝기를 정할 근거가 없다.
+     분리는 채움색이 아니라 링과 드롭섀도가 담당 */
+  --ui-handle-fill: #ffffff;
+  --ui-handle-ring: rgba(0, 0, 0, 0.35);
+  --ui-handle-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+  /* 캔버스 정렬 가이드 — 선택 크롬(바이올렛)과 색으로 갈라야 하는 별개 신호.
+     밝은 캔버스에서 연한 산호색은 배경에 잠기므로 채도를 유지한 채 명도를 내린다 */
+  --ui-guide-align: #e0393f;
+  --ui-guide-align-glow: rgba(224, 57, 63, 0.45);
+
+  /* 캔버스 선택 크롬 — 셀렉션은 의미 지점이므로 브랜드 바이올렛 */
+  --ui-selection: #7c47e8;
+  --ui-selection-border: rgba(124, 71, 232, 0.8);
+  --ui-selection-border-strong: rgba(124, 71, 232, 0.9);
+  --ui-selection-fill: rgba(124, 71, 232, 0.13);
+  --ui-selection-glow: rgba(124, 71, 232, 0.45);
+
+  /* 시맨틱 — 전부 명도를 내려 흰 바탕에서 4.5:1을 넘긴다.
+     muted 계열은 배경 필이라 알파만 살짝 낮춘다. 검정 잉크와 마찬가지로
+     밝은 면 위의 유색 필도 같은 알파에서 더 무겁게 앉는다 */
+  --ui-danger: #d0353a;
+  --ui-danger-hover: #bd2c31;
+  --ui-danger-active: #a82428;
+  --ui-danger-muted: rgba(208, 53, 58, 0.11);
+  --ui-danger-muted-hover: rgba(208, 53, 58, 0.16);
+  --ui-danger-muted-active: rgba(208, 53, 58, 0.21);
+  --ui-danger-fg: #b62a2f;
+  --ui-success: #1a8a52;
+  --ui-success-muted: rgba(26, 138, 82, 0.12);
+  --ui-warning: #a56a00;
+  --ui-warning-muted: rgba(165, 106, 0, 0.12);
+
+  /* 코드 에디터 구문 색 — 불투명 웰(--ui-bg-inset-solid) 위 기준.
+     색상환 위치는 다크와 맞추고 명도만 내려 역할 인지가 유지되게 한다 */
+  --ui-syntax-comment: #4c7a4a;
+  --ui-syntax-string: #a63c1e;
+  --ui-syntax-keyword: #8b2ea3;
+  --ui-syntax-property: #1a5fa8;
+  --ui-syntax-punctuation: #3a3a3e;
+
+  /* 그림자 — 립의 주인이 바뀐다.
+     둘레 링은 표면 경계라 밝은 면 위에서는 어두운 잉크가 필요하다. 알파 0.10은
+     다크의 흰 링이 만드는 단차(+8.2 L*)를 라이트에서 재현한 값(-7.7 L*)이다.
+     상단 하이라이트는 경계선이 아니라 위에서 들어오는 반사광이라 흰색을 유지한다.
+     테마가 바뀐다고 광원 방향이 뒤집히지는 않는다. 둘 다 어둡게 만들면 상단에
+     두 선이 겹쳐 떠 있는 유리가 아니라 파인 홈으로 읽힌다.
+     유리 틴트를 흰색까지 올리지 않은 덕에 이 하이라이트가 실제로 보인다 -
+     틴트가 천장에 붙으면 립의 위쪽 절반이 통째로 사라진다.
+
+     드롭섀도는 알파를 크게 내린다. 같은 α0.45라도 근흑 위에서는 sRGB 변화량이
+     12 남짓인데 밝은 면 위에서는 100을 넘어 검은 얼룩이 된다.
+     반경은 유지하거나 넓혀 밀도를 분산시키고, 접촉 그림자 쪽에 힘을 조금 더 준다 */
+  --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.1);
+  --ui-shadow-2: inset 0 0 0 1px rgba(16, 24, 40, 0.12),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(16, 24, 40, 0.11),
+    0 2px 6px rgba(16, 24, 40, 0.07);
+  /* 3은 모달 카드 - 스크림이 이미 뒤를 어둡히므로 번짐은 popup보다 한 단계만 넓게 */
+  --ui-shadow-3: inset 0 0 0 1px rgba(16, 24, 40, 0.12),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 12px 32px rgba(16, 24, 40, 0.13),
+    0 3px 8px rgba(16, 24, 40, 0.08);
+
+  /* 일시 popup - 인접 control을 덮지 않게 lip은 유지하고 외부 번짐만 축소 */
+  --ui-shadow-popup: inset 0 0 0 1px rgba(16, 24, 40, 0.12),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(16, 24, 40, 0.11),
+    0 1px 3px rgba(16, 24, 40, 0.07);
+
+  /* 사이드 패널 — 도킹 경계인 좌측 엣지만 헤어라인, 좌측 방향성 드롭으로 캔버스와 분리 */
+  --ui-shadow-panel: inset 1px 0 0 0 rgba(16, 24, 40, 0.18),
+    -14px 0 34px rgba(16, 24, 40, 0.14);
+
+  /* 상주 크롬 — 인셋 링 + 상단 하이라이트가 보더·재질 담당, 드롭섀도는 흔적만 */
+  --ui-shadow-chrome: inset 0 0 0 1px rgba(16, 24, 40, 0.12),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(16, 24, 40, 0.08);
+
+  /* 포커스 링 — 표면 위 3:1 하한은 그대로다. 밝은 표면에서는 액센트 원색이
+     아니라 한 단계 깊은 보라라야 링이 면에 안 잠긴다 */
+  --ui-focus-ring: 0 0 0 1.5px rgba(109, 56, 218, 0.9);
+
+  /* 확정할 수 없는 입력 - 포커스 링과 같은 자리, 같은 두께로 그려 색만 바뀐다 */
+  --ui-danger-ring: 0 0 0 1.5px rgba(196, 45, 50, 0.9);
+}
diff --git a/src/renderer/utils/cardRecipes.ts b/src/renderer/utils/cardRecipes.ts
index 3dc68bfce..d27ef67c2 100644
--- a/src/renderer/utils/cardRecipes.ts
+++ b/src/renderer/utils/cardRecipes.ts
@@ -5,8 +5,9 @@
 // 섹션 래퍼 — 라벨 + 카드를 6px 간격으로 묶음
 export const SECTION_WRAPPER_CLASS = 'flex flex-col gap-[6px]';
 
-// 섹션 라벨 — 카드 위 faint 서브헤더
-export const SECTION_LABEL_CLASS = 'text-fg-faint text-body text-left px-[2px]';
+// 섹션 라벨 — 카드 위에서 읽혀야 하는 저강도 서브헤더
+export const SECTION_LABEL_CLASS =
+  'text-fg-caption text-body text-left px-[2px]';
 
 // 그룹 카드 — 관련 행을 하나의 면으로 묶는 컨테이너
 export const SECTION_CARD_CLASS =
diff --git a/src/renderer/utils/panelWindow/panelChildWindow.ts b/src/renderer/utils/panelWindow/panelChildWindow.ts
index 012906e8b..a3487b7c8 100644
--- a/src/renderer/utils/panelWindow/panelChildWindow.ts
+++ b/src/renderer/utils/panelWindow/panelChildWindow.ts
@@ -1,4 +1,9 @@
 import { panelWindowApi } from '@api/modules/panelWindowApi';
+import {
+  applyThemeToDocument,
+  getResolvedTheme,
+  subscribeResolvedTheme,
+} from '@utils/theme/applyTheme';
 
 import {
   mirrorDocumentStyles,
@@ -65,9 +70,12 @@ const prepareChildDocument = (source: Document, target: Document) => {
   if (!target.querySelector('meta[name="color-scheme"]')) {
     const colorScheme = target.createElement('meta');
     colorScheme.name = 'color-scheme';
-    colorScheme.content = 'dark';
     target.head.appendChild(colorScheme);
   }
+  // 스타일 복제는 head 노드만 옮긴다 - html 속성은 따라오지 않는다.
+  // 테마 토큰이 data-theme 아래에만 있어 여기서 직접 실어야 팔레트가 뜬다.
+  // 창 자체가 transparent라 바탕색은 넘기지 않는다
+  applyThemeToDocument(target, getResolvedTheme());
   if (!target.querySelector('base')) {
     // 상대 url()·폰트 경로가 opener 문서 기준으로 풀리게
     const base = target.createElement('base');
@@ -114,6 +122,13 @@ const createPanelChildWindow = async (): Promise<PanelChildWindow> => {
   return current;
 };
 
+// 전환은 opener에서 일어나므로 자식 문서는 구독으로 따라간다
+subscribeResolvedTheme((theme) => {
+  const child = getPanelChildWindow();
+  if (!child) return;
+  applyThemeToDocument(child.document, theme);
+});
+
 export const openPanelChildWindow = (): Promise<PanelChildWindow> => {
   const existing = getPanelChildWindow();
   if (existing) return Promise.resolve(existing);
diff --git a/src/renderer/utils/plugin/pluginComponents.ts b/src/renderer/utils/plugin/pluginComponents.ts
index 45098271c..4dd397b34 100644
--- a/src/renderer/utils/plugin/pluginComponents.ts
+++ b/src/renderer/utils/plugin/pluginComponents.ts
@@ -132,7 +132,7 @@ export function createCheckbox(options: CheckboxOptions = {}): string {
   const { checked = false, onChange, id = '' } = options;
 
   // 메인 UI Checkbox와 동일한 크기·토큰 (30x18, 액센트/line-strong 트랙, 14px 흰 노브)
-  const bgClass = checked ? 'bg-accent' : 'bg-line-strong';
+  const bgClass = checked ? 'bg-accent' : 'bg-control-track-off';
   const knobClass = checked ? 'left-[14px]' : 'left-[2px]';
 
   // 핸들러 처리: 함수면 등록, 문자열이면 레거시 방식
@@ -162,7 +162,7 @@ export function createCheckbox(options: CheckboxOptions = {}): string {
     <input type="checkbox" ${inputIdAttr} ${
     checked ? 'checked' : ''
   } class="absolute opacity-0 w-0 h-0" />
-    <div class="absolute w-[14px] h-[14px] rounded-full top-[2px] bg-white shadow-elevation-1 transition-all duration-base ease-out-expo ${knobClass}"></div>
+    <div class="absolute w-[14px] h-[14px] rounded-full top-[2px] bg-control-knob shadow-elevation-1 transition-all duration-base ease-out-expo ${knobClass}"></div>
   </label>`;
 }
 
diff --git a/src/renderer/utils/theme/applyTheme.ts b/src/renderer/utils/theme/applyTheme.ts
new file mode 100644
index 000000000..88fe5616c
--- /dev/null
+++ b/src/renderer/utils/theme/applyTheme.ts
@@ -0,0 +1,120 @@
+import type {
+  ResolvedUiTheme,
+  UiThemePreference,
+} from '@src/types/settings/settings';
+
+// 첫 페인트 전에 부트 스크립트가 읽는 키. windows/main/index.html과 같은 값을 쓴다
+export const THEME_CACHE_KEY = 'dmn-ui-theme';
+
+const SYSTEM_LIGHT_QUERY = '(prefers-color-scheme: light)';
+
+type ThemeListener = (theme: ResolvedUiTheme) => void;
+
+const listeners = new Set<ThemeListener>();
+
+// 부트 스크립트가 첫 페인트 전에 html에 속성을 박는다. 여기서 그 값을 그대로
+// 받아야 설정이 도착하기 전 첫 렌더에서도 문서와 어긋나지 않는다
+const readDocumentTheme = (): ResolvedUiTheme => {
+  if (typeof document === 'undefined') return 'dark';
+  return document.documentElement.getAttribute('data-theme') === 'light'
+    ? 'light'
+    : 'dark';
+};
+
+let resolved: ResolvedUiTheme = readDocumentTheme();
+
+export const getResolvedTheme = (): ResolvedUiTheme => resolved;
+
+export const resolveTheme = (
+  preference: UiThemePreference,
+): ResolvedUiTheme => {
+  if (preference === 'light' || preference === 'dark') return preference;
+  try {
+    return window.matchMedia(SYSTEM_LIGHT_QUERY).matches ? 'light' : 'dark';
+  } catch {
+    return 'dark';
+  }
+};
+
+/** system 선택일 때만 구독한다. 명시 선택은 OS 변경과 무관해야 한다 */
+export const subscribeSystemTheme = (onChange: () => void): (() => void) => {
+  let query: MediaQueryList;
+  try {
+    query = window.matchMedia(SYSTEM_LIGHT_QUERY);
+  } catch {
+    return () => {};
+  }
+  const handle = () => onChange();
+  query.addEventListener('change', handle);
+  return () => query.removeEventListener('change', handle);
+};
+
+export const cacheThemePreference = (preference: UiThemePreference) => {
+  try {
+    localStorage.setItem(THEME_CACHE_KEY, preference);
+  } catch {
+    // 저장소가 막혀도 이번 세션 적용에는 지장이 없다
+  }
+};
+
+export const readCachedThemePreference = (
+  fallback: UiThemePreference,
+): UiThemePreference => {
+  try {
+    const cached = localStorage.getItem(THEME_CACHE_KEY);
+    return cached === 'system' || cached === 'light' || cached === 'dark'
+      ? cached
+      : fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+/**
+ * 문서 하나에 테마를 싣는다. 분리 패널 자식 문서도 같은 함수를 쓴다 -
+ * 자식은 opener의 head 스타일 노드만 복제받고 html 속성은 물려받지 않는다
+ */
+export const applyThemeToDocument = (
+  doc: Document,
+  theme: ResolvedUiTheme,
+  rootBackground?: string,
+) => {
+  doc.documentElement.setAttribute('data-theme', theme);
+  const meta = doc.querySelector('meta[name="color-scheme"]');
+  if (meta) meta.setAttribute('content', theme);
+  if (rootBackground) {
+    doc.documentElement.style.backgroundColor = rootBackground;
+  }
+};
+
+/**
+ * 메인 문서에 테마를 반영하고 구독자에게 알린다.
+ *
+ * 바탕색은 토큰에서 되읽는다 - 속성을 먼저 바꾸면 그 시점의 --ui-bg-app이
+ * 이미 새 테마 값이다. 부트 스크립트만 값을 따로 갖는데, 그때는 번들 CSS가
+ * 아직 없어서 토큰을 읽을 수단이 없다
+ */
+export const applyResolvedTheme = (theme: ResolvedUiTheme) => {
+  resolved = theme;
+  applyThemeToDocument(document, theme);
+  const background = getComputedStyle(document.documentElement)
+    .getPropertyValue('--ui-bg-app')
+    .trim();
+  if (background) {
+    document.documentElement.style.backgroundColor = background;
+  }
+  listeners.forEach((listener) => listener(theme));
+};
+
+/**
+ * 테마 전환에 반응해야 하는 곳이 쓴다. 토큰을 한 번 읽어 캐시하거나
+ * 캔버스에 직접 그려 둔 표면은 여기서 다시 그려야 한다
+ */
+export const subscribeResolvedTheme = (
+  listener: ThemeListener,
+): (() => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
diff --git a/src/renderer/windows/main/App.tsx b/src/renderer/windows/main/App.tsx
index b6af51958..6dec0693c 100644
--- a/src/renderer/windows/main/App.tsx
+++ b/src/renderer/windows/main/App.tsx
@@ -32,6 +32,7 @@ import Palette from '@components/main/Modal/content/pickers/Palette';
 import ColorPicker from '@components/main/Modal/content/pickers/ColorPicker';
 import { useKeyStore } from '@stores/data/useKeyStore';
 import { useAppBootstrap } from '@hooks/app/useAppBootstrap';
+import { useAppTheme } from '@hooks/app/useAppTheme';
 import { usePluginDisplayElementsResponder } from '@hooks/app/usePluginDisplayElementsResponder';
 import {
   UpdateInstalledRestartFailedError,
@@ -80,6 +81,7 @@ export default function App() {
   useCustomCssInjection({ scopeSelector: USER_CSS_SCOPE_SELECTOR });
   useCustomJsInjection(isBootstrapped);
   useAppBootstrap();
+  useAppTheme();
   usePluginDisplayElementsResponder();
   useBlockBrowserShortcuts();
 
diff --git a/src/renderer/windows/main/index.html b/src/renderer/windows/main/index.html
index c5e02528a..5d326363d 100644
--- a/src/renderer/windows/main/index.html
+++ b/src/renderer/windows/main/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark" style="background-color: #131315">
   <head>
     <meta charset="UTF-8" />
-    <!-- 다크 단일 모드 선언. 웹뷰가 직접 그리는 것들(텍스트 선택, autofill,
-         네이티브 폼 컨트롤)에 문서가 다크임을 알린다.
+    <!-- 웹뷰가 직접 그리는 것들(텍스트 선택, autofill, 네이티브 폼 컨트롤)에
+         문서 테마를 알린다. 아래 부트 스크립트가 해석된 값으로 덮어쓴다.
          현재 이 앱에서 눈에 보이는 차이는 없다 - 전역 user-select: none이라 선택이
          막혀 있고, 네이티브 select 0개, 스크롤바 전역 숨김, autofill 대상 폼 없음.
          네이티브 컨트롤이 늘어날 때를 위한 선언적 안전장치다.
@@ -11,8 +11,37 @@
          UA 캔버스가 불투명해지면 오버레이가 검은 박스가 된다 -->
     <meta name="color-scheme" content="dark" />
     <link rel="icon" href="data:," />
+    <!-- 첫 페인트 전에 테마를 확정한다. 토큰이 [data-theme] 아래에만 있고
+         다크 폴백을 bare :root에 두지 않으므로 속성이 반드시 있어야 한다.
+         html 태그의 정적 속성이 그 보증이고, 여기서는 라이트일 때만 바꾼다.
+         이 스크립트가 통째로 실패해도 다크로 남는다.
+
+         localStorage는 표시용 힌트다. 진짜 값은 설정 store가 갖고 부팅 후 덮어쓴다 -
+         설정 도착을 기다리면 첫 프레임이 다크로 번쩍인다.
+         번들 CSS는 dev에서 JS로 주입돼 첫 프레임에 없으므로 바탕색도 여기서 심는다 -->
+    <script>
+      (function () {
+        var LIGHT_ROOT_BG = '#ccd3dc';
+        try {
+          var stored = localStorage.getItem('dmn-ui-theme');
+          var resolved =
+            stored === 'light' || stored === 'dark'
+              ? stored
+              : window.matchMedia('(prefers-color-scheme: light)').matches
+                ? 'light'
+                : 'dark';
+          if (resolved !== 'light') return;
+          document.documentElement.setAttribute('data-theme', 'light');
+          document.documentElement.style.backgroundColor = LIGHT_ROOT_BG;
+          var meta = document.querySelector('meta[name="color-scheme"]');
+          if (meta) meta.setAttribute('content', 'light');
+        } catch (error) {
+          // 저장소 접근이 막힌 환경에서도 다크로 계속 뜬다
+        }
+      })();
+    </script>
   </head>
-  <body style="background-color: #131315">
+  <body>
     <div id="root"></div>
     <script type="module" src="./index.tsx"></script>
   </body>
diff --git a/src/renderer/windows/obs/index.html b/src/renderer/windows/obs/index.html
index 87e41bf0f..35d6d3a45 100644
--- a/src/renderer/windows/obs/index.html
+++ b/src/renderer/windows/obs/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark">
   <head>
+    <!-- 사용자 콘텐츠 전용 창이라 앱 테마를 따라가지 않는다.
+         tokens.css가 여기에도 로드되는데 다크 값이 bare :root에 없으므로
+         속성이 빠지면 --ui-* 가 전부 미정의가 된다. 정적 다크로 고정 -->
     <meta charset="UTF-8" />
     <link rel="icon" href="data:," />
     <title>DM NOTE OBS</title>
diff --git a/src/renderer/windows/overlay/index.html b/src/renderer/windows/overlay/index.html
index 9096d7b0c..9f0d6e527 100644
--- a/src/renderer/windows/overlay/index.html
+++ b/src/renderer/windows/overlay/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark">
   <head>
+    <!-- 사용자 콘텐츠 전용 창이라 앱 테마를 따라가지 않는다.
+         tokens.css가 여기에도 로드되는데 다크 값이 bare :root에 없으므로
+         속성이 빠지면 --ui-* 가 전부 미정의가 된다. 정적 다크로 고정 -->
     <meta charset="UTF-8" />
     <link rel="icon" href="data:," />
   </head>
diff --git a/src/types/settings/settings.ts b/src/types/settings/settings.ts
index 46f32efd7..d409b80c4 100644
--- a/src/types/settings/settings.ts
+++ b/src/types/settings/settings.ts
@@ -10,6 +10,23 @@ import { type CustomCss } from '@src/types/plugin/css';
 import { type CustomJs } from '@src/types/plugin/js';
 import type { ShortcutsState } from '@src/types/settings/shortcuts';
 
+// 앱 UI 테마 선택. system은 OS 설정을 따라간다
+export type UiThemePreference = 'system' | 'light' | 'dark';
+// data-theme 속성에 실제로 실리는 값. system이 해석된 결과다
+export type ResolvedUiTheme = 'light' | 'dark';
+
+export const UI_THEME_PREFERENCES: readonly UiThemePreference[] = [
+  'system',
+  'light',
+  'dark',
+];
+
+export const isUiThemePreference = (
+  value: unknown,
+): value is UiThemePreference =>
+  typeof value === 'string' &&
+  (UI_THEME_PREFERENCES as readonly string[]).includes(value);
+
 export type OverlayResizeAnchor =
   | 'top-left'
   | 'top-right'
@@ -36,6 +53,7 @@ export interface SettingsState {
   fontSettings: FontSettings;
   angleMode: string;
   language: string;
+  uiTheme: UiThemePreference;
   laboratoryEnabled: boolean;
   developerModeEnabled: boolean;
   trayEnabled: boolean;
diff --git a/tailwind.config.js b/tailwind.config.js
index fadd99ad5..2b5d21a87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,10 +37,22 @@ module.exports = {
         },
         fg: {
           DEFAULT: 'var(--ui-fg)',
+          strong: 'var(--ui-fg-strong)',
           muted: 'var(--ui-fg-muted)',
+          caption: 'var(--ui-fg-caption)',
           faint: 'var(--ui-fg-faint)',
           disabled: 'var(--ui-fg-disabled)',
         },
+        scrim: 'var(--ui-scrim)',
+        control: {
+          knob: 'var(--ui-control-knob)',
+          'track-off': 'var(--ui-control-track-off)',
+          'track-off-hover': 'var(--ui-control-track-off-hover)',
+        },
+        handle: {
+          DEFAULT: 'var(--ui-handle-fill)',
+          ring: 'var(--ui-handle-ring)',
+        },
         accent: {
           DEFAULT: 'var(--ui-accent)',
           hover: 'var(--ui-accent-hover)',
@@ -96,6 +108,7 @@ module.exports = {
         'elevation-popup': 'var(--ui-shadow-popup)',
         'elevation-chrome': 'var(--ui-shadow-chrome)',
         'elevation-panel': 'var(--ui-shadow-panel)',
+        handle: 'var(--ui-handle-shadow)',
         'focus-ring': 'var(--ui-focus-ring)',
         'danger-ring': 'var(--ui-danger-ring)',
       },