feat(playground): add light mode toggle and announcement toast (#1250)

* feat(playground): add light mode toggle and announcement toast

Add a dark/light playground theme with default dark and persisted theme selection.

Wire runtime CodeMirror theme reconfiguration, theme-aware JS output highlighting, and settings controls.

Add a new light-mode toast with dismiss and try-it-now actions, auto-hide timeout, and session-based seen tracking.

* fix(playground): improve light mode contrast and cover theme toggle flow

Improve light-mode readability for the Auto-run control and center divider styling.

Add Cypress coverage for toast-driven light mode switch and switching back to dark in settings.

Co-authored-by: Codex <codex@openai.com>

* chore: remove temporary playground light mode plan doc

* change wording

* adjust colors a bit

* update cypress test

* fix failing cypress tests

* pr feedback

---------

Co-authored-by: Codex <codex@openai.com>

Author: jderochervlk

cypress/support/e2e.js

@@ -7,11 +7,19 @@ const knownHydrationErrors = [
   /Minified React error #425\b/,
 ];
 
+const knownPlaygroundBootstrapErrors = [
+  /Sys_error.*file already exists/i,
+  /\/static\/Belt\.cmi\s*:\s*file already exists/i,
+];
+
 Cypress.on("uncaught:exception", (err) => {
   const message = err && err.message ? err.message : "";
   const isKnownHydrationError = knownHydrationErrors.some((pattern) =>
     pattern.test(message),
   );
+  const isKnownPlaygroundBootstrapError = knownPlaygroundBootstrapErrors.some(
+    (pattern) => pattern.test(message),
+  );
 
   if (isKnownHydrationError) {
     console.warn("Suppressing known React hydration exception in Cypress:", {
@@ -20,4 +28,15 @@ Cypress.on("uncaught:exception", (err) => {
     });
     return false;
   }
+
+  if (isKnownPlaygroundBootstrapError) {
+    console.warn(
+      "Suppressing known Playground bootstrap exception in Cypress:",
+      {
+        message,
+        error: err,
+      },
+    );
+    return false;
+  }
 });

e2e/Playground.cy.res

@@ -64,4 +64,43 @@ describe("Playground", () => {
     ->shouldContainText("Hello ReScript!")
     ->ignore
   })
+
+  it("should switch to light mode from toast and back to dark mode in settings", () => {
+    // Navigate to playground and wait for initial render
+    clickNavLink(~testId="navbar-primary-left-content", ~text="Playground")
+    url()->shouldInclude("/try")->ignore
+    waitForPlayground()
+
+    // Switch to light mode through the onboarding toast
+    getByTestId("playground-lightmode-toast")
+    ->should("be.visible")
+    ->find("button")
+    ->containsChainable("Try it now")
+    ->click
+    ->ignore
+
+    // Verify playground shell is in light mode
+    get("main")->shouldWithValue("have.class", "playground-theme-light")->ignore
+    cyWindow()
+    ->its("localStorage")
+    ->invokeWithArg("getItem", "playgroundTheme")
+    ->shouldWithValue("eq", "light")
+    ->ignore
+
+    // Switch back to dark mode from Settings
+    contains("Settings")->click->ignore
+    get("main")
+    ->find("button")
+    ->containsChainable("Dark")
+    ->click
+    ->ignore
+
+    // Verify playground shell is back to dark mode
+    get("main")->shouldWithValue("have.class", "playground-theme-dark")->ignore
+    cyWindow()
+    ->its("localStorage")
+    ->invokeWithArg("getItem", "playgroundTheme")
+    ->shouldWithValue("eq", "dark")
+    ->ignore
+  })
 })