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: #ffffff;
11 --atproto-color-bg-elevated: #f8fafc;
12 --atproto-color-bg-secondary: #f1f5f9;
13 --atproto-color-text: #0f172a;
14 --atproto-color-text-secondary: #475569;
15 --atproto-color-text-muted: #64748b;
16 --atproto-color-border: #e2e8f0;
17 --atproto-color-border-subtle: #cbd5e1;
18 --atproto-color-link: #2563eb;
19 --atproto-color-link-hover: #1d4ed8;
20 --atproto-color-error: #dc2626;
21 --atproto-color-button-bg: #f1f5f9;
22 --atproto-color-button-hover: #e2e8f0;
23 --atproto-color-button-text: #0f172a;
24 --atproto-color-code-bg: #f1f5f9;
25 --atproto-color-code-border: #e2e8f0;
26 --atproto-color-blockquote-border: #cbd5e1;
27 --atproto-color-blockquote-bg: #f8fafc;
28 --atproto-color-hr: #e2e8f0;
29 --atproto-color-image-bg: #f1f5f9;
30 --atproto-color-highlight: #fef08a;
31}
32
33/* Dark theme - can be applied via [data-theme="dark"] or .dark class */
34[data-theme="dark"],
35.dark {
36 --atproto-color-bg: #0f172a;
37 --atproto-color-bg-elevated: #1e293b;
38 --atproto-color-bg-secondary: #0b1120;
39 --atproto-color-text: #e2e8f0;
40 --atproto-color-text-secondary: #94a3b8;
41 --atproto-color-text-muted: #64748b;
42 --atproto-color-border: #1e293b;
43 --atproto-color-border-subtle: #334155;
44 --atproto-color-link: #60a5fa;
45 --atproto-color-link-hover: #93c5fd;
46 --atproto-color-error: #ef4444;
47 --atproto-color-button-bg: #1e293b;
48 --atproto-color-button-hover: #334155;
49 --atproto-color-button-text: #e2e8f0;
50 --atproto-color-code-bg: #0b1120;
51 --atproto-color-code-border: #1e293b;
52 --atproto-color-blockquote-border: #334155;
53 --atproto-color-blockquote-bg: #1e293b;
54 --atproto-color-hr: #334155;
55 --atproto-color-image-bg: #1e293b;
56 --atproto-color-highlight: #854d0e;
57}
58
59/* Support for system preference based theming */
60@media (prefers-color-scheme: dark) {
61 :root:not([data-theme]),
62 :root[data-theme="system"] {
63 --atproto-color-bg: #0f172a;
64 --atproto-color-bg-elevated: #1e293b;
65 --atproto-color-bg-secondary: #0b1120;
66 --atproto-color-text: #e2e8f0;
67 --atproto-color-text-secondary: #94a3b8;
68 --atproto-color-text-muted: #64748b;
69 --atproto-color-border: #1e293b;
70 --atproto-color-border-subtle: #334155;
71 --atproto-color-link: #60a5fa;
72 --atproto-color-link-hover: #93c5fd;
73 --atproto-color-error: #ef4444;
74 --atproto-color-button-bg: #1e293b;
75 --atproto-color-button-hover: #334155;
76 --atproto-color-button-text: #e2e8f0;
77 --atproto-color-code-bg: #0b1120;
78 --atproto-color-code-border: #1e293b;
79 --atproto-color-blockquote-border: #334155;
80 --atproto-color-blockquote-bg: #1e293b;
81 --atproto-color-hr: #334155;
82 --atproto-color-image-bg: #1e293b;
83 --atproto-color-highlight: #854d0e;
84 }
85}