A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1:root {
2 --hljs-foreground: #1f2328;
3 --hljs-background: transparent;
4 --hljs-comment: #6e7781;
5 --hljs-keyword: #cf222e;
6 --hljs-attr: #0550ae;
7 --hljs-string: #0a3069;
8 --hljs-title: #24292f;
9 --hljs-number: #953800;
10 --hljs-addition: #116329;
11 --hljs-deletion: #cf222e;
12}
13
14:root[data-color-scheme='light'],
15[data-color-scheme='light'] {
16 --hljs-foreground: #1f2328;
17 --hljs-background: rgba(15, 23, 42, 0.03);
18 --hljs-comment: #6e7781;
19 --hljs-keyword: #0f59d1;
20 --hljs-attr: #1d4ed8;
21 --hljs-string: #0f766e;
22 --hljs-title: #1f2937;
23 --hljs-number: #b45309;
24 --hljs-addition: #15803d;
25 --hljs-deletion: #dc2626;
26}
27
28:root[data-color-scheme='dark'],
29[data-color-scheme='dark'] {
30 --hljs-foreground: #c9d1d9;
31 --hljs-background: rgba(8, 16, 32, 0.55);
32 --hljs-comment: #8b949e;
33 --hljs-keyword: #ff7b72;
34 --hljs-attr: #79c0ff;
35 --hljs-string: #a5d6ff;
36 --hljs-title: #d2a8ff;
37 --hljs-number: #ffa657;
38 --hljs-addition: #1a7f37;
39 --hljs-deletion: #ff7b72;
40}
41
42:root:not([data-color-scheme]),
43[data-color-scheme]:not([data-color-scheme='light']):not([data-color-scheme='dark']) {
44 --hljs-foreground: #1f2328;
45 --hljs-background: transparent;
46 --hljs-comment: #6e7781;
47 --hljs-keyword: #cf222e;
48 --hljs-attr: #0550ae;
49 --hljs-string: #0a3069;
50 --hljs-title: #24292f;
51 --hljs-number: #953800;
52 --hljs-addition: #116329;
53 --hljs-deletion: #cf222e;
54}
55
56.hljs {
57 display: block;
58 overflow-x: auto;
59 padding: 0;
60 background: var(--hljs-background);
61 color: var(--hljs-foreground);
62}
63
64.hljs-comment,
65.hljs-quote {
66 color: var(--hljs-comment);
67 font-style: italic;
68}
69
70.hljs-keyword,
71.hljs-selector-tag,
72.hljs-literal {
73 color: var(--hljs-keyword);
74}
75
76.hljs-attr,
77.hljs-attribute,
78.hljs-symbol,
79.hljs-bullet,
80.hljs-built_in,
81.hljs-link,
82.hljs-meta,
83.hljs-selector-attr,
84.hljs-selector-pseudo {
85 color: var(--hljs-attr);
86}
87
88.hljs-number,
89.hljs-variable,
90.hljs-template-variable,
91.hljs-title,
92.hljs-name,
93.hljs-tag {
94 color: var(--hljs-number);
95}
96
97.hljs-string,
98.hljs-doctag,
99.hljs-regexp,
100.hljs-addition {
101 color: var(--hljs-string);
102}
103
104.hljs-type,
105.hljs-class .hljs-title {
106 color: var(--hljs-title);
107 font-weight: 600;
108}
109
110.hljs-deletion {
111 color: var(--hljs-deletion);
112}
113
114.hljs-emphasis {
115 font-style: italic;
116}
117
118.hljs-strong {
119 font-weight: 600;
120}