colorized

An opinionated dark-pastel theme

Author: Lany Atwood

This theme requires Zola version 0.22.1 and above

License: MIT

Homepage: https://git.colorized.life/demo.colorized.life/about/

Live Demo: https://demo.colorized.life

Tags:

• dark
• pastel
• blog
• developer

Last updated: 2026-04-05T20:39:24-07:00

colorized

An opinionated dark-pastel Zola theme with a 6-color accent palette.

demo.colorized.life

Features

• Dark pastel aesthetic with a curated 6-color accent palette
• Animated color-cycling landing page with two customizable tiers
• Shimmer gradient text effect (shortcode + CSS class)
• ASCII art shortcode with external file or inline support
• Image embedding shortcodes with floating positions and text wrapping
• Accessible reduce-motion toggle with prefers-reduced-motion support
• Responsive design with fluid typography via clamp()
• Sass-based theming with easy variable overrides
• Atom feed support
• Taxonomy support (tags)

Installation

Add the theme as a git submodule:

git submodule add https://git.colorized.life/demo.colorized.life.git themes/colorized

Set the theme in your zola.toml:

theme = "colorized"
compile_sass = true

Configuration

All options live under [extra] in your zola.toml. Defaults are shown from theme.toml:

[extra]
# Landing page <title> and Tier 1 title text
site_title = "My Site"

# Text below the landing title
landing_subtitle = "A site built with the colorized theme"

# Footer copyright name
copyright_holder = "colorized"

# Navigation links (shown on landing page and site nav)
# Each entry has `name` (display text) and `path` (local path).
# Add `sitemap = true` to include in a custom sitemap (for paths outside the content directory).
# External redirects (e.g. /source/ → a git host) should be handled at the webserver level.
nav_links = [
    { name = "blog", path = "/blog" },
    { name = "tags", path = "/tags" },
    { name = "source", path = "/source/", sitemap = true },
]

# Footer links (same schema as nav_links)
footer_links = [
    { name = "acknowledgements", path = "/acknowledgements" },
]

Landing Title

The landing title supports two tiers:

Tier 1 (default)

When landing_chars is not set, the title renders as a single <span> with a slow color-cycling animation that matches the subtitle and nav links.

[extra]
site_title = "My Site"

Tier 2 (explicit spans)

Set landing_chars to control exactly how the title is split and styled. Each entry has a char (text content) and class (any CSS class).

[extra]
landing_chars = [
    { char = "demo.colorized", class = "shimmer" },
    { char = ".life", class = "c-muted" },
]

Centering on a specific span

Set landing_center (0-based index) to center a specific span on the page centerline. Spans before it balance to the left, spans after to the right.

[extra]
landing_center = 1
landing_chars = [
    { char = "demo.", class = "c-muted" },
    { char = "colorized", class = "shimmer" },
    { char = ".life", class = "c-muted" },
]

When omitted, the title centers as a whole.

Available classes:

Color-class spans (c-accent, c-pink, etc.) animate with a staggered wave effect. The shimmer and c-muted classes are excluded from the wave animation.

Template Blocks

Override any block in your own templates by extending base.html:

Customizing Colors

Add [extra.colors] to your zola.toml to override any color. Only the keys you specify change — the rest keep their defaults:

[extra.colors]
accent = "#58a6ff"
bg = "#0d1117"

Available keys and defaults:

Advanced: Sass Variable Override

For deeper customization (fonts, layout, or Sass-level changes), shadow the variables file:

cp themes/colorized/sass/_variables.scss sass/_variables.scss

Note: Zola replaces the entire file, so include all variables when shadowing.

Shortcodes

shimmer

Renders text with an animated gradient effect cycling through the palette colors.

{{ shimmer(text="hello world") }}

ascii

Displays ASCII art in a <pre> block. Accepts either an external file or inline content.

From a file:

{%/*/* ascii(src="art/logo.txt") */*/%}

Inline:

{%/*/* ascii() */*/%}
⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⡶⢶⣦⡀
⠀⠀⠀⣴⡿⠟⠷⠆⣠⠋⠀⠀⠀⢸⣿
⠀⠀⠀⣿⡄⠀⠀⠀⠈⠀⠀⠀⠀⣾⡿
⠀⠀⠀⠹⣿⣦⡀⠀⠀⠀⠀⢀⣾⣿
⠀⠀⠀⠀⠈⠻⣿⣷⣦⣀⣠⣾⡿
⠀⠀⠀⠀⠀⠀⠀⠉⠻⢿⡿⠟
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⠀⠀⠀⢠⠏⡆⠀⠀⠀⠀⠀⢀⣀⣤⣤⣤⣀⡀
⠀⠀⠀⠀⠀⡟⢦⡀⠇⠀⠀⣀⠞⠀⠀⠘⡀⢀⡠⠚⣉⠤⠂⠀⠀⠀⠈⠙⢦⡀
⠀⠀⠀⠀⠀⡇⠀⠉⠒⠊⠁⠀⠀⠀⠀⠀⠘⢧⠔⣉⠤⠒⠒⠉⠉⠀⠀⠀⠀⠹⣆
⠀⠀⠀⠀⠀⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⠀⠀⣤⠶⠶⢶⡄⠀⠀⠀⠀⢹⡆
⠀⣀⠤⠒⠒⢺⠒⠀⠀⠀⠀⠀⠀⠀⠀⠤⠊⠀⢸⠀⡿⠀⡀⠀⣀⡟⠀⠀⠀⠀⢸⡇
⠈⠀⠀⣠⠴⠚⢯⡀⠐⠒⠚⠉⠀⢶⠂⠀⣀⠜⠀⢿⡀⠉⠚⠉⠀⠀⠀⠀⣠⠟
⠀⠠⠊⠀⠀⠀⠀⠙⠂⣴⠒⠒⣲⢔⠉⠉⣹⣞⣉⣈⠿⢦⣀⣀⣀⣠⡴⠟⠁
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠀⠉⠉⠉
{%/*/* end */*/%}

codeline

Renders a single line of code in a <pre><code> block.

{{ codeline(text="npm install") }}

image

Embeds an image in a <figure> with optional caption, thumbnail, and floating position.

{{ image(url="photo.jpg", alt="A caption beneath the image") }}

Parameters:

Floating example:

{{ image(url="photo.jpg", url_min="photo_sm.jpg", alt="Floating right", position="right") }}

hr

Renders a horizontal rule.

{{ hr() }}

Reduce Motion

The theme respects prefers-reduced-motion: reduce at the OS level. A toggle button is also provided on both the landing page and in the site footer, storing the preference in a cookie. When cookie_domain is set in [extra] (e.g., cookie_domain = ".colorized.life"), the preference is shared across all subdomains.

When reduce-motion is active, all animations (color cycling, shimmer gradient, wave stagger) are disabled and elements display their static fallback colors.

Custom Sitemap

Zola's built-in sitemap.xml only includes pages from the content directory. Nav/footer links that point to paths outside the content directory (e.g. /source/) will be missing.

The theme ships a templates/sitemap.xml.example template that extends the default sitemap with nav/footer links marked sitemap = true. To activate it:

1. Copy the example template:

cp templates/sitemap.xml.example templates/sitemap.xml

2. Add sitemap = true to any link entries you want included:

nav_links = [
    { name = "source", path = "/source/", sitemap = true },
]

Links already in the content directory do not need this flag — they are automatically included by Zola.

License

MIT