Quarto 테마 더 알아보기

Quarto의 일부로, Scss 파일을 CSS로 컴파일할 때 레이어로 합쳐질 선언, 변수, 규칙을 담는 간단한 단일 파일 포맷을 만들었습니다. 테마 파일의 기본 구조는 다음과 같습니다.

유효한 Scss가 들어 있는 단일 텍스트 파일
특수 주석을 사용해 functions, defaults, mixins, rules 영역을 구분합니다(영역 데코레이터).
테마 파일이 유효하려면 이러한 영역 데코레이터가 최소 하나 있어야 합니다.
각 유형의 영역 데코레이터는 여러 개 존재할 수 있습니다. 같은 유형이 여러 개 있으면, 파일에 등장하는 순서대로 하나의 블록으로 병합됩니다.
컴파일 시 섹션은 유형 순서로 레이어링됩니다. functions → variables → mixins → rules 순입니다.
테마 파일이 있는 디렉터리가 로드 경로에 추가되어 @use 또는 @import 문이 테마 파일이 있는 동일한 디렉터리에서 해석됩니다.

다음은 예시 파일입니다.

/*-- scss:functions --*/
@function colorToRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

Bootswatch Sass 테마 파일

Bootstrap 5용 Bootswatch 테마를 단일 파일 테마 포맷으로 병합해 다음 리포지토리에 제공합니다.

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/html/bootstrap/themes

Bootswatch 테마가 업데이트되면 이러한 병합 테마 파일도 수시로 업데이트합니다.

Bootstrap / Bootswatch 레이어링

Quarto html 및 dashboard 포맷을 사용할 때, 문서 프론트매터(또는 프로젝트 YAML)에 테마 정보를 지정할 수 있습니다. 테마 정보는 다음 중 하나 이상을 포함하는 목록입니다.

유효한 내장 Bootswatch 테마 이름
위에서 설명한 형식의 테마 파일

예를 들어 다음은 cosmo Bootswatch 테마를 사용하고 custom.scss 파일로 커스터마이즈합니다.

theme:
  - cosmo
  - custom.scss

Quarto 웹사이트나 HTML 페이지의 CSS를 컴파일할 때, 사용자 제공 테마 파일과 Bootswatch 테마를 Bootstrap Scss와 다음 레이어 순서로 병합합니다.

Uses
    Bootstrap
    Theme(s)       /*-- scss:uses --*/
    
Functions
    Bootstrap
    Theme(s)       /*-- scss:functions --*/

Variables
    Themes(s)      /*-- scss:defaults --*/
    Bootstrap
    
Mixins                 
    Bootstrap
    Theme(s)       /* -- scss:mixins --*/

Rules
    Bootstrap
    Theme(s)       /*-- scss:rules --*/

테마는 YAML에 지정된 순서대로 정렬하며, 선언과 규칙은 순서를 유지하고 변수는 역순으로 적용합니다(목록의 뒤에 있는 파일이 앞의 파일에 기본 변수 값을 제공할 수 있도록). 위 예시의 레이어링은 다음과 같습니다.

Uses
    Bootstrap
    cosmo           /*-- scss:uses --*/
    custom.scss     /*-- scss:uses --*/

Functions
    Bootstrap
    cosmo           /*-- scss:functions --*/
    custom.scss     /*-- scss:functions --*/

Variables
    custom.scss     /*-- scss:defaults --*/
    cosmo           /*-- scss:defaults --*/
    Bootstrap

Mixins
    Bootstrap
    cosmo            /* -- scss:mixins --*/
    custom.scss      /* -- scss:mixins --*/

Rules
    Bootstrap
    cosmo           /*-- scss:rules --*/
    custom.scss     /*-- scss:rules --*/

`revealjs` 레이어링

동일한 시스템이 revealjs와 그 테마에도 적용됩니다. Quarto에 포함된 revealjs 테마는 변수 이름 규칙이 통일되어 있지 않기 때문에, 서로 다른 테마에 효과적인 변경을 하려면 서로 다른 SCSS 파일이 필요할 수 있습니다.

그럼에도 다음 예시는 가능한 구성을 보여줍니다.

# In this configuration, `custom.scss` takes precedence
format:
  revealjs:
    theme:
      - blood
      - custom.scss
# In this configuration, the `blood` theme takes precedence
format:
  revealjs:
    theme:
      - custom.scss
      - blood

`_brand.yml` 레이어링

Quarto는 brand.yml을 지원합니다. 자세한 내용은 브랜드 가이드를 참고하세요. 기본적으로 _brand.yml의 스타일 정보는 가장 낮은 우선순위를 가집니다. 이를 변경하려면 YAML 테마 설정에서 "brand" 문자열을 사용하세요.

# In this configuration, the `blood` theme takes precedence
# over `custom.scss` *and* the information in `_brand.yml`
format:
  revealjs:
    theme:
      - custom.scss
      - blood
# In this configuration, the information in `_brand.yml` takes
# precedence over the `blood` theme and `custom.scss`, in that
# order
format:
  revealjs:
    theme:
      - blood
      - custom.scss
      - brand

Bootswatch Sass 테마 파일

Bootstrap / Bootswatch 레이어링

revealjs 레이어링

_brand.yml 레이어링

`revealjs` 레이어링

`_brand.yml` 레이어링