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