Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Light Mode Support #67

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Light Mode Support #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
356158e
add:light and dark mode
faye1225 May 22, 2023
b9dd812
change border-black/20 to border-zinc-300
harrywang May 22, 2023
8437c47
button divider scroll updates
harrywang May 22, 2023
5bf9778
add:light/dark mode
faye1225 May 23, 2023
4615031
Merge pull request #1 from harrywang/dev
faye1225 May 23, 2023
e322c4e
Merge branch 'main' of https://github.com/Stability-AI/StableStudio
harrywang May 23, 2023
61579c9
Merge branch 'main' of https://github.com/Stability-AI/StableStudio
harrywang May 25, 2023
84027ae
fix:link #Stability-AI/StableStudio/issues/72
faye1225 May 26, 2023
acdcbbc
minor fix
harrywang May 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/App/BottomBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/App/Sidebar/Resizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
)}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/stablestudio-ui/src/App/Sidebar/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion packages/stablestudio-ui/src/App/Sidebar/Tab/Bottom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion packages/stablestudio-ui/src/App/Sidebar/Tab/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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,
};

Expand Down
1 change: 1 addition & 0 deletions packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/App/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
)}
>
Expand Down
21 changes: 21 additions & 0 deletions packages/stablestudio-ui/src/App/TopBar/Right/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<>
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/App/TopBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions packages/stablestudio-ui/src/App/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Editor/Dream/Results.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 6 additions & 4 deletions packages/stablestudio-ui/src/Editor/Entity/Entities/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Editor/Export/Everything.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/stablestudio-ui/src/Editor/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions packages/stablestudio-ui/src/Editor/Tool/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 5 additions & 3 deletions packages/stablestudio-ui/src/Generation/Image/Controls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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
/>
),
Expand All @@ -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
/>
),
Expand All @@ -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
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/stablestudio-ui/src/Generation/Image/Images/Delete/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}
Expand Down Expand Up @@ -60,6 +60,7 @@ export function Button({
onClick={() => setDeleteConfirming(true)}
transparent={!outline}
outline={outline}
color={deleteTooltip ? "zinc" : "white"}
noBg={outline}
/>
),
Expand Down
4 changes: 2 additions & 2 deletions packages/stablestudio-ui/src/Generation/Image/Images/Scroll/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down Expand Up @@ -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 }}
Expand Down
6 changes: 3 additions & 3 deletions packages/stablestudio-ui/src/Generation/Image/Input/Image/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Generation/Image/Modal/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/stablestudio-ui/src/Generation/Image/Prompt/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Generation/Image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Generation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Settings/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/stablestudio-ui/src/Settings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading