AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전 목록 다음

그누보드 기본 basic 게시판 스킨 문의드립니다.

순순수청년84
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-08-18 (화) 09:29:39 135
안녕하세요. 기본 basic 게시판 스킨을 사용해서 수정중에 있는데 다크모드를 적용하면 에디터쪽을 제외한 나머지 전체는 색상이 흰색으로 바뀌는데 에디터 내용안에 글은 색상이 바뀌지 않는데 조치 방법이 있을까요??
다크모드
|

답변 4개

솔그루
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-08-22 (토) 10:25:51
기본 SmartEditor2의 실제 편집 영역은 iframe 내부 문서라서 테마의 다크모드 CSS만으로는 글자색이 전달되지 않습니다. 바깥 iframe 배경뿐 아니라 SmartEditor2가 제공하는 WYSIWYG 문서의 body 색상을 함께 바꿔야 합니다.
 
다크모드 토글 스크립트에서 다음과 같은 함수를 호출할 수 있습니다.
 
```javascript
function applyEditorTheme(isDark) {
    if (
        !window.oEditors
        || !oEditors.getById
        || !oEditors.getById['wr_content']
    ) {
        return;
    }
 
    var doc = oEditors.getById['wr_content'].getWYSIWYGDocument();
    var background = isDark ? '#1f2329' : '#ffffff';
    var color = isDark ? '#e6e6e6' : '#222222';
 
    doc.documentElement.style.backgroundColor = background;
    doc.body.style.backgroundColor = background;
    doc.body.style.color = color;
}
```
 
에디터 생성이 끝난 뒤 실행해야 하므로 최초 로딩 시에는 다음처럼 호출하고, 다크모드 전환 버튼의 이벤트에서도 다시 호출하세요.
 
```javascript
setTimeout(function () {
    applyEditorTheme(
        document.documentElement.classList.contains('dark')
    );
}, 300);
```
 
실제 사이트에서 다크모드 클래스가 body에 붙는다면 document.body.classList.contains('dark')로 바꾸면 됩니다.
 
기본 스킨의 style.css에는 .wr_content.smarteditor2 iframe 배경을 흰색으로 지정한 규칙도 있으므로 다크모드용 iframe 배경 규칙을 별도로 덮어쓰세요. 다만 에디터에서 글자색을 직접 지정해 저장한 인라인 스타일은 body의 기본 글자색보다 우선합니다. 글 보기 화면의 #bo_v_con 색상도 별도로 지정해야 작성 화면과 보기 화면이 같이 맞습니다.
컬처스텝
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-08-20 (목) 06:31:37

그누보드5 기본(basic) 환경이면 에디터는 보통 스마트에디터2인데, 편집 영역이 iframe으로 분리되어 있어서 페이지에 아무리 다크모드 CSS를 넣어도 iframe 안까지는 적용되지 않습니다. 그래서 에디터 안쪽은 iframe 내부에 직접 스타일을 넣어줘야 합니다.

방법 — 다크모드 전환 시 iframe 내부에 스타일 주입
다크모드를 켜는 스크립트에 아래처럼 에디터 iframe의 body 색을 함께 바꿔주면 됩니다. (같은 도메인이라 접근 가능합니다)

Copy 
function applyEditorDark() { var f = document.querySelector('.se2_input_area iframe') || document.querySelector('iframe[id*=se2]'); if (f && f.contentDocument && f.contentDocument.body) { f.contentDocument.body.style.backgroundColor = '#1e1e1e'; f.contentDocument.body.style.color = '#e5e5e5'; } }

에디터가 로드된 뒤 실행되어야 하므로, 페이지 로드 직후라면 setTimeout으로 약간 늦춰 실행하거나 다크모드 토글 버튼 이벤트에 함께 걸어주세요. 스킨에 따라 iframe 선택자가 다를 수 있으니 개발자도구로 실제 iframe을 확인해서 selector만 맞춰주시면 됩니다. (CKEditor를 쓰는 경우라면 편집 영역이 .cke_editable 이라 같은 방식으로 그쪽 body에 넣으면 됩니다)

함께 확인하실 것
작성 화면 말고 글 보기 화면의 본문 영역(#bo_v_con)도 에디터가 만든 HTML이 그대로 출력되는 곳이라 다크모드 CSS에 별도로 색을 지정해줘야 합니다. 다만 기존 글 중에 에디터에서 글자색을 검정으로 직접 지정해 저장한 글은 인라인 스타일이 우선이라 CSS만으로는 안 바뀌는 게 정상입니다. 이 경우까지 강제로 바꾸려면 예외 규칙을 추가로 넣어야 하니, 우선 위 두 군데(편집 iframe, 보기 본문)부터 적용해 보시길 권합니다.

웹에이전시
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-08-18 (화) 17:17:19
에디터가 어떤 에디터인지에 따라 처리 방법이 조금 다릅니다. 기본 게시판 영역의 다크모드 CSS만 적용하면 에디터 내부는 별도로 처리해야 합니다.
사용 중인 에디터가 SmartEditor인지 CKEditor인지 먼저 확인하시고, 해당 에디터의 iframe 또는 편집 영역에 다크모드용 배경색/글자색 CSS를 별도로 적용하시면 됩니다.
퇴사는지능순
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-08-18 (화) 10:07:25
skin/board/basic/style.css
<table>의 관련 html 은 디폴트는 테마홈/css/deafult.css

답변을 작성하려면 로그인이 필요합니다.