엔진 철학
DX DarkMode Engine은 단순 스타일 변경 스크립트가 아닙니다.“기존 사이트를 유지하면서 자동으로 다크모드를 생성한다.”
라는 목표로 설계되었습니다.
즉:
- 새 테마 제작 최소화
- 운영 사이트 유지
- Runtime 기반 자동 생성
- 기존 구조 최대 호환
특히 DXCMS 생태계에서는:
- 테마 제작 부담 감소
- 유지보수 단순화
- 다크모드 자동화
- 사용자 경험 향상
버전
DX DarkMode Engine v4.2.0DesignONEX Runtime Dark System.
소개
DX DarkMode Engine은 디자인원엑스에서 개발한 자동 다크모드 변환 엔진입니다.기존 사이트를 새롭게 제작하지 않아도, 현재 운영 중인 HTML 구조와 CSS를 분석하여 자동으로 다크모드를 생성하는 Runtime 기반 다크모드 시스템입니다.
이 엔진은 단순히 body에 dark 클래스를 추가하는 수준이 아닙니다.
실시간으로 DOM을 분석하고:
- background 색상
- text 색상
- border 색상
- table 구조
- form 요소
- Tailwind Utility Class
- inline style
- 동적 생성 요소
- 관리자 페이지
- 커스텀 게시판 구조
특히 DXCMS 환경에 최적화되어 있으며, 일반 사이트에서도 독립적으로 사용할 수 있도록 설계되었습니다.
주요 특징
1. Runtime 기반 자동 다크모드
DX DarkMode Engine은 CSS를 미리 작성하는 방식이 아닙니다.브라우저에서 실행되며 현재 화면의 요소를 분석한 뒤 자동으로 다크 스타일을 적용합니다.
즉:
- 별도의 dark.css 제작 불필요
- 기존 사이트 유지 가능
- 실시간 다크모드 생성
- 기존 구조 자동 호환
2. Tailwind Utility 자동 감지
엔진은 Tailwind 스타일 클래스를 자동 감지합니다.예시:
bg-white
bg-gray-100
text-gray-900
border-gray-200
이러한 클래스를 자동 분석하여 다크모드 색상으로 변환합니다.예시 변환:
| 원본 | 다크모드 |
|---|---|
| bg-white | bgCard |
| bg-gray-100 | bgCard |
| text-gray-900 | textMain |
| border-gray-200 | border |
3. Inline Style 자동 분석
다음과 같은 코드도 자동 변환됩니다.
<div style="background:#ffffff;color:#000000">
엔진은 RGB 값을 분석하여:
- 밝은 배경인지
- 강조색인지
- 중립색인지
- 텍스트인지
4. Accent Color 보호
일반 다크모드 엔진은 모든 색상을 강제로 변경합니다.하지만 DX DarkMode Engine은:
- 브랜드 컬러
- 포인트 컬러
- 강조색
- 상태색
예시:
- 빨간 경고색 유지
- 초록 성공색 유지
- 파란 브랜드색 유지
5. MutationObserver 기반 실시간 감시
AJAX 또는 JavaScript로 새롭게 생성된 요소도 자동 감지됩니다.예시:
- 모달
- 드롭다운
- 댓글
- 게시판 로딩
- 실시간 알림
- SPA 구조
6. 관리자 페이지 전용 최적화
DXCMS 관리자 페이지 구조를 자동 감지합니다.자동 처리 항목:
- 관리자 사이드바
- 상단 네비게이션
- 카드 UI
- 통계 카드
- 테이블
- 입력폼
- 뱃지
- 드롭다운
- 페이지네이션
기본 사용법
1. 스크립트 로드
<script src="/assets/js/dx-darkmode.js"></script>
2. 자동 실행
엔진은 로드 후 자동 초기화됩니다.
DxDarkMode.apply(true);
를 직접 호출하지 않아도 됩니다.
3. 토글 버튼 연결
<button id="dx-dark-toggle">
다크모드
</button>
자동으로 연결됩니다.또는:
<button class="dx-dark-toggle-btn">
토글
</button>
도 지원합니다.
API
다크모드 토글
DxDarkMode.toggle();
강제 적용
DxDarkMode.apply(true);
라이트모드 복귀
DxDarkMode.apply(false);
현재 상태 확인
DxDarkMode.isDark();
문서 작업중