/* ============================================================== * custom-theme-switcher.css * 원본 custombgandt.css 그대로 유지 + html.dark / html.custom 규칙만 추가. * * 왜 추가했나: * 기존 방식은 색상 변수(--wp--preset--color--base 등)를 body(.custom-bg-and-t) * 요소에만 걸어뒀는데, 그 요소는 JS가 DOMContentLoaded 시점에야 클래스를 붙여준다. * 그 사이(=페이지가 그려지기 시작해서 JS가 실행되기 전) 잠깐 기본 색으로 보였다가 * 다크/커스텀 색으로 바뀌는 "프론트 플리커"가 발생한다. * * html.dark / html.custom 규칙을 추가해두면, 플러그인의 스크립트가 * body가 파싱되기도 전에 태그에 즉시 클래스를 붙이므로, CSS 변수가 * body가 그려지는 시점에는 이미 올바른 값으로 상속되어 있다 → 깜빡임 없음. * (변수는 자식 요소로 상속되므로 html에 걸어도 body/버튼 등에 그대로 적용됨) * ============================================================== */ /* 기본 모드 버튼 */ .custom-bg-and-t-btn { background-color: inherit !important; } /* 기본 모드 */ .custom-bg-and-t, .custom-bg-and-t.default, .custom-bg-and-t-btn.default, .custom-bg-and-t-btn.defaulf { /* 원본에 있던 오타(defaulf)도 혹시 몰라 그대로 유지 */ background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* 다크 모드 */ .custom-bg-and-t.dark, .custom-bg-and-t-btn.dark, html.dark { --wp--preset--color--base: #191919!important; --wp--preset--color--contrast: #eeeeee !important; --wp--preset--color--accent-2: var(--wp--preset--color--vivid-cyan-blue); --wp--preset--color--accent-3: var(--wp--preset--color--cyan-bluish-gray); --wp--preset--color--accent-4: #DEDEDE; --wp--preset--color--accent-5: #000000; --wp--preset--color--accent-6: #ffffff30; --wp--preset--color--white: #000000!important; --wp--preset--color--black: #ffffff!important; } /* 커스텀 모드 */ .custom-bg-and-t.custom, .custom-bg-and-t-btn.custom, html.custom { --wp--preset--color--base: #A3A19D; --wp--preset--color--contrast: #000000; --wp--preset--color--accent-5: #00000030; --wp--preset--color--accent-6: #00000030; } /* html에 건 변수가 body에도 상속되긴 하지만, body 자체의 배경/글자색 규칙이 테마마다 다르게 걸려있을 수 있으므로 안전하게 한 번 더 명시 */ html.dark body, html.custom body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* Pretendard */ @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* GowunDodum */ @font-face { font-family: 'GowunDodum-Regular'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } /* 리디바탕 */ @font-face { font-family: 'RIDIBatang'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff'); font-weight: normal; font-style: normal; } /* 폰트 클래스 별 적용 */ body, .custom-bg-and-t.main { font-family: 'Pretendard', sans-serif ; font-weight: 400; } .custom-bg-and-t.custom-1 { font-family: 'GowunDodum-Regular', sans-serif ; } .custom-bg-and-t.custom-2 { font-family: 'RIDIBatang', sans-serif ; } .font-size-80 :is(p,tr,li,ul,blockquote):not([class *="is-style-text"]):not([class *="textggu--title"]):not([class *="textggu--sub"]) { font-size: calc(var(--wp--preset--font-size--large)*0.8); } .font-size-90 :is(p,tr,li,ul,blockquote):not([class *="is-style-text"]):not([class *="textggu--title"]):not([class *="textggu--sub"]) { font-size: calc(var(--wp--preset--font-size--large)*0.9); } .font-size-110 :is(p,tr,li,ul,blockquote):not([class *="is-style-text"]):not([class *="textggu--title"]):not([class *="textggu--sub"]) { font-size: calc(var(--wp--preset--font-size--large)*1.1); } .font-size-btn-90 { --wp--preset--color--accent-1: gold; --wp--preset--color--black: #000000; } .font-size-btn-80 { --wp--preset--color--accent-1: lemonchiffon; --wp--preset--color--black: #000000; } .font-size-btn-110 { --wp--preset--color--accent-1: red; --wp--preset--color--black: #fff; } /*-------- 스크롤 뷰어 버튼 설정 --------*/ .scroll-toggle-btn{ background-color: inherit; color: inherit; } .scroll-toggle-btn.scroll-viewer-on { --wp--preset--color--accent-1: red; --wp--preset--color--accent-2: red; --wp--preset--color--accent-3: red; --wp--preset--color--black: white; }