defined dark/light mode

src/App.css

@@ -1,12 +1,25 @@
 #root {
   margin: 0 auto;
-  text-align: center;
-  --primary-background: #041729;
-  --primary-table: #04293a;
-  --primary-header: #ecb365;
-  --primary-text: #ffffff;
+  text-align: center; 
+}
+.light {
+  --primary-background: #F1F5F9;        
+  --secondary-background: #FEFDFE;      
+  --accent-color: #e367f4;             
+  --highlight-color: #E6EAF2;          
+  --primary-toolbar: #FEFDFE; 
+  --text-color:#202020;
+}
+.dark {
+  --primary-background:#2E263E;
+  --secondary-background:#342C44;
+  --accent-color:#6ff1d9;
+  --highlight-color: #4B485B;
+  --primary-toolbar:#342C44;
+  --text-color:#D1D6E1;
 }
 
+
 .logo {
   height: 6em;
   padding: 1.5em;

src/App.tsx

@@ -1,11 +1,14 @@
-import './App.css';
-import { MainScene } from '@/scenes';
+
+import "./App.css";
+import { MainScene } from "@/scenes";
+import { useThemeContext } from "./core/providers";
 
 function App() {
+  const { theme } = useThemeContext()
   return (
-    <>
+    <div className={ theme.themeMode }>
       <MainScene />
-    </>
+    </div>
   );
 }
 

src/core/providers/index.ts

@@ -1,2 +1,3 @@
 export * from './canvas-view-settings';
 export * from './modal-dialog-provider';
+export * from './theme-provider';

src/core/providers/theme-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './theme-context';
+export * from './theme-provider';

src/core/providers/theme-provider/theme-context.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { ThemeModel } from './theme.model';
+
+
+export const ThemeContext = createContext<{theme: ThemeModel; toggleTheme: () => void} | null>(null);
+

src/core/providers/theme-provider/theme-provider.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ThemeContext } from './theme-context';
+import { ThemeModel, createInitialTheme } from './theme.model';
+
+interface Props {
+  children: React.ReactNode;
+}
+export const ThemeProvider: React.FC<Props> = (props) => {
+  const { children } = props;
+  const [theme, setTheme] = React.useState<ThemeModel>(createInitialTheme());
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => ({
+      ...prevTheme,
+      themeMode: prevTheme.themeMode === 'light' ? 'dark' : 'light',
+    }));
+  };
+
+  return (
+    <ThemeContext.Provider value={{theme, toggleTheme}}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useThemeContext = () => {
+  const context = React.useContext(ThemeContext);
+  if (context === null) {
+    throw new Error('useThemeContext: Ensure you have wrapped your app with ThemeProvider');
+  }
+
+  return context;
+};

src/core/providers/theme-provider/theme.model.ts

@@ -0,0 +1,7 @@
+export interface ThemeModel {
+  themeMode: 'dark' | 'light';
+}
+
+export const createInitialTheme = (): ThemeModel => ({
+  themeMode: 'light',
+})

src/main.tsx

@@ -1,10 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import { ThemeProvider } from './core/providers/theme-provider/theme-provider.tsx'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
 );
+

src/pods/canvas/canvas.pod.module.css

@@ -2,5 +2,9 @@
   width: 100%;
   height: 100%;
   overflow: scroll;
+}
+
+.container {
   background-color: var(--primary-background);
 }
+

src/pods/canvas/canvas.pod.tsx

@@ -4,14 +4,15 @@ import { useCanvasViewSettingsContext } from '@/core/providers';
 import { Coords, GUID, Size } from '@/core/model';
 import { mockSchema } from './canvas.mock.data';
 import { DatabaseTable } from './components/table/database-table.component';
-import classes from './canvas.pod.module.css';
 import { calculateTablePosition, findField } from './canvas.business';
