theme-factory

Installation
SKILL.md

Theme Factory

Use this skill when you need to add a new theme to AiderDesk.

AiderDesk themes are implemented as SCSS files that define a .theme-<name> class with a full set of CSS custom properties (variables). The UI uses Tailwind utilities mapped to these CSS variables.

Where themes live

  • Theme files: src/renderer/src/themes/theme-<name>.scss
  • Theme aggregator (imports all themes): src/renderer/src/themes/themes.scss
  • Theme type registry: packages/common/src/types/common.ts (THEMES)
  • Theme selector UI: src/renderer/src/components/settings/GeneralSettings.tsx
  • Theme application: src/renderer/src/App.tsx (applies theme-<name> class to document.body)
  • Theme display names (i18n):
    • packages/common/src/locales/en.json (themeOptions.<name>)
    • packages/common/src/locales/zh.json (themeOptions.<name>)

Definition format

Related skills
Installs
65
GitHub Stars
1.2K
First Seen
Jan 23, 2026