A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1/**
2 * Global CSS variables for AtProto UI components
3 *
4 * These variables can be customized in your application by setting them
5 * at the :root level or within specific components.
6 */
7
8:root {
9 /* Light theme colors (default) */
10 --atproto-color-bg: #f5f7f9;
11 --atproto-color-bg-elevated: #f8f9fb;
12 --atproto-color-bg-secondary: #edf1f5;
13 --atproto-color-text: #0f172a;
14 --atproto-color-text-secondary: #475569;
15 --atproto-color-text-muted: #64748b;
16 --atproto-color-border: #d6dce3;
17 --atproto-color-border-subtle: #c1cad4;
18 --atproto-color-border-hover: #94a3b8;
19 --atproto-color-link: #2563eb;
20 --atproto-color-link-hover: #1d4ed8;
21 --atproto-color-error: #dc2626;
22 --atproto-color-primary: #2563eb;
23 --atproto-color-button-bg: #edf1f5;
24 --atproto-color-button-hover: #e3e9ef;
25 --atproto-color-button-text: #0f172a;
26 --atproto-color-bg-hover: #f0f3f6;
27 --atproto-color-bg-pressed: #e3e9ef;
28 --atproto-color-code-bg: #edf1f5;
29 --atproto-color-code-border: #d6dce3;
30 --atproto-color-blockquote-border: #c1cad4;
31 --atproto-color-blockquote-bg: #f0f3f6;
32 --atproto-color-hr: #d6dce3;
33 --atproto-color-image-bg: #edf1f5;
34 --atproto-color-highlight: #fef08a;
35}
36
37/* Dark theme - can be applied via [data-theme="dark"] or .dark class */
38[data-theme="dark"],
39.dark {
40 --atproto-color-bg: #141b22;
41 --atproto-color-bg-elevated: #1a222a;
42 --atproto-color-bg-secondary: #0f161c;
43 --atproto-color-text: #fafafa;
44 --atproto-color-text-secondary: #a1a1aa;
45 --atproto-color-text-muted: #71717a;
46 --atproto-color-border: #1f2933;
47 --atproto-color-border-subtle: #2d3748;
48 --atproto-color-border-hover: #4a5568;
49 --atproto-color-link: #60a5fa;
50 --atproto-color-link-hover: #93c5fd;
51 --atproto-color-error: #ef4444;
52 --atproto-color-primary: #3b82f6;
53 --atproto-color-button-bg: #1a222a;
54 --atproto-color-button-hover: #243039;
55 --atproto-color-button-text: #fafafa;
56 --atproto-color-bg-hover: #1a222a;
57 --atproto-color-bg-pressed: #243039;
58 --atproto-color-code-bg: #0f161c;
59 --atproto-color-code-border: #1f2933;
60 --atproto-color-blockquote-border: #2d3748;
61 --atproto-color-blockquote-bg: #1a222a;
62 --atproto-color-hr: #243039;
63 --atproto-color-image-bg: #1a222a;
64 --atproto-color-highlight: #854d0e;
65}
66
67/* Support for system preference based theming */
68@media (prefers-color-scheme: dark) {
69 :root:not([data-theme]),
70 :root[data-theme="system"] {
71 --atproto-color-bg: #141b22;
72 --atproto-color-bg-elevated: #1a222a;
73 --atproto-color-bg-secondary: #0f161c;
74 --atproto-color-text: #fafafa;
75 --atproto-color-text-secondary: #a1a1aa;
76 --atproto-color-text-muted: #71717a;
77 --atproto-color-border: #1f2933;
78 --atproto-color-border-subtle: #2d3748;
79 --atproto-color-border-hover: #4a5568;
80 --atproto-color-link: #60a5fa;
81 --atproto-color-link-hover: #93c5fd;
82 --atproto-color-error: #ef4444;
83 --atproto-color-primary: #3b82f6;
84 --atproto-color-button-bg: #1a222a;
85 --atproto-color-button-hover: #243039;
86 --atproto-color-button-text: #fafafa;
87 --atproto-color-bg-hover: #1a222a;
88 --atproto-color-bg-pressed: #243039;
89 --atproto-color-code-bg: #0f161c;
90 --atproto-color-code-border: #1f2933;
91 --atproto-color-blockquote-border: #2d3748;
92 --atproto-color-blockquote-bg: #1a222a;
93 --atproto-color-hr: #243039;
94 --atproto-color-image-bg: #1a222a;
95 --atproto-color-highlight: #854d0e;
96 }
97}