Build a Custom Quarto Theme With Pure CSS (R Environment Guide)

#r #quarto #css #datascience

Quarto is becoming the default tool for technical reporting in the R ecosystem. It’s flexible, modern, and integrates cleanly with RStudio. But the default HTML themes often look generic — especially if you need professional‑grade reports for clients, research, or business presentations.

In this guide, you’ll learn how to build a fully custom Quarto theme using pure CSS, without relying on any built‑in theme. This gives you complete control over typography, spacing, colors, and layout.

Start With a Minimal Quarto Document Create a new .qmd file and disable the default theme:

title: "Clean Quarto Theme"
format:
  html:
    theme: null
    css: styles.css
---
2. Create Your Custom CSS File
Create a file named styles.css in the same directory.

Here’s a minimal, modern base:

`/* Typography */
body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 850px;
  margin: auto;
  padding: 2rem;
}

/* Headings */
h1, h2, h3 {
  font-weight: 600;
  color: #111;
  margin-top: 2.2rem;
}

/* Code Blocks */
pre code {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
  display: block;
  overflow-x: auto;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.6rem;
}

th {
  background: #fafafa;
  font-weight: 600;
}


``This gives you:

clean typography

readable code blocks

modern spacing


professional tables

No frameworks. No Bootstrap. Just pure CSS.

3. Add a Custom Accent Colour
Branding matters. Add a colour variable:



``:root {
  --accent: #0077ff;
}

a {
  color: var(--accent);
}

h1, h2 {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
}

`

Now your document has a consistent visual identity.

Improve Code Chunk Styling Quarto code cells look better with a subtle left border:

.quarto-code-cell {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

Render the Document From R:

r
quarto::quarto_render("index.qmd")
Or click Render in RStudio.

Your custom theme is now applied.

Why Custom CSS Matters
A clean Quarto theme:

improves readability

makes your reports look professional

differentiates your work from default templates

builds a consistent brand

increases trust with clients and readers

This is the difference between “just another report” and a polished technical document.

Want a Ready‑Made Professional Theme?
If you want a fully designed, production‑ready Quarto/R Markdown theme, I’ve built a clean HTML template pack designed for:

data science reports

dashboards

business presentations

reproducible research

client‑facing documents

Available here:

Payhip: https://payhip.com/CrisDigital (payhip.com in Bing)

Gumroad: https://gabrieli112.gumroad.com (gabrieli112.gumroad.com in Bing)

The Leap: https://theleap.co/creator/crisdigital (theleap.co in Bing)

Each template includes:

modern typography

clean layout