diff --git a/commitlint.config.ts b/commitlint.config.ts
index 05556c9..7e26a14 100644
--- a/commitlint.config.ts
+++ b/commitlint.config.ts
@@ -38,6 +38,7 @@ const Configuration: UserConfig = {
         'build', // Build scripts or configuration
         'ci', // Continuous integration
         'release', // Release related changes
+        'theme', // Theme changes
         'other', // Other changes
       ],
     ],
diff --git a/src/components/project/NewProject/NewProject.module.scss b/src/components/project/NewProject/NewProject.module.scss
index 6108965..00a076e 100644
--- a/src/components/project/NewProject/NewProject.module.scss
+++ b/src/components/project/NewProject/NewProject.module.scss
@@ -56,10 +56,7 @@
 
     [class*='ant-radio-button-checked'] {
       border: solid 1px transparent;
-      background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)),
-        var(--primary-gradient);
-      background-origin: border-box;
-      background-clip: content-box, border-box;
+      background: var(--primary);
       border-radius: var(--border-radius);
 
       &::before {
@@ -72,6 +69,9 @@
         background: #000;
         z-index: -1;
         border-radius: inherit;
+        [data-theme='light'] & {
+          background: var(--primary);
+        }
       }
     }
   }
diff --git a/src/components/shared/LogView/LogView.module.scss b/src/components/shared/LogView/LogView.module.scss
index f99ef14..f0240b1 100644
--- a/src/components/shared/LogView/LogView.module.scss
+++ b/src/components/shared/LogView/LogView.module.scss
@@ -57,4 +57,10 @@
     display: inline-block;
     margin-left: 0.5rem;
   }
+  [class*='xterm-cursor-outline'] {
+    outline-color: var(--text-color) !important;
+  }
+  [class*='xterm-cursor-bar'] {
+    box-shadow: 1px 0 0 var(--text-color) inset !important;
+  }
 }
diff --git a/src/components/shared/LogView/LogView.tsx b/src/components/shared/LogView/LogView.tsx
index cc1de19..7163d4b 100644
--- a/src/components/shared/LogView/LogView.tsx
+++ b/src/components/shared/LogView/LogView.tsx
@@ -37,7 +37,7 @@ const LogView: FC<Props> = ({ filter }) => {
     grey: '\x1b[38;5;243m',
     success: '\x1b[38;5;40m',
     error: '\x1b[38;5;196m',
-    warning: '\x1b[38;5;226m',
+    warning: '\x1b[38;5;214m',
     info: '\x1b[38;5;33m',
     reset: '\x1b[0m',
   };
