From 99f396a9bc31dc99f3d4c0dde11b3aaacf2fd461 Mon Sep 17 00:00:00 2001
From: Natalia Venditto <nvenditto@adobe.com>
Date: Mon, 13 Jul 2026 11:09:28 +0200
Subject: [PATCH] fix(skills): pin Skills Editor to light mode

- force ':root { color-scheme: light }' in skills.html so all light-dark()
  Spectrum 2 variables resolve to their light value regardless of OS setting
- pin CodeMirror viewer/editor to githubLight and drop the prefers-color-scheme
  branch so the markdown panes stop following the OS scheme

Temporary until the rest of the UI supports dark mode.
---
 blocks/skills/skills.html                |  9 +++++++++
 blocks/skills/utils/codemirror-loader.js | 21 +++++++++------------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/blocks/skills/skills.html b/blocks/skills/skills.html
index 329d3ef..85e6ada 100644
--- a/blocks/skills/skills.html
+++ b/blocks/skills/skills.html
@@ -15,6 +15,15 @@
     <link rel="stylesheet" href="https://use.typekit.net/pfo1jpc.css" />
     <script src="/blocks/skills/skills.js" type="module"></script>
     <style>
+      /*
+       * Pin the Skills Editor to light mode until the rest of the UI supports
+       * dark. da.live styles.css sets ':root { color-scheme: light dark }', which
+       * makes every light-dark() S2 variable follow the OS. Forcing 'light' here
+       * (unlayered and after the external stylesheet, so it wins) resolves all of
+       * them to their light value; color-scheme is inherited, so it also reaches
+       * the editor's shadow DOM. Remove once dark mode is fully supported.
+       */
+      :root { color-scheme: light; }
       body { margin: 0; font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; }
       nx-skills-editor { display: block; min-height: 100vh; }
     </style>
diff --git a/blocks/skills/utils/codemirror-loader.js b/blocks/skills/utils/codemirror-loader.js
index ebf8a50..66e686b 100644
--- a/blocks/skills/utils/codemirror-loader.js
+++ b/blocks/skills/utils/codemirror-loader.js
@@ -20,24 +20,21 @@ function loadCM() {
   return cmPromise;
 }
 
-function prefersDark() {
-  return window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-}
-
 /**
  * Creates a read-only CodeMirror markdown viewer inside `container`.
- * Picks github-light or github-dark based on the system color scheme.
- * Returns the EditorView instance so the caller can destroy it later.
+ * Pinned to github-light to match the Skills Editor, which is locked to light
+ * mode until the UI fully supports dark. Intentionally does not read
+ * prefers-color-scheme. Returns the EditorView instance so the caller can
+ * destroy it later.
  */
 export async function createReadOnlyViewer(container, content) {
-  const { EditorView, basicSetup, markdown, githubLight, githubDark } = await loadCM();
-  const theme = prefersDark() ? githubDark : githubLight;
+  const { EditorView, basicSetup, markdown, githubLight } = await loadCM();
   return new EditorView({
     doc: content,
     extensions: [
       basicSetup,
       markdown(),
-      theme,
+      githubLight,
       EditorView.editable.of(false),
       EditorView.lineWrapping,
     ],
@@ -48,15 +45,15 @@ export async function createReadOnlyViewer(container, content) {
 /**
  * Creates an editable CodeMirror markdown editor inside `container`.
  * Calls `onChange(text)` on every document change so the host can sync state.
+ * Pinned to github-light for the same reason as createReadOnlyViewer.
  * Returns the EditorView instance.
  */
 export async function createEditor(container, content, onChange) {
-  const { EditorView, basicSetup, markdown, githubLight, githubDark } = await loadCM();
-  const theme = prefersDark() ? githubDark : githubLight;
+  const { EditorView, basicSetup, markdown, githubLight } = await loadCM();
   const extensions = [
     basicSetup,
     markdown(),
-    theme,
+    githubLight,
     EditorView.lineWrapping,
   ];
   if (onChange) {