CSS Snippets과 테마

obsidian 2026-02-25

CSS Snippets과 테마

[!tldr] 한줄 요약 CSS Snippets은 .obsidian/snippets/ 폴더의 .css 파일로 Obsidian UI를 부분 커스터마이징하며, 테마보다 높은 우선순위로 적용된다.

핵심 내용

CSS Snippets 기본 사용법

CSS Snippets은 Obsidian의 외관을 부분적으로 커스터마이징하는 작은 CSS 파일이다. 테마를 통째로 바꾸지 않고도 원하는 요소만 스타일을 변경할 수 있다.

CSS 오버라이드 계층 (Cascade)

스타일 적용 우선순위는 아래로 갈수록 높다:

Obsidian 기본값  →  테마  →  사용자 CSS Snippets  →  플러그인 스타일

CSS Snippets이 테마보다 우선하므로, 마음에 드는 테마를 쓰면서 일부만 덮어쓰는 방식이 가능하다.

CSS 변수 시스템

Obsidian은 하드코딩된 값 대신 CSS 변수(Custom Properties)를 체계적으로 사용한다. 6가지 카테고리로 구성된다:

카테고리용도주요 변수 예시
Foundations색상, 타이포그래피, 간격--color-base-00~100, --font-text-theme
ComponentsUI 요소--checkbox-size, --nav-item-color
Editor에디터 콘텐츠 서식--h1-size, --table-border-color
Plugins핵심 플러그인(Canvas, Graph 등)플러그인별 고유 변수
Window창 레이아웃--ribbon-background, --scrollbar-width
PublishObsidian Publish 사이트--page-width, --page-title-font

변수 계층 구조:

Foundation (기반)
├── Color: --color-base-00 ~ 100 (명암), --accent-h/s/l (강조색)
├── Typography: --font-interface-theme, --font-text-theme, --font-monospace-theme
└── Layout: --size-*, --radius-s ~ xl

많은 변수는 상태 기반 접미사 패턴을 따른다:

접미사트리거예시
-hover마우스 호버--nav-item-color-hover
-active활성/클릭--metadata-property-background-active
-selected선택됨--nav-item-background-selected
-collapsed접힘--nav-collapse-icon-color-collapsed

테마 (Theme)

테마는 CSS 변수를 전면적으로 오버라이드하여 Obsidian 전체 외관을 바꾼다.

개발자 도구 활용

Obsidian은 Electron(웹 기반) 앱이므로, Cmd+Option+I (Windows: Ctrl+Shift+I)로 개발자 도구를 열어 브라우저처럼 요소를 검사할 수 있다. 원하는 요소의 CSS 선택자와 현재 적용된 변수를 확인하는 핵심 도구다.

예시

헤딩 색상과 크기 커스터마이징:

body {
    --h1-color: red;
    --h1-size: 4em;
    --h2-color: blue;
    --h2-size: 3em;
}

다크/라이트 모드 분리 오버라이드:

.theme-light {
    --background-primary: #fafafa;
    --text-normal: #333333;
}

.theme-dark {
    --background-primary: #1e1e1e;
    --text-normal: #e0e0e0;
}

강조색(Accent Color) 변경:

body {
    --interactive-accent: #ff6b6b;
}

[!tip] Snippet 작성 팁 body 선택자에 CSS 변수를 설정하면 라이트/다크 모드 모두에 적용된다. 모드별 분리가 필요하면 .theme-light / .theme-dark 선택자를 사용한다.

인기 CSS Snippet 유형

참고 자료

관련 노트

Other TILs in obsidian