Configuration

Customize colors, settings, and behavior of the Danish Pastel theme

Version: 1.0.0 Updated: Mar 3, 2026

Site Settings

Configure your site in _config.yml:

# Basic Information
title: Your Site Name
description: Your site description
url: "https://yourdomain.com"
baseurl: ""

# Social Links
twitter_username: yourusername
github_username: yourusername

# Theme
theme: jekyll-theme-danish-pastel
# OR for GitHub Pages:
# remote_theme: cryptonym0/jekyll-theme-danish-pastel

Color Customization

The Danish Pastel theme uses CSS variables for easy customization. The palette is based on muted, sophisticated tones inspired by Scandinavian design.

Default Colors

:root {
  /* Core Danish Pastel Colors */
  --color-primary: #C9ADA7;    /* Dusty Mauve */
  --color-secondary: #9A8C98;  /* Soft Mauve */
  --color-accent: #D4A5A5;     /* Dusty Rose */
  --color-success: #A8DADC;    /* Sage Blue */
  --color-sage: #A7C4BC;       /* Sage Green */
  
  /* Background & Text */
  --color-bg-solid: #FEFCFF;   /* Soft White */
  --color-text: #3A3A3A;       /* Charcoal Grey */
  
  /* Effects */
  --border-width: 1px;
  --shadow: 0 4px 12px rgba(154, 140, 152, 0.12);
  --shadow-hover: 0 6px 20px rgba(154, 140, 152, 0.18);
}

Color Philosophy

Danish Pastel colors are intentionally muted to:

Reduce visual fatigue during extended reading
Create a calm, professional atmosphere
Maintain clear hierarchy without harsh contrast
Reflect natural materials and hygge principles

Custom Colors

Create assets/css/custom.css:

:root {
  /* Customize primary accent */
  --color-primary: #B89DA0;  /* Slightly darker mauve */
  
  /* Adjust sage tones */
  --color-sage: #9BB4A8;     /* More muted green */
  
  /* Modify text darkness */
  --color-text: #2A2A2A;     /* Darker for more contrast */
}

Then add to your _config.yml:

# Custom CSS
custom_css: /assets/css/custom.css

💡 Preview color changes instantly with browser dev tools (F12 → Elements → :root)

Border and Shadow Customization

The Danish Pastel aesthetic emphasizes minimalism with subtle borders and soft shadows.

Border and Shadow Customization

The Danish Pastel aesthetic emphasizes minimalism with subtle borders and soft shadows.

Border Settings

:root {
  /* Standard: 1px for containers */
  --border-width: 1px;
  
  /* For more definition (not recommended) */
  --border-width: 2px;
}

Shadow Settings

:root {
  /* Soft blur shadows (default) */
  --shadow: 0 4px 12px rgba(154, 140, 152, 0.12);
  --shadow-hover: 0 6px 20px rgba(154, 140, 152, 0.18);
  
  /* More prominent shadows */
  --shadow: 0 6px 18px rgba(154, 140, 152, 0.20);
  --shadow-hover: 0 10px 30px rgba(154, 140, 152, 0.25);
  
  /* Minimal shadows */
  --shadow: 0 2px 8px rgba(154, 140, 152, 0.08);
  --shadow-hover: 0 4px 12px rgba(154, 140, 152, 0.12);
}

📘 Danish Pastel uses blur shadows (not offset) to maintain a soft, calm aesthetic.

Typography

The theme uses clean, modern fonts optimized for readability:

Body & Headings: Poppins (rounded, friendly)
Code: Space Mono (technical, monospace)

Custom Fonts

Override fonts in your custom CSS:

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

code {
  font-family: 'Fira Code', 'Courier New', monospace;
}

Typography Scale

Adjust heading sizes:

h1 { font-size: 2.8em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }

📘 Load custom fonts in your HTML head or via `@import` in CSS.

Edit _layouts/default.html to customize navigation links:

<nav class="site-nav">
  <a href="/jekyll-theme-danish-pastel/">HOME</a>
  <a href="/jekyll-theme-danish-pastel/docs/">DOCS</a>
  <a href="/jekyll-theme-danish-pastel/about/">ABOUT</a>
  <a href="/jekyll-theme-danish-pastel/blog/">BLOG</a>
</nav>

Control sidebar navigation with front matter:

# Auto-generate from category
category: Documentation
order: 1

# Or use custom navigation
docs_nav:
  - title: Getting Started
    url: /docs/getting-started/
  - title: Advanced
    url: /docs/advanced/
    children:
      - title: API
        url: /docs/api/

Plugins

Recommended plugins in _config.yml:

plugins:
  - jekyll-feed          # RSS feed
  - jekyll-seo-tag       # SEO optimization
  - jekyll-sitemap       # XML sitemap
  - jekyll-paginate      # Pagination

Install plugins in your Gemfile:

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-seo-tag", "~> 2.8"
  gem "jekyll-sitemap", "~> 1.4"
  gem "jekyll-paginate", "~> 1.1"
