Status Page Theme Explorer

A theme is a set of CSS variable overrides for light and dark mode in the @openstatus/theme-store package. If you are familiar with shadcn, you know the trick (it also lets you override --radius). Three ways to get one:

• Build it in the theme builder and copy it as a TypeScript file, JSON or CSS.
• Let your agent design it. Copy the prompt from the builder, or install the openstatus-theme skill with npx skills add openstatushq/skills --skill openstatus-theme. Paste the reply into the builder to preview it.
• Write it by hand following the existing themes in the GitHub directory.

Preview the theme from the builder on a full status page (the status slug). Unchanged themes open the community theme switcher instead:

Once you are happy, copy the TypeScript file into packages/theme-store/src, register it in index.ts and open a pull request. Or paste the CSS variables into your own status page's custom theme in the dashboard, no pull request needed.

Why don't we allow custom css styles to be overridden and only support themes?

• Keep it simple for the user
• Don't end up with a xmas tree
• Keep the theme consistent
• Avoid conflicts with other styles
• Keep the theme maintainable (but this will also mean, a change will affect all users)