diff --git a/public/index.html b/public/index.html
index 1dbd6fd..d48173a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body theme-mode="light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="h-full"></div>
     <!--
diff --git a/src/assets/process_dark.png b/src/assets/process_dark.png
new file mode 100644
index 0000000..6370cb1
Binary files /dev/null and b/src/assets/process_dark.png differ
diff --git a/src/components/area.jsx b/src/components/area.jsx
index 935b433..bd6b675 100644
--- a/src/components/area.jsx
+++ b/src/components/area.jsx
@@ -16,6 +16,7 @@ import {
   AreaContext,
   LayoutContext,
   SelectContext,
+  SettingsContext,
   TabContext,
   UndoRedoContext,
 } from "../pages/editor";
@@ -25,6 +26,7 @@ export default function Area(props) {
   const [saved, setSaved] = useState(false);
   const [editField, setEditField] = useState({});
   const { layout } = useContext(LayoutContext);
+  const { settings } = useContext(SettingsContext);
   const { tab, setTab } = useContext(TabContext);
   const { updateArea, deleteArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
@@ -70,7 +72,7 @@ export default function Area(props) {
             style={{ backgroundColor: props.areaData.color }}
           />
         </div>
-        <div className="text-gray-900 absolute top-2 left-3 select-none">
+        <div className="text-color absolute top-2 left-3 select-none">
           {props.areaData.name}
         </div>
         {(hovered ||
@@ -94,7 +96,7 @@ export default function Area(props) {
               }}
               stopPropagation
               content={
-                <div>
+                <div className="popover-theme">
                   <div className="font-semibold mb-2 ms-1">
                     Edit subject area
                   </div>
@@ -126,7 +128,7 @@ export default function Area(props) {
                     />
                     <Popover
                       content={
-                        <div>
+                        <div className="popover-theme">
                           <div className="flex justify-between items-center p-2">
                             <div className="font-medium">Theme</div>
                             <Button
@@ -306,7 +308,7 @@ export default function Area(props) {
             cx={props.areaData.x}
             cy={props.areaData.y}
             r={6}
-            fill="white"
+            fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
             strokeWidth={3}
             cursor="nwse-resize"
@@ -316,7 +318,7 @@ export default function Area(props) {
             cx={props.areaData.x + props.areaData.width}
             cy={props.areaData.y}
             r={6}
-            fill="white"
+            fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
             strokeWidth={3}
             cursor="nesw-resize"
@@ -326,7 +328,7 @@ export default function Area(props) {
             cx={props.areaData.x}
             cy={props.areaData.y + props.areaData.height}
             r={6}
-            fill="white"
+            fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
             strokeWidth={3}
             cursor="nesw-resize"
@@ -336,7 +338,7 @@ export default function Area(props) {
             cx={props.areaData.x + props.areaData.width}
             cy={props.areaData.y + props.areaData.height}
             r={6}
-            fill="white"
+            fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
             strokeWidth={3}
             cursor="nwse-resize"
diff --git a/src/components/area_overview.jsx b/src/components/area_overview.jsx
index f29fe5a..ba309a6 100644
--- a/src/components/area_overview.jsx
+++ b/src/components/area_overview.jsx
@@ -58,7 +58,9 @@ export default function AreaOverview(props) {
             showClear
             prefix={<IconSearch />}
             placeholder="Search..."
-            emptyContent={<div className="p-3">No areas found</div>}
+            emptyContent={
+              <div className="p-3 popover-theme">No areas found</div>
+            }
             onSearch={(v) => handleStringSearch(v)}
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
@@ -77,13 +79,13 @@ export default function AreaOverview(props) {
         </Col>
       </Row>
       {areas.length <= 0 ? (
-        <div className="select-none">
+        <div className="select-none mt-2">
           <Empty
             image={
-              <IllustrationNoContent style={{ width: 160, height: 160 }} />
+              <IllustrationNoContent style={{ width: 154, height: 154 }} />
             }
             darkModeImage={
-              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
+              <IllustrationNoContentDark style={{ width: 154, height: 154 }} />
             }
             title="No subject areas"
             description="Add subject areas to compartmentalize tables!"
@@ -127,7 +129,7 @@ export default function AreaOverview(props) {
               <Col span={3}>
                 <Popover
                   content={
-                    <div>
+                    <div className="popover-theme">
                       <div className="flex justify-between items-center p-2">
                         <div className="font-medium">Theme</div>
                         <Button
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 61a1347..5cf59bc 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -369,9 +369,11 @@ export default function Canvas(props) {
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
-          className="w-full h-full bg-white"
+          className="w-full h-full"
           style={{
             cursor: cursor,
+            backgroundColor:
+              settings.mode === "light" ? "white" : "rgba(22, 22, 26, 1)",
           }}
         >
           {settings.showGrid && (
diff --git a/src/components/chat.jsx b/src/components/chat.jsx
index b19a860..57cafc1 100644
--- a/src/components/chat.jsx
+++ b/src/components/chat.jsx
@@ -9,7 +9,7 @@ export default function Chat() {
   const { messages } = useContext(MessageContext);
 
   return (
-    <div className="mx-5 flex flex-col h-full">
+    <div className="mx-5 flex flex-col h-full sidesheet-theme">
       <div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
         {messages.map((m, i) =>
           m.type === "note" ? (
@@ -24,7 +24,7 @@ export default function Chat() {
                 size="small"
                 alt={m.name}
                 color={m.color}
-                className="border border-grey-900"
+                className="border border-color"
               >
                 {m.name.split(" ").map((c) => c[0])}
               </Avatar>
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 47cb135..26ed456 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -9,6 +9,7 @@ import {
   IconSaveStroked,
   IconUndo,
   IconRedo,
+  IconRowsStroked,
 } from "@douyinfe/semi-icons";
 import { Link } from "react-router-dom";
 import icon from "../assets/icon_dark_64.png";
@@ -844,7 +845,26 @@ export default function ControlPanel(props) {
         shortcut: "Ctrl+Shift+G",
       },
       Theme: {
-        children: [{ Light: () => {} }, { Dark: () => {} }],
+        children: [
+          {
+            Light: () => {
+              const body = document.body;
+              if (body.hasAttribute("theme-mode")) {
+                body.setAttribute("theme-mode", "light");
+              }
+              setSettings((prev) => ({ ...prev, mode: "light" }));
+            },
+          },
+          {
+            Dark: () => {
+              const body = document.body;
+              if (body.hasAttribute("theme-mode")) {
+                body.setAttribute("theme-mode", "dark");
+              }
+              setSettings((prev) => ({ ...prev, mode: "dark" }));
+            },
+          },
+        ],
         function: () => {},
       },
       "Zoom in": {
@@ -917,7 +937,7 @@ export default function ControlPanel(props) {
   return (
     <div>
       {layout.header && header()}
-      <div className="py-1 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
+      <div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 md:mx-6 select-none overflow-x-hidden toolbar-theme">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
           <Divider layout="vertical" margin="8px" />
@@ -963,7 +983,7 @@ export default function ControlPanel(props) {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center">
+            <div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
               <div className="w-[40px]">{Math.floor(settings.zoom * 100)}%</div>
               <div>
                 <IconCaretdown />
@@ -971,7 +991,7 @@ export default function ControlPanel(props) {
             </div>
           </Dropdown>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded text-lg"
+            className="py-1 px-2 hover-2 rounded text-lg"
             title="Zoom in"
             onClick={() =>
               setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
@@ -980,7 +1000,7 @@ export default function ControlPanel(props) {
             <i className="fa-solid fa-magnifying-glass-plus"></i>
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded text-lg"
+            className="py-1 px-2 hover-2 rounded text-lg"
             title="Zoom out"
             onClick={() =>
               setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
@@ -990,7 +1010,7 @@ export default function ControlPanel(props) {
           </button>
           <Divider layout="vertical" margin="8px" />
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
+            className="py-1 px-2 hover-2 rounded flex items-center"
             title="Undo"
             onClick={undo}
           >
@@ -1000,7 +1020,7 @@ export default function ControlPanel(props) {
             />
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
+            className="py-1 px-2 hover-2 rounded flex items-center"
             title="Redo"
             onClick={redo}
           >
@@ -1011,37 +1031,34 @@ export default function ControlPanel(props) {
           </button>
           <Divider layout="vertical" margin="8px" />
           <button
-            className="flex items-center py-1 px-2 hover:bg-slate-200 rounded"
+            className="flex items-center py-1 px-2 hover-2 rounded"
             title="Add new table"
             onClick={() => addTable()}
           >
-            <IconAddTable />
+            <IconAddTable theme={settings.mode} />
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
+            className="py-1 px-2 hover-2 rounded flex items-center"
             title="Add subject area"
             onClick={() => addArea()}
           >
-            <IconAddArea />
+            <IconAddArea theme={settings.mode} />
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
+            className="py-1 px-2 hover-2 rounded flex items-center"
             title="Add new note"
             onClick={() => addNote()}
           >
-            <IconAddNote />
+            <IconAddNote theme={settings.mode} />
           </button>
           <Divider layout="vertical" margin="8px" />
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
+            className="py-1 px-2 hover-2 rounded flex items-center"
             title="Save"
           >
             <IconSaveStroked size="extra-large" />
           </button>
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded text-xl"
-            title="Commit"
-          >
+          <button className="py-1 px-2 hover-2 rounded text-xl" title="Commit">
             <i className="fa-solid fa-code-branch"></i>
           </button>
         </div>
@@ -1211,13 +1228,14 @@ export default function ControlPanel(props) {
         ) : exportData.data !== "" || exportData.data ? (
           <>
             {visible === MODAL.IMG ? (
-              <Image src={exportData.data} alt="Diagram" height={220} />
+              <Image src={exportData.data} alt="Diagram" height={280} />
             ) : (
               <Editor
                 height="360px"
                 value={exportData.data}
                 language={exportData.extension}
                 options={{ readOnly: true }}
+                theme={settings.mode === "light" ? "light" : "vs-dark"}
               />
             )}
             <div className="text-sm font-semibold mt-2">Filename:</div>
@@ -1243,7 +1261,7 @@ export default function ControlPanel(props) {
   function header() {
     return (
       <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
-        <div className="flex justify-start items-center text-slate-800">
+        <div className="flex justify-start items-center">
           <Link to="/">
             <img
               width={54}
@@ -1327,9 +1345,7 @@ export default function ControlPanel(props) {
                       </Dropdown.Menu>
                     }
                   >
-                    <div className="px-3 py-1 hover:bg-gray-100 rounded">
-                      {category}
-                    </div>
+                    <div className="px-3 py-1 hover-2 rounded">{category}</div>
                   </Dropdown>
                 ))}
               </div>
@@ -1453,10 +1469,8 @@ export default function ControlPanel(props) {
         }
         trigger="click"
       >
-        <div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center">
-          <div>
-            <i className="fa-solid fa-table-list text-xl me-1"></i>
-          </div>
+        <div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
+          <IconRowsStroked size="extra-large" />
           <div>
             <IconCaretdown />
           </div>
diff --git a/src/components/custom_icons.jsx b/src/components/custom_icons.jsx
index c0f1d98..348152e 100644
--- a/src/components/custom_icons.jsx
+++ b/src/components/custom_icons.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 
-export function IconAddTable() {
+export function IconAddTable({ theme }) {
   return (
     <svg height="26" width="26">
       <path
         fill="none"
-        stroke="rgb(51 65 85)"
+        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
         strokeWidth="2"
         d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8"
       />
@@ -13,12 +13,12 @@ export function IconAddTable() {
   );
 }
 
-export function IconAddArea() {
+export function IconAddArea({ theme }) {
   return (
     <svg height="26" width="26">
       <path
         fill="none"
-        stroke="rgb(51 65 85)"
+        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
         strokeWidth="2"
         d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21"
       />
@@ -26,12 +26,12 @@ export function IconAddArea() {
   );
 }
 
-export function IconAddNote() {
+export function IconAddNote({ theme }) {
   return (
     <svg height="26" width="26">
       <path
         fill="none"
-        stroke="rgb(51 65 85)"
+        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
         strokeWidth="2"
         d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21"
       />
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 3342a55..c553700 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -28,7 +28,7 @@ const EditorPanel = (props) => {
   return (
     <div className="flex h-full">
       <div
-        className="flex flex-col h-full relative border-r border-gray-200"
+        className="flex flex-col h-full relative border-r border-color"
         style={{ width: `${props.width}px` }}
       >
         <div className="h-full flex-1 overflow-y-auto">
@@ -45,18 +45,18 @@ const EditorPanel = (props) => {
           </Tabs>
         </div>
         {layout.issues && (
-          <div className="mt-auto border-t-2 border-gray-200 shadow-inner shadow-neutral-200">
+          <div className="mt-auto border-t-2 border-color shadow-inner">
             <Issues />
           </div>
         )}
       </div>
       <div
-        className={`flex justify-center items-center p-1 h-auto hover:bg-slate-400 cursor-col-resize ${
-          props.resize ? "bg-slate-300" : ""
+        className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
+          props.resize ? "bg-semi-grey-2" : ""
         }`}
         onMouseDown={() => props.setResize(true)}
       >
-        <div className="w-1 border-x border-white h-1/6" />
+        <div className="w-1 border-x border-color h-1/6" />
       </div>
     </div>
   );
diff --git a/src/components/note.jsx b/src/components/note.jsx
index 25d2ebe..14033df 100644
--- a/src/components/note.jsx
+++ b/src/components/note.jsx
@@ -134,7 +134,7 @@ export default function Note(props) {
                 }}
                 stopPropagation
                 content={
-                  <div>
+                  <div className="popover-theme">
                     <div className="font-semibold mb-2 ms-1">Edit note</div>
                     <div className="w-[280px] flex items-center mb-2">
                       <Input
@@ -164,8 +164,8 @@ export default function Note(props) {
                       />
                       <Popover
                         content={
-                          <div>
-                            <div className="font-medium">Theme</div>
+                          <div className="popover-theme">
+                            <div className="font-medium mb-1">Theme</div>
                             <hr />
                             <div className="py-3">
                               {noteThemes.map((c) => (
diff --git a/src/components/notes_overview.jsx b/src/components/notes_overview.jsx
index b301666..5ea7fe2 100644
--- a/src/components/notes_overview.jsx
+++ b/src/components/notes_overview.jsx
@@ -55,7 +55,9 @@ export default function NotesOverview(props) {
             showClear
             prefix={<IconSearch />}
             placeholder="Search..."
-            emptyContent={<div className="p-3">No notes found</div>}
+            emptyContent={
+              <div className="p-3 popover-theme">No notes found</div>
+            }
             onSearch={(v) => handleStringSearch(v)}
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
@@ -75,13 +77,13 @@ export default function NotesOverview(props) {
         </Col>
       </Row>
       {notes.length <= 0 ? (
-        <div className="select-none">
+        <div className="select-none mt-2">
           <Empty
             image={
-              <IllustrationNoContent style={{ width: 160, height: 160 }} />
+              <IllustrationNoContent style={{ width: 154, height: 154 }} />
             }
             darkModeImage={
-              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
+              <IllustrationNoContentDark style={{ width: 154, height: 154 }} />
             }
             title="No text notes"
             description="Add notes cuz why not!"
@@ -139,8 +141,8 @@ export default function NotesOverview(props) {
                 <div className="ms-2">
                   <Popover
                     content={
-                      <div>
-                        <div className="font-medium">Theme</div>
+                      <div className="popover-theme">
+                        <div className="font-medium mb-1">Theme</div>
                         <hr />
                         <div className="py-3">
                           {noteThemes.map((c) => (
diff --git a/src/components/reference_overview.jsx b/src/components/reference_overview.jsx
index 7b72e0b..f9f5411 100644
--- a/src/components/reference_overview.jsx
+++ b/src/components/reference_overview.jsx
@@ -63,7 +63,9 @@ export default function ReferenceOverview(props) {
         showClear
         prefix={<IconSearch />}
         placeholder="Search..."
-        emptyContent={<div className="p-3">No relationships found</div>}
+        emptyContent={
+          <div className="p-3 popover-theme">No relationships found</div>
+        }
         onSearch={(v) => handleStringSearch(v)}
         onChange={(v) => setValue(v)}
         onSelect={(v) => {
@@ -81,14 +83,14 @@ export default function ReferenceOverview(props) {
         accordion
       >
         {relationships.length <= 0 ? (
-          <div className="select-none">
+          <div className="select-none mt-2">
             <Empty
               image={
-                <IllustrationNoContent style={{ width: 160, height: 160 }} />
+                <IllustrationNoContent style={{ width: 154, height: 154 }} />
               }
               darkModeImage={
                 <IllustrationNoContentDark
-                  style={{ width: 160, height: 160 }}
+                  style={{ width: 154, height: 154 }}
                 />
               }
               title="No relationships"
@@ -111,7 +113,7 @@ export default function ReferenceOverview(props) {
                   <div className="ms-1">
                     <Popover
                       content={
-                        <div className="p-2">
+                        <div className="p-2 popover-theme">
                           <Table
                             columns={columns}
                             dataSource={[
diff --git a/src/components/relationship.jsx b/src/components/relationship.jsx
index b8a0235..0a75339 100644
--- a/src/components/relationship.jsx
+++ b/src/components/relationship.jsx
@@ -87,9 +87,9 @@ export default function Relationship(props) {
           <feDropShadow
             dx="0"
             dy="0"
-            stdDeviation="6"
+            stdDeviation="4"
             floodColor="gray"
-            floodOpacity="0.5"
+            floodOpacity="0.3"
           />
         </filter>
       </defs>
diff --git a/src/components/sidebar.jsx b/src/components/sidebar.jsx
index bec2a8f..f4b481c 100644
--- a/src/components/sidebar.jsx
+++ b/src/components/sidebar.jsx
@@ -3,9 +3,14 @@ import chatIcon from "../assets/chat.png";
 import botIcon from "../assets/bot.png";
 import teamIcon from "../assets/group.png";
 import timeLine from "../assets/process.png";
+import timeLineDark from "../assets/process_dark.png";
 import todo from "../assets/calendar.png";
 import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
-import { MessageContext, UndoRedoContext } from "../pages/editor";
+import {
+  MessageContext,
+  SettingsContext,
+  UndoRedoContext,
+} from "../pages/editor";
 import Todo from "./todo";
 import Chat from "./chat";
 
@@ -20,16 +25,21 @@ export default function Sidebar() {
   };
   const { undoStack } = useContext(UndoRedoContext);
   const { messages } = useContext(MessageContext);
+  const { settings } = useContext(SettingsContext);
   const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
-  const [seen, setSeen] = useState(0)
-  const [count, setCount] = useState(messages.length-seen);
+  const [seen, setSeen] = useState(0);
+  const [count, setCount] = useState(messages.length - seen);
 
   const getTitle = (type) => {
     switch (type) {
       case SidesheetType.TIMELINE:
         return (
           <div className="flex items-center">
-            <img src={timeLine} className="w-7" alt="chat icon" />
+            <img
+              src={settings.mode === "light" ? timeLine : timeLineDark}
+              className="w-7"
+              alt="chat icon"
+            />
             <div className="ms-3">Timeline</div>
           </div>
         );
@@ -73,7 +83,7 @@ export default function Sidebar() {
 
   return (
     <>
-      <div className="ps-3 pe-4 py-4 shadow-lg h-full select-none">
+      <div className="ps-3 pe-4 py-4 shadow-lg h-full select-none border-l border-color">
         <Tooltip content="Chat">
           <Badge
             count={count === 0 ? null : count}
@@ -109,7 +119,11 @@ export default function Sidebar() {
             className="block"
             onClick={() => setSidesheet(SidesheetType.TIMELINE)}
           >
-            <img src={timeLine} className="w-8 mb-5" alt="chat icon" />
+            <img
+              src={settings.mode === "light" ? timeLine : timeLineDark}
+              className="w-8 mb-5"
+              alt="chat icon"
+            />
           </button>
         </Tooltip>
         <Tooltip content="Botle">
@@ -137,11 +151,11 @@ export default function Sidebar() {
   function renderTimeline() {
     if (undoStack.length > 0) {
       return (
-        <List>
+        <List className="sidesheet-theme">
           {[...undoStack].reverse().map((e) => (
             <List.Item
               style={{ padding: "4px 18px 4px 18px" }}
-              className="hover:bg-slate-100"
+              className="hover-1"
             >
               <div className="flex items-center py-1 w-full">
                 <i className="block fa-regular fa-circle fa-xs"></i>
@@ -153,8 +167,9 @@ export default function Sidebar() {
       );
     } else {
       return (
-        <div className="m-5">
-          You havent added anything to your diagram yet.
+        <div className="m-5 sidesheet-theme">
+          No activity was recorded. You have not added anything to your diagram
+          yet.
         </div>
       );
     }
diff --git a/src/components/table.jsx b/src/components/table.jsx
index 8bc2f9c..587d660 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -81,13 +81,21 @@ export default function Table(props) {
             props.active && !props.moving && "border-blue-500 border-4"
           } ${
             props.moving && "border-blue-500 border-4 border-dashed"
-          }  bg-gray-100 select-none rounded-lg w-full`}
+          } select-none rounded-lg w-full ${
+            settings.mode === "light"
+              ? "bg-zinc-100 text-zinc-800"
+              : "bg-zinc-800 text-zinc-200"
+          }`}
         >
           <div
             className={`h-[10px] w-full rounded-t-md`}
             style={{ backgroundColor: props.tableData.color }}
           />
-          <div className="font-bold text-slate-800 h-[40px] flex justify-between items-center border-b border-gray-400 bg-gray-200">
+          <div
+            className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
+              settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
+            }`}
+          >
             <div className="px-3">
               {isHovered
                 ? props.tableData.name.length < 10
@@ -133,7 +141,7 @@ export default function Table(props) {
                 ></Button>
                 <Popover
                   content={
-                    <div className="text-slate-600">
+                    <div className="popover-theme">
                       <div className="mb-2">
                         <strong>Comment :</strong>{" "}
                         {props.tableData.comment === "" ? (
@@ -142,7 +150,7 @@ export default function Table(props) {
                           <div>{props.tableData.comment}</div>
                         )}
                       </div>
-                      <div className="text-slate-600">
+                      <div>
                         <strong
                           className={`${
                             props.tableData.indices.length === 0 ? "" : "block"
@@ -156,8 +164,12 @@ export default function Table(props) {
                           <div>
                             {props.tableData.indices.map((index, k) => (
                               <div
-                                className="flex items-center my-1 px-2 py-1 rounded bg-gray-100"
                                 key={k}
+                                className={`flex items-center my-1 px-2 py-1 rounded ${
+                                  settings.mode === "light"
+                                    ? "bg-gray-100"
+                                    : "bg-zinc-800"
+                                }`}
                               >
                                 <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
                                 <div>
@@ -209,10 +221,10 @@ export default function Table(props) {
               <Popover
                 key={i}
                 content={
-                  <>
+                  <div className="popover-theme">
                     <div className="flex justify-between items-center pb-2">
                       <p className="me-4 font-bold">{e.name}</p>
-                      <p className="ms-4 text-slate-600">{e.type}</p>
+                      <p className="ms-4">{e.type}</p>
                     </div>
                     <hr />
                     {e.primary && (
@@ -235,11 +247,11 @@ export default function Table(props) {
                         Increment
                       </Tag>
                     )}
-                    <p className="text-slate-600">
+                    <p>
                       <strong>Default :</strong>{" "}
                       {e.default === "" ? "Not set" : e.default}
                     </p>
-                  </>
+                  </div>
                 }
                 position="right"
                 showArrow
@@ -268,7 +280,7 @@ export default function Table(props) {
         }
         style={{ paddingBottom: "16px" }}
       >
-        <div className="flex items-center">
+        <div className="flex items-center sidesheet-theme">
           <div className="text-md font-semibold">Name: </div>
           <Input
             value={props.tableData.name}
@@ -298,7 +310,7 @@ export default function Table(props) {
         </div>
         <div>
           {props.tableData.fields.map((f, j) => (
-            <Row gutter={6} key={j} className="hover:bg-slate-100 mt-2">
+            <Row gutter={6} key={j} className="hover-2 mt-2">
               <Col span={7}>
                 <Input
                   value={f.name}
@@ -425,7 +437,7 @@ export default function Table(props) {
               <Col span={3}>
                 <Popover
                   content={
-                    <div className="px-1 w-[240px]">
+                    <div className="px-1 w-[240px] popover-theme">
                       <div className="font-semibold">Default value</div>
                       <Input
                         className="my-2"
@@ -782,7 +794,7 @@ export default function Table(props) {
                   />
                   <Popover
                     content={
-                      <div className="px-1">
+                      <div className="px-1 popover-theme">
                         <div className="font-semibold mb-1">Index name: </div>
                         <Input
                           value={idx.name}
@@ -1124,7 +1136,7 @@ export default function Table(props) {
           setHoveredField(-1);
         }}
       >
-        <div className={`${hoveredField === index ? "text-slate-500" : ""}`}>
+        <div className={`${hoveredField === index ? "text-zinc-400" : ""}`}>
           <button
             className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
             onMouseDown={(ev) => {
@@ -1142,7 +1154,7 @@ export default function Table(props) {
           ></button>
           {fieldData.name}
         </div>
-        <div className="text-slate-400">
+        <div className="text-zinc-400">
           {hoveredField === index ? (
             <Popconfirm
               title="Are you sure you want to delete this field?"
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index d9214bc..de41d17 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -77,6 +77,9 @@ export default function TableOverview(props) {
             prefix={<IconSearch />}
             placeholder="Search..."
             onSearch={(v) => handleStringSearch(v)}
+            emptyContent={
+              <div className="p-3 popover-theme">No tables found</div>
+            }
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
               const { id } = tables.find((t) => t.name === v);
@@ -112,14 +115,14 @@ export default function TableOverview(props) {
         accordion
       >
         {tables.length <= 0 ? (
-          <div className="select-none">
+          <div className="select-none mt-2">
             <Empty
               image={
-                <IllustrationNoContent style={{ width: 160, height: 160 }} />
+                <IllustrationNoContent style={{ width: 154, height: 154 }} />
               }
               darkModeImage={
                 <IllustrationNoContentDark
-                  style={{ width: 160, height: 160 }}
+                  style={{ width: 154, height: 154 }}
                 />
               }
               title="No tables"
@@ -131,7 +134,7 @@ export default function TableOverview(props) {
             <div id={`scroll_table_${t.id}`} key={t.id}>
               <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
                 {t.fields.map((f, j) => (
-                  <Row gutter={6} key={j} className="hover:bg-slate-100 mb-2">
+                  <Row gutter={6} key={j} className="hover-1 mb-2">
                     <Col span={7}>
                       <Input
                         value={f.name}
@@ -256,7 +259,7 @@ export default function TableOverview(props) {
                     <Col span={3}>
                       <Popover
                         content={
-                          <div className="px-1 w-[240px]">
+                          <div className="px-1 w-[240px] popover-theme">
                             <div className="font-semibold">Default value</div>
                             <Input
                               className="my-2"
@@ -625,7 +628,7 @@ export default function TableOverview(props) {
                             />
                             <Popover
                               content={
-                                <div className="px-1">
+                                <div className="px-1 popover-theme">
                                   <div className="font-semibold mb-1">
                                     Index name:{" "}
                                   </div>
@@ -767,7 +770,7 @@ export default function TableOverview(props) {
                   <Col span={8}>
                     <Popover
                       content={
-                        <div>
+                        <div className="popover-theme">
                           <div className="flex justify-between items-center p-2">
                             <div className="font-medium">Theme</div>
                             <Button
diff --git a/src/components/todo.jsx b/src/components/todo.jsx
index f1d620f..b6064db 100644
--- a/src/components/todo.jsx
+++ b/src/components/todo.jsx
@@ -98,7 +98,7 @@ export default function Todo() {
 
   return (
     <>
-      <div className="flex justify-between items-center mx-5 mb-2">
+      <div className="flex justify-between items-center mx-5 mb-2 sidesheet-theme">
         <Dropdown
           render={
             <Dropdown.Menu>
@@ -145,14 +145,12 @@ export default function Todo() {
         </Button>
       </div>
       {tasks.length > 0 ? (
-        <List>
+        <List className="sidesheet-theme">
           {tasks.map((t, i) => (
             <List.Item
               key={i}
               style={{ paddingLeft: "18px", paddingRight: "18px" }}
-              className={`${
-                t.complete ? "bg-emerald-50" : "hover:bg-slate-100"
-              }`}
+              className="hover-1"
               onClick={() => setActiveTask(i)}
             >
               <div className="w-full">
@@ -175,7 +173,7 @@ export default function Todo() {
                   <Col span={3}>
                     <Popover
                       content={
-                        <div className="p-2">
+                        <div className="p-2 popover-theme">
                           <div className="mb-2 font-semibold">
                             Set priority:{" "}
                           </div>
@@ -256,7 +254,7 @@ export default function Todo() {
           ))}
         </List>
       ) : (
-        <div className="m-5">
+        <div className="m-5 sidesheet-theme">
           You have no tasks yet. Add your to-dos and keep track of your
           progress.
         </div>
diff --git a/src/index.css b/src/index.css
index 011d791..dd5ae4c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,23 +17,66 @@
   overflow: hidden;
 }
 
-.semi-card .semi-collapse-item{
+.semi-card .semi-collapse-item {
   border: none !important;
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1; 
+  opacity: 0;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c5c5c5; 
-  border-radius: 10px;
+  background-color: rgba(var(--semi-grey-2), 1);
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #b9b9b9; 
-}
\ No newline at end of file
+  background-color: rgba(var(--semi-grey-3), 1);
+}
+
+.theme {
+  color: var(--semi-color-text-1);
+  background-color: var(--semi-color-bg-0);
+}
+
+.sidesheet-theme {
+  color: var(--semi-color-text-1);
+  background-color: var(--semi-color-bg-2);
+}
+
+.popover-theme {
+  color: var(--semi-color-text-1);
+  background-color: var(--semi-color-bg-3);
+}
+
+.toolbar-theme {
+  background-color: rgba(var(--semi-grey-1), 1);
+}
+
+.hover-1:hover {
+  background-color: rgba(var(--semi-grey-1), 1);
+}
+
+.bg-semi-grey-2 {
+  background-color: rgba(var(--semi-grey-2), 1);
+}
+
+.hover-2:hover {
+  background-color: rgba(var(--semi-grey-2), 1);
+}
+
+.text-color {
+  color: var(--semi-color-text-1);
+}
+
+.border-color {
+  border-color: rgba(var(--semi-grey-9), 0.08);
+}
+
+.table-border {
+  border-color: rgba(var(--semi-grey-2), 1);
+}
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 816af28..6778ead 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -51,6 +51,7 @@ export default function Editor(props) {
     zoom: 1,
     pan: { x: 0, y: 0 },
     showGrid: true,
+    mode: "light",
   });
   const [tasks, setTasks] = useState([]);
   const [messages, setMessages] = useState([]);
@@ -477,7 +478,7 @@ export default function Editor(props) {
                     <TaskContext.Provider
                       value={{ tasks, setTasks, updateTask }}
                     >
-                      <div className="h-[100vh] overflow-hidden">
+                      <div className="h-[100vh] overflow-hidden theme">
                         <ControlPanel />
                         <div
                           className={
