如何自定义Quarto网站的Bootswatch Simplex主题样式？

问题1：调大头部Logo尺寸 #

1. 在项目根目录新建styles.css文件，写入以下代码：

.navbar-brand img {
  width: 80px; /* 按需调整数值，比如改成100px */
  height: auto; /* 自动保持宽高比，避免变形 */
}

2. 打开_quarto.yml，在html格式配置里引入这个样式文件：

format:
  html:
    theme: simplex
    css: styles.css

问题2：将网站标题改为红色 #

在styles.css里追加以下样式：

.navbar-brand {
  color: #dc3545 !important; /* 这是Simplex主题默认的链接红色，!important确保覆盖原有黑色样式 */
}

问题3：修改导航栏链接及激活项为红色 #

继续在styles.css里添加：

/* 普通导航链接 */
.navbar-nav .nav-link {
  color: #dc3545 !important;
}

/* 鼠标悬停/点击时的链接（可选，用稍深的红色增强交互感） */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #c82333 !important;
}

/* 当前激活的导航菜单项 */
.navbar-nav .nav-item.active .nav-link {
  color: #dc3545 !important;
}

进阶：用SCSS变量更贴合主题（可选） #

如果想用主题内置的颜色变量（避免硬编码颜色值），可以创建styles.scss文件，内容如下：

@import "bootswatch/simplex/variables";

.navbar-brand img {
  width: 80px;
  height: auto;
}

.navbar-brand {
  color: $danger !important; /* $danger是Simplex主题的红色变量 */
}

.navbar-nav .nav-link {
  color: $danger !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: darken($danger, 10%) !important; /* 深色变体 */
}

.navbar-nav .nav-item.active .nav-link {
  color: $danger !important;
}

然后在_quarto.yml里把css配置改成styles.scss即可。

内容的提问来源于stack exchange，提问作者feder80