zenn
797a6dd5a0
head 인라인 스크립트로 data-theme 선적용, 로고 캐시 스플래시 추가. 메인 커버는 업로드 후 저장 버튼에서 이미지·텍스트 일괄 반영. Co-authored-by: Cursor <cursoragent@cursor.com>
35 lines
2.1 KiB
JavaScript
35 lines
2.1 KiB
JavaScript
/** @type {'light' | 'dark'} */
|
|
export const SITE_THEME_LIGHT = 'light'
|
|
|
|
/** @type {'light' | 'dark'} */
|
|
export const SITE_THEME_DARK = 'dark'
|
|
|
|
/** localStorage 키: 사용자가 선택한 사이트 테마 */
|
|
export const SITE_THEME_STORAGE_KEY = 'SITE_THEME'
|
|
|
|
/** localStorage 키: 스플래시용 로고 이미지 URL(이전 방문에서 캐시) */
|
|
export const SITE_BRAND_LOGO_URL_KEY = 'SITE_BRAND_LOGO_URL'
|
|
|
|
/** localStorage 키: 스플래시용 로고 텍스트 fallback */
|
|
export const SITE_BRAND_LOGO_TEXT_KEY = 'SITE_BRAND_LOGO_TEXT'
|
|
|
|
/**
|
|
* 저장값·시스템 설정으로 적용할 테마를 결정한다.
|
|
* @param {string|null|undefined} savedTheme - localStorage 값
|
|
* @param {boolean} prefersDark - 시스템 다크 모드 여부
|
|
* @returns {'light' | 'dark'}
|
|
*/
|
|
export const resolveSiteTheme = (savedTheme, prefersDark) => {
|
|
if (savedTheme === SITE_THEME_LIGHT || savedTheme === SITE_THEME_DARK) {
|
|
return savedTheme
|
|
}
|
|
|
|
return prefersDark ? SITE_THEME_DARK : SITE_THEME_LIGHT
|
|
}
|
|
|
|
/**
|
|
* 첫 페인트 전에 테마·스플래시를 준비하는 head 인라인 스크립트 본문
|
|
* @returns {string}
|
|
*/
|
|
export const buildSiteBootInlineScript = () => `(function(){try{var sk=${JSON.stringify(SITE_THEME_STORAGE_KEY)};var lk=${JSON.stringify(SITE_BRAND_LOGO_URL_KEY)};var tk=${JSON.stringify(SITE_BRAND_LOGO_TEXT_KEY)};var root=document.documentElement;var prefersDark=window.matchMedia("(prefers-color-scheme: dark)").matches;var saved=localStorage.getItem(sk);var theme=(saved==="light"||saved==="dark")?saved:(prefersDark?"dark":"light");root.dataset.theme=theme;root.style.colorScheme=theme;if(/^\\/(admin|signin|signup|forgot-password)(\\/|$)/.test(location.pathname)){root.classList.add("site-app-ready");return}var splash=document.getElementById("site-splash");if(!splash){return}var logoEl=document.getElementById("site-splash-logo");var textEl=document.getElementById("site-splash-text");var logoUrl=localStorage.getItem(lk)||"";var logoText=localStorage.getItem(tk)||"sori.studio";if(logoUrl&&logoEl){logoEl.src=logoUrl;logoEl.hidden=false;if(textEl){textEl.hidden=true}}else if(textEl){textEl.textContent=logoText;textEl.hidden=false}}catch(e){}})();`
|