burrito.space
experiments in a post-browser web
burrito.tngl.sh
1/**
2 * Peek Default Theme
3 * Base16 color scheme with light and dark variants
4 *
5 * Usage:
6 * - No data-theme attribute: follows system preference
7 * - data-theme="light": force light mode
8 * - data-theme="dark": force dark mode
9 */
10
11/* ========== Light Mode (default) ========== */
12:root {
13 /* Base16 Grayscale */
14 --base00: #ffffff; /* Default Background */
15 --base01: #f5f5f5; /* Lighter Background (status bars, line numbers) */
16 --base02: #e0e0e0; /* Selection Background */
17 --base03: #b0b0b0; /* Comments, Invisibles, Line Highlighting */
18 --base04: #666666; /* Dark Foreground (status bars) */
19 --base05: #333333; /* Default Foreground, Caret, Delimiters */
20 --base06: #1a1a1a; /* Light Foreground (rarely used) */
21 --base07: #0f0f0f; /* Light Background (rarely used) */
22
23 /* Base16 Accent Colors */
24 --base08: #d73a49; /* Red - Variables, Errors, Diff Deleted */
25 --base09: #e36209; /* Orange - Integers, Boolean, Constants */
26 --base0A: #c08b00; /* Yellow - Classes, Search Background */
27 --base0B: #22863a; /* Green - Strings, Success, Diff Inserted */
28 --base0C: #1b7c83; /* Cyan - Support, Regex, Escape Chars */
29 --base0D: #0066cc; /* Blue - Functions, Primary Accent */
30 --base0E: #6f42c1; /* Purple - Keywords, Storage */
31 --base0F: #8b4513; /* Brown - Deprecated */
32
33 /* Semantic Aliases */
34 --theme-bg: var(--base00);
35 --theme-bg-secondary: var(--base01);
36 --theme-bg-tertiary: var(--base02);
37 --theme-text: var(--base05);
38 --theme-text-secondary: var(--base04);
39 --theme-text-muted: var(--base03);
40 --theme-border: var(--base02);
41 --theme-accent: var(--base0D);
42 --theme-success: var(--base0B);
43 --theme-warning: var(--base0A);
44 --theme-danger: var(--base08);
45
46 /* Surface — floating panels on transparent/layered backgrounds */
47 --theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
48 --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
49
50 /* Typography - system-ui has 96%+ support (caniuse.com/font-family-system-ui) */
51 --theme-font-sans: system-ui, sans-serif;
52 --theme-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;
53}
54
55/* ========== Dark Mode (system preference) ========== */
56@media (prefers-color-scheme: dark) {
57 :root:not([data-theme="light"]) {
58 /* Base16 Grayscale - Dark */
59 --base00: #1c1c1e; /* Default Background */
60 --base01: #2c2c2e; /* Lighter Background */
61 --base02: #3a3a3c; /* Selection Background */
62 --base03: #636366; /* Comments, Invisibles */
63 --base04: #98989d; /* Dark Foreground */
64 --base05: #f5f5f7; /* Default Foreground */
65 --base06: #ffffff; /* Light Foreground */
66 --base07: #ffffff; /* Light Background */
67
68 /* Base16 Accent Colors - Dark (adjusted for dark bg) */
69 --base08: #ff453a; /* Red */
70 --base09: #ff9f0a; /* Orange */
71 --base0A: #ffd60a; /* Yellow */
72 --base0B: #30d158; /* Green */
73 --base0C: #64d2ff; /* Cyan */
74 --base0D: #0a84ff; /* Blue */
75 --base0E: #bf5af2; /* Purple */
76 --base0F: #ac8e68; /* Brown */
77
78 --theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
79 --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
80 }
81}
82
83/* ========== Forced Light Mode ========== */
84[data-theme="light"] {
85 --base00: #ffffff;
86 --base01: #f5f5f5;
87 --base02: #e0e0e0;
88 --base03: #b0b0b0;
89 --base04: #666666;
90 --base05: #333333;
91 --base06: #1a1a1a;
92 --base07: #0f0f0f;
93
94 --base08: #d73a49;
95 --base09: #e36209;
96 --base0A: #c08b00;
97 --base0B: #22863a;
98 --base0C: #1b7c83;
99 --base0D: #0066cc;
100 --base0E: #6f42c1;
101 --base0F: #8b4513;
102
103 --theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
104 --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
105}
106
107/* ========== Forced Dark Mode ========== */
108[data-theme="dark"] {
109 --base00: #1c1c1e;
110 --base01: #2c2c2e;
111 --base02: #3a3a3c;
112 --base03: #636366;
113 --base04: #98989d;
114 --base05: #f5f5f7;
115 --base06: #ffffff;
116 --base07: #ffffff;
117
118 --base08: #ff453a;
119 --base09: #ff9f0a;
120 --base0A: #ffd60a;
121 --base0B: #30d158;
122 --base0C: #64d2ff;
123 --base0D: #0a84ff;
124 --base0E: #bf5af2;
125 --base0F: #ac8e68;
126
127 --theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
128 --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
129}