feat: add dark mode

jderochervlk · jderochervlk · commit c1ee99912bcf · 2026-04-17T03:34:29.000-04:00
diff --git a/app/root.res b/app/root.res
@@ -36,10 +36,27 @@ external utilsCss: string = "default"
 
 open ReactRouter
 
+let initializeThemeScript = `
+(() => {
+  try {
+    const key = "siteTheme";
+    const darkClass = "site-dark";
+    const lightClass = "site-light";
+    const stored = localStorage.getItem(key);
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const theme = stored === "dark" || stored === "light" ? stored : preferred;
+    const root = document.documentElement;
+    root.classList.remove(darkClass, lightClass);
+    root.classList.add(theme === "dark" ? darkClass : lightClass);
+  } catch (_err) {}
+})();
+`
+
 @react.component
 let default = () => {
   <html lang="en">
     <head>
+      <script> {React.string(initializeThemeScript)} </script>
       <style> {React.string("html {opacity:0;}")} </style>
       <link rel="preload" href={mainCss} as_="style" />
       <link rel="stylesheet" href={mainCss} />
diff --git a/src/Playground.res b/src/Playground.res
@@ -59,10 +59,15 @@ let playgroundThemeClass = (theme: CodeMirror.Theme.t): string =>
 
 module DropdownSelect = {
   @react.component
-  let make = (~onChange, ~name, ~value, ~disabled=false, ~children) => {
+  let make = (~onChange, ~name, ~value, ~theme, ~disabled=false, ~children) => {
+    let themeClass = switch theme {
+    | CodeMirror.Theme.Dark => "bg-gray-100 border-gray-80 text-gray-20"
+    | CodeMirror.Theme.Light => "bg-white border-gray-30 text-gray-80"
+    }
     let opacity = disabled ? " opacity-50" : ""
     <select
-      className={"playground-select text-14 border inline-block rounded px-4 py-1 font-semibold" ++
+      className={"playground-select text-14 border inline-block rounded px-4 py-1 font-semibold " ++
+      themeClass ++
       opacity}
       name
       value
@@ -76,12 +81,16 @@ module DropdownSelect = {
 
 module SelectionOption = {
   @react.component
-  let make = (~label, ~isActive, ~disabled, ~onClick) => {
+  let make = (~label, ~isActive, ~disabled, ~onClick, ~theme) => {
+    let inactiveClass = switch theme {
+    | CodeMirror.Theme.Dark => "bg-gray-80 opacity-50 hover:opacity-80 text-gray-20"
+    | CodeMirror.Theme.Light => "bg-gray-10 border border-gray-30 text-gray-80 hover:bg-gray-20"
+    }
     <button
       className={"playground-selection-option mr-1 px-2 py-1 rounded inline-block " ++ if isActive {
         "playground-selection-option-active font-bold"
       } else {
-        "opacity-50 hover:opacity-80"
+        inactiveClass
       }}
       onClick
       disabled
@@ -97,6 +106,7 @@ module ToggleSelection = {
     ~onChange: 'a => unit,
     ~values: array<'a>,
     ~toLabel: 'a => string,
+    ~theme: CodeMirror.Theme.t,
     ~selected: 'a,
     ~disabled=false,
   ) => {
@@ -119,7 +129,7 @@ module ToggleSelection = {
           }
         }
 
-        <SelectionOption key={label} label isActive onClick disabled />
+        <SelectionOption key={label} label isActive onClick disabled theme />
       })
       ->React.array}
     </div>
@@ -954,6 +964,7 @@ module Settings = {
         <DropdownSelect
           name="compilerVersions"
           value={Semver.toString(readyState.selected.id)}
+          theme
           onChange={evt => {
             ReactEvent.Form.preventDefault(evt)
             let id: string = (evt->ReactEvent.Form.target)["value"]
@@ -1041,6 +1052,7 @@ module Settings = {
           <ToggleSelection
             values=availableTargetLangs
             toLabel={lang => lang->Api.Lang.toExt->String.toUpperCase}
+            theme
             selected=readyState.targetLang
             onChange=onTargetLangSelect
           />
@@ -1052,6 +1064,7 @@ module Settings = {
         <div className=titleClass> {React.string("Use Vim Keymap")} </div>
         <ToggleSelection
           values=[CodeMirror.KeyMap.Default, CodeMirror.KeyMap.Vim]
+          theme
           toLabel={enabled =>
             switch enabled {
             | CodeMirror.KeyMap.Vim => "On"
@@ -1065,6 +1078,7 @@ module Settings = {
         <div className=titleClass> {React.string("Module-System")} </div>
         <ToggleSelection
           values=["commonjs", "esmodule"]
+          theme
           toLabel={value => value}
           selected=config.moduleSystem
           onChange=onModuleSystemUpdate
@@ -1074,6 +1088,7 @@ module Settings = {
         <div className=titleClass> {React.string("Playground Theme")} </div>
         <ToggleSelection
           values=[CodeMirror.Theme.Dark, CodeMirror.Theme.Light]
+          theme
           toLabel=themeLabel
           selected=theme
           onChange={value => setTheme(_ => value)}
@@ -1085,6 +1100,7 @@ module Settings = {
               <div className=titleClass> {React.string("JSX")} </div>
               <ToggleSelection
                 values=[JsxCompilation.Plain, PreserveJsx]
+                theme
                 toLabel=JsxCompilation.getLabel
                 selected={config.jsxPreserveMode->Option.getOr(false)->JsxCompilation.fromBool}
                 onChange=onJsxPreserveModeUpdate
@@ -1099,6 +1115,7 @@ module Settings = {
                 <SelectionOption
                   key
                   disabled=false
+                  theme
                   label={feature->ExperimentalFeatures.getLabel}
                   isActive={config.experimentalFeatures
                   ->Option.getOr([])
@@ -1227,6 +1244,7 @@ module ControlPanel = {
   let make = (
     ~actionIndicatorKey: string,
     ~state: CompilerManagerHook.state,
+    ~theme: CodeMirror.Theme.t,
     ~dispatch: CompilerManagerHook.action => unit,
     ~editorRef: React.ref<option<CodeMirror.editorInstance>>,
     ~setCurrentTab: (tab => tab) => unit,
@@ -1283,6 +1301,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)
@@ -2158,6 +2177,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
+      theme
       dispatch=compilerDispatch
       setCurrentTab
       editorRef
diff --git a/src/common/SiteTheme.res b/src/common/SiteTheme.res
@@ -0,0 +1,56 @@
+let storageKey = "siteTheme"
+let darkClassName = "site-dark"
+let lightClassName = "site-light"
+
+type t = Light | Dark
+
+let toString = (theme: t): string =>
+  switch theme {
+  | Light => "light"
+  | Dark => "dark"
+  }
+
+let fromString = (value: string): t =>
+  switch value {
+  | "dark" => Dark
+  | _ => Light
+  }
+
+let toggle = (theme: t): t =>
+  switch theme {
+  | Light => Dark
+  | Dark => Light
+  }
+
+let applyToDom = (theme: t): unit => {
+  let classList = document.documentElement.classList
+  switch theme {
+  | Dark =>
+    WebAPI.DOMTokenList.add(classList, darkClassName)
+    WebAPI.DOMTokenList.remove(classList, lightClassName)
+  | Light =>
+    WebAPI.DOMTokenList.add(classList, lightClassName)
+    WebAPI.DOMTokenList.remove(classList, darkClassName)
+  }
+}
+
+let getPreferred = (): t => {
+  let mediaQuery = window->WebAPI.Window.matchMedia("(prefers-color-scheme: dark)")
+  mediaQuery.matches ? Dark : Light
+}
+
+let getInitial = (): t => {
+  let stored = WebAPI.Storage.getItem(window.localStorage, storageKey)->Null.toOption
+  switch stored {
+  | Some(value) => fromString(value)
+  | None => getPreferred()
+  }
+}
+
+let persist = (theme: t): unit =>
+  WebAPI.Storage.setItem(window.localStorage, ~key=storageKey, ~value=theme->toString)
+
+let set = (theme: t): unit => {
+  applyToDom(theme)
+  persist(theme)
+}
diff --git a/src/common/SiteTheme.resi b/src/common/SiteTheme.resi
@@ -0,0 +1,11 @@
+let storageKey: string
+
+type t = Light | Dark
+
+let toString: t => string
+let fromString: string => t
+let toggle: t => t
+let getInitial: unit => t
+let applyToDom: t => unit
+let persist: t => unit
+let set: t => unit
diff --git a/src/components/CodeMirror.res b/src/components/CodeMirror.res
@@ -765,7 +765,6 @@ let themeToExtension = (theme: Theme.t): CM6.extension => {
   )
   [editorTheme, syntaxHighlight]->CM6.Extension.fromArray
 }
-
 let createEditor = (config: editorConfig): editorInstance => {
   // Setup language based on mode
   let language = switch config.mode {
diff --git a/src/components/Footer.res b/src/components/Footer.res
@@ -18,12 +18,13 @@ let make = () => {
   let iconLink = "hover:pointer hover:text-gray-60-tr"
   let copyrightYear = Date.make()->Date.getFullYear->Int.toString
 
-  <footer className="flex justify-center border-t border-gray-10">
+  <footer id="site-footer" className="flex justify-center border-t border-gray-10">
     <div
-      className="flex flex-col md:flex-row justify-between max-w-1280 w-full px-8 py-16 text-gray-80 "
+      className="site-footer-content flex flex-col md:flex-row justify-between max-w-1280 w-full px-8 py-16 text-gray-80 "
     >
       <div>
-        <img className="w-40 mb-5" src="/rescript_logo_black.svg" />
+        <img className="site-logo-light w-40 mb-5" src="/rescript_logo_black.svg" />
+        <img className="site-logo-dark hidden w-40 mb-5" src="/brand/rescript-logo-white.svg" />
         <div className="text-16">
           <p> {React.string(`© ${copyrightYear} The ReScript Project`)} </p>
         </div>
@@ -32,7 +33,7 @@ let make = () => {
         className="flex flex-col space-y-16 md:flex-row mt-16 md:mt-0 md:ml-16 md:space-y-0 md:space-x-16"
       >
         <Section title="About">
-          <ul className="text-16 text-gray-80-tr space-y-2">
+          <ul className="site-footer-muted text-16 text-gray-80-tr space-y-2">
             <li>
               <Link to=#"/community/overview" className={linkClass}>
                 {React.string("Community")}
@@ -47,7 +48,7 @@ let make = () => {
           </ul>
         </Section>
         <Section title="Find us on">
-          <div className="flex space-x-3 text-gray-100">
+          <div className="site-footer-icons flex space-x-3 text-gray-100">
             <a className=iconLink rel="noopener noreferrer" href=Constants.githubHref>
               <Icon.GitHub className="w-6 h-6" />
             </a>
diff --git a/src/components/LandingPage.res b/src/components/LandingPage.res
@@ -70,7 +70,7 @@ export {
     let (example, _setExample) = React.useState(_ => examples->Array.getUnsafe(0))
 
     //Playground Section & Background
-    <section className="relative mt-20 bg-gray-10">
+    <section className="lp-playground-hero relative mt-20 bg-gray-10">
       <div className="relative flex justify-center w-full">
         <div className="relative w-full pt-6 pb-8 sm:px-8 md:px-16 max-w-[1400px]">
           // Playground widget
@@ -686,7 +686,7 @@ let make = (~components=MarkdownComponents.default) => {
       description="Fast, Simple, Fully Typed JavaScript from the Future"
       keywords=["ReScript", "rescriptlang", "JavaScript", "JS", "TypeScript"]
     />
-    <div className="mt-4 xs:mt-16">
+    <div id="landing-page" className="mt-4 xs:mt-16">
       <div className="text-gray-80 text-18 z">
         <div className="absolute w-full top-16">
           <Banner>
diff --git a/src/components/NavbarPrimary.res b/src/components/NavbarPrimary.res
@@ -7,6 +7,29 @@ let isActive = (~url, ~pathname: Path.t) => {
     : "hover:text-fire-30"
 }
 
+module ThemeToggle = {
+  @react.component
+  let make = (~theme: SiteTheme.t, ~onToggle: unit => unit) => {
+    let (label, title) = switch theme {
+    | SiteTheme.Light => ("Light", "Switch to dark mode")
+    | SiteTheme.Dark => ("Dark", "Switch to light mode")
+    }
+
+    <button
+      className="rounded border border-gray-60 px-2 py-1 text-12 hover:cursor-pointer hover:text-white"
+      onClick={evt => {
+        ReactEvent.Mouse.preventDefault(evt)
+        onToggle()
+      }}
+      title
+      ariaLabel={title}
+      dataTestId="theme-toggle"
+    >
+      {React.string(label)}
+    </button>
+  }
+}
+
 module LeftContent = {
   @react.component
   let make = () => {
@@ -44,14 +67,15 @@ module LeftContent = {
 
 module RightContent = {
   @react.component
-  let make = () => {
+  let make = (~theme, ~onToggleTheme) => {
     let iconClasses = "w-6 h-6 opacity-50 hover:opacity-100"
     let linkClasses = "hidden md:block"
     <div
       dataTestId="navbar-primary-right-content"
       className="row-start-1 justify-self-end col-[content] grid grid-flow-col items-center space-x-5 text-gray-40"
     >
       <Search />
+      <ThemeToggle theme onToggle=onToggleTheme />
       <button
         className={"h-1 w-auto block md:hidden opacity-50 hover:opacity-100 m-0"}
         onClick={toggleMobileOverlay}
@@ -95,8 +119,23 @@ module RightContent = {
 
 @react.component
 let make = () => {
+  let (theme, setTheme) = React.useState(_ => SiteTheme.Light)
   let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32)
 
+  React.useEffect(() => {
+    let initialTheme = SiteTheme.getInitial()
+    setTheme(_ => initialTheme)
+    SiteTheme.applyToDom(initialTheme)
+    None
+  }, [])
+
+  let onToggleTheme = () =>
+    setTheme(prev => {
+      let next = SiteTheme.toggle(prev)
+      SiteTheme.set(next)
+      next
+    })
+
   let navbarClasses = switch scrollDirection {
   | Up(_) => "translate-y-0"
   | Down(_) => "-translate-y-full md:translate-y-0"
@@ -112,7 +151,7 @@ let make = () => {
     `}
     >
       <LeftContent />
-      <RightContent />
+      <RightContent theme onToggleTheme />
     </nav>
     <NavbarMobileOverlay />
   </>
diff --git a/src/components/ToggleButton.res b/src/components/ToggleButton.res
@@ -1,5 +1,7 @@
 @react.component
-let make = (~checked, ~onChange, ~children) => {
+let make = (~checked, ~onChange, ~children, ~isLightTheme=false) => {
+  let _ = isLightTheme
+
   <label className="inline-flex items-center cursor-pointer">
     <input type_="checkbox" value="" checked onChange className="sr-only peer" />
     <div
diff --git a/styles/main.css b/styles/main.css

Original file line number	Diff line number	Diff line change
`@@ -765,7 +765,6 @@ let themeToExtension = (theme: Theme.t): CM6.extension => {`
`765`	`765`	`)`
`766`	`766`	`[editorTheme, syntaxHighlight]->CM6.Extension.fromArray`
`767`	`767`	`}`
`768`		`-`
`769`	`768`	`let createEditor = (config: editorConfig): editorInstance => {`
`770`	`769`	`// Setup language based on mode`
`771`	`770`	`let language = switch config.mode {`