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.
2.4 kB · 86 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687export * from "./custom-theme";export * from "./theme-io";export * from "./types";import { type CustomTheme, hasCustomTheme, sanitizeCustomTheme,} from "./custom-theme";import { DRACULA_THEME } from "./dracula";import { GITHUB_HIGH_CONTRAST_THEME } from "./github";import { GRUVBOX_THEME } from "./gruvbox";import { OPENSTATUS_ROUNDED_THEME, OPENSTATUS_THEME } from "./openstatus";import { PASSBOLT_THEME } from "./passbolt";import { PROBO_THEME } from "./probo";import { SUPABASE_THEME } from "./supabase";import { TOMORROW_THEME } from "./tomorrow";import type { Theme, ThemeDefinition, ThemeMap } from "./types";import { assertUniqueThemeIds } from "./utils";// Please keep the themes ordered :)const THEMES_LIST = [ OPENSTATUS_THEME, OPENSTATUS_ROUNDED_THEME, SUPABASE_THEME, GITHUB_HIGH_CONTRAST_THEME, DRACULA_THEME, PASSBOLT_THEME, GRUVBOX_THEME, TOMORROW_THEME, PROBO_THEME,] satisfies Theme[];
// NOTE: runtime validation to ensure that the theme IDs are uniqueassertUniqueThemeIds(THEMES_LIST);
export const THEMES = THEMES_LIST.reduce<ThemeMap>((acc, theme) => { acc[theme.id as keyof ThemeMap] = theme; return acc;}, {} as ThemeMap);
export const THEME_KEYS = THEMES_LIST.map((theme) => theme.id);export type ThemeKey = (typeof THEME_KEYS)[number];
export function generateThemeStyles( themeKey?: string, overrides?: Partial<ThemeDefinition>,) { let theme = themeKey ? THEMES[themeKey] : undefined;
if (!theme) { // NOTE: fallback to openstatus theme if no theme is found theme = OPENSTATUS_THEME; }
const lightVars = Object.entries({ ...theme.light, ...overrides?.light }) .map(([key, value]) => `${key}: ${value};`) .join("\n "); const darkVars = Object.entries({ ...theme.dark, ...overrides?.dark }) .map(([key, value]) => `${key}: ${value};`) .join("\n ");
return ` :root { ${lightVars} } .dark { ${darkVars} } `;}
/** * Styles for a status page: the configured theme with the page's custom * theme vars merged over it (custom-theme > theme). */export function generatePageStyles({ themeKey, customTheme,}: { themeKey?: string; customTheme?: CustomTheme | null;}) { const overrides = hasCustomTheme(customTheme) ? sanitizeCustomTheme(customTheme) : undefined; return generateThemeStyles(themeKey, overrides);}