Themes

Color themes change the Zync app shell and terminal presentation. Choose one from the command palette or Settings > Appearance > App. File icons are a separate system. Choose an icon theme from Settings > Appearance > Icon theme.

Verify community theme support on the target release

Zync can install and discover community theme packages, but the current runtime injects host-global theme CSS only for trusted app-owned built-ins. A third-party package must not assume it can restyle the complete application document until the runtime explicitly supports that path.

Built-in themes

The current runtime ships with 12 built-in color themes:

Light

• Light
• Gruvbox Light
• Solarized Light
• Catppuccin Latte
• Tokyo Light

Dark

• Dark
• Dracula
• Monokai
• Midnight
• Monokai Pro
• Synthwave
• Nordic

System Default is an additional selector that follows the operating system’s light or dark preference. It is not a color theme package, so it is not included in the count above.

Note

The theme picker can also receive community entries from enabled plugins. The list above is the app-owned built-in set in the current desktop runtime, not a promise about the number of installed community themes.

Choose a theme

1. Open Settings > Appearance.
2. Select App.
3. Choose a theme from the light or dark group.
4. Optionally set a custom accent color.

You can also open the command palette with Mod+P and run Preferences: Color Theme. Selecting a new theme clears an explicit custom accent so the theme’s default accent is used. Set the accent again if you want to override it.

Theme package manifest

A color theme is a plugin package with a stylesheet. Put the manifest and stylesheet at the package root:

manifest.json

{
  "id": "com.example.theme.my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "description": "A high-contrast dark theme.",
  "author": "Example",
  "style": "theme.css",
  "mode": "dark",
  "preview_bg": "#10131a",
  "preview_accent": "#7c9cff"
}

Required identity fields are id, name, and version. Use a globally unique reverse-domain ID. style points to the CSS file. Set mode to light or dark so the theme is grouped correctly. preview_bg and preview_accent provide marketplace and picker preview colors.

Theme CSS

Built-in themes define semantic app variables under a theme selector. A minimal theme stylesheet looks like this:

theme.css

[data-theme='my-theme'] {
  --color-app-bg: #10131a;
  --color-app-panel: #171c25;
  --color-app-surface: #202938;
  --color-app-border: #344158;
  --color-app-text: #e6edf7;
  --color-app-muted: #9eabc0;
  --color-app-accent: #7c9cff;
}

Keep the variables semantic rather than styling individual component classes. Check text, muted text, borders, focus states, dialogs, and terminal output in both a normal and busy workspace.

Variable	Role
--color-app-bg	Main workspace background
--color-app-panel	Sidebar, dialogs, and raised panels
--color-app-surface	Controls and nested surfaces
--color-app-border	Dividers and component outlines
--color-app-text	Primary readable text
--color-app-muted	Secondary text and inactive controls
--color-app-accent	Focus, selection, actions, and active states

The terminal maps its foreground, background, cursor, and ANSI colors from the active application theme and accent. Test commands with red, green, yellow, blue, magenta, cyan, and white output. A readable app preview does not guarantee readable terminal ANSI colors.

Security and runtime limits

Filesystem plugins are not allowed to inject arbitrary stylesheet text into the host document. The runtime injects host-global theme CSS only for trusted app-owned built-ins. Third-party theme styles remain sandboxed, and editor-provider styles remain inside their editor iframe.

This means a community theme package can be installed and discovered by the plugin system, but it must not assume that its stylesheet can rewrite the entire Zync document. Follow the current runtime behavior described in Plugins and extensions and verify the package on the target Zync release.

Light and dark design guidance

• Use high contrast between --color-app-text and --color-app-bg.
• Make --color-app-muted readable on both the background and surface.
• Keep borders visible without making every panel visually heavy.
• Ensure --color-app-accent works for buttons, links, selection, and focus rings.
• Give the terminal cursor enough contrast against both its background and foreground.
• Test dialogs, notification toasts, file lists, and the Settings modal before publishing.

Package and publish

Package the manifest and stylesheet with manifest.json at the archive root:

zip -r my-theme.zip manifest.json theme.css

Publish the archive from a stable HTTPS URL and add an entry to the zync-extensions registry. Include type: "theme" in a marketplace entry when your registry uses explicit categories. See Plugins and extensions for registry requirements.

Icon themes are separate

Color themes do not change file or service icons. An icon theme declares type: "icon-theme" and an iconsPath folder containing SVG assets. See the icon theme contract before building one.