HTML主题

1 概述

Quarto 默认使用 Bootstrap 5 渲染 HTML 文档。可以通过 theme 选项切换主题 ：

可以试试 theme: pandoc 会大变样

2 基本选项

如果使用 Bootstrap theme 或 Pandoc theme，可以利用 _quarto.yml 选项做更精细的外观控制 ：

选项	描述
max-width	页面内容占用的最大宽度。Bootstrap 主题默认为 1400px，Pandoc 主题默认为 36em。
mainfont	设置文档的 font-family 属性。
fontsize	设置文档的基础 CSS font-size。
fontcolor	设置文档的默认文本 color。
linkcolor	设置超链接的默认文本 color。
monofont	设置 <code> 元素的 font-family 属性。
monobackgroundcolor	设置 <code> 元素的 background-color 属性。
linestretch	设置 CSS line-height 属性（影响文本行间距，默认为 1.5）。
backgroundcolor	设置文档的 background-color。
margin-left、margin-right、margin-top、margin-bottom	设置文档 body 的 CSS margin 属性。

3 主题选项

Bootstrap 定义了超过 1400 个 Sass 变量，控制字体、颜色、内边距、边框等 ：

请注意，变量部分由 /*-- scss:defaults --*/ 注释标记，规则部分由 /*-- scss:rules --*/ 注释标记

4 自定义主题

可以创建一个从 Bootstrap 主题继承的完全自定义主题 ：

theme: custom.scss

参考 25 个内置 Bootswatch 主题的源码，在此基础上修改出自己需要的。 这里 可以阅读更多关于自定义主题设计的内容

5 深色模式

可以设置 浅色主题 和 深色主题 利用按钮进行切换 ：

_quarto.yml

theme:
  light: flatly
  dark: darkly

也可以设置跟随浏览器的主题自动切换 ：

6 内容切换

下面展示如何在切换浅色主题和深色主题的时候自动切换正文 ：

7 Sass 变量

Sass变量 以 $ 为前缀， 包含在 SCSS 文件中， 控制着主题下的某个属性 ：

8 链接

• 本站