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>

Author: jderochervlk

e2e/Playground.cy.res

@@ -64,4 +64,34 @@ 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", "bg-gray-5")->ignore
+
+    // Switch back to dark mode from Settings
+    contains("Settings")->click->ignore
+    contains("Playground Theme")
+    ->closest("div")
+    ->find("button")
+    ->containsChainable("Dark")
+    ->click
+    ->ignore
+
+    // Verify playground shell is back to dark mode
+    get("main")->shouldWithValue("have.class", "bg-gray-100")->ignore
+  })
 })

src/Playground.res

@@ -1311,6 +1311,7 @@ module ControlPanel = {
       <div className="flex flex-row gap-x-2" dataTestId="control-panel">
         <ToggleButton
           checked=autoRun
+          isLightTheme={!isDarkTheme(theme)}
           onChange={_ => {
             switch state {
             | Ready({autoRun: false}) => setCurrentTab(_ => Output)
@@ -2229,14 +2230,20 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(separatorRef): React.ref<Nullable.t<Dom.element>>))}
         // TODO: touch-none not applied
-        className={"flex items-center justify-center touch-none select-none opacity-30 hover:opacity-50 rounded-lg " ++
-        (isDarkTheme(theme) ? "bg-gray-70" : "bg-gray-20") ++
+        className={"flex items-center justify-center touch-none select-none rounded-lg " ++
+        (isDarkTheme(theme)
+          ? "bg-gray-70 opacity-30 hover:opacity-50"
+          : "bg-gray-20 border border-gray-30 opacity-100 hover:bg-gray-30") ++
         " " ++ (layout == Column ? "cursor-row-resize" : "cursor-col-resize")}
         onMouseDown={onMouseDown}
         onTouchStart={onTouchStart}
         onTouchEnd={onMouseUp}
       >
-        <span className={`m-0.5 ${layout == Column ? "rotate-90" : ""}`}>
+        <span
+          className={"m-0.5 " ++
+          (isDarkTheme(theme) ? "text-gray-20" : "text-gray-60") ++
+          " " ++ (layout == Column ? "rotate-90" : "")}
+        >
           {React.string("⣿")}
         </span>
       </div>

src/components/ToggleButton.res

@@ -1,16 +1,24 @@
 @react.component
-let make = (~checked, ~onChange, ~children) => {
+let make = (~checked, ~onChange, ~children, ~isLightTheme=false) => {
+  let switchThemeClass = if isLightTheme {
+    "bg-gray-30 after:bg-white after:border-gray-40 border-gray-40 peer-checked:bg-sky"
+  } else {
+    "bg-gray-700 after:bg-white after:border-gray-300 border-gray-600 peer-checked:bg-sky"
+  }
+
+  let labelThemeClass = isLightTheme ? "text-gray-80" : "text-gray-300"
+
   <label className="inline-flex items-center cursor-pointer">
     <input type_="checkbox" value="" checked onChange className="sr-only peer" />
     <div
-      className={`relative w-8 h-4 bg-gray-700
+      className={`relative w-8 h-4
       rounded-full peer peer-checked:after:translate-x-full 
       peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white 
       after:content-[''] after:absolute after:top-[2px] after:start-[4px] 
-      after:bg-white after:border-gray-300 after:border after:rounded-full 
-      after:h-3 after:w-3 after:transition-all border-gray-600 
-      peer-checked:bg-sky`}
+      after:border after:rounded-full 
+      after:h-3 after:w-3 after:transition-all ` ++
+      switchThemeClass}
     />
-    <span className={"ms-2 text-sm text-gray-300"}> {children} </span>
+    <span className={"ms-2 text-sm " ++ labelThemeClass}> {children} </span>
   </label>
 }