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 * Demo app styles - separate from atproto-ui component styles
3 * This demonstrates that atproto-ui components work well within
4 * apps that have their own theming system.
5 */
6
7/* Root styles for the demo app */
8body {
9 margin: 0;
10 padding: 0;
11 background: var(--demo-bg);
12 color: var(--demo-text);
13 transition: background-color 200ms ease, color 200ms ease;
14}
15
16:root {
17 /* Light theme for demo app */
18 --demo-bg: #eeeeee;
19 --demo-text: #1a1a1a;
20 --demo-text-secondary: #666;
21 --demo-border: #ddd;
22 --demo-input-bg: #fff;
23 --demo-button-bg: #0066cc;
24 --demo-button-text: #fff;
25 --demo-code-bg: #f5f5f5;
26 --demo-code-border: #e0e0e0;
27 --demo-hr: #e0e0e0;
28}
29
30/* Dark theme for demo app */
31[data-theme="dark"] {
32 --demo-bg: #1a1a1a;
33 --demo-text: #e0e0e0;
34 --demo-text-secondary: #999;
35 --demo-border: #444;
36 --demo-input-bg: #2a2a2a;
37 --demo-button-bg: #0066cc;
38 --demo-button-text: #fff;
39 --demo-code-bg: #2a2a2a;
40 --demo-code-border: #444;
41 --demo-hr: #444;
42}
43
44/* System preference dark mode */
45@media (prefers-color-scheme: dark) {
46 :root:not([data-theme]),
47 :root[data-theme="system"] {
48 --demo-bg: #1a1a1a;
49 --demo-text: #e0e0e0;
50 --demo-text-secondary: #999;
51 --demo-border: #444;
52 --demo-input-bg: #2a2a2a;
53 --demo-button-bg: #0066cc;
54 --demo-button-text: #fff;
55 --demo-code-bg: #2a2a2a;
56 --demo-code-border: #444;
57 --demo-hr: #444;
58 }
59}