60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
/* --- 테마 통합 관리 모듈 ---
|
|
* 라이트/다크 테마를 localStorage 기반으로 관리한다. (DB 저장 없음)
|
|
* 이 스크립트는 각 페이지 <head> 최상단(base.css 링크보다 먼저)에서 로드되어야
|
|
* FOWT(Flash Of Wrong Theme, 잘못된 테마가 순간적으로 보이는 현상)를 방지한다.
|
|
*/
|
|
(function () {
|
|
"use strict";
|
|
|
|
var THEME_KEY = "app-theme";
|
|
var DEFAULT_THEME = "light"; // 기본값: 화이트 계열
|
|
var VALID_THEMES = ["light", "dark"];
|
|
|
|
/** localStorage에서 저장된 테마를 읽는다. 없거나 잘못된 값이면 기본값 반환. */
|
|
function getStoredTheme() {
|
|
var stored;
|
|
try {
|
|
stored = window.localStorage.getItem(THEME_KEY);
|
|
} catch (e) {
|
|
stored = null; // localStorage 접근 불가(사생활 보호 모드 등) 시 안전하게 기본값
|
|
}
|
|
return VALID_THEMES.indexOf(stored) !== -1 ? stored : DEFAULT_THEME;
|
|
}
|
|
|
|
/** <html> 요소에 data-theme 속성을 적용한다. (실제 화면 반영) */
|
|
function applyTheme(theme) {
|
|
if (VALID_THEMES.indexOf(theme) === -1) {
|
|
theme = DEFAULT_THEME;
|
|
}
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
}
|
|
|
|
/** 테마를 저장하고 즉시 화면에 적용한다. */
|
|
function setTheme(theme) {
|
|
if (VALID_THEMES.indexOf(theme) === -1) {
|
|
theme = DEFAULT_THEME;
|
|
}
|
|
try {
|
|
window.localStorage.setItem(THEME_KEY, theme);
|
|
} catch (e) {
|
|
/* 저장 실패해도 현재 세션 적용은 계속 진행 */
|
|
}
|
|
applyTheme(theme);
|
|
}
|
|
|
|
// 로드 즉시 동기 실행 → FOWT 방지 (DOMContentLoaded를 기다리지 않음)
|
|
applyTheme(getStoredTheme());
|
|
|
|
// 다른 스크립트(setting.js 등)에서 사용할 수 있도록 전역 노출
|
|
try {
|
|
window.AppTheme = {
|
|
get: getStoredTheme,
|
|
set: setTheme,
|
|
apply: applyTheme,
|
|
THEMES: VALID_THEMES.slice()
|
|
};
|
|
} catch (e) {
|
|
console.warn("[Theme] Failed to expose AppTheme to window:", e);
|
|
}
|
|
})();
|