다크 테마 설정 정리
This commit is contained in:
Yun Chan
parent
480fbd543a
commit
250787cb18
6 changed files with 136 additions and 7 deletions
|
|
@ -22,6 +22,7 @@ import {
|
|||
type UserProfileResponse,
|
||||
type VoicePresetResponse,
|
||||
} from "../lib/api";
|
||||
import { readInitialTheme } from "../lib/theme";
|
||||
import { Toggle } from "./settings/Toggle";
|
||||
import { useTheme } from "./settings/useTheme";
|
||||
import "./settings/settings.css";
|
||||
|
|
@ -214,7 +215,7 @@ export default function Settings() {
|
|||
}
|
||||
setPreferences(nextPrefs);
|
||||
setPreferencesReady(true);
|
||||
setDark(nextPrefs.theme === "dark");
|
||||
setDark(nextPrefs.theme === "dark" || (nextPrefs.theme !== "light" && readInitialTheme() === "dark"));
|
||||
setVoicePresets(presets);
|
||||
if (nextEngine) {
|
||||
engineConfigRef.current = nextEngine;
|
||||
|
|
|
|||
|
|
@ -1537,3 +1537,129 @@ body[data-page="settings"] .vg-set__pill {
|
|||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-shell {
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(111, 179, 164, 0.18), transparent 34%),
|
||||
radial-gradient(circle at 92% 12%, rgba(205, 154, 116, 0.12), transparent 32%),
|
||||
linear-gradient(135deg, rgba(11, 25, 22, 0.98), rgba(18, 30, 27, 0.96)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group {
|
||||
border-color: rgba(203, 227, 220, 0.13);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(28, 44, 39, 0.93), rgba(16, 29, 26, 0.95)),
|
||||
rgba(14, 27, 24, 0.88);
|
||||
box-shadow:
|
||||
0 24px 58px rgba(0, 0, 0, 0.26),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail-title h1,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group-title,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile strong,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__label,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt-main,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice-title {
|
||||
color: rgba(241, 247, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail-title p,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group-desc,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile span,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__hint,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt-sub,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice-meta,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__foot,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__callout {
|
||||
color: rgba(214, 228, 224, 0.72);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item {
|
||||
color: rgba(205, 232, 225, 0.82);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item:hover {
|
||||
background: rgba(111, 179, 164, 0.12);
|
||||
color: rgba(239, 248, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item.is-active {
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.9), rgba(62, 136, 121, 0.94));
|
||||
color: #061511;
|
||||
box-shadow: 0 14px 28px rgba(7, 20, 17, 0.34);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item.is-active svg {
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__field,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__control-block,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__range-row,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__pill,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__callout,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-badge {
|
||||
border-color: rgba(203, 227, 220, 0.11);
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__select,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-input {
|
||||
border-color: rgba(203, 227, 220, 0.12);
|
||||
background: rgba(11, 24, 21, 0.78);
|
||||
color: rgba(241, 247, 245, 0.94);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice.is-active,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn.is-active {
|
||||
border-color: rgba(111, 179, 164, 0.48);
|
||||
background: rgba(111, 179, 164, 0.2);
|
||||
color: rgba(239, 248, 245, 0.98);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn {
|
||||
color: rgba(205, 232, 225, 0.76);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn:not(.is-active):hover,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice:not(.is-active):hover {
|
||||
background: rgba(111, 179, 164, 0.11);
|
||||
color: rgba(239, 248, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__range {
|
||||
accent-color: rgba(111, 179, 164, 0.95);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__avatar {
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.92), rgba(49, 116, 102, 0.95));
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set .vg-btn--primary {
|
||||
border-color: rgba(111, 179, 164, 0.48);
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.88), rgba(73, 145, 130, 0.9));
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set .vg-btn--primary:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(129, 202, 186, 0.94), rgba(84, 160, 143, 0.96));
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail {
|
||||
border-bottom-color: rgba(203, 227, 220, 0.12);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(22, 36, 32, 0.98), rgba(13, 26, 23, 0.96)),
|
||||
rgba(13, 26, 23, 0.96);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue