History

Add light/dark system theme support to marketing site

Rhys Sullivan committed 7 months ago

Commit ec457ab1 parent e6861292 files · +37 −0Browse files

Unified · Split

2 files
  1. apps/marketing/src/layouts/Layout.astro +1 −0
  2. apps/marketing/src/styles/global.css +36 −0
apps/marketing/src/layouts/Layout.astro+1−0
@@ -17,6 +17,7 @@ const { · 16 unmodified lines
17 <meta charset="utf-8" />17 <meta charset="utf-8" />
18 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />18 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19 <meta name="viewport" content="width=device-width, initial-scale=1" />19 <meta name="viewport" content="width=device-width, initial-scale=1" />
20 <meta name="color-scheme" content="light dark" />
20 <meta name="description" content={description} />21 <meta name="description" content={description} />
21 <meta property="og:title" content={title} />22 <meta property="og:title" content={title} />
22 <meta property="og:description" content={description} />23 <meta property="og:description" content={description} />
apps/marketing/src/styles/global.css+36−0
@@ -23,6 +23,25 @@ · 22 unmodified lines
23 --color-rule: rgba(255, 255, 255, 0.06);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
26html {45html {
27 scroll-behavior: smooth;46 scroll-behavior: smooth;
28}47}
@@ -32,6 +51,14 @@ body { · 3 unmodified lines
32 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");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 background-repeat: repeat;52 background-repeat: repeat;
34 background-size: 256px 256px;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/* Staggered fade-in for page load */64/* Staggered fade-in for page load */
@@ -82,3 +109,12 @@ body { · 44 unmodified lines
82 background: rgba(255,255,255,0.1);109 background: rgba(255,255,255,0.1);
83 border-radius: 2px;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}