I've streamlined theme development in Ktistec.

[toddsundsted@epiktistes.com]

I've streamlined theme development in Ktistec. The theming system uses a hierarchy of CSS custom properties and fallbacks. Theme authors can customize a theme at multiple levels:

Base Colors Only

Define only base colors like --text-primary, --bg-primary, --bg-input, --semantic-primary, etc. Derived colors will auto-generate using color-mix formulas. For example:

:root { --semantic-primary: #ffa500; }

From this one line, theme-appropriate colors like --bg-accent-code, --anchor-color, etc. auto-generate.

Base Colors Plus Derived Colors

Define base colors and derived colors. Derived colors use custom values when defined. Undefined derived colors auto-generate. For example:

:root {
    --text-primary: #333;
    --text-primary-2: #ff0000;  /* red for this specific shade */
}

Given this theme, derived shades like --text-primary-1, --text-primary-3, and --text-primary-4 auto-generate. --text-primary-2 is red.

The simplest possible interesting theme redefines the primary semantic color. The single line above (in Base Colors Only) would result in the following, with button color, link color, disabled, selected, and hover states all derived automatically:

screenshot of the setting page with the primary semantic color defined

These changes will be in the upcoming release. Existing themes will continue to work, as is.

#ktistec #crystallang #activitypub #fediverse

[mariusor@metalhead.club]

@toddsundsted did you use any literature for deciding on the theme basic colors and how to combine them?

I've been struggling with something very similar a while back and the material design specs seemed too complex for what I wanted, but nothing else popped up on search.