Implement dark mode (astral-sh#1455)

jairhenrique · Dec 30, 2022 · 2c74646 · 2c74646
1 parent cd2099f
commit 2c74646
Show file tree

Hide file tree

Showing 9 changed files with 792 additions and 24 deletions.
diff --git a/playground/src/Editor/Editor.tsx b/playground/src/Editor/Editor.tsx
@@ -3,10 +3,11 @@ import { DEFAULT_PYTHON_SOURCE } from "../constants";
 import init, { check, Check, currentVersion, defaultSettings } from "../pkg";
 import { ErrorMessage } from "./ErrorMessage";
 import Header from "./Header";
+import { useTheme } from "./theme";
 import { persist, restore, stringify } from "./settings";
 import SettingsEditor from "./SettingsEditor";
 import SourceEditor from "./SourceEditor";
-import Themes from "./Themes";
+import MonacoThemes from "./MonacoThemes";
 
 type Tab = "Source" | "Settings";
 
@@ -19,6 +20,7 @@ export default function Editor() {
   const [pythonSource, setPythonSource] = useState<string | null>(null);
   const [checks, setChecks] = useState<Check[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [theme, setTheme] = useTheme();
 
   useEffect(() => {
     init().then(() => setInitialized(true));
@@ -99,26 +101,30 @@ export default function Editor() {
     <main className={"h-full w-full flex flex-auto"}>
       <Header
         edit={edit}
-        version={version}
         tab={tab}
-        onChange={setTab}
+        theme={theme}
+        version={version}
+        onChangeTab={setTab}
+        onChangeTheme={setTheme}
         onShare={initialized ? handleShare : undefined}
       />
 
-      <Themes />
+      <MonacoThemes />
 
       <div className={"mt-12 relative flex-auto"}>
         {initialized && settingsSource != null && pythonSource != null ? (
           <>
             <SourceEditor
               visible={tab === "Source"}
               source={pythonSource}
+              theme={theme}
               checks={checks}
               onChange={handlePythonSourceChange}
             />
             <SettingsEditor
               visible={tab === "Settings"}
               source={settingsSource}
+              theme={theme}
               onChange={handleSettingsSourceChange}
             />
           </>

diff --git a/playground/src/Editor/Header.tsx b/playground/src/Editor/Header.tsx
@@ -1,41 +1,67 @@
 import classNames from "classnames";
+import ThemeButton from "./ThemeButton";
 import ShareButton from "./ShareButton";
+import { Theme } from "./theme";
 import VersionTag from "./VersionTag";
 
 export type Tab = "Source" | "Settings";
 
 export default function Header({
   edit,
-  version,
   tab,
-  onChange,
+  theme,
+  version,
+  onChangeTab,
+  onChangeTheme,
   onShare,
 }: {
   edit: number;
-  version: string | null;
   tab: Tab;
-  onChange: (tab: Tab) => void;
+  theme: Theme;
+  version: string | null;
+  onChangeTab: (tab: Tab) => void;
+  onChangeTheme: (theme: Theme) => void;
   onShare?: () => void;
 }) {
   return (
     <div
-      className="w-full flex items-center justify-between flex-none pl-5 sm:pl-6 pr-4 lg:pr-6 absolute z-10 top-0 left-0 -mb-px antialiased border-b border-gray-200 dark:border-gray-800"
-      style={{ background: "#f8f9fa" }}
+      className={classNames(
+        "w-full",
+        "flex",
+        "items-center",
+        "justify-between",
+        "flex-none",
+        "pl-5",
+        "sm:pl-6",
+        "pr-4",
+        "lg:pr-6",
+        "absolute",
+        "z-10",
+        "top-0",
+        "left-0",
+        "-mb-px",
+        "antialiased",
+        "border-b",
+        "border-gray-200",
+        "dark:border-gray-800",
+        "bg-ayu-background",
+        "dark:bg-ayu-background-dark"
+      )}
     >
       <div className="flex space-x-5">
         <button
           type="button"
           className={classNames(
             "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
             tab === "Source"
-              ? "text-ayu"
+              ? "text-ayu-accent"
               : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white"
           )}
-          onClick={() => onChange("Source")}
+          onClick={() => onChangeTab("Source")}
         >
           <span
             className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu h-0.5 rounded-full transition-opacity duration-150",
+              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
               tab === "Source" ? "opacity-100" : "opacity-0"
             )}
           />
@@ -46,14 +72,14 @@ export default function Header({
           className={classNames(
             "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
             tab === "Settings"
-              ? "text-ayu"
+              ? "text-ayu-accent"
               : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white"
           )}
-          onClick={() => onChange("Settings")}
+          onClick={() => onChangeTab("Settings")}
         >
           <span
             className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu h-0.5 rounded-full transition-opacity duration-150",
+              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
               tab === "Settings" ? "opacity-100" : "opacity-0"
             )}
           />
@@ -67,6 +93,8 @@ export default function Header({
       </div>
       <div className={"hidden sm:flex items-center min-w-0"}>
         <ShareButton key={edit} onShare={onShare} />
+        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+        <ThemeButton theme={theme} onChange={onChangeTheme} />
       </div>
     </div>
   );