end

GitHub Integration

Edit Links

Enable “Edit on GitHub” links in documentation:

github_repo: "https://github.com/yourusername/your-repo"

GitHub Pages

Configure for GitHub Pages deployment:

# Use remote_theme instead of theme
remote_theme: cryptonym0/jekyll-theme-danish-pastel

# Optional: specify branch/tag
remote_theme: cryptonym0/jekyll-theme-danish-pastel@v1.0.0

Build Settings

Optimize your build:

# Markdown processor
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

# Permalink style
permalink: /:categories/:year/:month/:day/:title/

# Exclude files
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor
  - README.md

Performance

Optimize Images

Configure responsive images:

# Image optimization (in custom build)
image_compression: true
responsive_images: true
lazy_loading: true

Caching

Enable caching in production:

# Production settings
environment: production
cache_dir: .jekyll-cache
incremental: true

Danish Pastel Customization Examples

Example 1: Warmer Tones

For a warmer, more terracotta-inspired palette:

:root {
  --color-primary: #D4A59A;    /* Warm terracotta */
  --color-secondary: #B89B8D;  /* Taupe */
  --color-accent: #E8B4AB;     /* Peachy rose */
  --color-sage: #A8B5A0;       /* Olive sage */
}

Example 2: Cooler Tones

For a cooler, more Nordic-inspired palette:

:root {
  --color-primary: #B5C4D4;    /* Dusty blue */
  --color-secondary: #8B9AA8;  /* Steel grey */
  --color-accent: #D4C4C8;     /* Cool mauve */
  --color-sage: #9BBAB0;       /* Sea foam */
}

Example 3: Higher Contrast

For better readability with more contrast:

:root {
  --color-text: #2A2A2A;       /* Darker text */
  --color-primary: #B89098;    /* Deeper mauve */
  --border-width: 2px;         /* Slightly thicker borders */
  --shadow: 0 6px 18px rgba(154, 140, 152, 0.20); /* Stronger shadows */
}

Example 4: Minimal Mode

For an ultra-minimal aesthetic:

:root {
  --border-width: 1px;
  --shadow: 0 2px 6px rgba(154, 140, 152, 0.06);
  --shadow-hover: 0 3px 10px rgba(154, 140, 152, 0.10);
}

/* Remove rounded corners */
* {
  border-radius: 0 !important;
}

SEO Configuration

Optimize for search engines:

# SEO settings
title: Your Site Title
description: >
  Your site description for search engines.
  Can be multiple lines.

author: Your Name
lang: en_US

# Social
twitter:
  username: yourusername
  card: summary_large_image

social:
  name: Your Name
  links:
    - https://twitter.com/yourusername
    - https://github.com/yourusername

Analytics

Add analytics in _config.yml:

# Google Analytics
google_analytics: UA-XXXXXXXXX-X

# Or GA4
google_analytics: G-XXXXXXXXXX

Then add to _layouts/default.html:

Development vs Production

Use environment-specific settings:

# _config.yml (production)
url: "https://yoursite.com"

# _config_dev.yml (development)
url: "http://localhost:4000"

Run with specific config:

# Development
bundle exec jekyll serve --config _config.yml,_config_dev.yml

# Production
bundle exec jekyll build

⚠️ Never commit sensitive data like API keys to your repository!

Danish Pastel Best Practices

Color Selection Guidelines

When customizing colors, maintain the Danish Pastel aesthetic:

Use muted tones - Avoid highly saturated colors
Test readability - Ensure sufficient contrast for text
Stay in palette - Keep colors within the same tonal family
Consider lighting - Test in both light and dark environments

Accessibility Considerations

/* Ensure sufficient contrast ratios */
:root {
  --color-text: #2A2A2A;  /* Minimum 4.5:1 with background */
}

/* Add focus indicators */
a:focus, button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Performance Tips

Use CSS variables instead of hardcoded colors
Minimize custom CSS to maintain load speed
Test on mobile devices for responsive behavior
Enable browser caching in production

Next Steps

Explore Layouts to understand page templates
Learn about Components for callouts and styling
Read about Deployment options

💡 Keep a backup of _config.yml before making major changes. Test locally with `bundle exec jekyll serve` before deploying.

Configuration

Site Settings

Color Customization

Default Colors

Color Philosophy

Custom Colors

Border and Shadow Customization

Border and Shadow Customization

Border Settings

Shadow Settings

Typography

Custom Fonts

Typography Scale

Navigation

Header Navigation

Documentation Sidebar

Plugins

GitHub Integration

Edit Links

GitHub Pages

Build Settings

Performance

Optimize Images

Caching

Danish Pastel Customization Examples

Example 1: Warmer Tones

Example 2: Cooler Tones

Example 3: Higher Contrast

Example 4: Minimal Mode

SEO Configuration

Analytics

Development vs Production

Danish Pastel Best Practices

Color Selection Guidelines

Accessibility Considerations

Performance Tips

Next Steps