그누보드5 SE 색상·폰트 변경 매뉴얼

내 테마(app/theme/mytheme)를 만들었다면, 디자인의 대부분은 CSS 변수(디자인 토큰) 한 곳만 고치면 사이트 전체에 일괄 적용됩니다. 토큰은 modern/_head.inc.php에 정의돼 있습니다.

색상값을 개별 요소마다 찾아 고칠 필요가 없습니다. 토큰만 바꾸면 헤더·카드·버튼·링크가 함께 바뀝니다.

디자인 토큰 위치

app/theme/mytheme/modern/_head.inc.php

이 파일의 :root { ... } 블록이 라이트 모드 토큰, [data-theme="dark"] { ... } 블록이 다크 모드 토큰입니다.

주요 색상 토큰

:root {
    --m-bg:            #f8fafc;   /* 페이지 배경 */
    --m-surface:       #ffffff;   /* 카드·박스 배경 */
    --m-border:        #e2e8f0;   /* 테두리 */
    --m-text:          #0f172a;   /* 본문 글자 */
    --m-text-muted:    #64748b;   /* 보조 글자 */
    --m-primary:       #2563eb;   /* 핵심 색(버튼·링크·강조) */
    --m-primary-hover: #1d4ed8;   /* 핵심 색 hover */
    --m-radius:        8px;       /* 모서리 둥글기 */
}

예를 들어 브랜드 색을 보라색 계열로 바꾸려면 --m-primary 두 줄만 수정합니다.

--m-primary:       #7c3aed;
--m-primary-hover: #6d28d9;

다크 모드도 함께 수정

라이트만 바꾸면 다크 모드는 그대로입니다. 같은 토큰을 [data-theme="dark"] 블록에서도 바꿔주세요.

[data-theme="dark"] {
    --m-bg:      #0a0e1a;   /* 다크 배경 */
    --m-surface: #131825;
    --m-text:    #f1f5f9;
    --m-primary: #3b82f6;   /* 다크에선 한 톤 밝게 권장 */
}

다크 모드는 글자 대비를 위해 라이트보다 primary를 한 단계 밝게 잡는 것이 보기 좋습니다.

폰트(글자 크기) 조정

글자 크기는 단계별 토큰으로 통제됩니다. 전체 글자를 키우거나 줄이려면 해당 단계 값을 바꿉니다.

--m-text-base:    13px;   /* 기본 글자 */
--m-text-md:      14px;   /* 입력·버튼·카드 본문 */
--m-text-lg:      16px;   /* 부제목 */
--m-text-2xl:     22px;   /* 페이지 제목 */
--m-text-display: 36px;   /* 히어로 제목 */

글꼴(서체) 자체를 바꾸려면 같은 파일에서 font-family가 지정된 부분을 원하는 웹폰트로 교체하고, 필요하면 <head>에 웹폰트 <link>를 추가합니다.

확인

저장 후 사이트를 새로고침하면 즉시 반영됩니다. 변경 전에는 ?theme=mytheme로 미리보며 다듬고, 마음에 들면 적용하세요. 다음 문서에서 헤더·푸터·메인 레이아웃을 바꿔봅니다.