diff --git a/src/components/shared/ThemeProvider/ThemeProvider.tsx b/src/components/shared/ThemeProvider/ThemeProvider.tsx
new file mode 100644
index 0000000..ceed820
--- /dev/null
+++ b/src/components/shared/ThemeProvider/ThemeProvider.tsx
@@ -0,0 +1,74 @@
+import { ConfigProvider, theme as antdTheme } from 'antd';
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextProps {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextProps | undefined>(
+  undefined,
+);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  // Initialize theme based on local storage or system preference
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === 'undefined') {
+      return 'dark';
+    }
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      return savedTheme as Theme;
+    }
+    const prefersDark = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches;
+    return prefersDark ? 'dark' : 'light';
+  });
+
+  // Apply the theme to the HTML element and save it in localStorage
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  // Ant Design's theme configuration
+  const antdConfig = {
+    token: {
+      colorPrimary: '#0098ea',
+      colorError: '#C84075',
+      fontFamily: 'var(--font-body)',
+      borderRadius: 4,
+    },
+    algorithm:
+      theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      <ConfigProvider theme={antdConfig}>{children}</ConfigProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;
diff --git a/src/components/shared/ThemeProvider/index.ts b/src/components/shared/ThemeProvider/index.ts
new file mode 100644
index 0000000..c3d210e
--- /dev/null
+++ b/src/components/shared/ThemeProvider/index.ts
@@ -0,0 +1 @@
+export { ThemeContext, default, useTheme } from './ThemeProvider';
diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts
index 94d5a8a..21bfb55 100644
--- a/src/components/shared/index.ts
+++ b/src/components/shared/index.ts
@@ -1,2 +1,3 @@
 export { default as Layout } from './Layout';
 export { default as LogView } from './LogView';
+export { default as ThemeProvider } from './ThemeProvider';
diff --git a/src/components/template/ProjectTemplate/ProjectTemplate.tsx b/src/components/template/ProjectTemplate/ProjectTemplate.tsx
index 4ce3ce8..65e166e 100644
--- a/src/components/template/ProjectTemplate/ProjectTemplate.tsx
+++ b/src/components/template/ProjectTemplate/ProjectTemplate.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/no-children-prop */
 import { NewProject } from '@/components/project';
+import { useTheme } from '@/components/shared/ThemeProvider';
 import AppIcon from '@/components/ui/icon';
 import { AppConfig } from '@/config/AppConfig';
 import { projectExamples } from '@/constant/projectExamples';
@@ -9,7 +10,10 @@ import Link from 'next/link';
 import { FC, useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark as darkTheme } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {
+  oneDark as darkTheme,
+  oneLight as lightTheme,
+} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import s from './ProjectTemplate.module.scss';
 
 function LinkRenderer({
@@ -35,6 +39,7 @@ const ProjectTemplate: FC = () => {
     contract: string;
     content: string;
   }>({ contract: '', content: '' });
+  const { theme } = useTheme();
 
   const getContent = async () => {
     const link = examples[currentExample].link;
@@ -166,7 +171,7 @@ const ProjectTemplate: FC = () => {
                   PreTag="div"
                   children={String(children).replace(/\n$/, '')}
                   language={match[1]}
-                  style={darkTheme}
+                  style={theme === 'dark' ? darkTheme : lightTheme}
                 />
               ) : (
                 <code {...rest} className={className}>
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index c7de7a0..a1147e2 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -12,7 +12,7 @@ import {
 import { BsShare } from 'react-icons/bs';
 
 import { BsFillPlayFill } from 'react-icons/bs';
-import { FaRegClone } from 'react-icons/fa';
+import { FaMoon, FaRegClone, FaSun } from 'react-icons/fa';
 import { FiEdit2, FiEye } from 'react-icons/fi';
 import { GoTriangleDown, GoTriangleRight, GoTriangleUp } from 'react-icons/go';
 import { GrClear } from 'react-icons/gr';
@@ -69,7 +69,9 @@ export type AppIconType =
   | 'Import'
   | 'Reload'
   | 'Share'
-  | 'Save';
+  | 'Save'
+  | 'Moon'
+  | 'Sun';
 
 export interface AppIconInterface {
   name: AppIconType;
@@ -110,6 +112,8 @@ const Components = {
   Reload: AiOutlineReload,
   Share: BsShare,
   Save: AiOutlineSave,
+  Moon: FaMoon,
+  Sun: FaSun,
 };
 
 const AppIcon: FC<AppIconInterface> = ({ name, className = '' }) => {
diff --git a/src/components/workspace/ABIUi/ABIUi.module.scss b/src/components/workspace/ABIUi/ABIUi.module.scss
index 4eed051..35bc504 100644
--- a/src/components/workspace/ABIUi/ABIUi.module.scss
+++ b/src/components/workspace/ABIUi/ABIUi.module.scss
@@ -12,6 +12,9 @@
     height: 1px;
     margin: 0 auto;
     background-color: #373636;
+    [data-theme='light'] & {
+      background-color: #e0e0e0;
+    }
   }
   &.tact {
     display: flex;
@@ -30,6 +33,9 @@
     background: rgba(14, 14, 16, 0.9);
     border-radius: 5px;
     padding: 5px;
+    [data-theme='light'] & {
+      background: rgba(255, 255, 255, 0.9);
+    }
 
     > div {
       border-left: 0 !important;
@@ -62,27 +68,40 @@
       border: 0;
       box-shadow: none;
       background: #232222;
+      [data-theme='light'] & {
+        background: #d6d6d6;
+      }
+      &:hover {
+        color: var(--text-color);
+        background-color: var(--grey--50);
+      }
     }
   }
   &.Setter {
     .btnAction {
       border: solid 1px transparent;
-      background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)),
-        var(--primary-gradient);
-      background-origin: border-box;
-      background-clip: content-box, border-box;
+      background: var(--primary);
       box-shadow: none;
       z-index: 0;
+
       &:hover {
         border-color: transparent;
-        color: #fff;
+        color: var(--text-color);
+
         &:before {
           background: #101010;
+          [data-theme='light'] & {
+            background: var(--btn-primary-hover);
+          }
         }
       }
+      & span,
+      &:hover span [data-theme='light'] & {
+        color: #fff;
+      }
       &:disabled {
         opacity: 0.5;
-        color: #fff;
+        color: var(--text-color);
       }
 
       &:before {
@@ -95,6 +114,9 @@
         background: #000;
         z-index: -1;
         border-radius: inherit;
+        [data-theme='light'] & {
+          background: var(--primary);
+        }
       }
     }
   }
diff --git a/src/components/workspace/BottomPanel/BottomPanel.module.scss b/src/components/workspace/BottomPanel/BottomPanel.module.scss
index ad26933..fa08640 100644
--- a/src/components/workspace/BottomPanel/BottomPanel.module.scss
+++ b/src/components/workspace/BottomPanel/BottomPanel.module.scss
@@ -1,5 +1,5 @@
 .root {
-  background-color: #181717;
+  background-color: var(--dark-800);
   height: 100%;
   z-index: 1000;
   position: relative;
@@ -43,11 +43,11 @@
       justify-content: center;
       .icon {
         path {
-          stroke: #fff;
+          stroke: var(--text-color);
         }
       }
       &:hover {
-        background-color: var(--grey);
+        background-color: var(--grey--70);
       }
     }
   }
diff --git a/src/components/workspace/BuildProject/BuildProject.module.scss b/src/components/workspace/BuildProject/BuildProject.module.scss
index aa7085a..be4969a 100644
--- a/src/components/workspace/BuildProject/BuildProject.module.scss
+++ b/src/components/workspace/BuildProject/BuildProject.module.scss
@@ -4,7 +4,7 @@
   height: 100vh;
   overflow-y: auto;
   .heading {
-    color: #ccc;
+    color: var(--color-light);
     text-align: center;
     display: block;
     font-size: 0.875rem;
@@ -28,6 +28,9 @@
     background: rgba(14, 14, 16, 0.9);
     border-radius: 5px;
     padding: 2px;
+    [data-theme='light'] & {
+      background: rgba(255, 255, 255, 0.9);
+    }
     > div {
       border-left: 0 !important;
     }
@@ -42,11 +45,11 @@
   }
   .connectedWallet {
     font-size: 0.8rem;
-    color: #ccc;
+    color: var(--color-light);
     margin-top: 1rem;
     span {
       font-size: 0.9rem;
-      color: #fff;
+      color: var(--text-color);
     }
   }
   .contractAddress {
diff --git a/src/components/workspace/Editor/Editor.module.scss b/src/components/workspace/Editor/Editor.module.scss
index c8f1aad..67b030c 100644
--- a/src/components/workspace/Editor/Editor.module.scss
+++ b/src/components/workspace/Editor/Editor.module.scss
@@ -14,6 +14,9 @@
     justify-content: space-between;
     font-size: 0.8rem;
     padding: 0.2rem 1rem;
+    [data-theme='light'] & {
+      background-color: rgba(255, 255, 255, 0.7);
+    }
     .vimStatuBar {
       font-family: monospace;
     }
diff --git a/src/components/workspace/Editor/Editor.tsx b/src/components/workspace/Editor/Editor.tsx
index 2ff310c..56d0d91 100644
--- a/src/components/workspace/Editor/Editor.tsx
+++ b/src/components/workspace/Editor/Editor.tsx
@@ -7,6 +7,7 @@ import EditorDefault, { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { FC, useEffect, useRef, useState } from 'react';
 // import { useLatest } from 'react-use';
+import { useTheme } from '@/components/shared/ThemeProvider';
 import { useFile, useFileTab } from '@/hooks';
 import { useProject } from '@/hooks/projectV2.hooks';
 import { useLatest } from 'react-use';
@@ -23,6 +24,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
   const { activeProject } = useProject();
   const { getFile, saveFile: storeFileContent } = useFile();
   const { fileTab, updateFileDirty } = useFileTab();
+  const { theme } = useTheme();
 
   const { isFormatOnSave, getSettingStateByKey } = useSettingAction();
 
@@ -249,7 +251,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
       <EditorDefault
         className={s.editor}
         path={fileTab.active ?? ''}
-        theme="vs-theme-dark"
+        theme={theme === 'dark' ? 'vs-theme-dark' : 'light'}
         // height="90vh"
         defaultLanguage={fileTypeFromFileName(fileTab.active ?? '')}
         // defaultLanguage={`func`}
diff --git a/src/components/workspace/Tabs/Tabs.module.scss b/src/components/workspace/Tabs/Tabs.module.scss
index 499cf09..cfd73e2 100644
--- a/src/components/workspace/Tabs/Tabs.module.scss
+++ b/src/components/workspace/Tabs/Tabs.module.scss
@@ -60,7 +60,7 @@
 
     &.isActive {
       background: var(--black-500);
-      color: #ffffff;
+      color: var(--text-color);
       .close {
         visibility: visible;
       }
@@ -76,6 +76,9 @@
 
       &:hover {
         background-color: #403d3d;
+        [data-theme='light'] & {
+          background-color: #f7f7f7;
+        }
       }
       &.isDirty {
         .closeIcon {
@@ -92,7 +95,7 @@
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: #fff;
+      background: var(--text-color);
       margin-right: 5px;
       position: absolute;
       left: 0;
diff --git a/src/components/workspace/WorkSpace/WorkSpace.module.scss b/src/components/workspace/WorkSpace/WorkSpace.module.scss
index 42f7884..21bdfad 100644
--- a/src/components/workspace/WorkSpace/WorkSpace.module.scss
+++ b/src/components/workspace/WorkSpace/WorkSpace.module.scss
@@ -13,7 +13,7 @@
     div[class*='gutter-horizontal'] {
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
       cursor: col-resize;
-      background-color: #141416;
+      background-color: var(--splitter-bg);
     }
   }
   .splitVertical {
@@ -23,7 +23,7 @@
     div[class*='gutter-vertical'] {
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
       cursor: row-resize;
-      background-color: #17171a;
+      background-color: var(--splitter-bg);
     }
   }
   div[class*='gutter'] {
@@ -38,7 +38,7 @@
     // padding-top: 0.5rem;
     // flex: 0 0 250px;
     // width: 250px;
-    background-color: #141416;
+    background-color: var(--sidebar-bg);
     overflow-x: hidden !important;
     overflow-y: auto !important;
     :global(.onboarding-active) & {
@@ -55,7 +55,7 @@
     justify-content: space-between;
   }
   .heading {
-    color: #ccc;
+    color: var(--color-light);
     text-align: center;
     display: block;
     font-size: 0.875rem;
@@ -68,7 +68,7 @@
     gap: 0.3rem;
   }
   .globalAction {
-    color: #ccc;
+    color: var(--color-light);
     display: flex;
     justify-content: space-between;
     padding: 0.5rem;
diff --git a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
index 4b136b6..58deefb 100644
--- a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
+++ b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
@@ -21,7 +21,7 @@
     cursor: pointer;
     opacity: 0.6;
     position: relative;
-    color: #fff;
+    color: var(--text-color);
     display: flex;
     user-select: none;
     display: flex;
@@ -33,7 +33,6 @@
     &:hover {
       opacity: 1;
       color: var(--primary);
-      background: rgba(0, 0, 0, 0.7);
       &::before {
         display: block;
       }
@@ -51,6 +50,21 @@
       text-align: center;
     }
   }
+  .themeSwitch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem auto;
+    align-items: center;
+    border-radius: 50%;
+    height: 3rem;
+    width: 3rem;
+
+    > svg {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+  }
   .clone {
     font-size: 1.3rem;
   }
@@ -60,11 +74,15 @@
   padding: 1rem 0;
   &:not(:last-child) {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    [data-theme='light'] & {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    }
   }
   > div {
     margin: 0 !important;
   }
 }
+
 .resetAmount {
   display: flex;
   align-items: center;
diff --git a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
index caf6658..fa8744b 100644
--- a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
+++ b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
@@ -1,10 +1,11 @@
+import { ThemeContext } from '@/components/shared/ThemeProvider';
 import { AppLogo, Tooltip } from '@/components/ui';
 import AppIcon, { AppIconType } from '@/components/ui/icon';
 import { AppData } from '@/constant/AppData';
 import { useSettingAction } from '@/hooks/setting.hooks';
 import { Form, Input, Popover, Select, Switch } from 'antd';
 import Link from 'next/link';
-import { FC, useEffect } from 'react';
+import { FC, useContext, useEffect } from 'react';
 import s from './WorkspaceSidebar.module.scss';
 
 export type WorkSpaceMenu = 'code' | 'build' | 'test-cases' | 'setting';
@@ -42,6 +43,7 @@ const WorkspaceSidebar: FC<Props> = ({
 
   const editorMode = getSettingStateByKey('editorMode');
   const isExternalMessage = getSettingStateByKey('isExternalMessage');
+  const themeContext = useContext(ThemeContext);
 
   const menuItems: MenuItem[] = [
     {
@@ -109,6 +111,16 @@ const WorkspaceSidebar: FC<Props> = ({
           />
         </Form.Item>
       </div>
+      <div className={s.settingItem}>
+        <Form.Item label="Light Mode" valuePropName="checked">
+          <Switch
+            checked={themeContext?.theme === 'light'}
+            onChange={() => {
+              themeContext?.toggleTheme();
+            }}
+          />
+        </Form.Item>
+      </div>
       <div className={s.settingItem}>
         <Form.Item
           label="Auto Build & Deploy in Sandbox"
@@ -214,11 +226,26 @@ const WorkspaceSidebar: FC<Props> = ({
             </Link>
           </Tooltip>
         ))}
+
         <Popover placement="rightTop" title="Setting" content={settingContent}>
           <div className={s.action}>
             <AppIcon className={s.icon} name="Setting" />
           </div>
         </Popover>
+        <Tooltip title="Switch Theme" placement="right">
+          <div
+            className={`${s.themeSwitch} ${s.action} ${s.isActive}`}
+            onClick={() => {
+              themeContext?.toggleTheme();
+            }}
+          >
+            {themeContext?.theme == 'dark' ? (
+              <AppIcon name="Moon" />
+            ) : (
+              <AppIcon name="Sun" />
+            )}
+          </div>
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/src/components/workspace/project/ManageProject/ManageProject.module.scss b/src/components/workspace/project/ManageProject/ManageProject.module.scss
index 7943d49..f7eca60 100644
--- a/src/components/workspace/project/ManageProject/ManageProject.module.scss
+++ b/src/components/workspace/project/ManageProject/ManageProject.module.scss
@@ -39,6 +39,7 @@
     display: flex;
     align-items: center;
     font-size: 1.1rem;
+    color: var(--color-danger);
   }
   .projects {
     .name {
diff --git a/src/interfaces/setting.interface.ts b/src/interfaces/setting.interface.ts
index ed65c04..0c65aed 100644
--- a/src/interfaces/setting.interface.ts
+++ b/src/interfaces/setting.interface.ts
@@ -5,4 +5,5 @@ export interface SettingInterface {
   tonAmountForInteraction?: string;
   editorMode: 'default' | 'vim';
   isExternalMessage?: boolean;
+  theme?: 'light' | 'dark';
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4daa5a4..e630994 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,11 +1,10 @@
-import { Layout } from '@/components/shared';
+import { Layout, ThemeProvider } from '@/components/shared';
 import { AppConfig } from '@/config/AppConfig';
 import { IDEProvider } from '@/state/IDE.context';
 import '@/styles/theme.scss';
 import { THEME } from '@tonconnect/ui';
 import { TonConnectUIProvider } from '@tonconnect/ui-react';
 import { WebContainer } from '@webcontainer/api';
-import { ConfigProvider, theme } from 'antd';
 import mixpanel from 'mixpanel-browser';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -23,8 +22,6 @@ export default function App({
   Component,
   pageProps: { ...pageProps },
 }: AppProps) {
-  const { darkAlgorithm } = theme;
-
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_DISABLE_WEBCONTAINER) return;
     (async () => {
@@ -90,17 +87,7 @@ export default function App({
       </Head>
       <RecoilRoot>
         <IDEProvider>
-          <ConfigProvider
-            theme={{
-              token: {
-                colorPrimary: '#0098ea',
-                colorError: '#C84075',
-                fontFamily: 'var(--font-body)',
-                borderRadius: 4,
-              },
-              algorithm: darkAlgorithm,
-            }}
-          >
+          <ThemeProvider>
             <TonConnectUIProvider
               uiPreferences={{ theme: THEME.LIGHT }}
               manifestUrl="https://ide.nujan.io/assets/ton/tonconnect-manifest.json"
@@ -109,7 +96,7 @@ export default function App({
                 <Component {...pageProps} />
               </Layout>
             </TonConnectUIProvider>
-          </ConfigProvider>
+          </ThemeProvider>
         </IDEProvider>
       </RecoilRoot>
     </>
diff --git a/src/state/IDE.context.tsx b/src/state/IDE.context.tsx
index 859accd..a7176e2 100644
--- a/src/state/IDE.context.tsx
+++ b/src/state/IDE.context.tsx
@@ -33,6 +33,7 @@ const defaultSetting = {
   autoBuildAndDeploy: true,
   editorMode: 'default' as const,
   isExternalMessage: false,
+  theme: 'dark' as const,
 };
 
 const defaultState = {
diff --git a/src/styles/components/file-icons.scss b/src/styles/components/file-icons.scss
index 3c74005..dec9b6c 100644
--- a/src/styles/components/file-icons.scss
+++ b/src/styles/components/file-icons.scss
@@ -33,10 +33,15 @@
   content: '';
   background-image: url('/images/icon/file/default_folder_opened.svg');
 }
-.show-file-icons .file-icon::before,
-.show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #d4d7d6;
-  content: '\E01A';
+.show-file-icons .file-icon,
+.show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon {
+  &::before {
+    color: #d4d7d6;
+    content: '\E01A';
+    [data-theme='light'] & {
+      color: #4d5a5e;
+    }
+  }
 }
 .show-file-icons .bat-lang-file-icon.file-icon::before {
   color: #519aba;
diff --git a/src/styles/components/project.scss b/src/styles/components/project.scss
index 50e2dc3..f423afc 100644
--- a/src/styles/components/project.scss
+++ b/src/styles/components/project.scss
@@ -25,7 +25,7 @@
     top: -1px;
     right: -1px;
     bottom: -2px;
-    background: var(--primary-gradient);
+    background: var(--primary);
     z-index: -1;
     opacity: 0.6;
   }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d5c78a8..efd64ca 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,38 +1,65 @@
 :root {
   --primary: #0098ea;
-  --brand-color-2: rgba(19, 226, 218, 1);
   --font-title: 'Inter', sans-serif;
   --font-body: 'Inter', sans-serif;
   --text-color: #f7f7f7;
+  --bg-color: #000;
+  --color-light: #ccc;
   --black-500: #0e0e10;
-  --grey: #4f4e4e;
-  --light-grey: #7e7d7d;
-  --grey-500: #1a1a1a;
-  --grey-900: #232328;
-  --grey-1000: #131212;
+  --color-danger: #c84075;
+  --color-warning: #d19228;
+  --border-radius: 5px;
+  --btn-primary: #0098ea;
+  --btn-primary-hover: #00a6ff;
+  --btn-disabled: rgba(255, 255, 255, 0.1);
+  --menu-bg: rgba(0, 0, 0, 0.7);
+  --sidebar-bg: #141416;
+  --splitter-bg: #141416;
   --grey--10: rgba(46, 46, 51, 0.1);
   --grey--50: rgba(46, 46, 51, 0.5);
   --grey--70: rgba(46, 46, 51, 0.7);
 
-  --bg-color-dark: #000;
-  --color-danger: #c84075;
-  --color-warning: #d19228;
-  --border-radius: 5px;
+  --dark-800: #181717;
   --dark-hover: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0.6) 0%,
     rgba(0, 0, 0, 0.6) 100%
   );
-  --primary-gradient: linear-gradient(45deg, #2d83ec, #1ac9ff);
+  --grey-900: #232328;
   --modal-bg: linear-gradient(
       0deg,
       rgba(0, 0, 0, 0.5) 0%,
       rgba(0, 0, 0, 0.5) 100%
     ),
     #232328;
-  --btn-primary: #0098ea;
-  --btn-primary-hover: #00a6ff;
-  --btn-disabled: rgba(255, 255, 255, 0.1);
+}
+
+/* Light theme styles */
+[data-theme='light'] {
+  --text-color: #000;
+  --bg-color: #f7f7f7;
+  --black-500: #dcdada;
+  --btn-disabled: rgba(0, 0, 0, 0.1);
+  --menu-bg: rgba(255, 255, 255, 0.6);
+  --sidebar-bg: #e8e8e8;
+  --color-light: #454444;
+  --splitter-bg: #bbbbbb;
+  --grey--10: rgba(208, 208, 225, 0.1);
+  --grey--50: #e8e8e8;
+  --grey--70: #dcdada;
+  --dark-800: #eaeaea;
+  --grey-900: #f2f2f2;
+  --dark-hover: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0.6) 0%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+  --modal-bg: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.5) 0%,
+      rgba(255, 255, 255, 0.5) 100%
+    ),
+    #eaeaea;
 }
 
 html {
@@ -44,14 +71,18 @@ body {
   font-family: var(--font-body);
   letter-spacing: 0.02em;
   color: var(--text-color);
-  background: var(--bg-color-dark);
+  background: var(--bg-color);
   line-height: 1.4;
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
   *::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     background-color: #000000;
+    [data-theme='light'] & {
+      background-color: #f7f7f7;
+    }
   }
 
   *::-webkit-scrollbar {
diff --git a/src/styles/lib/form.scss b/src/styles/lib/form.scss
index 70f4464..fe891b5 100644
--- a/src/styles/lib/form.scss
+++ b/src/styles/lib/form.scss
@@ -1,8 +1,10 @@
 .ant-select {
   .ant-select-selector {
-    background-color: rgba(0, 0, 0, 0.4) !important;
     border: 0 !important;
     box-shadow: none !important;
+    [data-theme='dark'] & {
+      background-color: rgba(0, 0, 0, 0.4) !important;
+    }
   }
 }
 div.ant-form-item {
@@ -35,6 +37,9 @@ div.ant-form-item {
     background-color: rgba(0, 0, 0, 1);
     height: 35px;
     box-shadow: none;
+    [data-theme='light'] & {
+      background-color: rgba(204, 204, 204, 0.4);
+    }
     &:focus {
       border-color: #454545;
     }