A social RSS reader built on the AT Protocol.
glean.at
glean
atproto
atmosphere
rss
feed
social
app
Refine dark theme color palette and shadows
+20
-20
+7
-7
docs/design.md
+7
-7
docs/design.md
···
30
30
31
31
| Token | Value | Use |
32
32
| ------------------ | ------------------------ | ----------------------------- |
33
-
| `--spot-bg` | `#0f1f1a` | Page background, sidebar |
33
+
| `--spot-bg` | `#0a1814` | Page background, sidebar |
34
34
| `--spot-surface` | `#152b24` | Card background |
35
-
| `--spot-hover` | `#1a362e` | Hover state, input background |
36
-
| `--spot-text` | `#ffffff` | Primary text |
37
-
| `--spot-secondary` | `rgba(255,255,255,0.70)` | Secondary/metadata text |
38
-
| `--spot-body` | `rgba(255,255,255,0.87)` | Body copy, article content |
39
-
| `--spot-muted` | `rgba(255,255,255,0.25)` | Disabled/tertiary text |
40
-
| `--spot-divider` | `rgba(255,255,255,0.08)` | Borders, dividers |
35
+
| `--spot-hover` | `#1e3c33` | Hover state, input background |
36
+
| `--spot-text` | `#f2f2f2` | Primary text |
37
+
| `--spot-secondary` | `rgba(255,255,255,0.78)` | Secondary/metadata text |
38
+
| `--spot-body` | `rgba(255,255,255,0.92)` | Body copy, article content |
39
+
| `--spot-muted` | `rgba(255,255,255,0.42)` | Disabled/tertiary text |
40
+
| `--spot-divider` | `rgba(255,255,255,0.12)` | Borders, dividers |
41
41
| `--spot-outline` | `rgba(255,255,255,0.20)` | Button borders, input borders |
42
42
43
43
### Light Theme
+13
-13
static/input.css
+13
-13
static/input.css
···
4
4
5
5
@layer base {
6
6
:root {
7
-
--spot-bg: #0f1f1a;
7
+
--spot-bg: #0a1814;
8
8
--spot-surface: #152b24;
9
-
--spot-hover: #1a362e;
10
-
--spot-hover-50: rgba(26,54,46,0.5);
11
-
--spot-text: #ffffff;
12
-
--spot-secondary: rgba(255,255,255,0.70);
13
-
--spot-body: rgba(255,255,255,0.87);
14
-
--spot-muted: rgba(255,255,255,0.25);
15
-
--spot-divider: rgba(255,255,255,0.08);
16
-
--spot-divider-30: rgba(255,255,255,0.12);
17
-
--spot-outline: rgba(255,255,255,0.20);
18
-
--spot-placeholder: rgba(255,255,255,0.30);
9
+
--spot-hover: #1e3c33;
10
+
--spot-hover-50: rgba(30,60,51,0.5);
11
+
--spot-text: #f2f2f2;
12
+
--spot-secondary: rgba(255,255,255,0.78);
13
+
--spot-body: rgba(255,255,255,0.92);
14
+
--spot-muted: rgba(255,255,255,0.42);
15
+
--spot-divider: rgba(255,255,255,0.12);
16
+
--spot-divider-30: rgba(255,255,255,0.16);
17
+
--spot-outline: rgba(255,255,255,0.30);
18
+
--spot-placeholder: rgba(255,255,255,0.45);
19
19
--spot-active-bg: #ffffff;
20
20
--spot-active-text: #1E3932;
21
-
--spot-shadow: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);
22
-
--spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14);
21
+
--spot-shadow: 0 0 0.5px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.30);
22
+
--spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.30), 0 8px 12px rgba(0,0,0,0.20);
23
23
}
24
24
25
25
[data-theme="light"] {