Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
3.3 kB · 88 lines
TypeScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import { THEME_VAR_NAMES, type Theme, serializeTheme,} from "@openstatus/theme-store";
import { THEME_EXPLORER_URL } from "./theme-explorer-host";
export const THEME_BUILDER_URL = `${THEME_EXPLORER_URL}/?b=true`;export const THEME_SKILL_URL = "https://github.com/openstatusHQ/skills/tree/main/skills/openstatus-theme";export const THEME_SKILL_INSTALL_COMMAND = "npx skills add openstatushq/skills --skill openstatus-theme";
const STATUS_VARS = ["--success", "--warning", "--destructive", "--info"];const BRAND_VARS = [ "--primary", "--primary-foreground", "--secondary", "--secondary-foreground",];const CHART_VARS = THEME_VAR_NAMES.filter((name) => name.startsWith("--chart-"),);const RAINBOW_VARS = THEME_VAR_NAMES.filter((name) => name.startsWith("--rainbow-"),);const BASE_VARS = THEME_VAR_NAMES.filter( (name) => name !== "--radius" && !STATUS_VARS.includes(name) && !BRAND_VARS.includes(name) && !CHART_VARS.includes(name) && !RAINBOW_VARS.includes(name),);
/** Prompt a user hands to their own agent; the reply pastes back into the builder. */export function generateThemePrompt(theme: Theme) { return `Design a theme for my openstatus status page.
## Brief
<describe your brand, mood, reference palette or the colors you already use>
## Output
Reply with exactly one \`\`\`json code block containing the theme, nothing else in it. I will paste it into the theme builder at ${THEME_BUILDER_URL} (Paste) to preview it on a status page.
Shape:
{ "id": "kebab-case-id", "name": "Display Name", "author": { "name": "@handle", "url": "https://..." }, "light": { "--background": "oklch(100% 0 0)", "--foreground": "oklch(14.5% 0 0)" }, "dark": { "--background": "oklch(14.5% 0 0)", "--foreground": "oklch(98.5% 0 0)" }}
## Supported CSS variables
Anything else is dropped. Only override what the theme needs, unset variables fall back to the default openstatus theme.
- Base: ${BASE_VARS.join(", ")}- Brand: ${BRAND_VARS.join(", ")}- Status: ${STATUS_VARS.join(", ")} (operational, degraded, outage/error, maintenance)- Charts, response time percentiles: ${CHART_VARS.join(", ")}- Regions on the monitor map, rarely worth overriding: ${RAINBOW_VARS[0]} … ${RAINBOW_VARS[RAINBOW_VARS.length - 1]}- Shape: --radius (a length, e.g. 0rem or 0.625rem)
## Rules
- Values are CSS colors (oklch() preferred; hex, hsl and named colors work) or var(--other-variable) to reuse one. No ; { } < characters, max 256 characters per value.- Define both light and dark. Tune dark separately: lift lightness and lower chroma of the status colors so they don't burn on a dark background.- Keep the canvas (base + brand) calm and low-chroma; give the chroma to the four status colors. They must stay distinguishable from each other, also for color-blind readers.- Body text contrast ≥ 4.5:1 against --background in both modes.- One coherent look, no "christmas tree".
## Starting point
This is the theme currently in my builder. Refine it unless the brief asks for something else:
\`\`\`json${serializeTheme(theme, "json")}\`\`\`
If you can install agent skills, run \`${THEME_SKILL_INSTALL_COMMAND}\` for the full workflow, including contributing the theme to the openstatus repository.`;}