initial dark mode support

Comfy-Org · Aug 23, 2024 · 377f9f4 · 377f9f4
1 parent 8f46c38
commit 377f9f4
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 8 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,7 +3,7 @@ import Link from "next/link"
 export const Header = () => {
     return (
         <div style={{ padding: 20 }}>
-            <h1 className="text-center text-3xl text-gray-700 mb-4">
+            <h1 className="text-center text-3xl text-gray-700 dark:text-gray-200 mb-4">
                 Comfy Workflows CI/CD
             </h1>
             <div className="flex justify-center gap-4">

diff --git a/components/LongTextPreview.tsx b/components/LongTextPreview.tsx
@@ -6,15 +6,15 @@ const LongTextPreview = ({ text, previewLines = 1 }) => {
     const preview = lines.slice(0, previewLines).join('\n');
 
     return (
-        <div className="border rounded-md p-2 bg-gray-50">
+        <div className="border rounded-md p-2 bg-gray-50 dark:bg-gray-900">
             <pre className="whitespace-pre-wrap break-words">
                 {isExpanded ? text : preview}
                 {lines.length > previewLines && !isExpanded && '...'}
             </pre>
             {lines.length > previewLines && (
                 <button
                     onClick={() => setIsExpanded(!isExpanded)}
-                    className="mt-2 text-blue-600 hover:text-blue-800 underline"
+                    className="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600 underline"
                 >
                     {isExpanded ? 'Show Less' : 'Show More'}
                 </button>

diff --git a/components/StatusButton.tsx b/components/StatusButton.tsx
@@ -1,5 +1,4 @@
 import { Tooltip } from 'flowbite-react';
-import { useRouter } from 'next/router';
 
 interface OSStatusButtonProps {
     text: string;

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -1,10 +1,15 @@
+import React, { useEffect } from 'react';
 import Head from 'next/head'
 import { ThemeModeScript } from 'flowbite-react'
 import { Header } from './Header'
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 export default function Layout({ children }: React.PropsWithChildren) {
+    useEffect(() => {
+      document.body.classList.add('dark');
+       document.body.classList.add('dark:bg-gray-900');
+    }, []);
     return (
         <>
             <Head>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -90,7 +90,7 @@ function GitCommitsList() {
     }, [router.query.repo]);
 
     return (
-        <div style={{ padding: 20 }}>
+        <div style={{ padding: 20 }} className="dark:text-white">
             <h3>Filters</h3>
             <div className="flex items-center gap-2 mb-4">
                 <Badge href={`https://github.com/${repoFilter}`}>

diff --git a/pages/waterfall/index.tsx b/pages/waterfall/index.tsx
@@ -102,7 +102,7 @@ function GitCommitsList() {
 
 
     return (
-        <div style={{ padding: 20 }}>
+        <div style={{ padding: 20 }} className="dark:text-white">
             <h3>Filters</h3>
             <div className="flex items-center gap-2 mb-4">
                 <Badge href={`https://github.com/${repoFilter}`}>

diff --git a/pages/workflow/[id].tsx b/pages/workflow/[id].tsx
@@ -36,7 +36,7 @@ function WorkflowResultDetail() {
 
     return (
         <div className="space-y-6 p-10">
-            <div className="bg-white shadow rounded-lg p-4">
+            <div className="bg-white dark:bg-gray-900 shadow rounded-lg p-4">
                 <div className="flex flex-col items-center justify-center sm:flex-row gap-2">
                     <div>
                         {workflowResult?.storage_file?.public_url && (
@@ -148,7 +148,7 @@ function WorkflowResultDetail() {
                 </Table>
             </Card>
 
-            <Card>
+            <Card className="text-black dark:text-white">
                 <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                     Machine Stats
                 </h5>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
+    darkMode: 'media',
     content: [
         './pages/**/*.{js,ts,jsx,tsx}',
         './components/**/*.{js,ts,jsx,tsx}',