대시보드 테마

개요

Quarto 대시보드는 일반 HTML 문서와 동일한 Bootstrap 5 기반 테마 시스템을 사용합니다(HTML 웹사이트용으로 만든 테마도 대시보드에서 사용할 수 있습니다). theme 옵션으로 테마를 선택하세요.

theme: cosmo

Quarto에는 Bootswatch 프로젝트의 25개 테마가 포함되어 있습니다(예: 이 웹사이트는 cosmo 테마를 사용). 사용 가능한 테마는 다음과 같습니다.

theme 옵션으로 이러한 테마를 사용할 수 있습니다. 예:

format:
  dashboard:
    theme: united

다음 섹션에서는 테마를 사용자 정의하거나 새 테마를 만드는 방법을 설명합니다.

테마 옵션

Sass를 사용하면 테마를 폭넓게 커스터마이즈할 수 있습니다. Bootstrap에는 글꼴, 색상, 패딩, 테두리 등을 제어하는 1,400개 이상의 Sass 변수가 있습니다. 모든 변수는 아래에서 확인할 수 있습니다.

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

Sass 테마 파일은 색상과 글꼴 등을 전역으로 설정하는 variables와, 더 세밀한 동작을 정의하는 rules를 모두 정의할 수 있습니다. 기존 Bootstrap 테마를 변수/규칙으로 커스터마이즈하려면 기본 테마와 커스텀 테마 파일을 함께 지정하면 됩니다.

theme:
  - cosmo
  - custom.scss

custom.scss 파일은 다음과 같이 구성할 수 있습니다.

/*-- 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);
}

variables 섹션은 /*-- scss:defaults --*/ 주석으로, rules 섹션(일반 CSS 규칙이 들어가는 부분)은 /*-- scss:rules --*/ 주석으로 표시합니다.

커스텀 테마

완전히 커스텀 테마를 만들어 그것만 제공할 수도 있습니다(이 경우 기본 Bootstrap 테마를 상속합니다).

theme: custom.scss

예를 들어 25개의 내장 Bootswatch 테마 파일은 다음과 같습니다.

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

커스텀 테마 설계에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

Sass 변수

다음 Sass 변수는 SCSS 파일에서 지정할 수 있습니다(이 변수는 항상 $ 접두사를 붙여야 하며 YAML 옵션이 아니라 테마 파일에 지정합니다).

색상

변수	설명 \|
`$body-bg`	페이지 배경색.
`$body-color`	페이지 텍스트 색상.
`$link-color`	링크 색상.
`$input-bg`	HTML 입력 요소의 배경색.
`$popover-bg`	팝오버 배경색(예: 인용 미리보기가 표시될 때).

글꼴

변수	설명 \|
`$font-family-sans-serif`	페이지의 산세리프 글꼴 패밀리. \|
`$font-family-monospace`	페이지의 모노스페이스 글꼴 패밀리. \|
`$font-size-root`	페이지 기본 글꼴 크기.
`$toc-font-size`	페이지 목차 글꼴 크기.
`$h1-font-size` `$h2-font-size` `$h3-font-size` `$h4-font-size` `$h5-font-size`	해당 제목의 글꼴 크기.

코드 블록

변수	설명 \|
`$code-block-border-left`	기본적으로 Quarto는 코드 블록에 왼쪽 테두리를 표시하지 않습니다. 이 변수를 참 값 또는 CSS 색상으로 설정하면 왼쪽 테두리가 활성화됩니다. \|
`$code-block-border-left-style`	코드 블록에 표시되는 왼쪽 테두리 스타일. 기본값은 `solid`. \|
`$code-block-border-left-size`	코드 블록에 표시되는 왼쪽 테두리 두께. 기본값은 `3px`. \|
`$code-block-padding-left`	코드와 테두리 사이의 왼쪽 패딩. 기본값은 `0.6em`. \|
`$code-block-bg`	기본적으로 Quarto는 테마의 `progress-bg` 색상에 투명도를 더해 코드 블록 배경을 설정합니다. 이 변수를 참 값 또는 CSS 색상으로 설정할 수 있습니다. \|
`$code-block-bg-padding`	코드 블록에 적용되는 패딩. 기본값은 `0.4em`. \|
`$code-block-bg-alpha`	`progress-bg` 색상의 투명도 변경량. 명시적 배경색이 지정되면 사용되지 않습니다. 기본값은 `-0.35`. \|

코드 주석

