From fd8c5e60acf85d40cf9fb81c2b1c889d8094757d Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Wed, 22 Oct 2025 16:53:55 +0200 Subject: [PATCH] feat: use css media query for default theming --- .../playground/[id]/AppControls.svelte | 6 +++ apps/svelte.dev/src/routes/_home/Hero.svelte | 17 +++++++++ .../docs/[topic]/[...path]/+layout.svelte | 5 +++ .../src/routes/packages/PackageCard.svelte | 13 +++++++ .../routes/tutorial/[...slug]/Loading.svelte | 8 ++++ .../site-kit/src/lib/components/Text.svelte | 5 +++ .../src/lib/components/ThemeToggle.svelte | 5 +++ packages/site-kit/src/lib/nav/Nav.svelte | 11 ++++++ .../src/lib/styles/tokens/colours.css | 38 +++++++++++++++++++ .../src/lib/styles/tokens/typography.css | 6 +++ .../site-kit/src/lib/styles/utils/buttons.css | 26 +++++++++++++ 11 files changed, 140 insertions(+) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 87336ce167..b6c5de0b24 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -294,6 +294,12 @@ .icon:disabled { color: #ccc; + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + color: #555; + } + } + :root.dark & { color: #555; } diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte index 9d7b71d1fe..64dca8cb66 100644 --- a/apps/svelte.dev/src/routes/_home/Hero.svelte +++ b/apps/svelte.dev/src/routes/_home/Hero.svelte @@ -63,6 +63,23 @@ radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228)); } + :root:not(.light) &::before { + @media (prefers-color-scheme: dark) { + background: linear-gradient(to bottom, transparent, var(--sk-bg-1)), + radial-gradient( + 64.14% 72.25% at 47.58% 31.75%, + hsl(209deg 6% 47% / 52%) 0%, + hsla(0, 0%, 100%, 0) 100% + ), + linear-gradient( + 92.4deg, + hsl(210, 7%, 16%) 14.67%, + hsl(0deg 0% 0% / 48%) 54.37%, + hsla(207, 22%, 13%, 0.62) 92.49% + ), + linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%)); + } + } :root.dark &::before { background: linear-gradient(to bottom, transparent, var(--sk-bg-1)), radial-gradient( diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte index 2390db9e54..a11cc0c4e1 100644 --- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte +++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte @@ -42,6 +42,11 @@ .toc-container { background: var(--sk-bg-2); display: none; + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + background: var(--sk-bg-0); + } + } :root.dark & { background: var(--sk-bg-0); diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index f69a267912..a106b1935d 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -146,6 +146,12 @@ min-height: 16em; + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + background-color: var(--sk-bg-3); + } + } + :root.dark & { background-color: var(--sk-bg-3); } @@ -233,6 +239,13 @@ width: 3rem; height: 3rem; + :root:not(.light) &[alt='drizzle logo'], + :root:not(.light) &[alt='paraglide logo'] { + @media (prefers-color-scheme: dark) { + filter: invert(1); + } + } + :root.dark &[alt='drizzle logo'], :root.dark &[alt='paraglide logo'] { filter: invert(1); diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte index f81adcef55..0cd1a396e0 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte @@ -181,6 +181,14 @@ height: 10rem; } + @media (prefers-color-scheme: dark) { + .loading { + --faded: #444; + --progress: #555; + --cutout: var(--sk-bg-2); + } + } + :global(.dark) .loading { --faded: #444; --progress: #555; diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index d3b691e701..37339d3064 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -299,6 +299,11 @@ &.remove { --color: rgba(255, 0, 0, 0.1); + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + --color: rgba(255, 0, 0, 0.27); + } + } :root.dark & { --color: rgba(255, 0, 0, 0.27); } diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte index 236af7fbd6..1882e40cf2 100644 --- a/packages/site-kit/src/lib/components/ThemeToggle.svelte +++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte @@ -41,6 +41,11 @@ .icon { mask-image: url(icons/theme-dark); mask-size: 2rem; + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + mask-image: url(icons/theme-light); + } + } :root.dark & { mask-image: url(icons/theme-light); diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index d6dd5b5e0f..098c4de344 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -211,6 +211,11 @@ Top navigation bar for the application. It provides a slot for the left side, th background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent); } + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + background-color: var(--sk-bg-3); + } + } :root.dark & { background-color: var(--sk-bg-3); } @@ -342,6 +347,12 @@ Top navigation bar for the application. It provides a slot for the left side, th auto; padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem); + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + background-image: url(../branding/svelte-dark.svg); + } + } + :root.dark & { background-image: url(../branding/svelte-dark.svg); } diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 1726138ff3..bbd1af71ec 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -43,6 +43,44 @@ /* Misc */ --sk-scrollbar: rgba(0, 0, 0, 0.3); --sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1)); + + &:not(.light) { + @media (prefers-color-scheme: dark) { + color-scheme: dark; + + --sk-bg-hue: 220; + + /* Foreground colours */ + --sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%); + --sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%); + --sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%); + --sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%); + --sk-fg-accent: hsl(12, 94%, 62%); + + /* Background colours */ + --sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */ + --sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%); + --sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%); + --sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%); + --sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%); + --sk-bg-accent: hsl(15, 100%, 35%); + --sk-bg-highlight: hsl(60, 100%, 15%); + + /* Border colour */ + --sk-border: hsl(var(--sk-bg-hue), 15%, 22%); + + /* Syntax highlighting */ + --shiki-color-text: hsl(45, 7%, 75%); + --shiki-token-comment: hsl(0, 0%, 55%); + --shiki-token-keyword: hsl(204, 88%, 65%); + --shiki-token-function: hsl(19, 67%, 75%); + --shiki-token-string: hsl(41, 37%, 68%); + + /* Misc */ + --sk-scrollbar: rgba(255, 255, 255, 0.3); + --sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5)); + } + } } :root.dark { diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css index d276d5fc3b..3c8b9d9450 100644 --- a/packages/site-kit/src/lib/styles/tokens/typography.css +++ b/packages/site-kit/src/lib/styles/tokens/typography.css @@ -49,6 +49,12 @@ } } + &:not(.light) { + @media (prefers-color-scheme: dark) { + -webkit-font-smoothing: antialiased; + } + } + &.dark { -webkit-font-smoothing: antialiased; } diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index a463dd84d3..d0ca6e367e 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -13,6 +13,21 @@ --sk-raised-width: 1px 2px 2px 1px; --sk-raised-active-width: 2px 1px 1px 2px; + &:not(.light) { + @media (prefers-color-scheme: dark) { + --sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%); + --sk-raised-shadow: var(--sk-bg-3); + + /* raised buttons */ + --sk-raised-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow) + var(--sk-raised-border); + --sk-raised-hover-color: var(--sk-raised-highlight) var(--sk-raised-shadow) + var(--sk-raised-shadow) var(--sk-raised-highlight); + --sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-highlight) + var(--sk-raised-highlight) var(--sk-raised-shadow); + } + } + &.dark { --sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%); --sk-raised-shadow: var(--sk-bg-3); @@ -42,6 +57,17 @@ background: var(--sk-bg-accent); color: white; + :root:not(.light) & { + @media (prefers-color-scheme: dark) { + --sk-raised-color: hsla(12, 93%, 60%) hsla(12, 93%, 30%) hsla(12, 93%, 30%) + hsla(12, 93%, 60%); + --sk-raised-hover-color: hsla(12, 93%, 65%) hsla(12, 93%, 27%) hsla(12, 93%, 27%) + hsla(12, 93%, 65%); + --sk-raised-active-color: hsla(12, 93%, 25%) hsla(12, 93%, 70%) hsla(12, 93%, 70%) + hsla(12, 93%, 25%); + } + } + :root.dark & { --sk-raised-color: hsla(12, 93%, 60%) hsla(12, 93%, 30%) hsla(12, 93%, 30%) hsla(12, 93%, 60%); --sk-raised-hover-color: hsla(12, 93%, 65%) hsla(12, 93%, 27%) hsla(12, 93%, 27%)