From 356158e42c79a29535be560acb8a6ac9a7faee99 Mon Sep 17 00:00:00 2001
From: faye <faye_1225@163.com>
Date: Mon, 22 May 2023 18:45:25 +0800
Subject: [PATCH 1/6] add:light and dark mode

---
 .../src/App/BottomBar/index.tsx               |  2 +-
 .../src/App/Sidebar/Resizer.tsx               |  2 +-
 .../src/App/Sidebar/Section.tsx               |  2 +-
 .../src/App/Sidebar/Tab/Bottom.tsx            |  5 ++-
 .../src/App/Sidebar/Tab/Button.tsx            |  2 +-
 .../stablestudio-ui/src/App/Sidebar/index.tsx |  2 +-
 .../src/App/TopBar/Right/index.tsx            | 20 +++++++++
 packages/stablestudio-ui/src/App/index.tsx    |  4 +-
 .../src/Editor/Dream/Results.tsx              |  2 +-
 .../src/Editor/Entity/Entities/Sidebar.tsx    |  4 +-
 .../src/Editor/Export/Everything.tsx          |  2 +-
 .../src/Generation/Image/Controls/index.tsx   |  8 ++--
 .../Generation/Image/Images/Delete/Button.tsx |  3 +-
 .../Generation/Image/Input/Image/Sidebar.tsx  |  6 +--
 .../src/Generation/Image/Prompt/index.tsx     |  2 +-
 .../Generation/Image/SpecialEffects/index.tsx |  2 +-
 .../src/Generation/Image/index.tsx            |  2 +-
 .../stablestudio-ui/src/Generation/index.tsx  |  2 +-
 .../stablestudio-ui/src/Settings/Panel.tsx    |  2 +-
 .../stablestudio-ui/src/Settings/index.tsx    |  2 +-
 .../src/Shortcut/Key/index.tsx                |  2 +-
 .../src/Shortcut/Palette/index.tsx            |  6 +--
 .../stablestudio-ui/src/Theme/Badge/index.tsx |  2 +-
 .../src/Theme/Button/index.tsx                |  9 ++--
 .../src/Theme/Common/index.tsx                |  9 +++-
 .../src/Theme/Divider/index.tsx               |  4 +-
 .../src/Theme/Dropdown/index.tsx              |  6 +--
 .../stablestudio-ui/src/Theme/Icon/SVGs.tsx   | 45 +++++++++++++++++++
 .../stablestudio-ui/src/Theme/Icon/index.tsx  |  6 +++
 .../stablestudio-ui/src/Theme/Input/index.tsx |  4 +-
 packages/stablestudio-ui/src/Theme/Label.tsx  |  2 +-
 .../src/Theme/Loading/Spinner.tsx             |  2 +-
 .../stablestudio-ui/src/Theme/Logo/Next.tsx   |  3 +-
 .../stablestudio-ui/src/Theme/Modal/Panel.tsx |  2 +-
 .../stablestudio-ui/src/Theme/Modal/Title.tsx |  7 ++-
 .../src/Theme/Modal/TopBar.tsx                |  2 +-
 .../stablestudio-ui/src/Theme/Modal/index.tsx |  2 +-
 .../src/Theme/Popout/index.tsx                | 10 ++---
 packages/stablestudio-ui/src/Theme/Slider.tsx |  2 +-
 .../stablestudio-ui/src/Theme/Snackbar.tsx    |  2 +-
 .../src/Theme/Tooltip/index.tsx               |  6 +--
 41 files changed, 151 insertions(+), 58 deletions(-)

