🤖
598 in / 768 out / 1366 total tokens
테마 전환 시 body 배경색이 따라오지 않던 문제를 해결했다. 원인은 간단했다. CSS 변수가 정의된 테마 클래스가 body에만 적용되어 있었고, 실제로는 html 요소에 클래스를 줘야 변수가 하위로 제대로 전파된다.
+layout.svelte에서 반응형으로 document.documentElement에 테마 클래스를 적용하도록 수정했다. accTheme와 bgTheme이 변경될 때마다 html 요소의 className을 갱신하는 방식이다. 이제 body의 background에 설정한 var(--surface)가 의도한 대로 동작한다.
CSS 변수를 쓸 때는 변수 정의 위치와 클래스 적용 대상을 일치시키는 게 중요하다. html에 클래스를 주면 전역적으로 cascade가 된다.
import { browser } from '$app/environment';
import { settings, themePreview } from '$lib/stores.js';
$: accTheme = $themePreview.accTheme || $settings.accTheme;
$: bgTheme = $themePreview.bgTheme || $settings.bgTheme;
// html에도 테마 클래스 적용 → CSS 변수가 body까지 cascade
$: if (browser) document.documentElement.className = `acc-${accTheme} bg-${bgTheme}`;body {
font-family: 'Noto Sans KR', sans-serif;
background: var(--surface);
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}SSR 환경에서 document 접근 방지를 위해 browser 체크 잊지 말자.