Bulma 테마

Bulma 테마 (Themes)

Bulma에서 테마는 CSS 변수들의 모음이에요. 테마를 활용하면 색상 체계를 통째로 바꿔서 밝은 화면과 어두운 화면을 쉽게 오가며 만들 수 있어요. 이제 Bulma가 테마를 어떻게 구성하는지 함께 살펴볼게요.

출처: 문서

본문

Bulma에서 테마(theme)는 CSS 변수들의 모음이에요.

Bulma는 기본으로 2개의 테마를 제공해요:

  • light.scss (필수)
  • dark.scss (선택)

기본 테마 (The default themes)

Bulma는 모든 CSS 변수에 기본값을 요구하기 때문에, /sass/themes/light.scss에 위치한 기본 라이트 테마를 제공해요.

또한 /sass/themes/dark.scss에 위치한 다크 테마도 함께 제공해요.

/sass/themes/_index.scss 파일은 두 테마를 각각 두 가지 방식으로 포함해요:

  • @media (prefers-color-scheme: $name) 미디어 쿼리로 포함
  • HTML 속성 [data-theme=$name]과 CSS 클래스 .theme-$name 선택자로 포함

차이점은 단 하나예요. 라이트 테마는 최상위 레벨인 :root에도 정의된다는 점이에요 (html 요소와 동일하며, 웹페이지의 모든 HTML 요소의 조상이에요). 이렇게 하면 모든 CSS 변수에 기본값이 설정되도록 보장해요.

이 테마의 CSS 출력은 다음과 같아요:

:root {
  /* CSS 변수 */
}

@media (prefers-color-scheme: light) {
  :root {
    /* CSS 변수 */
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* CSS 변수 */
  }
}

[data-theme=light],
.theme-light {
  /* CSS 변수 */
}

[data-theme=dark],
.theme-dark {
  /* CSS 변수 */
}

커스텀 테마 만들기 (Creating a custom theme)

테마를 만든다는 것은 본질적으로 자신만의 CSS 변수를 설정한다는 뜻이에요. 커스텀 테마에는 다음이 필요해요:

  • sunrise 같은 이름
  • :root, [data-theme=sunrise], .theme-sunrise 같은 범위(scope) 또는 세 가지 모두
  • CSS 변수 세트와 그 새로운 값

브라우저에서 커스터마이징하기 (Customizing in the browser)

:root 범위에서 CSS 변수를 설정하면 Bulma의 기본 테마를 덮어쓰는 셈이에요. 이 작업은 Sass나 CSS로 할 수 있어요.

CSS 방식으로 테스트해 보려면 다음 단계를 따라 해 보세요:

  1. 브라우저 개발자 도구(inspector)를 열어요.
  2. html 요소를 선택해요.
  3. --bulma-link-h 변수(링크 색상의 색조)에 새 값을 넣어요.
  4. 사이드 메뉴의 CSS Helpers 섹션 색상이 변하는 걸 확인할 수 있어요.

더 알아보기 (Learn more)