Obsidian CSS Variables 참조 스킬

Obsidian 테마 및 플러그인 개발 시 CSS 변수를 올바르게 사용할 수 있도록 공식 문서를 참조하는 스킬입니다.

개요

Obsidian은 테마와 플러그인이 일관된 UI를 제공할 수 있도록 CSS 변수 시스템을 제공합니다. 이 스킬을 통해:

자주 사용하는 기본 CSS 변수를 빠르게 참조
Jina Reader API로 최신 공식 문서를 마크다운 형식으로 가져오기
카테고리별 CSS 변수 문서 접근

CSS 변수 카테고리

| 카테고리 | 설명 | 예시 | |---------|------|------| | Foundations | 색상, 간격, 타이포그래피 등 기본 추상화 | --background-primary, --font-text | | Components | 버튼, 모달, 체크박스 등 UI 컴포넌트 | --button-height, --modal-border-width | | Editor | 에디터 콘텐츠 스타일링 | --h1-size, --link-color | | Plugins | 캔버스, 그래프 등 핵심 플러그인 | --graph-line, --canvas-color | | Window | 앱 윈도우 프레임 관련 | --ribbon-width, --status-bar-font-size |

Jina Reader API 사용법

최신 문서를 가져오려면 WebFetch 도구를 사용하여 다음 URL 패턴으로 요청합니다:

https://r.jina.ai/{원본_URL}

예시

// 메인 CSS Variables 문서 가져오기
WebFetch("https://r.jina.ai/https://docs.obsidian.md/Reference/CSS+variables/CSS+variables")

// Foundations 카테고리 문서 가져오기
WebFetch("https://r.jina.ai/https://docs.obsidian.md/Reference/CSS+variables/Foundations/Colors")

참조 문서

common-variables.md - 자주 사용하는 기본 CSS 변수
jina-reader-urls.md - 카테고리별 WebFetch URL 목록

사용 예시

1. 빠른 색상 변수 참조

/* Obsidian 테마 색상 변수 사용 */
.my-plugin-container {
  background-color: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
}

2. 최신 문서 가져오기

CSS 변수에 대한 상세 정보가 필요할 때:

references/jina-reader-urls.md에서 해당 카테고리 URL 확인
WebFetch 도구로 해당 URL의 마크다운 문서 가져오기

3. 컴포넌트 스타일링

/* 버튼 스타일 - Obsidian 기본 스타일과 일관성 유지 */
.my-button {
  height: var(--input-height);
  padding: var(--size-4-2) var(--size-4-4);
  border-radius: var(--radius-s);
  font-size: var(--font-ui-small);
}

주의사항

CSS 변수는 Obsidian 버전에 따라 변경될 수 있으므로, 최신 문서를 확인하세요
플러그인에서는 Obsidian 기본 변수를 최대한 활용하여 테마 호환성을 유지하세요
커스텀 색상보다 --text-*, --background-* 계열 변수를 사용하는 것이 좋습니다