CSS 자동 추출기로 색상 코드 정확하게 추출하는 방법 (SEO 주의사항 포함)

CSS에서 색상 코드를 추출하려면, 추출 대상이 되는 원본에 정확한 색상이 먼저 적용되어 있어야 합니다.
예를 들어 색상 대비 기준에 맞지 않는 원본 CSS를 그대로 추출할 경우, 접근성 및 SEO 측면에서 문제가 발생할 수 있습니다.

이러한 경우 결국 색상 수정 재추출이라는 이중 작업이 필요해져 불편함이 따릅니다.
따라서 색상을 먼저 직접 적용한 후 추출을 진행하고, 자동으로 추출되지 않는 CSS만 수동으로 보완 적용하는 방식이 가장 효율적입니다.

다크모드 라이트 모드 버튼 생성

button id="themeToggle"
 style="
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: 999px;
 border: 1px solid #d1d5db;
 background: #ffffff;
 color: #111827;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: background .2s, color .2s, border-color .2s;
 margin-bottom: 10px;
 width: 100%;
 text-align: center;
 "
 다크 모드
/button

자바스크립트

script
(function () {
 "use strict";

 const KEY = "__invert_theme_enabled__";
 const btn = document.getElementById("themeToggle");
 let enabled = localStorage.getItem(KEY) === "1";
 const cache = new WeakMap();

 function invert(rgb) {
 const m = rgb.match(/\d+/g);
 if (!m || m.length 3) return rgb;
 return `rgb(${255 - m[0]}, ${255 - m[1]}, ${255 - m[2]})`;
 }

 function styleButton(dark) {
 btn.style.background = dark ? "#111827" : "#ffffff";
 btn.style.color = dark ? "#e5e7eb" : "#111827";
 btn.style.borderColor = dark ? "#374151" : "#d1d5db";
 btn.innerHTML = dark ? "☀ 라이트 모드" : " 다크 모드";
 }

 function apply(enable) {
 document.querySelectorAll("*").forEach(el = {
 const cs = getComputedStyle(el);

 if (enable) {
 if (!cache.has(el)) {
 cache.set(el, {
 c: cs.color,
 b: cs.backgroundColor
 });
 }

 el.style.color = invert(cs.color);

 if (cs.backgroundColor !== "rgba(0, 0, 0, 0)") {
 el.style.backgroundColor = invert(cs.backgroundColor);
 }
 } else {
 const o = cache.get(el);
 if (o) {
 el.style.color = o.c;
 el.style.backgroundColor = o.b;
 }
 }
 });

 styleButton(enable);
 }

 btn.addEventListener("click", () = {
 enabled = !enabled;
 localStorage.setItem(KEY, enabled ? "1" : "0");
 apply(enabled);
 });

 styleButton(enabled);
 if (enabled) requestAnimationFrame(() = apply(true));
})();
/script