5  Customizing Style

5.1 Overview

Styling controls how your website looks, including colors, fonts, spacing, and layout.

In Quarto, styling happens in two layers:

  1. Theme (SCSS) โ†’ controls global design such as colors and typography
  2. CSS โ†’ fine-tunes specific elements like buttons, spacing, and layout details

5.2 How Styling Works

5.2.1 1. Theme (SCSS)

Defined in _quarto.yml:

format:
  html:
    theme: [flatly, custom.scss]
  • flatly is the base Bootstrap theme
  • custom.scss is your custom design layer
Note

SCSS allows you to define variables like colors once and reuse them across your entire site.

5.2.2 2. CSS (styles.css)

css: styles.css

This file overrides specific elements after the theme is applied.

Your current setup includes:

  • Dark background gradient
  • Light readable text
  • Blue accent colors
  • Styled sidebar and headings

5.3 Your Current Theme: Dark Mode

Your site currently uses a dark, professional theme:

  • Deep blue background
  • Light text
  • Blue accent highlights

This works well for research portfolios and technical content.

5.4 Creating Multiple Themes

You can use different styles by switching SCSS files.

Within this template, we provide:

  • Dark mode
  • Light mode
  • Pastel theme
Tip

You can edit these themes or create your own to personalize your website.

5.5 Where to Edit Your Style

5.5.1 Open custom.scss

This file controls your core theme settings, including:

  • Background color
  • Text color
  • Accent color
  • Navbar styling

This is where you define the overall look of your site.

5.5.2 Open _quarto.yml

This file tells Quarto which theme to use.

For example:

format:
  html:
    theme: [flatly, custom.scss]

To switch themes, replace custom.scss with another file:

theme: [flatly, custom-light.scss]

or

theme: [flatly, custom-pastel.scss]

5.6 Editing Colors Step-by-Step

This section walks you through making a simple style change so you can see how themes work in real time.

Important

Make sure you have quarto preview running before you start so you can see your changes instantly.

5.6.1 Step 1: Open custom.scss

In your project folder, open:

custom.scss

You should see something like:

/*-- scss:defaults --*/

$body-bg: #08131d;
$body-color: rgba(222, 238, 246, 0.92);
$primary: #7ecce6;

5.6.2 Step 2: Change the Accent Color

Find this line:

$primary: #7ecce6;

Replace it with a new color, for example:

$primary: #ff6b6b;

Save the file.

๐Ÿ‘‰ Your site should automatically refresh, and youโ€™ll see: - Links change color
- Buttons change color
- Callouts update

5.6.3 Step 3: Change the Background Color

Find:

$body-bg: #08131d;

Try changing it to something lighter:

$body-bg: #f4f7fb;

Save the file.

๐Ÿ‘‰ Notice how the entire tone of the site changes.

5.6.4 Step 4: Adjust Text Color

Find:

$body-color: rgba(222, 238, 246, 0.92);

If you switched to a light background, update this to:

$body-color: #1a1a1a;
Note

Background and text color should always have strong contrast so your site remains readable.

5.7 Understanding What You Changed

Variable What it controls
$primary Accent color (links, buttons, highlights)
$body-bg Page background
$body-color Main text color

5.8 Try It Yourself

Experiment with different combinations:

  • Blue โ†’ Green
  • Dark โ†’ Light
  • Pastel โ†’ Bold

You can use tools like: - https://coolors.co
- https://colorhunt.co

Tip

Small changes go a long way. Changing just one or two variables can completely transform your site.

5.9 Common Mistakes

5.9.1 Nothing changes after saving

  • Make sure quarto preview is running
  • Check that youโ€™re editing the correct file

5.9.2 Colors look wrong

  • Your styles.css may be overriding your SCSS

5.9.3 Site looks broken

  • Check for missing semicolons (;) in SCSS

5.10 Next Step

Now that youโ€™ve changed your first colors, try:

  • Creating your own theme file
  • Switching between themes in _quarto.yml
  • Matching your site to your personal or institutional branding
Important

The goal is not to memorize SCSS โ€” it is to understand how small changes affect your entire site.

5.11 Key Idea

  • custom.scss = controls design
  • styles.css = refines details
  • _quarto.yml = connects everything
Important

If your styling is not updating, check that the file name in _quarto.yml matches your SCSS file exactly.