base.css raw
1 @import "@fontsource-variable/inter/wght.css";
2
3 /* Neutral base values applied to every theme. Since classic is the base
4 theme, `.theme-classic` is defined here too. Per-theme overrides go in
5 their own files (e.g. `alby.css`, `bitcoin.css`). */
6 :root,
7 .theme-classic {
8 --app-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
9 --radius: 0.625rem;
10
11 /* Logo colors */
12 --logo-ink: #202020;
13 --logo-accent: #ffc800;
14
15 /* App colors */
16 --background: oklch(1 0 0);
17 --foreground: oklch(0.145 0 0);
18 --card: oklch(1 0 0);
19 --card-foreground: oklch(0.145 0 0);
20 --popover: oklch(1 0 0);
21 --popover-foreground: oklch(0.145 0 0);
22 --primary: oklch(0.205 0 0);
23 --primary-foreground: oklch(0.985 0 0);
24 --secondary: oklch(0.97 0 0);
25 --secondary-foreground: oklch(0.205 0 0);
26 --muted: oklch(0.97 0 0);
27 --muted-foreground: oklch(0.556 0 0);
28 --accent: oklch(0.97 0 0);
29 --accent-foreground: oklch(0.205 0 0);
30 --destructive: oklch(0.577 0.245 27.325);
31 --border: oklch(0.922 0 0);
32 --input: oklch(0.922 0 0);
33 --ring: var(--primary);
34 --chart-1: oklch(0.646 0.222 41.116);
35 --chart-2: oklch(0.6 0.118 184.704);
36 --chart-3: oklch(0.398 0.07 227.392);
37 --chart-4: oklch(0.828 0.189 84.429);
38 --chart-5: oklch(0.769 0.188 70.08);
39 --sidebar: oklch(0.985 0 0);
40 --sidebar-foreground: oklch(0.145 0 0);
41 --sidebar-primary: oklch(0.205 0 0);
42 --sidebar-primary-foreground: oklch(0.985 0 0);
43 --sidebar-accent: oklch(0.97 0 0);
44 --sidebar-accent-foreground: oklch(0.205 0 0);
45 --sidebar-border: oklch(0.922 0 0);
46 --sidebar-ring: var(--primary);
47
48 /* Custom colors */
49 --positive: oklch(0.977 0.019 155.487);
50 --positive-foreground: oklch(0.623 0.169 149.178);
51 --warning: oklch(0.976 0.016 73.092);
52 --warning-foreground: oklch(0.645 0.192 41.712);
53 --payment-lightning: #ffdf6f;
54 --payment-onchain: #fb923c;
55 --qr-foreground: #242424;
56 --qr-background: #ffffff;
57 }
58
59 .dark,
60 .theme-classic.dark {
61 /* Logo colors */
62 --logo-ink: #ffffff;
63 --logo-accent: #ffe480;
64
65 /* App colors */
66 --background: oklch(0.145 0 0);
67 --foreground: oklch(0.985 0 0);
68 --card: oklch(0.205 0 0);
69 --card-foreground: oklch(0.985 0 0);
70 --popover: oklch(0.269 0 0);
71 --popover-foreground: oklch(0.985 0 0);
72 --primary: oklch(0.922 0 0);
73 --primary-foreground: oklch(0.205 0 0);
74 --secondary: oklch(0.269 0 0);
75 --secondary-foreground: oklch(0.985 0 0);
76 --muted: oklch(0.269 0 0);
77 --muted-foreground: oklch(0.708 0 0);
78 --accent: oklch(0.371 0 0);
79 --accent-foreground: oklch(0.985 0 0);
80 --destructive: oklch(0.704 0.191 22.216);
81 --border: oklch(1 0 0 / 10%);
82 --input: oklch(1 0 0 / 15%);
83 --ring: var(--primary);
84 --chart-1: oklch(0.488 0.243 264.376);
85 --chart-2: oklch(0.696 0.17 162.48);
86 --chart-3: oklch(0.769 0.188 70.08);
87 --chart-4: oklch(0.627 0.265 303.9);
88 --chart-5: oklch(0.645 0.246 16.439);
89 --sidebar: oklch(0.205 0 0);
90 --sidebar-foreground: oklch(0.985 0 0);
91 --sidebar-primary: oklch(0.985 0 0);
92 --sidebar-primary-foreground: oklch(0.205 0 0);
93 --sidebar-accent: oklch(0.269 0 0);
94 --sidebar-accent-foreground: oklch(0.985 0 0);
95 --sidebar-border: oklch(1 0 0 / 10%);
96 --sidebar-ring: var(--primary);
97
98 /* Custom colors */
99 --positive: oklch(0.337 0.062 151.532);
100 --positive-foreground: oklch(0.859 0.14 152.167);
101 --warning: oklch(0.318 0.035 71.647);
102 --warning-foreground: oklch(0.848 0.117 72.544);
103 --payment-lightning: #ffdf6f;
104 --payment-onchain: #fb923c;
105 /* QR codes stay dark-on-light even in dark mode: many scanner apps
106 (e.g. Phoenix) cannot read inverted QR codes */
107 --qr-foreground: #242424;
108 --qr-background: #ffffff;
109 }
110