diff --git a/packages/stablestudio-ui/src/App/BottomBar/index.tsx b/packages/stablestudio-ui/src/App/BottomBar/index.tsx
index 50eee424..15a183d9 100644
--- a/packages/stablestudio-ui/src/App/BottomBar/index.tsx
+++ b/packages/stablestudio-ui/src/App/BottomBar/index.tsx
@@ -27,7 +27,7 @@ export function BottomBar() {
         <motion.div
           layoutId="bottom-bar-open-button"
           layout="preserve-aspect"
-          className="flex items-center justify-center pt-3 pb-1"
+          className="flex items-center justify-center pb-1 pt-3"
           onClick={() => setOpen(!open)}
         >
           <Theme.Icon.ChevronUp
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Resizer.tsx b/packages/stablestudio-ui/src/App/Sidebar/Resizer.tsx
index b30ef161..0e922373 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Resizer.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Resizer.tsx
@@ -60,7 +60,7 @@ export function Resizer({ position }: App.Sidebar.Props) {
       )}
       style={{ [position]: "100%" }}
       className={classes(
-        "group absolute top-0 bottom-0 flex w-5 cursor-col-resize",
+        "group absolute bottom-0 top-0 flex w-5 cursor-col-resize",
         position === "right" && "justify-end"
       )}
     >
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
index 26134945..95ed221f 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
@@ -41,7 +41,7 @@ export function Section(props: Section.Props) {
   return (
     <div
       className={classes(
-        "flex flex-col border-zinc-700 last-of-type:border-b-0",
+        "flex flex-col border-black/20 last-of-type:border-b-0 dark:border-zinc-700",
         divider && "border-b-1 border-b",
         className
       )}
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
index 5c851313..fd7f6217 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
@@ -3,7 +3,10 @@ import { App } from "~/App";
 export function Bottom({ className, children }: StyleableWithChildren) {
   return (
     <div
-      className={classes("justify-end border-t border-zinc-700 p-2", className)}
+      className={classes(
+        "justify-end border-t border-black/20 p-2 dark:border-zinc-700",
+        className
+      )}
     >
       {children}
     </div>
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
index 9f21dd18..cb8163cc 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
@@ -23,7 +23,7 @@ export function Buttons({ position }: App.Sidebar.Props) {
   return useMemo(() => {
     if (!tabs[0] || noButtons) return null;
     return (
-      <div className="flex flex-row gap-2 border-b border-zinc-700 p-2">
+      <div className="flex flex-row gap-2 border-b border-black/20 p-2 dark:border-zinc-700">
         {tabs.map((tab) => {
           if (tab.button === false) return null;
 
diff --git a/packages/stablestudio-ui/src/App/Sidebar/index.tsx b/packages/stablestudio-ui/src/App/Sidebar/index.tsx
index bcacee90..2cc7e063 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/index.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/index.tsx
@@ -37,7 +37,7 @@ export function Sidebar({ position }: Sidebar.Props) {
     <div
       style={{ width: showing ? (isMobileDevice ? "100%" : sidebar.width) : 0 }}
       className={classes(
-        "relative z-[10] min-h-0 shrink-0 border-zinc-700 dark:bg-zinc-900",
+        "relative z-[10] min-h-0 shrink-0 border-black/20 bg-white dark:border-zinc-700 dark:bg-zinc-900",
         showing && (position === "left" ? "border-r" : "border-l")
       )}
     >
diff --git a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
index 3a615dbf..b8586a78 100644
--- a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
+++ b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
@@ -5,6 +5,19 @@ import { Theme } from "~/Theme";
 export const Right = () => {
   const { setIsOpen } = Shortcut.Palette.use();
   const isMobileDevice = Theme.useIsMobileDevice();
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    const root = document.querySelectorAll("#modal-root, #app");
+
+    if (root) {
+      const elementsArray = [...root];
+      elementsArray.forEach((element) => {
+        if (dark) return element.classList.add("dark");
+        element.classList.remove("dark");
+      });
+    }
+  }, [dark]);
   return (
     <div className="flex grow basis-0 items-center justify-end gap-2">
       <>
@@ -22,6 +35,13 @@ export const Right = () => {
             <Shortcut.Keys keys={["Meta", "k"]} className="ml-2" />
           </Theme.Button>
         )}
+
+        <Theme.Button
+          onClick={() => setDark(!dark)}
+          className="aspect-square h-[30px] w-[30px]"
+          icon={dark ? Theme.Icon.Dark : Theme.Icon.Light}
+        />
+
         <Link to="/settings">
           <Theme.Button
             outline
diff --git a/packages/stablestudio-ui/src/App/index.tsx b/packages/stablestudio-ui/src/App/index.tsx
index e7949967..008e8871 100644
--- a/packages/stablestudio-ui/src/App/index.tsx
+++ b/packages/stablestudio-ui/src/App/index.tsx
@@ -12,8 +12,8 @@ export function App() {
   return useMemo(
     () => (
       <Providers>
-        <div className="absolute top-0 left-0 -z-50 h-screen w-screen dark:bg-zinc-800" />
-        <div className="absolute top-0 left-0 flex h-screen w-screen flex-col text-white sm:overflow-x-auto">
+        <div className="absolute left-0 top-0 -z-50 h-screen w-screen bg-white dark:bg-zinc-800" />
+        <div className="absolute left-0 top-0 flex h-screen w-screen flex-col text-zinc-800 dark:text-white sm:overflow-x-auto">
           <Shortcut.Palette />
           <TopBar />
           <Sidebars />
diff --git a/packages/stablestudio-ui/src/Editor/Dream/Results.tsx b/packages/stablestudio-ui/src/Editor/Dream/Results.tsx
index f552d4ad..02bc353c 100644
--- a/packages/stablestudio-ui/src/Editor/Dream/Results.tsx
+++ b/packages/stablestudio-ui/src/Editor/Dream/Results.tsx
@@ -31,7 +31,7 @@ function Choice({
         />
         <img
           src={currentSrc}
-          className="absolute top-0 left-0 h-full w-full select-none object-cover opacity-0 duration-150 group-hover:opacity-100"
+          className="absolute left-0 top-0 h-full w-full select-none object-cover opacity-0 duration-150 group-hover:opacity-100"
           css={css`
             mask: linear-gradient(black 50%, transparent 90%);
             backdrop-filter: blur(20px);
diff --git a/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx b/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
index 122b0694..c2306be0 100644
--- a/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
+++ b/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
@@ -140,7 +140,7 @@ function Entity({ id, ...props }: { id: ID; index: number; total: number }) {
       onClick={onClick}
       className={classes(
         "group flex items-center gap-3 p-2",
-        selected ? "bg-brand-700" : "hover:bg-zinc-800/50"
+        selected ? "bg-brand-700" : "dark:hover:bg-zinc-800/50 hover:bg-zinc-300"
       )}
     >
       <Preview entity={entity} />
@@ -171,7 +171,7 @@ const Preview = ({ entity }: { entity: Editor.Entity }) => {
       )}
       <div className="relative flex h-full w-full items-center justify-center">
         {!src && (
-          <Theme.Icon.Wand className="h-6 w-6 text-zinc-400 dark:text-zinc-500" />
+          <Theme.Icon.Wand className="h-6 w-6 text-zinc-300 dark:text-zinc-500" />
         )}
         {entity && entity.type === "dream" && <Loading id={entity.id} />}
       </div>
diff --git a/packages/stablestudio-ui/src/Editor/Export/Everything.tsx b/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
index 907062c9..b68dfae4 100644
--- a/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
+++ b/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
@@ -105,7 +105,7 @@ export namespace Everything {
               exit={{ opacity: 0 }}
               transition={{ duration: 0.05 }}
             >
-              <div className="rounded border border-zinc-700 bg-zinc-900 p-6">
+              <div className="rounded border border-black/20 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-900">
                 <h1 className="opacity-muted text-lg font-light">
                   No images in view
                 </h1>
diff --git a/packages/stablestudio-ui/src/Generation/Image/Controls/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Controls/index.tsx
index 0c511c23..643ef71b 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Controls/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Controls/index.tsx
@@ -27,11 +27,12 @@ export function Controls({ image }: { image: Generation.Image }) {
               id={input.id}
               icon={Theme.Icon.Variation}
               onIdleClick={createVariations}
+              color="white"
               noBrand
             />
           )}
           transparent
-          className="mr-auto -ml-1"
+          className="-ml-1 mr-auto"
         />
       ),
     [input, createVariations]
@@ -43,7 +44,7 @@ export function Controls({ image }: { image: Generation.Image }) {
         icon={Theme.Icon.Edit}
         name="Edit image"
         onClick={sendToEditor}
-        color="zinc"
+        color="white"
         transparent
       />
     ),
@@ -58,7 +59,7 @@ export function Controls({ image }: { image: Generation.Image }) {
         disabled={isInitialImage}
         className={classes(isInitialImage && "opacity-50")}
         onClick={() => setInitialImage(image)}
-        color="zinc"
+        color="white"
         transparent
       />
     ),
@@ -84,6 +85,7 @@ export function Controls({ image }: { image: Generation.Image }) {
                 <Generation.Image.Controls.Button
                   name="Download image"
                   icon={Theme.Icon.Download}
+                  color="white"
                   onClick={() => download()}
                   transparent
                 />
diff --git a/packages/stablestudio-ui/src/Generation/Image/Images/Delete/Button.tsx b/packages/stablestudio-ui/src/Generation/Image/Images/Delete/Button.tsx
index 92e7ebc8..1c53ed89 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Images/Delete/Button.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Images/Delete/Button.tsx
@@ -20,7 +20,7 @@ export function Button({
   return useMemo(
     () =>
       !isEnabled ? null : deleteConfirming ? (
-        <div className={classes("-py-1 rounded bg-black/75 px-1", className)}>
+        <div className={classes("-py-1 rounded bg-zinc-400/75 px-1", className)}>
           <Generation.Image.Controls.Button
             alwaysShow={variant === "group"}
             name={deleteTooltip ?? "Delete image"}
@@ -60,6 +60,7 @@ export function Button({
           onClick={() => setDeleteConfirming(true)}
           transparent={!outline}
           outline={outline}
+          color={deleteTooltip ? "zinc" : "white"}
           noBg={outline}
         />
       ),
diff --git a/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx b/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
index 25dea6b3..fdba613d 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
@@ -75,7 +75,7 @@ export namespace Sidebar {
         }
       >
         <div className="flex flex-col">
-          <div className="flex flex-col overflow-hidden rounded border border-zinc-700 bg-zinc-800 p-2">
+          <div className="flex flex-col overflow-hidden rounded border border-black/20 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-800">
             {input.init && !imageHovering ? (
               <>
                 <div
@@ -119,7 +119,7 @@ export namespace Sidebar {
                     />
                   </div>
                   <Theme.Icon.Upload
-                    className="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform text-white mix-blend-overlay group-hover:block"
+                    className="absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform text-white mix-blend-overlay group-hover:block"
                     size={24}
                   />
                 </div>
@@ -145,7 +145,7 @@ export namespace Sidebar {
             ) : (
               <div
                 className={classes(
-                  "group flex cursor-pointer flex-col items-center justify-center gap-4 rounded bg-zinc-800 py-4 px-3 text-center"
+                  "group flex cursor-pointer flex-col items-center justify-center gap-4 rounded bg-white px-3 py-4 text-center dark:bg-zinc-800"
                 )}
                 {...uploadProps}
                 onClick={importInit}
diff --git a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
index 66a23133..068c86b8 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
@@ -141,7 +141,7 @@ export function Prompt({
   ) : (
     <div
       className={classes(
-        "group flex w-full gap-1 rounded border border-zinc-700 px-3 py-2 dark:bg-zinc-800",
+        "group flex w-full gap-1 rounded border border-black/20 px-3 py-2 dark:border-zinc-700 dark:bg-zinc-800",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx b/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
index 89a0d6a3..810cf70c 100644
--- a/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
@@ -26,7 +26,7 @@ export function SpecialEffects({
   return (
     <div
       className={classes(
-        "pointer-events-none absolute flex h-full w-full items-center justify-center rounded-md border border-zinc-700 opacity-0 duration-150",
+        "pointer-events-none absolute flex h-full w-full items-center justify-center rounded-md border border-black/20 opacity-0 duration-150 dark:border-zinc-700",
         (variant !== "editor" || loading) && "bg-zinc-900/50",
         (variant === "editor" || showing) && "opacity-100"
       )}
diff --git a/packages/stablestudio-ui/src/Generation/Image/index.tsx b/packages/stablestudio-ui/src/Generation/Image/index.tsx
index a8d1f248..94b1721d 100644
--- a/packages/stablestudio-ui/src/Generation/Image/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/index.tsx
@@ -169,7 +169,7 @@ export function Image({
       <div
         style={style}
         className={classes(
-          "group relative shrink grow overflow-hidden rounded bg-zinc-900",
+          "group relative shrink grow overflow-hidden rounded bg-white dark:bg-zinc-900",
           className
         )}
       >
diff --git a/packages/stablestudio-ui/src/Generation/index.tsx b/packages/stablestudio-ui/src/Generation/index.tsx
index 7869c337..f64884aa 100644
--- a/packages/stablestudio-ui/src/Generation/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/index.tsx
@@ -26,7 +26,7 @@ export function Generation() {
       <Generation.Image.TopBar />
       <Generation.Image.Modal />
       <Generation.Image.Download.Modal />
-      <div className="relative z-[1] flex h-full grow flex-col overflow-hidden bg-zinc-800">
+      <div className="relative z-[1] flex h-full grow flex-col overflow-hidden bg-white dark:bg-zinc-800">
         <Generation.Images />
       </div>
     </>
diff --git a/packages/stablestudio-ui/src/Settings/Panel.tsx b/packages/stablestudio-ui/src/Settings/Panel.tsx
index 324038fd..e2cc03d4 100644
--- a/packages/stablestudio-ui/src/Settings/Panel.tsx
+++ b/packages/stablestudio-ui/src/Settings/Panel.tsx
@@ -2,7 +2,7 @@ export function Panel({ className, children }: StyleableWithChildren) {
   return (
     <div
       className={classes(
-        "rounded border border-zinc-700 bg-zinc-800 p-5",
+        "rounded border border-black/20 dark:border-zinc-700 bg-white p-5 dark:bg-zinc-800",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Settings/index.tsx b/packages/stablestudio-ui/src/Settings/index.tsx
index 60d938d2..90d33ec6 100644
--- a/packages/stablestudio-ui/src/Settings/index.tsx
+++ b/packages/stablestudio-ui/src/Settings/index.tsx
@@ -59,7 +59,7 @@ export function Settings() {
 
   return (
     <>
-      <div className="h-full justify-between overflow-y-auto bg-zinc-900 px-5 py-6">
+      <div className="h-full justify-between overflow-y-auto bg-white px-5 py-6 dark:bg-zinc-900">
         <div className="mx-auto flex max-w-[60rem] flex-col gap-5">
           {!isMissingRequiredSetting && (
             <Link to="/generate" className="w-fit">
diff --git a/packages/stablestudio-ui/src/Shortcut/Key/index.tsx b/packages/stablestudio-ui/src/Shortcut/Key/index.tsx
index a2934e96..68269413 100644
--- a/packages/stablestudio-ui/src/Shortcut/Key/index.tsx
+++ b/packages/stablestudio-ui/src/Shortcut/Key/index.tsx
@@ -92,7 +92,7 @@ export function Key({ keyType }: { keyType: Key }) {
   return (
     <div
       className={classes(
-        "bg-muted-white-extra flex h-6 items-center justify-center rounded align-middle text-white",
+        "dark:bg-muted-white-extra flex h-6 items-center justify-center rounded bg-zinc-200 align-middle text-zinc-800 dark:text-white",
         active && "bg-white text-black",
         display.length === 1 ? "w-6 uppercase" : "px-1.5 lowercase"
       )}
diff --git a/packages/stablestudio-ui/src/Shortcut/Palette/index.tsx b/packages/stablestudio-ui/src/Shortcut/Palette/index.tsx
index 89c4561c..3f755aaf 100644
--- a/packages/stablestudio-ui/src/Shortcut/Palette/index.tsx
+++ b/packages/stablestudio-ui/src/Shortcut/Palette/index.tsx
@@ -44,10 +44,10 @@ export function Palette() {
         >
           <div
             onClick={close}
-            className="absolute bottom-0 left-0 right-0 top-0 z-0 bg-zinc-900/50 opacity-100 backdrop-blur-sm"
+            className="absolute bottom-0 left-0 right-0 top-0 z-0 bg-white/50 opacity-100 backdrop-blur-sm dark:bg-zinc-900/50"
           />
           <div className="relative">
-            <div className="z-30 min-h-[500px] min-w-[400px] rounded bg-zinc-200 text-black shadow-lg dark:bg-zinc-800/90 dark:text-white">
+            <div className="z-30 min-h-[500px] min-w-[400px] rounded bg-zinc-200/90 text-black shadow-lg dark:bg-zinc-800/90 dark:text-white">
               <div className="px-4 py-2">
                 <Input
                   autoFocus
@@ -78,7 +78,7 @@ export function Palette() {
               ) : (
                 search.text !== "" &&
                 !search.loading && (
-                  <div className="text-muted-white-extra flex items-center justify-center p-4 pt-2 text-xl">
+                  <div className="dark:text-muted-white-extra flex items-center justify-center p-4 pt-2 text-xl text-zinc-400">
                     Nothing found
                   </div>
                 )
diff --git a/packages/stablestudio-ui/src/Theme/Badge/index.tsx b/packages/stablestudio-ui/src/Theme/Badge/index.tsx
index 814a23bd..c9e1ce52 100644
--- a/packages/stablestudio-ui/src/Theme/Badge/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Badge/index.tsx
@@ -13,7 +13,7 @@ export function Badge({
         color === "brand" && "bg-brand-800",
         color === "zinc" &&
           (variant === "outline"
-            ? "border border-zinc-700 bg-none"
+            ? "border border-black/20 dark:border-zinc-700 bg-none"
             : "bg-zinc-700")
       ),
     [variant, color]
diff --git a/packages/stablestudio-ui/src/Theme/Button/index.tsx b/packages/stablestudio-ui/src/Theme/Button/index.tsx
index 36aefb9a..4fba4fc6 100644
--- a/packages/stablestudio-ui/src/Theme/Button/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Button/index.tsx
@@ -22,7 +22,7 @@ export function Button(props: Button.Props) {
       }
       onDoubleClick={props.onDoubleClick as never}
       className={classes(
-        "group relative flex h-fit select-none flex-row items-center justify-center gap-1 whitespace-nowrap rounded align-middle font-light shadow-md duration-150",
+        "group relative flex h-fit select-none flex-row items-center justify-center gap-1 whitespace-nowrap rounded align-middle font-light duration-150",
         sizing,
         colors,
         states,
@@ -131,10 +131,13 @@ export namespace Button {
 
             yellow: "bg-yellow-600 hover:bg-yellow-700 active:bg-yellow-800",
 
-            zinc: "shadow-black/5 bg-zinc-200 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-800 dark:border-zinc-700",
+            zinc: "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-black/20 dark:border-zinc-700",
+
+            white:
+              "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-black/20 dark:border-zinc-700",
 
             darkerZinc:
-              "bg-zinc-900 border border-zinc-700 hover:border-zinc-300 duration-100 transition text-white",
+              "bg-zinc-900 border border-black/20 dark:border-zinc-700 hover:border-zinc-300 duration-100 transition text-white",
 
             outline:
               "shadow-none dark:text-white text-black border border-transparent hover:border-zinc-700 focus:border-brand-500 active:bg-brand-500 active:text-white active:border-brand-500",
diff --git a/packages/stablestudio-ui/src/Theme/Common/index.tsx b/packages/stablestudio-ui/src/Theme/Common/index.tsx
index 1ee29332..81e82016 100644
--- a/packages/stablestudio-ui/src/Theme/Common/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Common/index.tsx
@@ -4,7 +4,14 @@ export namespace Common {
     export const preset = (): Size => "md";
   }
 
-  export type Color = "brand" | "indigo" | "red" | "green" | "yellow" | "zinc";
+  export type Color =
+    | "brand"
+    | "indigo"
+    | "red"
+    | "green"
+    | "yellow"
+    | "zinc"
+    | "white";
   export namespace Color {
     export const preset = (): Color => "zinc";
   }
diff --git a/packages/stablestudio-ui/src/Theme/Divider/index.tsx b/packages/stablestudio-ui/src/Theme/Divider/index.tsx
index 6332871e..c598c2c1 100644
--- a/packages/stablestudio-ui/src/Theme/Divider/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Divider/index.tsx
@@ -7,7 +7,7 @@ export function Divider({
   const line = (
     <div
       className={classes(
-        "bg-muted-white-extra grow",
+        "dark:bg-muted-white-extra grow bg-zinc-600",
         variant === "horizontal" && "h-[1px]",
         variant === "vertical" && "w-[1px]",
         lineClassName
@@ -27,7 +27,7 @@ export function Divider({
     >
       {line}
       {children && (
-        <div className="text-muted-white mx-2 flex items-center justify-center">
+        <div className="dark:text-muted-white mx-2 flex items-center justify-center text-zinc-800">
           {children}
         </div>
       )}
diff --git a/packages/stablestudio-ui/src/Theme/Dropdown/index.tsx b/packages/stablestudio-ui/src/Theme/Dropdown/index.tsx
index a209d5e2..0533c949 100644
--- a/packages/stablestudio-ui/src/Theme/Dropdown/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Dropdown/index.tsx
@@ -77,14 +77,14 @@ export function Dropdown<Options extends Dropdown.Options>({
           transparent
             ? "border-transparent bg-transparent"
             : open
-            ? "border-transparent bg-zinc-700/50"
+            ? "border-transparent bg-white dark:bg-zinc-700/50"
             : "border-zinc-800 group-hover:border-zinc-700"
         )}
       />
       <select
         ref={selectRef}
         className={classes(
-          "inline-block w-full cursor-pointer appearance-none rounded bg-zinc-900 focus:outline-none",
+          "inline-block w-full cursor-pointer appearance-none rounded bg-white focus:outline-none dark:bg-zinc-900",
           transparent && "bg-transparent",
           sizing,
           props.innerClassName
@@ -112,7 +112,7 @@ export function Dropdown<Options extends Dropdown.Options>({
           </option>
         ))}
       </select>
-      <div className="pointer-events-none absolute top-0 right-1 inline-block h-full">
+      <div className="pointer-events-none absolute right-1 top-0 inline-block h-full">
         <div className="flex h-full w-full items-center justify-center">
           {open ? (
             <Theme.Icon.ChevronUp className="h-6 w-6" />
diff --git a/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx b/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
index cbaa5a96..c53cba15 100644
--- a/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
+++ b/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
@@ -425,6 +425,51 @@ export function Upscale(props: Props) {
   ));
 }
 
+export function Light(props: Props) {
+  return defaults(props)(({ width, height, color, ...props }) => (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      {...props}
+    >
+      <path d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z" />
+      <path
+        d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
+        fill="none"
+      />
+    </svg>
+  ));
+}
+
+export function Dark(props: Props) {
+  return defaults(props)(({ width, height, color, ...props }) => (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      {...props}
+    >
+      <path
+        d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ));
+}
+
 const defaults =
   (props: Props) =>
   (render: (props: Props) => JSX.Element): JSX.Element =>
diff --git a/packages/stablestudio-ui/src/Theme/Icon/index.tsx b/packages/stablestudio-ui/src/Theme/Icon/index.tsx
index 1acce91a..86f69cf7 100644
--- a/packages/stablestudio-ui/src/Theme/Icon/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Icon/index.tsx
@@ -84,6 +84,8 @@ import {
   Twitter,
   Upscale,
   Variation,
+  Light,
+  Dark
 } from "./SVGs";
 
 export declare namespace Icon {
@@ -169,6 +171,8 @@ export declare namespace Icon {
     Upscale,
     Keyboard,
     ChevronsLeftRight,
+    Light,
+    Dark,
   };
 }
 
@@ -262,6 +266,8 @@ export namespace Icon {
   Icon.Upscale = makeComponent(Upscale);
   Icon.Keyboard = makeComponent(Keyboard);
   Icon.ChevronsLeftRight = makeComponent(ChevronsLeftRight);
+  Icon.Light = makeComponent(Light);
+  Icon.Dark = makeComponent(Dark);
 
   export function Invisible(props: Props) {
     return (
diff --git a/packages/stablestudio-ui/src/Theme/Input/index.tsx b/packages/stablestudio-ui/src/Theme/Input/index.tsx
index 650c71c6..ad884da8 100644
--- a/packages/stablestudio-ui/src/Theme/Input/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Input/index.tsx
@@ -156,7 +156,7 @@ function SingleInput({
     const render = (icon: typeof iconLeft, position: "left" | "right") => {
       const className = classes(
         "opacity-60 h-5 w-5 text-black dark:text-white",
-        position === "left" && "mr-1 -ml-1",
+        position === "left" && "mr-1 -ml-1 stroke-black dark:stroke-white",
         position === "right" && "ml-1 -mr-1"
       );
 
@@ -188,7 +188,7 @@ function SingleInput({
       <input
         ref={inputRef}
         className={classes(
-          "dark:placeholder:text-muted-white h-full w-full rounded bg-zinc-100/75 text-black shadow-sm focus:border-transparent focus:outline-none dark:border-none dark:bg-white/5 dark:text-white",
+          "dark:placeholder:text-muted-white h-full w-full rounded bg-zinc-100/75 text-black shadow-md focus:border-transparent focus:outline-none dark:border-none dark:bg-white/5 dark:text-white",
           sizing,
           props.disabled && "cursor-not-allowed bg-black/10",
           transparent && "bg-transparent dark:bg-transparent",
diff --git a/packages/stablestudio-ui/src/Theme/Label.tsx b/packages/stablestudio-ui/src/Theme/Label.tsx
index e15a5cf6..328a6e1c 100644
--- a/packages/stablestudio-ui/src/Theme/Label.tsx
+++ b/packages/stablestudio-ui/src/Theme/Label.tsx
@@ -2,7 +2,7 @@ export function Label({ children, className }: StyleableWithChildren) {
   return (
     <h2
       className={classes(
-        "opacity-muted ml-2.5 -mb-1 select-none text-sm font-light",
+        "opacity-muted -mb-1 ml-2.5 select-none text-sm font-light",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Loading/Spinner.tsx b/packages/stablestudio-ui/src/Theme/Loading/Spinner.tsx
index 917367a9..e0704efd 100644
--- a/packages/stablestudio-ui/src/Theme/Loading/Spinner.tsx
+++ b/packages/stablestudio-ui/src/Theme/Loading/Spinner.tsx
@@ -5,7 +5,7 @@ export function Spinner({ className }: Styleable) {
       height="38"
       viewBox="0 0 38 38"
       xmlns="http://www.w3.org/2000/svg"
-      stroke="#fff"
+
       className={className}
     >
       <g fill="none" fillRule="evenodd">
diff --git a/packages/stablestudio-ui/src/Theme/Logo/Next.tsx b/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
index cb80ca29..8bf406ec 100644
--- a/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
+++ b/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
@@ -7,7 +7,8 @@ export function Next() {
       <div className="flex flex-col">
         <span className="text-lg font-medium">StableStudio</span>
         <span className="-mt-1 text-xs font-light">
-          <span className="text-white/75">by </span>stability.ai
+          <span className="text-black/75 dark:text-white/75">by </span>
+          stability.ai
         </span>
       </div>
     </div>
diff --git a/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx b/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
index 14f65dea..d0cfba2b 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
@@ -2,7 +2,7 @@ export function Panel({ className, children }: StyleableWithChildren) {
   return (
     <div
       className={classes(
-        "flex flex-col rounded-lg border border-zinc-700 bg-zinc-900",
+        "flex flex-col rounded-lg border border-black/20 bg-white text-zinc-800 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Modal/Title.tsx b/packages/stablestudio-ui/src/Theme/Modal/Title.tsx
index 5b2676ca..df4f0132 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/Title.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/Title.tsx
@@ -1,6 +1,11 @@
 export function Title({ className, children }: StyleableWithChildren) {
   return (
-    <h1 className={classes("text-left text-2xl font-medium", className)}>
+    <h1
+      className={classes(
+        "text-left text-2xl font-medium text-zinc-800 dark:text-white",
+        className
+      )}
+    >
       {children}
     </h1>
   );
diff --git a/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx b/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
index a7c01561..1fda4a4d 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
@@ -10,7 +10,7 @@ export function TopBar({
   return (
     <div
       className={classes(
-        "flex flex-row items-center justify-between rounded-t-lg border-b border-zinc-700 bg-zinc-900 p-2",
+        "flex flex-row items-center justify-between rounded-t-lg border-b border-black/20 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Modal/index.tsx b/packages/stablestudio-ui/src/Theme/Modal/index.tsx
index 57f118a2..3155c568 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/index.tsx
@@ -98,7 +98,7 @@ function Open({
   return (
     <motion.div
       className={classes(
-        "fixed top-0 left-0 z-[1000] flex h-full w-full bg-black/75 sm:h-screen sm:w-screen sm:items-center sm:justify-center",
+        "fixed left-0 top-0 z-[1000] flex h-full w-full bg-black/75 sm:h-screen sm:w-screen sm:items-center sm:justify-center",
         !open && "pointer-events-none"
       )}
       variants={outSideVariants}
diff --git a/packages/stablestudio-ui/src/Theme/Popout/index.tsx b/packages/stablestudio-ui/src/Theme/Popout/index.tsx
index c6480c2d..8f23d874 100644
--- a/packages/stablestudio-ui/src/Theme/Popout/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Popout/index.tsx
@@ -96,7 +96,7 @@ export function Popout({
         <div
           className={classes(
             "flex cursor-pointer flex-row items-center rounded border border-transparent py-1 pl-2 pr-1 duration-100",
-            open ? "bg-zinc-700/50" : "hover:border-zinc-700",
+            open ? "bg-zinc-300 dark:bg-zinc-700/50" : "hover:border-zinc-700",
             className
           )}
           onClick={() => setOpen(!open)}
@@ -137,8 +137,8 @@ function Floating({
   );
 
   return (
-    <div className="flex max-h-[70vh] flex-col overflow-y-auto rounded border border-zinc-700 bg-zinc-900 shadow-lg drop-shadow-lg sm:ml-3 sm:max-h-[30rem] sm:w-[25rem]">
-      <div className="sticky top-0 z-[1] flex flex-row items-center justify-between border-b border-zinc-700 bg-zinc-900 px-3 py-1.5">
+    <div className="flex max-h-[70vh] flex-col overflow-y-auto rounded border border-black/20 bg-white shadow-lg drop-shadow-lg dark:border-zinc-700 dark:bg-zinc-900 sm:ml-3 sm:max-h-[30rem] sm:w-[25rem]">
+      <div className="sticky top-0 z-[1] flex flex-row items-center justify-between border-b border-black/20 bg-white px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-900">
         <h1 className="grow">{title}</h1>
         <Theme.Icon.X
           className="opacity-muted h-5 w-5 cursor-pointer hover:opacity-100"
@@ -180,8 +180,8 @@ function Floating({
                 )}
                 <h1
                   className={classes(
-                    "w-full grow select-none text-zinc-400 group-hover:text-zinc-200",
-                    option.value === value && "font-medium text-white"
+                    "w-full grow select-none text-zinc-800 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200",
+                    option.value === value && "font-medium dark:text-white text-black"
                   )}
                 >
                   {option.name}
diff --git a/packages/stablestudio-ui/src/Theme/Slider.tsx b/packages/stablestudio-ui/src/Theme/Slider.tsx
index a3076041..3e8a883f 100644
--- a/packages/stablestudio-ui/src/Theme/Slider.tsx
+++ b/packages/stablestudio-ui/src/Theme/Slider.tsx
@@ -128,7 +128,7 @@ export const Slider = ({
           className={classes(
             "h-[2px] rounded-full",
 
-            state.index !== 0 && "opacity-muted-extra bg-white shadow-sm",
+            state.index !== 0 && "opacity-muted-extra dark:bg-white bg-black shadow-sm",
             state.index === 0 &&
               classes(
                 "shadow-md",
diff --git a/packages/stablestudio-ui/src/Theme/Snackbar.tsx b/packages/stablestudio-ui/src/Theme/Snackbar.tsx
index 2e00af3d..3a92ae15 100644
--- a/packages/stablestudio-ui/src/Theme/Snackbar.tsx
+++ b/packages/stablestudio-ui/src/Theme/Snackbar.tsx
@@ -36,7 +36,7 @@ const Snackbar = React.forwardRef<
 
   return (
     <div
-      className="mb-4 flex items-center rounded-lg border border-zinc-700 bg-white p-3 text-zinc-500 shadow dark:bg-zinc-900 dark:text-zinc-400"
+      className="mb-4 flex items-center rounded-lg border border-black/20 bg-white p-3 text-zinc-500 shadow dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
       role="alert"
       ref={ref}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx b/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
index e477360d..f8ceebe0 100644
--- a/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
@@ -140,10 +140,10 @@ export function Tooltip({
           {showArrow && (
             <motion.div
               className={classes(
-                "absolute z-[999999] h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-zinc-700 bg-zinc-900",
+                "absolute z-[999999] h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-black/20 bg-zinc-900 dark:border-zinc-700",
                 placement === "top" && "border-b border-r",
-                placement === "bottom" && "border-t border-l",
-                placement === "left" && "border-t border-r",
+                placement === "bottom" && "border-l border-t",
+                placement === "left" && "border-r border-t",
                 placement === "right" && "border-b border-l"
               )}
               style={{

From b9dd8125fbdd9582242fd5a34d9ee012f23bff01 Mon Sep 17 00:00:00 2001
From: Harry Wang <harryjwang@gmail.com>
Date: Mon, 22 May 2023 06:59:11 -0400
Subject: [PATCH 2/6] change border-black/20 to border-zinc-300

---
 packages/stablestudio-ui/src/App/Sidebar/Section.tsx        | 2 +-
 packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx     | 2 +-
 packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx     | 2 +-
 packages/stablestudio-ui/src/App/Sidebar/index.tsx          | 2 +-
 packages/stablestudio-ui/src/App/TopBar/index.tsx           | 2 +-
 packages/stablestudio-ui/src/Editor/Export/Everything.tsx   | 2 +-
 .../src/Generation/Image/Input/Image/Sidebar.tsx            | 2 +-
 .../stablestudio-ui/src/Generation/Image/Prompt/index.tsx   | 2 +-
 .../src/Generation/Image/SpecialEffects/index.tsx           | 2 +-
 packages/stablestudio-ui/src/Settings/Panel.tsx             | 2 +-
 packages/stablestudio-ui/src/Theme/Badge/index.tsx          | 2 +-
 packages/stablestudio-ui/src/Theme/Button/index.tsx         | 6 +++---
 packages/stablestudio-ui/src/Theme/Modal/Panel.tsx          | 2 +-
 packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx         | 2 +-
 packages/stablestudio-ui/src/Theme/Popout/index.tsx         | 4 ++--
 packages/stablestudio-ui/src/Theme/Snackbar.tsx             | 2 +-
 packages/stablestudio-ui/src/Theme/Tooltip/index.tsx        | 2 +-
 17 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
index 95ed221f..76a0c27a 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
@@ -41,7 +41,7 @@ export function Section(props: Section.Props) {
   return (
     <div
       className={classes(
-        "flex flex-col border-black/20 last-of-type:border-b-0 dark:border-zinc-700",
+        "flex flex-col border-zinc-300 last-of-type:border-b-0 dark:border-zinc-700",
         divider && "border-b-1 border-b",
         className
       )}
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
index fd7f6217..409fa6d6 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
@@ -4,7 +4,7 @@ export function Bottom({ className, children }: StyleableWithChildren) {
   return (
     <div
       className={classes(
-        "justify-end border-t border-black/20 p-2 dark:border-zinc-700",
+        "justify-end border-t border-zinc-300 p-2 dark:border-zinc-700",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
index cb8163cc..62295c60 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
@@ -23,7 +23,7 @@ export function Buttons({ position }: App.Sidebar.Props) {
   return useMemo(() => {
     if (!tabs[0] || noButtons) return null;
     return (
-      <div className="flex flex-row gap-2 border-b border-black/20 p-2 dark:border-zinc-700">
+      <div className="flex flex-row gap-2 border-b border-zinc-300 p-2 dark:border-zinc-700">
         {tabs.map((tab) => {
           if (tab.button === false) return null;
 
diff --git a/packages/stablestudio-ui/src/App/Sidebar/index.tsx b/packages/stablestudio-ui/src/App/Sidebar/index.tsx
index 2cc7e063..b35935c6 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/index.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/index.tsx
@@ -37,7 +37,7 @@ export function Sidebar({ position }: Sidebar.Props) {
     <div
       style={{ width: showing ? (isMobileDevice ? "100%" : sidebar.width) : 0 }}
       className={classes(
-        "relative z-[10] min-h-0 shrink-0 border-black/20 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+        "relative z-[10] min-h-0 shrink-0 border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900",
         showing && (position === "left" ? "border-r" : "border-l")
       )}
     >
diff --git a/packages/stablestudio-ui/src/App/TopBar/index.tsx b/packages/stablestudio-ui/src/App/TopBar/index.tsx
index fb70587b..01af76d0 100644
--- a/packages/stablestudio-ui/src/App/TopBar/index.tsx
+++ b/packages/stablestudio-ui/src/App/TopBar/index.tsx
@@ -6,7 +6,7 @@ import { Right } from "./Right";
 
 export function TopBar() {
   return (
-    <nav className="relative flex h-14 w-screen shrink-0 flex-row items-center border-b border-black/20 bg-zinc-50 px-2 text-black dark:border-zinc-700 dark:bg-zinc-900 dark:text-white sm:min-w-[1000px]">
+    <nav className="relative flex h-14 w-screen shrink-0 flex-row items-center border-b border-zinc-300 bg-zinc-50 px-2 text-black dark:border-zinc-700 dark:bg-zinc-900 dark:text-white sm:min-w-[1000px]">
       <Left />
       <Center />
       <Right />
diff --git a/packages/stablestudio-ui/src/Editor/Export/Everything.tsx b/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
index b68dfae4..2bdb6200 100644
--- a/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
+++ b/packages/stablestudio-ui/src/Editor/Export/Everything.tsx
@@ -105,7 +105,7 @@ export namespace Everything {
               exit={{ opacity: 0 }}
               transition={{ duration: 0.05 }}
             >
-              <div className="rounded border border-black/20 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-900">
+              <div className="rounded border border-zinc-300 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-900">
                 <h1 className="opacity-muted text-lg font-light">
                   No images in view
                 </h1>
diff --git a/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx b/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
index fdba613d..f4be1403 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
@@ -75,7 +75,7 @@ export namespace Sidebar {
         }
       >
         <div className="flex flex-col">
-          <div className="flex flex-col overflow-hidden rounded border border-black/20 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-800">
+          <div className="flex flex-col overflow-hidden rounded border border-zinc-300 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-800">
             {input.init && !imageHovering ? (
               <>
                 <div
diff --git a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
index 068c86b8..d19becd1 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
@@ -141,7 +141,7 @@ export function Prompt({
   ) : (
     <div
       className={classes(
-        "group flex w-full gap-1 rounded border border-black/20 px-3 py-2 dark:border-zinc-700 dark:bg-zinc-800",
+        "group flex w-full gap-1 rounded border border-zinc-300 px-3 py-2 dark:border-zinc-700 dark:bg-zinc-800",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx b/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
index 810cf70c..b0a61799 100644
--- a/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
@@ -26,7 +26,7 @@ export function SpecialEffects({
   return (
     <div
       className={classes(
-        "pointer-events-none absolute flex h-full w-full items-center justify-center rounded-md border border-black/20 opacity-0 duration-150 dark:border-zinc-700",
+        "pointer-events-none absolute flex h-full w-full items-center justify-center rounded-md border border-zinc-300 opacity-0 duration-150 dark:border-zinc-700",
         (variant !== "editor" || loading) && "bg-zinc-900/50",
         (variant === "editor" || showing) && "opacity-100"
       )}
diff --git a/packages/stablestudio-ui/src/Settings/Panel.tsx b/packages/stablestudio-ui/src/Settings/Panel.tsx
index e2cc03d4..a3bd0291 100644
--- a/packages/stablestudio-ui/src/Settings/Panel.tsx
+++ b/packages/stablestudio-ui/src/Settings/Panel.tsx
@@ -2,7 +2,7 @@ export function Panel({ className, children }: StyleableWithChildren) {
   return (
     <div
       className={classes(
-        "rounded border border-black/20 dark:border-zinc-700 bg-white p-5 dark:bg-zinc-800",
+        "rounded border border-zinc-300 dark:border-zinc-700 bg-white p-5 dark:bg-zinc-800",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Badge/index.tsx b/packages/stablestudio-ui/src/Theme/Badge/index.tsx
index c9e1ce52..7ab12b05 100644
--- a/packages/stablestudio-ui/src/Theme/Badge/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Badge/index.tsx
@@ -13,7 +13,7 @@ export function Badge({
         color === "brand" && "bg-brand-800",
         color === "zinc" &&
           (variant === "outline"
-            ? "border border-black/20 dark:border-zinc-700 bg-none"
+            ? "border border-zinc-300 dark:border-zinc-700 bg-none"
             : "bg-zinc-700")
       ),
     [variant, color]
diff --git a/packages/stablestudio-ui/src/Theme/Button/index.tsx b/packages/stablestudio-ui/src/Theme/Button/index.tsx
index 4fba4fc6..d7b1b113 100644
--- a/packages/stablestudio-ui/src/Theme/Button/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Button/index.tsx
@@ -131,13 +131,13 @@ export namespace Button {
 
             yellow: "bg-yellow-600 hover:bg-yellow-700 active:bg-yellow-800",
 
-            zinc: "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-black/20 dark:border-zinc-700",
+            zinc: "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
 
             white:
-              "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-black/20 dark:border-zinc-700",
+              "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
 
             darkerZinc:
-              "bg-zinc-900 border border-black/20 dark:border-zinc-700 hover:border-zinc-300 duration-100 transition text-white",
+              "bg-zinc-900 border border-zinc-300 dark:border-zinc-700 hover:border-zinc-300 duration-100 transition text-white",
 
             outline:
               "shadow-none dark:text-white text-black border border-transparent hover:border-zinc-700 focus:border-brand-500 active:bg-brand-500 active:text-white active:border-brand-500",
diff --git a/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx b/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
index d0cfba2b..206d954c 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/Panel.tsx
@@ -2,7 +2,7 @@ export function Panel({ className, children }: StyleableWithChildren) {
   return (
     <div
       className={classes(
-        "flex flex-col rounded-lg border border-black/20 bg-white text-zinc-800 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white",
+        "flex flex-col rounded-lg border border-zinc-300 bg-white text-zinc-800 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx b/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
index 1fda4a4d..a133689f 100644
--- a/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
+++ b/packages/stablestudio-ui/src/Theme/Modal/TopBar.tsx
@@ -10,7 +10,7 @@ export function TopBar({
   return (
     <div
       className={classes(
-        "flex flex-row items-center justify-between rounded-t-lg border-b border-black/20 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900",
+        "flex flex-row items-center justify-between rounded-t-lg border-b border-zinc-300 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Popout/index.tsx b/packages/stablestudio-ui/src/Theme/Popout/index.tsx
index 8f23d874..062158c6 100644
--- a/packages/stablestudio-ui/src/Theme/Popout/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Popout/index.tsx
@@ -137,8 +137,8 @@ function Floating({
   );
 
   return (
-    <div className="flex max-h-[70vh] flex-col overflow-y-auto rounded border border-black/20 bg-white shadow-lg drop-shadow-lg dark:border-zinc-700 dark:bg-zinc-900 sm:ml-3 sm:max-h-[30rem] sm:w-[25rem]">
-      <div className="sticky top-0 z-[1] flex flex-row items-center justify-between border-b border-black/20 bg-white px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-900">
+    <div className="flex max-h-[70vh] flex-col overflow-y-auto rounded border border-zinc-300 bg-white shadow-lg drop-shadow-lg dark:border-zinc-700 dark:bg-zinc-900 sm:ml-3 sm:max-h-[30rem] sm:w-[25rem]">
+      <div className="sticky top-0 z-[1] flex flex-row items-center justify-between border-b border-zinc-300 bg-white px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-900">
         <h1 className="grow">{title}</h1>
         <Theme.Icon.X
           className="opacity-muted h-5 w-5 cursor-pointer hover:opacity-100"
diff --git a/packages/stablestudio-ui/src/Theme/Snackbar.tsx b/packages/stablestudio-ui/src/Theme/Snackbar.tsx
index 3a92ae15..3fc063c1 100644
--- a/packages/stablestudio-ui/src/Theme/Snackbar.tsx
+++ b/packages/stablestudio-ui/src/Theme/Snackbar.tsx
@@ -36,7 +36,7 @@ const Snackbar = React.forwardRef<
 
   return (
     <div
-      className="mb-4 flex items-center rounded-lg border border-black/20 bg-white p-3 text-zinc-500 shadow dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
+      className="mb-4 flex items-center rounded-lg border border-zinc-300 bg-white p-3 text-zinc-500 shadow dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
       role="alert"
       ref={ref}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx b/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
index f8ceebe0..faa56f21 100644
--- a/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Tooltip/index.tsx
@@ -140,7 +140,7 @@ export function Tooltip({
           {showArrow && (
             <motion.div
               className={classes(
-                "absolute z-[999999] h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-black/20 bg-zinc-900 dark:border-zinc-700",
+                "absolute z-[999999] h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-zinc-300 bg-zinc-900 dark:border-zinc-700",
                 placement === "top" && "border-b border-r",
                 placement === "bottom" && "border-l border-t",
                 placement === "left" && "border-r border-t",

From 8437c47c77651e60a562af79468c1fe03d224036 Mon Sep 17 00:00:00 2001
From: Harry Wang <harryjwang@gmail.com>
Date: Mon, 22 May 2023 07:33:49 -0400
Subject: [PATCH 3/6] button divider scroll updates

---
 .../src/Generation/Image/Images/Scroll/index.tsx              | 4 ++--
 packages/stablestudio-ui/src/Theme/Button/index.tsx           | 2 +-
 packages/stablestudio-ui/src/Theme/Divider/index.tsx          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/stablestudio-ui/src/Generation/Image/Images/Scroll/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Images/Scroll/index.tsx
index 0abeb16a..ce947fa1 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Images/Scroll/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Images/Scroll/index.tsx
@@ -38,7 +38,7 @@ export function Scroll({
         >
           <motion.div
             onClick={onScrollToTop}
-            className="bg-brand-500 hover:bg-brand-400 group pointer-events-auto flex h-[2.5rem] cursor-pointer select-none items-center justify-between gap-2 rounded-lg py-1.5 px-3 backdrop-blur-lg transition-colors duration-100"
+            className="text-white bg-brand-500 hover:bg-brand-400 group pointer-events-auto flex h-[2.5rem] cursor-pointer select-none items-center justify-between gap-2 rounded-lg py-1.5 px-3 backdrop-blur-lg transition-colors duration-100"
             initial={{ y: -50 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0 }}
@@ -79,7 +79,7 @@ export function Scroll({
         >
           <motion.div
             onClick={onScrollBack}
-            className="group pointer-events-auto flex h-[2.5rem] cursor-pointer select-none items-center justify-between gap-2 rounded-lg bg-zinc-900/75 py-1.5 px-3 backdrop-blur-lg transition-colors duration-100 hover:bg-zinc-900"
+            className="group pointer-events-auto flex h-[2.5rem] cursor-pointer select-none items-center justify-between gap-2 rounded-lg bg-zinc-200 px-3 py-1.5 backdrop-blur-lg transition-colors duration-100 hover:bg-zinc-300 dark:bg-zinc-900/75 dark:hover:bg-zinc-900"
             initial={{ y: 50 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0 }}
diff --git a/packages/stablestudio-ui/src/Theme/Button/index.tsx b/packages/stablestudio-ui/src/Theme/Button/index.tsx
index d7b1b113..52d3c41a 100644
--- a/packages/stablestudio-ui/src/Theme/Button/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Button/index.tsx
@@ -120,7 +120,7 @@ export namespace Button {
         classes(
           {
             brand:
-              "bg-brand-500 shadow-brand-500-md dark:shadow-none dark:bg-brand-600 dark:hover:bg-brand-500 border-brand-500 dark:border-brand-600",
+              "bg-brand-500 shadow-brand-500-md text-white dark:shadow-none dark:bg-brand-600 dark:hover:bg-brand-500 border-brand-500 dark:border-brand-600",
 
             indigo:
               "text-white bg-brand-500 shadow-brand-500-md dark:shadow-none dark:bg-brand-600",
diff --git a/packages/stablestudio-ui/src/Theme/Divider/index.tsx b/packages/stablestudio-ui/src/Theme/Divider/index.tsx
index c598c2c1..8c25b13e 100644
--- a/packages/stablestudio-ui/src/Theme/Divider/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Divider/index.tsx
@@ -7,7 +7,7 @@ export function Divider({
   const line = (
     <div
       className={classes(
-        "dark:bg-muted-white-extra grow bg-zinc-600",
+        "dark:bg-muted-white-extra grow bg-zinc-300",
         variant === "horizontal" && "h-[1px]",
         variant === "vertical" && "w-[1px]",
         lineClassName

From 5bf9778ddb06348dc435dd279a86828918e56ead Mon Sep 17 00:00:00 2001
From: faye <faye_1225@163.com>
Date: Tue, 23 May 2023 09:59:52 +0800
Subject: [PATCH 4/6] add:light/dark mode

---
 packages/stablestudio-ui/src/App/Sidebar/Section.tsx      | 2 +-
 packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx   | 1 +
 packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx    | 1 +
 packages/stablestudio-ui/src/App/TopBar/Right/index.tsx   | 1 +
 .../src/Editor/Entity/Entities/Sidebar.tsx                | 8 +++++---
 packages/stablestudio-ui/src/Editor/Sidebar/index.tsx     | 1 +
 packages/stablestudio-ui/src/Editor/Tool/index.tsx        | 6 ++++--
 .../stablestudio-ui/src/Generation/Image/Prompt/index.tsx | 2 +-
 .../src/Generation/Image/Sidebar/index.tsx                | 1 +
 packages/stablestudio-ui/src/Theme/Button/index.tsx       | 6 ++++--
 packages/stablestudio-ui/src/Theme/Common/index.tsx       | 3 ++-
 packages/stablestudio-ui/src/Theme/Input/index.tsx        | 2 +-
 packages/stablestudio-ui/src/Theme/Label.tsx              | 2 +-
 packages/stablestudio-ui/src/Theme/Slider.tsx             | 4 ++--
 14 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
index 76a0c27a..c2c362f0 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
@@ -78,7 +78,7 @@ export function Section(props: Section.Props) {
                   ))
             }
           >
-            {title}
+            <h1 className="w-full font-normal text-slate-800 dark:text-white">{title}</h1>
           </Theme.Button>
           {buttonRendered}
         </div>
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
index 62295c60..91c0c06a 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
@@ -38,6 +38,7 @@ export function Buttons({ position }: App.Sidebar.Props) {
             active: tab.name === sidebar.tab,
             className: classes("justify-start", !!tab.button && "w-full"),
             children: tab.name,
+            color: tab.color,
             onClick,
           };
 
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx
index 6612545e..26780d8a 100644
--- a/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx
+++ b/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx
@@ -22,6 +22,7 @@ export type Tab = {
 
   icon?: Theme.Icon.Prop;
   button?: Theme.Button.Prop;
+  color?: Theme.Common.Color;
 
   above?: React.ReactNode;
   below?: React.ReactNode;
diff --git a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
index b8586a78..300fabbf 100644
--- a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
+++ b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
@@ -37,6 +37,7 @@ export const Right = () => {
         )}
 
         <Theme.Button
+          outline
           onClick={() => setDark(!dark)}
           className="aspect-square h-[30px] w-[30px]"
           icon={dark ? Theme.Icon.Dark : Theme.Icon.Light}
diff --git a/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx b/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
index c2306be0..7e329ee5 100644
--- a/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
+++ b/packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
@@ -22,7 +22,7 @@ export namespace Sidebar {
     return (
       <>
         <App.Sidebar.Section collapsable divider defaultExpanded padding="none">
-          <div className="flex border-b border-zinc-800 py-2 pl-1">
+          <div className="flex border-b border-zinc-300 py-2 pl-1 dark:border-zinc-800">
             <Theme.Button
               transparent
               icon={Theme.Icon.Plus}
@@ -67,7 +67,7 @@ export namespace Sidebar {
           </div>
         </App.Sidebar.Section>
         <App.Sidebar.Section collapsable divider defaultExpanded padding="none">
-          <div className="flex border-b border-zinc-800 py-2 pl-1">
+          <div className="flex border-b border-zinc-300 py-2 pl-1 dark:border-zinc-800">
             <Theme.Button
               transparent
               icon={Theme.Icon.Upload}
@@ -140,7 +140,9 @@ function Entity({ id, ...props }: { id: ID; index: number; total: number }) {
       onClick={onClick}
       className={classes(
         "group flex items-center gap-3 p-2",
-        selected ? "bg-brand-700" : "dark:hover:bg-zinc-800/50 hover:bg-zinc-300"
+        selected
+          ? "bg-brand-700 text-white"
+          : "hover:bg-zinc-300 dark:hover:bg-zinc-800/50"
       )}
     >
       <Preview entity={entity} />
diff --git a/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx b/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx
index eeecc6dc..d5e82395 100644
--- a/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx
+++ b/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx
@@ -65,6 +65,7 @@ export function Sidebar() {
           location.pathname.startsWith("/generate") ||
           location.pathname.startsWith("/edit")
         }
+        color="slate"
         button={(props) => (
           <App.Sidebar.Tab.Button {...props} onClick={props.onClick}>
             Edit
diff --git a/packages/stablestudio-ui/src/Editor/Tool/index.tsx b/packages/stablestudio-ui/src/Editor/Tool/index.tsx
index 5873e94c..ced54f4a 100644
--- a/packages/stablestudio-ui/src/Editor/Tool/index.tsx
+++ b/packages/stablestudio-ui/src/Editor/Tool/index.tsx
@@ -40,8 +40,10 @@ export function Tool({
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         className={classes(
-          "m-0.5 flex h-10 w-10 cursor-pointer items-center justify-center rounded",
-          active || tool === activeTool ? "bg-brand-500" : "hover:bg-zinc-700"
+          "m-0.5 flex h-10 w-10 cursor-pointer items-center justify-center rounded ",
+          active || tool === activeTool
+            ? "bg-brand-500 text-white"
+            : "hover:bg-zinc-700 hover:text-white hover:dark:text-black"
         )}
       >
         {children}
diff --git a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
index d19becd1..da2b7de5 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
@@ -164,7 +164,7 @@ export function Prompt({
                 />
               )}
             >
-              <h1 className="w-full font-light">
+              <h1 className="w-full font-normal text-slate-800 dark:text-white">
                 {(input.prompts[index]?.weight ?? 0) > 0
                   ? input.prompts.filter((p: Prompt) => p.weight > 0).length ===
                     1
diff --git a/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx
index 58383087..9244a984 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx
@@ -23,6 +23,7 @@ export function Sidebar() {
         location.pathname.startsWith("/generate") ||
         location.pathname.startsWith("/edit")
       }
+      color="slate"
       bottom={
         <App.Sidebar.Tab.Bottom>
           <Generation.Image.Create.Button
diff --git a/packages/stablestudio-ui/src/Theme/Button/index.tsx b/packages/stablestudio-ui/src/Theme/Button/index.tsx
index 52d3c41a..5444495c 100644
--- a/packages/stablestudio-ui/src/Theme/Button/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Button/index.tsx
@@ -133,8 +133,10 @@ export namespace Button {
 
             zinc: "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
 
+            slate:
+              "shadow-black/5 ring-1 ring-slate-700/10 rounded-md bg-white hover:bg-zinc-50 dark:shadow-none dark:text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
             white:
-              "shadow-black/5 bg-zinc-200 hover:bg-zinc-300 dark:shadow-none text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
+              "shadow-black/5 bg-zinc-200 hover:bg-slate-50 dark:shadow-none text-white/80 dark:hover:text-white dark:bg-zinc-800 dark:hover:bg-zinc-700 border-zinc-300 dark:border-zinc-700",
 
             darkerZinc:
               "bg-zinc-900 border border-zinc-300 dark:border-zinc-700 hover:border-zinc-300 duration-100 transition text-white",
@@ -216,7 +218,7 @@ export namespace Button {
           right && !fullWidth ? (
             right
           ) : (
-            <div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
+            <div className="absolute bottom-0 right-2 top-0 flex items-center justify-center">
               {right}
             </div>
           ),
diff --git a/packages/stablestudio-ui/src/Theme/Common/index.tsx b/packages/stablestudio-ui/src/Theme/Common/index.tsx
index 81e82016..abf55c8f 100644
--- a/packages/stablestudio-ui/src/Theme/Common/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Common/index.tsx
@@ -11,7 +11,8 @@ export namespace Common {
     | "green"
     | "yellow"
     | "zinc"
-    | "white";
+    | "white"
+    | "slate";
   export namespace Color {
     export const preset = (): Color => "zinc";
   }
diff --git a/packages/stablestudio-ui/src/Theme/Input/index.tsx b/packages/stablestudio-ui/src/Theme/Input/index.tsx
index ad884da8..fec817bd 100644
--- a/packages/stablestudio-ui/src/Theme/Input/index.tsx
+++ b/packages/stablestudio-ui/src/Theme/Input/index.tsx
@@ -85,7 +85,7 @@ function AutosizeTextArea({
     <textarea
       ref={textareaRef}
       className={classes(
-        "dark:placeholder:text-muted-white w-full resize-none overflow-y-clip rounded text-black shadow-sm focus:border-transparent focus:outline-none dark:border-transparent dark:text-white",
+        "prose dark:prose-invert w-full resize-none overflow-y-clip rounded opacity-75 shadow-sm focus:border-transparent focus:outline-none dark:border-transparent",
 
         size === "sm"
           ? "h-8 px-2 py-1 text-sm"
diff --git a/packages/stablestudio-ui/src/Theme/Label.tsx b/packages/stablestudio-ui/src/Theme/Label.tsx
index 328a6e1c..e619b576 100644
--- a/packages/stablestudio-ui/src/Theme/Label.tsx
+++ b/packages/stablestudio-ui/src/Theme/Label.tsx
@@ -2,7 +2,7 @@ export function Label({ children, className }: StyleableWithChildren) {
   return (
     <h2
       className={classes(
-        "opacity-muted -mb-1 ml-2.5 select-none text-sm font-light",
+        "-mb-1 ml-2.5 select-none font-normal text-slate-800 dark:text-white",
         className
       )}
     >
diff --git a/packages/stablestudio-ui/src/Theme/Slider.tsx b/packages/stablestudio-ui/src/Theme/Slider.tsx
index 3e8a883f..2836c37f 100644
--- a/packages/stablestudio-ui/src/Theme/Slider.tsx
+++ b/packages/stablestudio-ui/src/Theme/Slider.tsx
@@ -153,8 +153,8 @@ export const Slider = ({
         className={classes(
           "relative h-3.5 w-3.5 -translate-y-[5.25px] rounded-full border-[2px] outline-none transition duration-150",
           moving
-            ? "scale-110 border-white shadow-lg"
-            : "scale-100 border-zinc-800 shadow-md",
+            ? "scale-110 border-zinc-800 shadow-lg dark:border-white"
+            : "scale-100 border-zinc-500 shadow-md dark:border-zinc-500",
           value === 0
             ? "bg-zinc-500 dark:bg-zinc-600"
             : value >= 0

From 84027aef67a0f12663b76b517f5ba6d60104b8e5 Mon Sep 17 00:00:00 2001
From: faye <faye_1225@163.com>
Date: Fri, 26 May 2023 12:39:42 +0800
Subject: [PATCH 5/6] fix:link #Stability-AI/StableStudio/issues/72

---
 packages/stablestudio-ui/src/App/TopBar/Right/index.tsx   | 2 +-
 .../src/Generation/Image/Modal/Content.tsx                | 2 +-
 packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx          | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
index 300fabbf..c87d671f 100644
--- a/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
+++ b/packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
@@ -5,7 +5,7 @@ import { Theme } from "~/Theme";
 export const Right = () => {
   const { setIsOpen } = Shortcut.Palette.use();
   const isMobileDevice = Theme.useIsMobileDevice();
-  const [dark, setDark] = useState(false);
+  const [dark, setDark] = useState(true);
 
   useEffect(() => {
     const root = document.querySelectorAll("#modal-root, #app");
diff --git a/packages/stablestudio-ui/src/Generation/Image/Modal/Content.tsx b/packages/stablestudio-ui/src/Generation/Image/Modal/Content.tsx
index ad096272..22011756 100644
--- a/packages/stablestudio-ui/src/Generation/Image/Modal/Content.tsx
+++ b/packages/stablestudio-ui/src/Generation/Image/Modal/Content.tsx
@@ -246,7 +246,7 @@ function Field({
       ) : (
         name
       )}
-      <span className="text-white/90">{value}</span>
+      <span className="dark:text-white/90 text-slate-800">{value}</span>
     </h1>
   );
 }
diff --git a/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx b/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
index c53cba15..24dde29b 100644
--- a/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
+++ b/packages/stablestudio-ui/src/Theme/Icon/SVGs.tsx
@@ -310,7 +310,7 @@ export function Generate(props: Props) {
 }
 
 export function Variation(props: Props) {
-  return defaults(props)(({ width, height, ...props }) => (
+  return defaults(props)(({ width, height, color, ...props }) => (
     <svg
       width={width}
       height={height}
@@ -321,19 +321,19 @@ export function Variation(props: Props) {
     >
       <path
         d="M3.67183 13.5269L3.67184 11.1072C3.67184 10.0026 4.56727 9.10722 5.67184 9.10722L9.86719 9.10722C10.9718 9.10722 11.8672 8.21179 11.8672 7.10722L11.8672 2.25825"
-        stroke="#F9FAFB"
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14.3262 3.94141L11.9116 1.52683L9.49701 3.94141"
-        stroke="#F9FAFB"
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M3.67188 13.5269L3.67188 4.30708"
-        stroke="#F9FAFB"
+        stroke={color}
         strokeLinecap="round"
       />
     </svg>

From acdcbbcc34159da025e1ff864d66906bbb3860fa Mon Sep 17 00:00:00 2001
From: Harry Wang <harryjwang@gmail.com>
Date: Sat, 27 May 2023 12:55:08 -0400
Subject: [PATCH 6/6] minor fix

---
 packages/stablestudio-ui/src/Theme/Logo/Next.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/stablestudio-ui/src/Theme/Logo/Next.tsx b/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
index 8bf406ec..d6f07c13 100644
--- a/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
+++ b/packages/stablestudio-ui/src/Theme/Logo/Next.tsx
@@ -7,7 +7,7 @@ export function Next() {
       <div className="flex flex-col">
         <span className="text-lg font-medium">StableStudio</span>
         <span className="-mt-1 text-xs font-light">
-          <span className="text-black/75 dark:text-white/75">by </span>
+        <span className="text-black/75 dark:text-white/75">by </span>
           stability.ai
         </span>
       </div>