Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

configure dark mode styles

Browse Source
This commit is contained in:
kachbit 2023-11-27 21:29:02 -08:00
parent 4c71db12b4
commit 549d87942b
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/App.tsx
View File

@ -157,7 +157,7 @@ function App() {
}; };
return ( return (
<div className="mt-2"> <div className="mt-2 dark:bg-black dark:text-white">
{IS_RUNNING_ON_CLOUD && <PicoBadge />} {IS_RUNNING_ON_CLOUD && <PicoBadge />}
{IS_RUNNING_ON_CLOUD && ( {IS_RUNNING_ON_CLOUD && (
<TermsOfServiceDialog <TermsOfServiceDialog
@ -167,7 +167,7 @@ function App() {
)} )}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col"> <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
<div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6"> <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
<div className="flex items-center justify-between mt-10"> <div className="flex items-center justify-between mt-10">
<h1 className="text-2xl ">Screenshot to Code</h1> <h1 className="text-2xl ">Screenshot to Code</h1>
<SettingsDialog settings={settings} setSettings={setSettings} /> <SettingsDialog settings={settings} setSettings={setSettings} />
@ -191,7 +191,7 @@ function App() {
{executionConsole.slice(-1)[0]} {executionConsole.slice(-1)[0]}
</div> </div>
<div className="flex mt-4 w-full"> <div className="flex mt-4 w-full">
<Button onClick={stop} className="w-full"> <Button onClick={stop} className="w-full dark:text-white dark:bg-gray-700">
Stop Stop
</Button> </Button>
</div> </div>
@ -208,26 +208,32 @@ function App() {
value={updateInstruction} value={updateInstruction}
/> />
<div className="flex justify-between items-center gap-x-2"> <div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700"> <div className="font-500 text-xs text-slate-700 dark:text-white">
Include screenshot of current version? Include screenshot of current version?
</div> </div>
<Switch <Switch
checked={shouldIncludeResultImage} checked={shouldIncludeResultImage}
onCheckedChange={setShouldIncludeResultImage} onCheckedChange={setShouldIncludeResultImage}
className="dark:bg-gray-700"
/> />
</div> </div>
<Button onClick={doUpdate}>Update</Button> <Button
onClick={doUpdate}
className="dark:text-white dark:bg-gray-700"
>
Update
</Button>
</div> </div>
<div className="flex items-center gap-x-2 mt-2"> <div className="flex items-center gap-x-2 mt-2">
<Button <Button
onClick={downloadCode} onClick={downloadCode}
className="flex items-center gap-x-2" className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
> >
<FaDownload /> Download <FaDownload /> Download
</Button> </Button>
<Button <Button
onClick={reset} onClick={reset}
className="flex items-center gap-x-2" className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
> >
<FaUndo /> <FaUndo />
Reset Reset
@ -245,7 +251,7 @@ function App() {
})} })}
> >
<img <img
className="w-[340px] border border-gray-200 rounded-md" className="w-[340px] border border-gray-200 rounded-md dark:invert"
src={referenceImages[0]} src={referenceImages[0]}
alt="Reference" alt="Reference"
/> />

19
frontend/src/index.css
View File

@ -62,8 +62,25 @@
--radius: 0.5rem; --radius: 0.5rem;
} }
/* invert image for dark theme */
.invert {
filter: invert();
}
body.dark {
background-color: black;
}
div[role="presentation"].dark {
background-color: #09090b !important;
}
iframe {
background-color: white !important;
}
.dark { .dark {
--background: 222.2 84% 4.9%; --background: 222.2 0% 0%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 222.2 84% 4.9%;