Skip to content

feat: multiple built-in themes #18

@engineervix

Description

@engineervix

Summary

Bundle several alternative visual themes in the binary and let users switch between them with a single config key. The current design (warm off-whites + IBM Plex Sans + Lora) becomes the default theme; additional themes offer different colour palettes, typography stacks, or layout density.

Motivation

Kwelea currently has one look. Projects with strong brand identities or different aesthetic preferences have no way to change the overall feel without forking the theme CSS (or waiting for issue #17 to cover all the ground they need). Shipping 2–4 curated built-in themes makes Kwelea useful for a wider range of projects out of the box.

Proposed config key

[theme]
name = "default"   # built-in theme name; defaults to "default"

Candidate themes (starting point for discussion)

Name Flavour
default Current design — warm off-whites, IBM Plex Sans + Lora, deep ink dark mode
mono Monochrome, high-contrast, terminal-inspired
ocean Cool blue-greens, modern sans-serif throughout
minimal Maximum whitespace, neutral greys, no colour accents

Names and aesthetics are open for bikeshedding — the point is that the mechanism exists.

Implementation approach

Two reasonable options:

A — CSS custom property overrides per theme

Each theme is a small CSS file that redefines the CSS custom properties declared in theme.css (colours, font stacks, spacing tokens). theme.css stays as the structural base; the theme file is injected after it.

Pros: Small per-theme files; structural CSS (layout, components) is shared.
Cons: Only covers what's expressed as custom properties; deep visual changes (e.g. different typography scale) require expanding the property set.

B — Full CSS replacement per theme

Each theme is a complete standalone CSS file embedded in the binary. The builder writes whichever one the user selects.

Pros: Total freedom per theme.
Cons: Larger binary; duplication of structural CSS across themes.

Option A is the right starting point. The custom property set in theme.css should be audited and expanded to cover everything a theme might want to change.

Notes

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions