A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
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}