A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
move out css to be in its own file, better caching, use bluesky appview, fix npm package
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}