Merge pull request #14 from jkremser/dark

dark theme by default

samples/stable-diffusion/webui/app/globals.css

@@ -3,21 +3,11 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-  --scrollbar: #888;
-  --scrollbar-hover: #999;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-    --scrollbar: #444;
-    --scrollbar-hover: #555;
-  }
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
+  --scrollbar: #444;
+  --scrollbar-hover: #555;
 }
 
 body {

samples/stable-diffusion/webui/app/page.tsx

@@ -11,7 +11,7 @@ const Home = async () => {
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <Prompt sendToQ={sendToQueue} />
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white from-black via-black lg:static lg:size-auto lg:bg-none">
           <a
             className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
             href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
@@ -31,9 +31,9 @@ const Home = async () => {
       </div>
       <GeneratedImages />
 
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
+      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:bg-gradient-to-br before:from-transparent before:to-blue-700 before:opacity-10 after:from-sky-900 after:via-[#0141ff] after:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
         <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70]"
+          className="relative drop-shadow-[0_0_0.3rem_#ffffff70]"
           src="/logo-kedify-mobile.svg"
           alt="Kedify Logo small"
           width={80}

samples/stable-diffusion/webui/app/prompt.tsx

@@ -30,10 +30,10 @@ export const Prompt: React.FC<PromptProps> = ({ sendToQ }) => {
     <div className="flex flex-col gap-5">
       <div className="flex items-left">
         <div className="pt-5 mr-2">Prompt:</div>
-        <input className="backdrop-blur-2xl dark:from-inherit static w-auto rounded-xl border bg-gray-100 p-4 dark:bg-zinc-800/30 prompt"
+        <input className="backdrop-blur-2xl from-inherit static w-auto rounded-xl border bg-gray-100 p-4 bg-zinc-800/30 prompt"
             name="prompt" placeholder='Yellow submarine' value={prompt} onChange={e => setPrompt(e.target.value)}>
         </input>
-        <button className="ml-5 bg-transparent border border-slate-200 rounded-xl dark:border-slate-700 dark:text-slate-100 p-4 generate" onClick={generateOnClick}>Generate</button>
+        <button className="ml-5 bg-transparent border border-slate-200 rounded-xl border-slate-700 text-slate-100 p-4 generate" onClick={generateOnClick}>Generate</button>
         <ToastContainer 
           position="top-right"
           autoClose={7000}