仪表盘主题

概述

Quarto 仪表盘使用与常规 HTML 文档相同的基于 Bootstrap 5 的主题系统（因此您为 HTML 网站构建的主题也可以用于仪表盘）。使用 theme 选项选择主题：

theme: cosmo

Quarto 包含了来自 Bootswatch 项目的 25 个主题（例如，本网站使用了 cosmo 主题）。可用的主题包括：

默认
天蓝
宇宙
赛博格
暗黑
扁平
日志
文学
流明
奢华
材质
薄荷
变形
脉冲
石英
砂岩
简单
素描
板岩
太阳能
太空实验室
超级英雄
联合
蒸汽
雪人
西风

通过 theme 选项使用这些主题中的任何一个。例如：

format:
  dashboard:
    theme: united

在接下来的部分中，我们将描述如何自定义这些主题或创建您自己的新主题。

主题选项

你可以使用 Sass 对主题进行广泛的定制。Bootstrap 定义了超过 1400 个 Sass 变量，用于控制字体、颜色、填充、边框等。你可以在以下链接查看所有变量：

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

Sass 主题文件可以定义变量，这些变量全局设置颜色和字体等内容，也可以定义规则，这些规则定义更细粒度的行为。要使用你自己的变量和/或规则自定义现有的 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);
}

请注意，变量部分由 /*-- scss:defaults --*/ 注释表示，规则部分（放置普通 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 Variables

The following Sass Variables can be specified within SCSS files (note that these variables should always be prefixed with a $ and are specified within theme files rather than within YAML options):

Colors

Variable	Notes
`$body-bg`	The page background color.
`$body-color`	The page text color.
`$link-color`	The link color.
`$input-bg`	The background color for HTML inputs.
`$popover-bg`	The background color for popovers (for example, when a citation preview is shown).

Fonts

Variable	Notes
`$font-family-sans-serif`	The sans-serif font family for the page.
`$font-family-monospace`	The monospace font family for the page.
`$font-size-root`	The base font size for the page.
`$toc-font-size`	The font size for the page TOC.
`$h1-font-size` `$h2-font-size` `$h3-font-size` `$h4-font-size` `$h5-font-size`	Font sizes for the specified headings.

Code Blocks

Variable	Notes
`$code-block-border-left`	By default, Quarto does not display a left border on code blocks. Set this variable to a truthy value or a CSS color to enable the left border.
`$code-block-border-left-style`	The style of the left border displayed on code blocks. Defaults to `solid`.
`$code-block-border-left-size`	The thickness of the left border displayed on code blocks. Defaults to `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`	页脚上前景元素（文本和导航）的颜色。如果未指定，将自动计算对比色。 \|

值框

使用 $valuebox-bg-<type> 变量来覆盖通过 color: <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 变量的信息，或者查看原始变量及其默认值。

概述