Light Mode Support

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

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"
       )}
     >

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-zinc-300 last-of-type:border-b-0 dark:border-zinc-700",
         divider && "border-b-1 border-b",
         className
       )}
@@ -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>

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-zinc-300 p-2 dark:border-zinc-700",
+        className
+      )}
     >
       {children}
     </div>

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-zinc-300 p-2 dark:border-zinc-700">
         {tabs.map((tab) => {
           if (tab.button === false) return null;
 
@@ -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,
           };
 

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;

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-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900",
         showing && (position === "left" ? "border-r" : "border-l")
       )}
     >

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(true);
+
+  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,14 @@ export const Right = () => {
             <Shortcut.Keys keys={["Meta", "k"]} className="ml-2" />
           </Theme.Button>
         )}
+
+        <Theme.Button
+          outline
+          onClick={() => setDark(!dark)}
+          className="aspect-square h-[30px] w-[30px]"
+          icon={dark ? Theme.Icon.Dark : Theme.Icon.Light}
+        />
+
         <Link to="/settings">
           <Theme.Button
             outline

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 />

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 />

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);

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" : "hover:bg-zinc-800/50"
+        selected
+          ? "bg-brand-700 text-white"
+          : "hover:bg-zinc-300 dark:hover:bg-zinc-800/50"
       )}
     >
       <Preview entity={entity} />
@@ -171,7 +173,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>

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-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>

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

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}

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
                 />

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}
         />
       ),

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 }}

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-zinc-300 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}

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>
   );
 }

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-zinc-300 px-3 py-2 dark:border-zinc-700 dark:bg-zinc-800",
         className
       )}
     >
@@ -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

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

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-zinc-300 opacity-0 duration-150 dark:border-zinc-700",
         (variant !== "editor" || loading) && "bg-zinc-900/50",
         (variant === "editor" || showing) && "opacity-100"
       )}

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
         )}
       >

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>
     </>

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-zinc-300 dark:border-zinc-700 bg-white p-5 dark:bg-zinc-800",
         className
       )}
     >

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">