From cbca93ec1e8b60b812643acaf245b5835c63503f Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Tue, 1 Sep 2026 12:05:06 -0700
Subject: [PATCH 1/4] [site] Replace theme menu with synced toggle
---
packages/lit-dev-content/rollup.config.js | 3 +-
.../site/_includes/default.html | 2 +-
.../site/_includes/header.html | 7 +-
.../site/playground/index.html | 9 +-
.../src/components/litdev-drawer.ts | 6 +-
.../src/components/litdev-playground-page.ts | 31 +-
.../components/litdev-ripple-icon-button.ts | 77 +++--
.../src/components/litdev-tutorial.ts | 8 +-
.../src/components/theme-switcher.ts | 306 +++---------------
.../src/global/apply-saved-theme.ts | 21 --
.../src/global/initialize-theme.ts | 10 +
.../src/global/mobile-drawer.ts | 28 +-
.../src/global/theme-worker.ts | 76 +++++
packages/lit-dev-content/src/global/theme.ts | 162 ++++++++--
.../src/icons/auto-mode-icon.ts | 24 --
.../lit-dev-content/src/icons/check-icon.ts | 19 --
.../lit-dev-tests/src/playwright/home.spec.ts | 130 ++++++++
.../src/playwright/playground.spec.ts | 27 ++
...ntroToLitTutorialFirstStep-dark-darwin.png | Bin 239516 -> 240307 bytes
.../introToLitTutorialFirstStep-darwin.png | Bin 239208 -> 240289 bytes
.../src/playwright/tutorials.spec.ts | 32 ++
21 files changed, 574 insertions(+), 404 deletions(-)
delete mode 100644 packages/lit-dev-content/src/global/apply-saved-theme.ts
create mode 100644 packages/lit-dev-content/src/global/initialize-theme.ts
create mode 100644 packages/lit-dev-content/src/global/theme-worker.ts
delete mode 100644 packages/lit-dev-content/src/icons/auto-mode-icon.ts
delete mode 100644 packages/lit-dev-content/src/icons/check-icon.ts
diff --git a/packages/lit-dev-content/rollup.config.js b/packages/lit-dev-content/rollup.config.js
index a5a1f3094..b90fcc7b1 100644
--- a/packages/lit-dev-content/rollup.config.js
+++ b/packages/lit-dev-content/rollup.config.js
@@ -35,6 +35,7 @@ export default [
// lit-hydrate-support MUST be loaded first to make sure lit hydration
// helpers are bundled before LitElement attempts to use hydration support
'lib/global/lit-hydrate-support.js',
+ 'lib/global/theme-worker.js',
'lib/components/copy-button.js',
'lib/components/litdev-banner.js',
'lib/components/litdev-drawer.js',
@@ -151,7 +152,7 @@ export default [
// the asynchronously-loaded module bundles above.
{
input: [
- 'lib/global/apply-saved-theme.js',
+ 'lib/global/initialize-theme.js',
'lib/global/apply-mods.js',
'lib/global/initialize-typescript-mode.js',
'lib/global/mobile-drawer.js',
diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html
index 2dd961279..8503731fd 100644
--- a/packages/lit-dev-content/site/_includes/default.html
+++ b/packages/lit-dev-content/site/_includes/default.html
@@ -15,7 +15,7 @@
- {% inlinejs "global/apply-saved-theme.js" %}
+ {% inlinejs "global/initialize-theme.js" %}
{% inlinecss "colors.css" %}
{% inlinecss "global.css" %}
diff --git a/packages/lit-dev-content/site/_includes/header.html b/packages/lit-dev-content/site/_includes/header.html
index da634b79f..4c66276ab 100644
--- a/packages/lit-dev-content/site/_includes/header.html
+++ b/packages/lit-dev-content/site/_includes/header.html
@@ -17,9 +17,12 @@
diff --git a/packages/lit-dev-content/site/playground/index.html b/packages/lit-dev-content/site/playground/index.html
index 1566310ef..7f32d3eef 100644
--- a/packages/lit-dev-content/site/playground/index.html
+++ b/packages/lit-dev-content/site/playground/index.html
@@ -55,21 +55,22 @@
{{ section.name }}
diff --git a/packages/lit-dev-content/src/components/litdev-drawer.ts b/packages/lit-dev-content/src/components/litdev-drawer.ts
index 34fcc1554..f98689399 100644
--- a/packages/lit-dev-content/src/components/litdev-drawer.ts
+++ b/packages/lit-dev-content/src/components/litdev-drawer.ts
@@ -22,6 +22,7 @@ const closeIcon = html`