From e16c5770a1eedeece2365d499f2dc4d2db5780d2 Mon Sep 17 00:00:00 2001 From: Bappadala Rohith Kumar Naidu <198095685+rohitkumarnaidu@users.noreply.github.com> Date: Sun, 19 Jul 2026 14:17:01 +0530 Subject: [PATCH 1/4] feat: Add Dark Mode Toggle (fixes #37) --- src/App.tsx | 6 ++- src/components/CenterCanvas.tsx | 70 ++++++++++++++++++++------------- src/components/LeftSidebar.tsx | 42 ++++++++++---------- src/components/RightSidebar.tsx | 28 ++++++------- src/components/Toast.tsx | 2 +- src/index.css | 7 ++++ src/utils/useDarkMode.ts | 29 ++++++++++++++ 7 files changed, 119 insertions(+), 65 deletions(-) create mode 100644 src/utils/useDarkMode.ts diff --git a/src/App.tsx b/src/App.tsx index 1e9fe41..05f4433 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import CenterCanvas from './components/CenterCanvas'; import RightSidebar from './components/RightSidebar'; import Toast from './components/Toast'; import { Block, ToastConfig } from './types'; +import { useDarkMode } from './utils/useDarkMode'; // Default blueprint layout tracking const initialDemoBlocks: Block[] = [ @@ -53,6 +54,7 @@ const initialDemoBlocks: Block[] = [ ]; export default function App() { + const { isDarkMode, toggleDarkMode } = useDarkMode(); const [blocks, setBlocks] = useState(initialDemoBlocks); const [selectedBlockId, setSelectedBlockId] = useState('demo-1'); const [activeParentId, setActiveParentId] = useState(null); @@ -229,7 +231,7 @@ export default function App() { const selectedBlock = blocks.find((b) => b.id === selectedBlockId) || null; return ( -
+
{/* LEFT SIDEBAR CONTROLS */} {/* RIGHT SIDEBAR PROPERTIES */} diff --git a/src/components/CenterCanvas.tsx b/src/components/CenterCanvas.tsx index b975324..a3e726b 100644 --- a/src/components/CenterCanvas.tsx +++ b/src/components/CenterCanvas.tsx @@ -17,7 +17,9 @@ import { Database, ZoomIn, ZoomOut, - FilePlus + FilePlus, + Sun, + Moon } from 'lucide-react'; import { toPng } from 'html-to-image'; import { jsPDF } from 'jspdf'; @@ -35,6 +37,8 @@ interface CenterCanvasProps { onNewFlowchart: () => void; onAddFirstBlock: () => void; showToast?: (message: string, type?: 'success' | 'info' | 'error') => void; + isDarkMode: boolean; + toggleDarkMode: () => void; } export default function CenterCanvas({ @@ -47,6 +51,8 @@ export default function CenterCanvas({ onNewFlowchart, onAddFirstBlock, showToast, + isDarkMode, + toggleDarkMode }: CenterCanvasProps) { const canvasRef = useRef(null); const containerRef = useRef(null); @@ -325,27 +331,27 @@ export default function CenterCanvas({ switch (type) { case 'terminator': - return `${baseClass} ${selectedClass} rounded-full bg-white text-indigo-900`; + return `${baseClass} ${selectedClass} rounded-full bg-white dark:bg-gray-900 text-indigo-900`; case 'process': - return `${baseClass} ${selectedClass} rounded-xl bg-white text-indigo-950`; + return `${baseClass} ${selectedClass} rounded-xl bg-white dark:bg-gray-900 text-indigo-950`; case 'decision': // A rotated square needs specific sizing and text handling - return `${baseClass} ${selectedClass} bg-white text-indigo-950`; + return `${baseClass} ${selectedClass} bg-white dark:bg-gray-900 text-indigo-950`; case 'io': - return `${baseClass} ${selectedClass} bg-white text-indigo-950`; + return `${baseClass} ${selectedClass} bg-white dark:bg-gray-900 text-indigo-950`; default: - return `${baseClass} ${selectedClass} bg-white text-indigo-950`; + return `${baseClass} ${selectedClass} bg-white dark:bg-gray-900 text-indigo-950`; } }; return ( -
+
{/* Top Toolbar */} -
-
- Workspace - / - +
+
+ Workspace + / + Form-Flow Sandbox STABLE @@ -356,7 +362,7 @@ export default function CenterCanvas({ id="toolbar-btn-save" onClick={onSave} title="Save blueprint to Local Storage" - className="px-3 py-1.5 border border-gray-200 hover:border-gray-300 text-gray-600 hover:text-gray-800 hover:bg-gray-50 text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer" + className="px-3 py-1.5 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 dark:border-gray-600 text-gray-600 dark:text-gray-400 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-800 text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer" > Save @@ -366,7 +372,7 @@ export default function CenterCanvas({ id="toolbar-btn-load" onClick={onLoad} title="Load blueprint from Local Storage" - className="px-3 py-1.5 border border-gray-200 hover:border-gray-300 text-gray-600 hover:text-gray-800 hover:bg-gray-50 text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer" + className="px-3 py-1.5 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 dark:border-gray-600 text-gray-600 dark:text-gray-400 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-800 text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer" > Load @@ -383,11 +389,19 @@ export default function CenterCanvas({
+ + - + {Math.round(scale * 100)}% @@ -756,16 +770,16 @@ export default function CenterCanvas({ {/* Confirmation Dialog Modal */} {showConfirmModal && (
-
-

New Flowchart Confirmation

-

+

+

New Flowchart Confirmation

+

Start a new flowchart? Current work will be lost.

diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx index 2422e9a..ad4bd9b 100644 --- a/src/components/LeftSidebar.tsx +++ b/src/components/LeftSidebar.tsx @@ -103,15 +103,15 @@ export default function LeftSidebar({ }; return ( -