| @@ -23,6 +23,25 @@ · 22 unmodified lines |
| 23 | 23 | --color-rule: rgba(255, 255, 255, 0.06); |
| 24 | 24 | } |
| 25 | 25 | |
| 26 | +@media (prefers-color-scheme: light) { |
| 27 | + :root { |
| 28 | + --color-surface: #fafbfb; |
| 29 | + --color-surface-raised: #f0f2f1; |
| 30 | + --color-surface-overlay: #e5e8e7; |
| 31 | + |
| 32 | + --color-ink: #1a1f1d; |
| 33 | + --color-ink-muted: #5a6560; |
| 34 | + --color-ink-faint: #9ca5a0; |
| 35 | + |
| 36 | + --color-teal: #0d9b7a; |
| 37 | + --color-teal-dim: #0a8068; |
| 38 | + --color-teal-faint: rgba(13, 155, 122, 0.06); |
| 39 | + --color-teal-glow: rgba(13, 155, 122, 0.10); |
| 40 | + |
| 41 | + --color-rule: rgba(0, 0, 0, 0.08); |
| 42 | + } |
| 43 | +} |
| 44 | + |
| 26 | 45 | html { |
| 27 | 46 | scroll-behavior: smooth; |
| 28 | 47 | } |
| @@ -32,6 +51,14 @@ body { · 3 unmodified lines |
| 32 | 51 | url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); |
| 33 | 52 | background-repeat: repeat; |
| 34 | 53 | background-size: 256px 256px; |
| 54 | + color-scheme: light dark; |
| 55 | +} |
| 56 | + |
| 57 | +@media (prefers-color-scheme: light) { |
| 58 | + body { |
| 59 | + background-image: |
| 60 | + url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E"); |
| 61 | + } |
| 35 | 62 | } |
| 36 | 63 | |
| 37 | 64 | /* Staggered fade-in for page load */ |
| @@ -82,3 +109,12 @@ body { · 44 unmodified lines |
| 82 | 109 | background: rgba(255,255,255,0.1); |
| 83 | 110 | border-radius: 2px; |
| 84 | 111 | } |
| 112 | + |
| 113 | +@media (prefers-color-scheme: light) { |
| 114 | + .scrollbar-thin { |
| 115 | + scrollbar-color: rgba(0,0,0,0.1) transparent; |
| 116 | + } |
| 117 | + .scrollbar-thin::-webkit-scrollbar-thumb { |
| 118 | + background: rgba(0,0,0,0.12); |
| 119 | + } |
| 120 | +} |