코드 주석을 사용할 때 강조 라인에 사용되는 색상을 커스터마이즈할 수 있습니다.

변수	설명 \|
`$code-annotation-higlight-color`	강조된 라인의 테두리 색상. \|
`$code-annotation-higlight-bg`	강조된 라인의 배경색. \|

코드 복사

code-copy: true일 때 표시되는 버튼 색상도 다음 변수로 커스터마이즈할 수 있습니다.

변수	설명 \|
`$btn-code-copy-color`	코드 블록 오른쪽 상단의 복사 버튼 색상. \|
`$btn-code-copy-color-active`	코드 블록 오른쪽 상단 복사 버튼의 호버 색상. \|

인라인 코드

변수	설명 \|
`$code-bg`	인라인 코드 배경색. 기본값은 `body-bg`와 `body-color`의 혼합색. \|
`$code-color`	인라인 코드 텍스트 색상. 기본값은 `code-bg`와 대비되는 색상으로 자동 생성됩니다. \|

변수	설명 \|
`$toc-color`	목차 텍스트 색상. \|
`$toc-font-size`	목차 텍스트 글꼴 크기. \|
`$toc-active-border`	현재 활성 목차 항목의 왼쪽 테두리 색상. \|
`$toc-inactive-border`	비활성 목차 항목의 왼쪽 테두리 색상.

레이아웃

변수	설명 \|
`$content-padding-top`	메인 콘텐츠 영역(사이드바, 콘텐츠, 목차 포함) 앞에 들어갈 패딩. \|

변수	설명 \|
`$navbar-bg`	내비게이션 바 배경색. 기본값은 테마의 `$primary` 색상. \|
`$navbar-fg`	내비게이션 바 전경 요소(텍스트 및 내비게이션) 색상. 지정하지 않으면 대비 색상이 자동으로 계산됩니다. \|
`$navbar-hl`	내비게이션 바 링크 강조 색상. 지정하지 않으면 `$link-color`를 사용하거나 대비 색상이 자동으로 계산됩니다. \|
`$sidebar-bg`	사이드바 배경색. 기본값은 `$light`이며, 내비게이션 바가 있거나 스타일이 `floating`인 경우 `$body-bg`가 기본값입니다. \|
`$sidebar-fg`	사이드바 전경 요소(텍스트 및 내비게이션) 색상. 지정하지 않으면 대비 색상이 자동으로 계산됩니다. \|
`$sidebar-hl`	사이드바 링크 강조 색상. 지정하지 않으면 `$link-color`가 사용됩니다. \|
`$footer-bg`	푸터 배경색. 기본값은 `$body-bg` 색상입니다. \|
`$footer-fg`	푸터 전경 요소(텍스트 및 내비게이션) 색상. 지정하지 않으면 대비 색상이 자동으로 계산됩니다. \|

콜아웃

변수 설명 |

$callout-border-width 콜아웃 왼쪽 테두리 너비. 기본값은 5px. |

$callout-border-scale 콜아웃 색상에서 이 값만큼 이동해 계산한 테두리 색상. 기본값은 0%. |

$callout-icon-scale 콜아웃 색상에서 이 값만큼 이동해 계산한 아이콘 색상. 기본값은 10%. |

$callout-margin-top 콜아웃의 위쪽 마진. 기본값은 1.25rem.

$callout-margin-bottom 콜아웃의 아래쪽 마진. 기본값은 1.25rem. |

$callout-color-<type>

다양한 콜아웃 유형의 색상. 기본값: |

type	default
`note`	`$blue`
`tip`	`$green`
`caution`	`$orange`
`warning`	`$yellow`
`important`	`$red`

값 상자

color: <type>으로 설정된 값 상자의 배경색을 덮어쓰려면 $valuebox-bg-<type> 변수를 사용합니다.

변수	유형
`$valuebox-bg-primary`	`color: primary`
`$valuebox-bg-secondary`	`color: secondary`
`$valuebox-bg-success`	`color: success`
`$valuebox-bg-info`	`color: info`
`$valuebox-bg-warning`	`color: warning`
`$valuebox-bg-danger`	`color: danger`
`$valuebox-bg-light`	`color: light`
`$valuebox-bg-dark`	`color: dark`

Bootstrap 변수

위의 Sass 변수 외에도 Bootstrap 자체에 수백 개의 추가 변수가 있습니다. Bootstrap의 Sass 변수 사용법을 확인하거나 원본 변수와 기본값을 참고하세요.

개요