Themes

Overview

What an OWD theme is versus core and apps.

A theme is a publishable Nuxt module selected in desktop.config.ts → theme. It defines shell layout and style: background, system bar, dock, window chrome, boot pages, typography. One theme is active per desktop.

Why “theme = OS”

Product metaphor: same engine (@owdproject/core), different skin. Switching themes changes layout and style, not the APIs apps use to open windows or expose commands.

Reference repositories

RepoComplexityStudy for
theme-paperMinimalSmallest working shell, defu defaults, kit-theme.
theme-novaFullSystem bar, dock, dialog plugin, conditional explorer.
theme-win95Full + bootBoot/start pages, retro chrome, dialog plugin.

What not to duplicate

  • Base window behaviour (z-order, stores) stays in core; the theme supplies UI (chrome) around content the core mounts.
  • Apps stay visually neutral: avoid theme-specific component names except the stable chrome contract — DesktopWindow, DesktopWindowNavButton, and title-bar slots documented in Window chrome and nav buttons.

Learning path

  1. Theme anatomy — module.ts, Desktop.vue, defu, kits.
  2. Create from scratch — end-to-end tutorial (Paper vs Nova).
  3. Window chrome and nav buttons — DesktopWindowNavButton, append-inner, iframe slots.
  4. Theme plugins — dialog plugins, addPlugin, ordering.
  5. Styling and Tailwind
  6. Pages and boot flow — Win95-style start/boot routes.
  7. Theme and optional modules — explorer gating (brief).

Also see desktop.config.ts and Package linking.

Build and publish

nuxt-module-build, dist, npm publishing, and desktop validate for OWD apps.

Theme anatomy

module.ts, desktop runtimeConfig, Desktop.vue, defu merge, and kit dependencies.