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:

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

#ktistec #crystallang #activitypub #fediverse