| 1 | import type { DesktopPreviewAnnotationTheme } from "@t3tools/contracts"; |
| 2 | |
| 3 | const readVariable = (styles: CSSStyleDeclaration, name: string, fallback: string): string => |
| 4 | styles.getPropertyValue(name).trim() || fallback; |
| 5 | |
| 6 | export function readPreviewAnnotationTheme(): DesktopPreviewAnnotationTheme { |
| 7 | const root = document.documentElement; |
| 8 | const styles = getComputedStyle(root); |
| 9 | return { |
| 10 | colorScheme: root.classList.contains("dark") ? "dark" : "light", |
| 11 | radius: readVariable(styles, "--radius", "0.625rem"), |
| 12 | background: readVariable(styles, "--background", "white"), |
| 13 | foreground: readVariable(styles, "--contrast-foreground", "oklch(0.269 0 0)"), |
| 14 | popover: readVariable(styles, "--popover", "white"), |
| 15 | popoverForeground: readVariable(styles, "--contrast-popover-foreground", "oklch(0.269 0 0)"), |
| 16 | primary: readVariable(styles, "--primary", "oklch(0.488 0.217 264)"), |
| 17 | primaryForeground: readVariable(styles, "--primary-foreground", "white"), |
| 18 | muted: readVariable(styles, "--muted", "rgb(0 0 0 / 4%)"), |
| 19 | mutedForeground: readVariable(styles, "--contrast-muted-foreground", "oklch(0.556 0 0)"), |
| 20 | accent: readVariable(styles, "--accent", "rgb(0 0 0 / 4%)"), |
| 21 | accentForeground: readVariable(styles, "--contrast-accent-foreground", "oklch(0.269 0 0)"), |
| 22 | border: readVariable(styles, "--contrast-border", "rgb(0 0 0 / 8%)"), |
| 23 | input: readVariable(styles, "--contrast-input", "rgb(0 0 0 / 10%)"), |
| 24 | ring: readVariable(styles, "--ring", "oklch(0.488 0.217 264)"), |
| 25 | fontSans: readVariable(styles, "--font-sans", styles.fontFamily || "system-ui, sans-serif"), |
| 26 | fontMono: readVariable(styles, "--font-mono", "ui-monospace, monospace"), |
| 27 | }; |
| 28 | } |