ALTARA Developer Portal

YOUR EDITOR. YOUR STYLE.

Build an ALTARA theme.

Write CSS for the real app surfaces. Keep your source files on your computer, test your package in ALTARA, then share a version with the community.

01 / SOURCE

Two files to make your theme.

Extract the source kit and open it in your code editor. Change metadata.json for the name, version and description; change theme.css for the appearance. The kit includes the same local validator ALTARA uses, its license notices and a ready-to-import example. No package installation is needed; the command tool needs Node.js 22 or later.

metadata.json

{
  "format": "altara-theme",
  "apiVersion": 2,
  "name": "My ALTARA theme",
  "author": "Your display name",
  "version": "1.0.0",
  "description": "Soft surfaces and my own accent."
}

theme.css

:root {
  --my-accent: #a9ccff;
  --my-surface: rgba(24, 33, 44, .72);
}
.app {
  --altara-accent: var(--my-accent);
  --ui-primary-bg: var(--my-accent);
  --altara-widget-accent: var(--my-accent);
  --altara-widget-surface: var(--my-surface);
  --altara-widget-input: #141d29;
  --altara-widget-text: #edf4ff;
  --altara-widget-muted: #afbfce;
  --altara-widget-radius: 18px;
  --altara-widget-spacing: 16px;
  --altara-widget-blur: 12px;
}
[data-theme-slot="widget-card"] {
  background-color: var(--my-surface);
  border: 1px solid rgba(210, 230, 255, .16);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
@media (prefers-reduced-transparency: reduce) {
  [data-theme-slot="widget-card"] {
    background-color: #18212c;
    backdrop-filter: none;
  }
}

The author field is a display label. When you publish, the website uses the owner of your signed-in project as the verified creator.

02 / APPEARANCE

Style what the app actually supports.

Use ordinary CSS, custom properties, Grid, Flexbox, gradients, borders and shadows. Apply transparency to a surface's background so text and icons stay readable. Prefer native slots to fragile child positions.

What you want to changeStart here
Colors and typography.app, --altara-accent, --altara-text, --altara-text-muted
Widget cards and spacing[data-theme-slot="widget-card"], widget-title, widget-grid
Conversation surfaces.dmHeader, .dmComposer, #dmMain, #botDmMain
Native Home compositionhome-hero, home-servers, home-messages, home-focus

Use the full attribute selector for each slot, for example [data-theme-slot="home-focus"]. Home slots appear when the corresponding native presentation is active.

Define --altara-widget-* values once on .app to give native and community widgets a common palette, controls, typography and material. New supported widgets inherit that appearance; you do not write a rule for every widget. Changing the theme updates styling in place and preserves widget actions and data.

Standard HTML adapts automatically, including installed fixed HTML releases with older SDKs. Widget creators mark custom surfaces with data-altara-widget-role or use the shared altara.appearance API once for canvas charts and custom components. Images and arbitrary graphics keep their content. Live external development widgets need the current SDK.

Leave layout out to keep the normal Home. API 2 can request "layout": "dashboard" or "layout": "glass-home" in the metadata. These are existing native presentations with real app data and actions. CSS can arrange their slots responsively; it cannot create new components or change the user's saved widget records.

For glass, start with translucent backgrounds and backdrop-filter: blur(12px). API 2 also supports theme-filter(liquid-glass), ALTARA's fixed native material. Include reduced transparency and motion alternatives; appearance varies with the background and browser.

API 2 accepts validated embedded PNG, JPEG or WebP images. Reference an asset with theme-asset(asset-name); external image and font URLs are blocked. Use local font stacks such as "Segoe UI", system-ui, sans-serif.

03 / PACKAGE

Build a portable theme file.

From the extracted kit folder, run these commands. The tool validates before writing and prints the package version, size and SHA-256. It refuses to overwrite an existing output: use a new filename after edits.

node scripts/theme-package.mjs --build metadata.json theme.css my-theme-1.0.0.altara-theme.json
node scripts/theme-package.mjs --check my-theme-1.0.0.altara-theme.json

The result is a single UTF-8 .altara-theme.json file containing your metadata, CSS and optional embedded assets. Do not upload the source ZIP. You can also edit the ready-made JSON starter directly; uploading a JSON package to My theme projects validates it without needing the command tool.

04 / TEST

Import first. Activate when ready.

  1. In ALTARA, open Settings → Appearance → Community themes → Import theme.
  2. Select the built .altara-theme.json. It is validated and added to your local library; importing does not activate it.
  3. Choose Activate on its card. On desktop you can also copy packages into the account's theme folder shown in Appearance.
  4. Check Home, human and bot chats, menus, long names, narrow windows, keyboard focus and accessibility preferences.

Deactivate from Appearance to return to the base appearance. If your CSS makes navigation unusable, Ctrl+Alt+Shift+T removes the active styling independently of the layout. Keep an editable source copy outside the theme folder.

The browser app keeps a browser-local library; it does not read your desktop folder. Imported copies stay on your device and do not change when a creator publishes a newer release.

05 / COMMUNITY

A private draft becomes a public release.

  1. Open My theme projects and sign in with your normal ALTARA account. No ALTARA+ is required.
  2. Upload the built JSON package. Check its validation result and use Preview package; the preview uses fictional data in an isolated frame.
  3. Choose Save private draft. Only your account can edit that project; drafts stay out of the public catalogue.
  4. Choose Publish version…, add presentation images and release notes, then review and confirm the free public release.
  5. The listing appears in Themes. Other people can preview it, download the verified package, import it and explicitly activate it.

For an update, edit the source, increase version, build a new file and use Replace draft package in the same project. Publishing creates a new immutable release; an earlier version's bytes do not change. Downloads and activation remain separate choices.

If publication or the catalogue is unavailable, keep your local files and retry later. A failed upload or publication must not be treated as a successful release.

06 / BOUNDARIES

Presentation belongs to the theme. Behavior belongs to ALTARA.

Themes cannot execute JavaScript, supply arbitrary HTML, add product actions, read messages or credentials, access Electron or grant permissions. Authentication, settings, confirmations, recording indicators and recovery stay under ALTARA's control. Styling may pause while sensitive native surfaces are open.

  • API 1 and 2 are supported. CSS is limited to 96 KiB. API 1 packages are limited to 128 KiB; API 2 to 1.5 MiB.
  • Images: static PNG/JPEG/WebP only; up to 512 KiB each, 1 MiB combined, 4096 px per side and 12 megapixels. SVG, GIF and animated images are rejected.
  • @import, @font-face, external URLs, generated text, arbitrary keyframes and animations are blocked. Transitions must have explicit durations up to two seconds.
  • Use :root only for custom properties. ALTARA parses and scopes accepted CSS; do not package already-compiled scoped CSS.

Read the complete package contract ↗ for all stable slots, native tokens, image rules, compatibility and examples.

07 / INSTALL WITH CARE

Validation reduces risk. It does not guarantee safety.

ALTARA themes are presentation packages: CSS, supported native layout options and validated embedded images. The importer rejects JavaScript, arbitrary HTML, external resource URLs and remote font imports. The preview is isolated and cannot run theme scripts. These protections limit what a package can do; they are not an antivirus scan or proof that a creator is trustworthy.

A theme can still make ordinary screens misleading or unreadable, hide controls or slow the app with costly visual effects. Bugs in the validator, ALTARA or the browser's image and rendering code also remain possible. Native authentication, settings, confirmations and recovery are protected from community styling, but no community package should be described as risk-free. Appearing in the catalogue is not a security certification.

  • Download the selected .altara-theme.json version and import it through ALTARA. A theme does not require an .exe, shell script, browser extension or separate installer.
  • Do not provide passwords or account tokens, grant administrator access, disable antivirus or run terminal commands to activate a downloaded theme. Creators building their own source kit use the documented build tool; installing a finished theme does not need it.
  • Check the creator, description and screenshots, and preview before activating. Keep ALTARA and your browser updated. Review a new version before choosing to install it.
  • If the interface becomes suspicious or unusable, deactivate the theme in Settings → Appearance, or press Ctrl+Alt+Shift+T. If local storage fails, this shortcut removes styling for the current session; the saved selection may return on restart.
  • Report suspicious listings through Report on the theme's detail page. Reporting is separate from deactivating your local copy.

Widgets have a separate execution and permission model. A theme changing a widget's appearance does not grant new permissions; do not assume an executable community widget has the same restrictions as a CSS-only theme.