+import classes from './canvas.pod.module.css';
+
 
 export const CanvasPod: React.FC = () => {
   const [schema, setSchema] = React.useState(() => mockSchema);
   const { canvasViewSettings } = useCanvasViewSettingsContext();
   const { canvasSize, zoomFactor } = canvasViewSettings;
-
+  
   const viewBoxSize: Size = React.useMemo<Size>(
     () => ({
       width: canvasSize.width * zoomFactor,

src/pods/canvas/components/table/database-table.module.css

@@ -1,24 +1,23 @@
-.tableContainer {
-  filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 0.5));
-}
 .tableText {
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   cursor: pointer;
+  fill: var(--text-color);
 }
 
 .tableHeader {
-  fill: var(--primary-header);
+  fill: var(--secondary-background); 
 }
 
 .table {
   fill: none;
+  stroke: var(--highlight-color);
 }
 
 .table__background {
-  fill: var(--primary-table);
+  fill: var(--secondary-background);
 }
 
 .tableTextRow {
-  fill: var(--primary-text);
+  fill: var(--text-color);
 }

src/pods/toolbar/components/themeToggleButton/index.ts

@@ -0,0 +1 @@
+export * from './themeToggleButton.component';

src/pods/toolbar/components/themeToggleButton/themeToggleButton.component.tsx

@@ -0,0 +1,16 @@
+import { useThemeContext } from '@/core/providers';
+import classes from './themeToggleButton.module.css';
+
+export const ThemeToggleButton = () => {
+  const { theme, toggleTheme } = useThemeContext();
+
+  return (
+    <button className={classes.switchTheme} onClick={toggleTheme}>
+      {theme.themeMode === 'dark' ? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path d="M238 96a6 6 0 0 1-6 6h-18v18a6 6 0 0 1-12 0v-18h-18a6 6 0 0 1 0-12h18V72a6 6 0 0 1 12 0v18h18a6 6 0 0 1 6 6m-94-42h10v10a6 6 0 0 0 12 0V54h10a6 6 0 0 0 0-12h-10V32a6 6 0 0 0-12 0v10h-10a6 6 0 0 0 0 12m71.25 100.28a6 6 0 0 1 1.07 6A94 94 0 1 1 95.76 39.68a6 6 0 0 1 7.94 6.79A90.11 90.11 0 0 0 192 154a90.9 90.9 0 0 0 17.53-1.7a6 6 0 0 1 5.72 1.98m-14.37 11.34q-4.42.38-8.88.38A102.12 102.12 0 0 1 90 64q0-4.45.38-8.88a82 82 0 1 0 110.5 110.5" /></svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path d="M122 40V16a6 6 0 0 1 12 0v24a6 6 0 0 1-12 0m68 88a62 62 0 1 1-62-62a62.07 62.07 0 0 1 62 62m-12 0a50 50 0 1 0-50 50a50.06 50.06 0 0 0 50-50M59.76 68.24a6 6 0 1 0 8.48-8.48l-16-16a6 6 0 0 0-8.48 8.48Zm0 119.52l-16 16a6 6 0 1 0 8.48 8.48l16-16a6 6 0 1 0-8.48-8.48M192 70a6 6 0 0 0 4.24-1.76l16-16a6 6 0 0 0-8.48-8.48l-16 16A6 6 0 0 0 192 70m4.24 117.76a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48-8.48ZM46 128a6 6 0 0 0-6-6H16a6 6 0 0 0 0 12h24a6 6 0 0 0 6-6m82 82a6 6 0 0 0-6 6v24a6 6 0 0 0 12 0v-24a6 6 0 0 0-6-6m112-88h-24a6 6 0 0 0 0 12h24a6 6 0 0 0 0-12"/></svg>
+      )}
+    </button>
+  )
+}

src/pods/toolbar/components/themeToggleButton/themeToggleButton.module.css

@@ -0,0 +1,4 @@
+.switchTheme {
+  background: none;
+  fill: var(--text-color);
+}

src/pods/toolbar/toolbar.pod.module.css

@@ -1,3 +1,27 @@
 .container {
-  border: 1px solid black;
+  background-color: var(--primary-toolbar);
+}
+.container > h1 {
+  color: var(--text-color);
+}
+.container > div {
+  border-bottom: 2px solid var(--highlight-color);
+}
+
+.buttonContent {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.buttonZoomIn,
+.buttonZoomOut,
+.buttonEdit,
+.buttonRelation,
+.buttonSetting {
+  background: none;
+  fill: var(--text-color);
+}
+button:hover {
+  box-shadow: 0 0 3px 2px var(--accent-color);
 }

src/pods/toolbar/toolbar.pod.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useCanvasViewSettingsContext } from '@/core/providers';
-import classes from './toolbar.pod.module.css';
 import { EditRelation } from '@/pods/edit-realtion';
 import { EditTable } from '@/pods/edit-table';
 import { useModalDialogContext } from '@/core/providers/modal-dialog-provider';
+import { ThemeToggleButton } from './components/themeToggleButton';
 import { CanvasSettingsComponent } from '../canvas-settings';
 import { Size } from '@/core/model';
+import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   const { zoomIn, zoomOut, canvasViewSettings, setCanvasSize } =
@@ -17,7 +18,6 @@ export const ToolbarPod: React.FC = () => {
   const handleEditTableClick = () => {
     openModal(<EditTable />);
   };
-
   const handleChangeSettings = (size: Size) => {
     setCanvasSize(size);
     closeModal();
@@ -31,14 +31,68 @@ export const ToolbarPod: React.FC = () => {
       />
     );
   };
-
   return (
     <div className={classes.container}>
-      <button onClick={zoomIn}>Zoom in</button>
-      <button onClick={zoomOut}>Zoom out</button>
-      <button onClick={handleRelationClick}>Relation</button>
-      <button onClick={handleEditTableClick}>Edit Table</button>
-      <button onClick={handleCanvasSettings}>Canvas Settings</button>
+      <h1>Toolbar</h1>
+      <div className={classes.buttonContent}>
+        <button className={classes.buttonZoomIn} onClick={zoomIn}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 256 256"
+          >
+            <path d="M150 112a6 6 0 0 1-6 6h-26v26a6 6 0 0 1-12 0v-26H80a6 6 0 0 1 0-12h26V80a6 6 0 0 1 12 0v26h26a6 6 0 0 1 6 6m78.24 116.24a6 6 0 0 1-8.48 0l-51.38-51.38a86.15 86.15 0 1 1 8.48-8.48l51.38 51.38a6 6 0 0 1 0 8.48M112 186a74 74 0 1 0-74-74a74.09 74.09 0 0 0 74 74" />
+          </svg>
+        </button>
+        <button className={classes.buttonZoomOut} onClick={zoomOut}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 256 256"
+          >
+            <path d="M150 112a6 6 0 0 1-6 6H80a6 6 0 0 1 0-12h64a6 6 0 0 1 6 6m78.24 116.24a6 6 0 0 1-8.48 0l-51.38-51.38a86.15 86.15 0 1 1 8.48-8.48l51.38 51.38a6 6 0 0 1 0 8.48M112 186a74 74 0 1 0-74-74a74.09 74.09 0 0 0 74 74" />
+          </svg>
+        </button>
+        <button className={classes.buttonEdit} onClick={handleEditTableClick}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 256 256"
+          >
+            <path d="M225.91 74.79L181.22 30.1a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h168a6 6 0 0 0 0-12H110.49L225.91 94.59a14 14 0 0 0 0-19.8M76.49 188L164 100.48L183.52 120L96 207.51ZM68 179.52L48.49 160L136 72.49L155.52 92ZM46 208v-33.52L81.52 210H48a2 2 0 0 1-2-2M217.42 86.1L192 111.52L144.49 64l25.41-25.41a2 2 0 0 1 2.83 0l44.69 44.68a2 2 0 0 1 0 2.83" />
+          </svg>
+        </button>
+        <button
+          className={classes.buttonRelation}
+          onClick={handleRelationClick}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 256 256"
+          >
+            <path d="M148.24 139.76a6 6 0 0 0-8.48 0L120 159.51L96.49 136l19.75-19.76a6 6 0 0 0-8.48-8.48L88 127.51l-19.76-19.75a6 6 0 0 0-8.48 8.48l7.75 7.76l-24.72 24.73a30 30 0 0 0 0 42.42l6.78 6.79l-29.81 29.82a6 6 0 1 0 8.48 8.48l29.82-29.81l6.79 6.78a30 30 0 0 0 42.42 0L132 188.49l7.76 7.75a6 6 0 0 0 8.48-8.48L128.49 168l19.75-19.76a6 6 0 0 0 0-8.48m-49.45 65a18 18 0 0 1-25.46 0l-22.06-22.09a18 18 0 0 1 0-25.46L76 132.49L123.51 180Zm137.45-185a6 6 0 0 0-8.48 0l-29.82 29.81l-6.79-6.78a30 30 0 0 0-42.42 0L124 67.51l-7.76-7.75a6 6 0 0 0-8.48 8.48l80 80a6 6 0 0 0 8.48-8.48l-7.75-7.76l24.72-24.73a30 30 0 0 0 0-42.42l-6.78-6.79l29.81-29.82a6 6 0 0 0 0-8.48m-31.51 79L180 123.51L132.49 76l24.72-24.73a18 18 0 0 1 25.46 0l22.06 22.06a18 18 0 0 1 0 25.46Z" />
+          </svg>
+        </button>
+        <button
+          className={classes.buttonSetting}
+          onClick={handleCanvasSettings}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 256 256"
+          >
+            <path d="M62 106.6V40a6 6 0 0 0-12 0v66.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-50.6a30 30 0 0 0 0-58.8M56 154a18 18 0 1 1 18-18a18 18 0 0 1-18 18m78-95.4V40a6 6 0 0 0-12 0v18.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-98.6a30 30 0 0 0 0-58.8m-6 47.4a18 18 0 1 1 18-18a18 18 0 0 1-18 18m102 62a30.05 30.05 0 0 0-24-29.4V40a6 6 0 0 0-12 0v98.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-18.6a30.05 30.05 0 0 0 24-29.4m-30 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18" />
+          </svg>
+        </button>
+        <ThemeToggleButton />
+      </div>
     </div>
   );
 };

src/scenes/main.scene.tsx

@@ -1,11 +1,11 @@
 import { CanvasPod } from '@/pods/canvas/canvas.pod';
 import { ToolbarPod } from '@/pods/toolbar/toolbar.pod';
-import classes from './main.scene.module.css';
 import {
   CanvasViewSettingsProvider,
   ModalDialogProvider,
 } from '@/core/providers';
 import { ModalDialog } from '@/common/components';
+import classes from './main.scene.module.css';
 
 export const MainScene: React.FC = () => {
   return (