Quarto: Some boostrap properties override custom theme?

Question

I'm a beginner at Quarto, and need to set up a custom theme. No matter what I put in my custom.scss theme file, Quarto puts a gray underline in the Header 2 style and sets the opacity to 90%.

I made a mini example, hopefully someone can re-create it. For the purpose of this example, I'm trying to make the underline red and 6 pixels thick.

custom.scss:

/*-- scss:defaults --*/

h2, .h2 {
    font-style: italic;
    opacity: 1;
    border-bottom: 6px solid red;
    padding-bottom:0.15rem
}

My .qmd file:

---
format: html
output:
  html_document
theme: custom.scss
execute:
  echo: false
---

## Header 2

Result: 'Header 2' in gray italic text, with a thin gray underline Obviously my theme file is somewhat working, because the text is in italic as I specified, but it's still got 90% opacity and a thin gray underline instead of a thick red one.

Does anyone know why my theme file can't override those specific properties?

One workaround I've found is inserting a CSS code block at the top of the document, and that works just fine (corrects both the opacity and the underline), but it's ugly and annoying - I feel like I must be missing something.

I looked through the generated files and found that bootstrap.min.css does include my theme file at the top, but then overrides it later. Here's a snippet of the bootstrap.min.css that Quarto generates:

h2,.h2{font-style:italic;opacity:1;border-bottom:6px solid red;padding-bottom:.15rem}/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-blue: #0d6efd; ...
...
h1,.h1,h2,.h2{opacity:.9;margin-top:2rem;margin-bottom:1rem;font-weight:600}h1.title,.title.h1{margin-top:0}h2,.h2{border-bottom:1px solid #dee2e6;padding-bottom:.5rem} ...
...

Why would it generate that way?

I am rendering with RStudio version 2023.06.2 on Windows 10 Pro. Here's the output when I run quarto check:

A new release of Deno is available: 1.28.2 → 1.37.2 Run `deno upgrade` to install it.

[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.3.450
      Path: C:\Users\[name]\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.12.0
      Path: C:/Users/[name]/AppData/Local/Programs/Python/Python312/python.exe
      Jupyter: 5.4.0
      Kernels: python3

(|) Checking Jupyter engine render....0.02s - Debugger warning: It seems that frozen modules are being used, wh
ich may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
0.02s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/PROGRA~1/R/R-43~1.1
      LibPaths:
        - C:/Users/[name]/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.1/library
      knitr: 1.43
      rmarkdown: 2.24

[>] Checking Knitr engine render......OK

Answer 1

Does this, using !important, work for you?

/*-- scss:defaults --*/

h2, .h2 {
    font-style: italic;
    opacity: 1;
    border-bottom: 6px solid red !important;
    padding-bottom:0.15rem
}