fix(skills): pin Skills Editor to light mode

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>

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) {