A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Give the record JSON modal a fixed dark theme (theme-independent contrast)
author
Jeremy Herve
date
(Jun 11, 2026, 3:01 PM +0200)
commit
a92e8c07
a92e8c073c519ca9be41dd06fa4d6f93f11c5aa4
parent
45e365a9
45e365a998428a01fb2e0a7abee3636f33da9978
+25
-23
+25
-23
src/styles/record-json.css
+25
-23
src/styles/record-json.css
···
1
1
/**
2
2
* Reader "view record JSON" control + modal (`RecordJsonViewer`). A client:only React
3
3
* island, so Astro's component-scoped styles never reach its DOM — these rules are
4
-
* global (imported from `[rkey].astro`). The JSON `<pre>` reuses the dark code chrome,
5
-
* so the hljs token palette below mirrors the article's, scoped to `.record-json__code`.
4
+
* global (imported from `[rkey].astro`).
5
+
*
6
+
* The modal's code panel uses a FIXED dark editor palette (not the site/publication
7
+
* palette tokens). A publication theme recolours `--ink`/`--paper`/`--sun` etc., and a
8
+
* themed combination can collapse the JSON to near-invisible (e.g. dark `--sun-strong`
9
+
* keys on a dark-olive `--ink` background). This is a raw-record / developer view, so it
10
+
* stays a consistent, high-contrast code surface across every publication theme. The
11
+
* trigger button keeps the page tokens (`--muted`/`--sun`) — it lives inline in the
12
+
* eyebrow on the page surface, where those read fine.
6
13
*/
7
14
.record-json__trigger {
8
15
display: inline-flex;
···
50
57
border: 0;
51
58
border-radius: 50%;
52
59
background: rgba( 0, 0, 0, 0.35 );
53
-
color: var(--paper);
60
+
color: #d6d9e0;
54
61
font-size: 1.4rem;
55
62
line-height: 1;
56
63
cursor: pointer;
···
63
70
margin: 0;
64
71
overflow: auto;
65
72
padding: 1.5rem;
66
-
background: var(--ink);
67
-
color: var(--paper);
73
+
background: #1e1f26;
74
+
color: #d6d9e0;
68
75
font-family: var(--font-mono);
69
76
font-size: 0.85rem;
70
77
line-height: 1.5;
71
78
white-space: pre;
72
79
tab-size: 2;
73
80
}
74
-
/* hljs token palette — mirrors the article's (see [rkey].astro), scoped here so the
75
-
modal is self-contained and doesn't depend on .reader__article being an ancestor. */
76
-
.record-json__code .hljs-comment,
77
-
.record-json__code .hljs-quote {
78
-
color: var(--muted);
79
-
font-style: italic;
81
+
/* Fixed JSON token palette (theme-independent — see file header). highlight.js emits
82
+
only these classes for JSON: attr (keys), string, number, literal (true/false/null),
83
+
keyword, punctuation. The base `color` above covers structural braces/brackets. */
84
+
.record-json__code .hljs-attr {
85
+
color: #8fbcbb;
80
86
}
81
-
.record-json__code .hljs-keyword,
82
-
.record-json__code .hljs-literal,
83
-
.record-json__code .hljs-selector-tag {
84
-
color: var(--sun);
87
+
.record-json__code .hljs-string {
88
+
color: #a3be8c;
85
89
}
86
-
.record-json__code .hljs-string,
87
-
.record-json__code .hljs-attr,
88
-
.record-json__code .hljs-symbol {
89
-
color: var(--sun-strong);
90
+
.record-json__code .hljs-number {
91
+
color: #d08770;
90
92
}
91
-
.record-json__code .hljs-number,
92
-
.record-json__code .hljs-built_in {
93
-
color: #7fb2c9;
93
+
.record-json__code .hljs-literal,
94
+
.record-json__code .hljs-keyword {
95
+
color: #b48ead;
94
96
}
95
97
.record-json__code .hljs-punctuation {
96
-
color: var(--ink-soft);
98
+
color: #7b8294;
97
99
}