openstatus.dev
Openstatus
www.openstatus.dev
1// https://draculatheme.com/spec
2
3import type { Theme } from "./types";
4
5export const DRACULA_THEME = {
6 id: "dracula",
7 name: "Dracula",
8 author: { name: "@thibaultleouay", url: "https://thibaultleouay.dev" },
9 light: {
10 "--background": "#FFFBEB", // Background
11 "--foreground": "#1F1F1F", // Foreground
12 "--border": "#6C664B", // Current Line
13 "--input": "var(--border)", // Current Line
14
15 "--primary": "var(--foreground)",
16 "--primary-foreground": "var(--background)",
17 "--secondary": "var(--muted)",
18 "--secondary-foreground": "var(--accent-foreground)",
19 "--muted": "#CFCFDE", // Section
20 "--muted-foreground": "#6C664B", // NOTE: non standard color for improved readability
21 "--accent": "var(--muted)",
22 "--accent-foreground": "var(--foreground)",
23
24 "--success": "#14710a", // Green
25 "--destructive": "#cb3a2a", // Red
26 "--warning": "#A34D14", // Orange
27 "--info": "#644AC9", // Purple
28
29 "--chart-1": "#A3144D", // Pink
30 "--chart-2": "#A34D14", // Orange
31 "--chart-3": "#846E15", // Yellow
32 "--chart-4": "#14710a", // Green
33 "--chart-5": "#036A96", // Cyan
34
35 "--popover-foreground": "var(--foreground)",
36 "--popover": "var(--background)",
37 "--card": "var(--background)",
38 "--card-foreground": "var(--foreground)",
39 },
40 dark: {
41 "--background": "#282a36", // Background
42 "--foreground": "#f8f8f2", // Foreground
43 "--border": "#6272A4", // Current Line
44 "--input": "var(--border)", // Current Line
45
46 "--primary": "var(--foreground)",
47 "--primary-foreground": "var(--background)",
48 "--secondary": "var(--muted)",
49 "--secondary-foreground": "var(--accent-foreground)",
50 "--muted": "#44475A", // Section
51 "--muted-foreground": "#A6ACCD", // NOTE: non standard color for improved readability
52 "--accent": "var(--muted)",
53 "--accent-foreground": "var(--foreground)",
54
55 "--success": "#50fa7b", // Green
56 "--destructive": "#ff5555", // Red
57 "--warning": "#ffb86c", // Orange
58 "--info": "#644AC9", // Purple
59
60 "--chart-1": "#ff79c6", // Pink
61 "--chart-2": "#ffb86c", // Orange
62 "--chart-3": "#f1fa8c", // Yellow
63 "--chart-4": "#50fa7b", // Green
64 "--chart-5": "#036A96", // Cyan
65
66 "--popover-foreground": "var(--foreground)",
67 "--popover": "var(--background)",
68 "--card": "var(--background)",
69 "--card-foreground": "var(--foreground)",
70 },
71} as const satisfies Theme;