diff --git a/package-lock.json b/package-lock.json
index 8ccedf3..43a7fe3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2016,7 +2016,6 @@
       "version": "19.2.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -2679,7 +2678,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -5253,7 +5251,6 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..f9de3ef
--- /dev/null
+++ b/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Palette, ChevronUp } from 'lucide-react';
+
+const THEMES = [
+  // Dark Themes
+  { name: 'Monokai', value: '' },
+  { name: 'Dracula', value: 'theme-dracula' },
+  { name: 'Nord', value: 'theme-nord' },
+  { name: 'Solarized Dark', value: 'theme-solarized-dark' },
+  { name: 'One Dark', value: 'theme-one-dark' },
+  { name: 'Gruvbox Dark', value: 'theme-gruvbox-dark' },
+  { name: 'Tokyo Night', value: 'theme-tokyo-night' },
+  { name: 'Material Dark', value: 'theme-material-dark' },
+  // Light Themes
+  { name: 'Light', value: 'theme-light' },
+  { name: 'GitHub Light', value: 'theme-github-light' },
+  { name: 'Solarized Light', value: 'theme-solarized-light' },
+  { name: 'One Light', value: 'theme-one-light' },
+];
+
+export function ThemeSwitcher() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentTheme, setCurrentTheme] = useState('');
+
+  const handleThemeChange = (themeValue: string) => {
+    setCurrentTheme(themeValue);
+    
+    // Remove all theme classes
+    THEMES.forEach(theme => {
+      if (theme.value) {
+        document.documentElement.classList.remove(theme.value);
+      }
+    });
+    
+    // Add selected theme class
+    if (themeValue) {
+      document.documentElement.classList.add(themeValue);
+    }
+    
+    setIsOpen(false);
+  };
+
+  // const currentThemeName = THEMES.find(t => t.value === currentTheme)?.name || 'Monokai';
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-1.5 cursor-pointer rounded group transition-colors flex items-center gap-1"
+        style={{ color: 'var(--text-primary)' }}
+        onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+        onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+        title="Theme"
+      >
+        <Palette size={14} className="opacity-60 group-hover:opacity-100" />
+        {isOpen && <ChevronUp size={12} className="opacity-60" />}
+      </button>
+
+      {isOpen && (
+        <div
+          className="absolute bottom-full right-0 mb-1 rounded border shadow-lg z-50 min-w-[150px]"
+          style={{
+            backgroundColor: 'var(--bg-secondary)',
+            borderColor: 'var(--border-primary)',
+            boxShadow: '0 -4px 12px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          {THEMES.map((theme) => (
+            <button
+              key={theme.value}
+              onClick={() => handleThemeChange(theme.value)}
+              className={`w-full text-left px-3 py-1.5 text-[12px] transition-colors flex items-center justify-between ${
+                currentTheme === theme.value ? 'font-semibold' : ''
+              }`}
+              style={{
+                backgroundColor: currentTheme === theme.value ? 'var(--bg-tertiary)' : 'transparent',
+                color: currentTheme === theme.value ? 'var(--text-primary)' : 'var(--text-secondary)',
+              }}
+              onMouseEnter={(e) => {
+                if (currentTheme !== theme.value) {
+                  e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (currentTheme !== theme.value) {
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                }
+              }}
+            >
+              {theme.name}
+              {currentTheme === theme.value && <span className="text-[10px]">✓</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/layout/ActivityBar.tsx b/src/components/layout/ActivityBar.tsx
index b88b1f6..fec44d4 100644
--- a/src/components/layout/ActivityBar.tsx
+++ b/src/components/layout/ActivityBar.tsx
@@ -1,17 +1,23 @@
-import { Files, Search, GitBranch, Settings, CircleUser } from 'lucide-react';
+import { Files, Search, GitBranch, CircleUser, Lock } from 'lucide-react';
 import { ActivityBarItem } from './ActivityBarItem';
 
 export function ActivityBar() {
     return (
-        <div className="w-[50px] flex-shrink-0 flex flex-col bg-[#272822] border-l border-[#171717] items-center py-2 z-10">
+        <div 
+            className="w-[50px] flex-shrink-0 flex flex-col items-center py-2 z-10"
+            style={{
+                backgroundColor: 'var(--activity-bar-bg)',
+                borderLeft: `1px solid var(--activity-bar-border)`
+            }}
+        >
             <div className="flex-1 flex flex-col gap-2">
                 <ActivityBarItem icon={Files} active />
                 <ActivityBarItem icon={Search} />
                 <ActivityBarItem icon={GitBranch} />
+                <ActivityBarItem icon={Lock} />
             </div>
             <div className="flex flex-col gap-2 pb-2">
                 <ActivityBarItem icon={CircleUser} />
-                <ActivityBarItem icon={Settings} />
             </div>
         </div>
     );
diff --git a/src/components/layout/ActivityBarItem.tsx b/src/components/layout/ActivityBarItem.tsx
index 25ca5f3..55346ec 100644
--- a/src/components/layout/ActivityBarItem.tsx
+++ b/src/components/layout/ActivityBarItem.tsx
@@ -7,7 +7,24 @@ interface ActivityBarItemProps {
 
 export function ActivityBarItem({ icon: Icon, active = false }: ActivityBarItemProps) {
     return (
-        <div className={`p-3 cursor-pointer hover:text-white transition-colors ${active ? 'text-white border-l-2 border-[#f92672]' : 'text-[#8f908a]'}`}>
+        <div 
+            className={`p-3 cursor-pointer transition-colors ${active ? 'border-l-2' : ''}`}
+            style={{
+                color: active ? 'var(--activity-item-text-active)' : 'var(--activity-item-text-default)',
+                backgroundColor: active ? 'var(--activity-item-bg-active)' : 'transparent',
+                borderLeft: active ? `2px solid var(--activity-item-border-active)` : 'none',
+            }}
+            onMouseEnter={(e) => {
+                if (!active) {
+                    e.currentTarget.style.color = 'var(--activity-item-text-hover)';
+                }
+            }}
+            onMouseLeave={(e) => {
+                if (!active) {
+                    e.currentTarget.style.color = 'var(--activity-item-text-default)';
+                }
+            }}
+        >
             <Icon size={24} strokeWidth={1.5} />
         </div>
     );
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 16b4b97..c39e4b2 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 import { Panel, Group, Separator } from 'react-resizable-panels';
 import { ActivityBar } from './ActivityBar';
 import { TitleBar } from './TitleBar';
+import { useAppStore } from '../../store/useAppStore';
+import { ChevronRight } from 'lucide-react';
 
 interface MainLayoutProps {
     sidebarContent: ReactNode;
@@ -9,8 +11,16 @@ interface MainLayoutProps {
 }
 
 export function MainLayout({ sidebarContent, editorContent }: MainLayoutProps) {
+    const { isExplorerCollapsed, toggleExplorerCollapsed } = useAppStore();
+
     return (
-        <div className="h-screen w-screen flex flex-col bg-[#1e1f1c] text-[#cfcfc2] overflow-hidden">
+        <div 
+            className="h-screen w-screen flex flex-col overflow-hidden"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                color: 'var(--text-primary)'
+            }}
+        >
 
             <TitleBar />
 
@@ -21,17 +31,57 @@ export function MainLayout({ sidebarContent, editorContent }: MainLayoutProps) {
                 <div className="flex-1 flex min-w-0 h-full">
                     <Group orientation="horizontal">
                         {/* Sidebar Panel */}
-                        <Panel id="sidebar" defaultSize={20} minSize={10}>
-                            <div className="flex flex-col bg-[#1e1f1c] h-full w-full">
-                                {sidebarContent}
-                            </div>
-                        </Panel>
+                        {!isExplorerCollapsed && (
+                            <>
+                                <Panel id="sidebar" defaultSize={20} minSize={10} collapsible={true} collapsedSize={0}>
+                                    <div 
+                                        className="flex flex-col h-full w-full"
+                                        style={{ backgroundColor: 'var(--bg-primary)' }}
+                                    >
+                                        {sidebarContent}
+                                    </div>
+                                </Panel>
 
-                        <Separator id="resize-handle" className="w-[4px] bg-[#171717] hover:bg-[#f92672] transition-colors cursor-col-resize z-50 active:bg-[#f92672] flex-shrink-0" />
+                                <Separator 
+                                    id="resize-handle" 
+                                    className="w-[4px] transition-colors cursor-col-resize z-50 flex-shrink-0" 
+                                    style={{
+                                        backgroundColor: 'var(--border-primary)',
+                                    }}
+                                />
+                            </>
+                        )}
+
+                        {/* Collapsed Sidebar - VS Code Style */}
+                        {isExplorerCollapsed && (
+                            <div 
+                                className="w-[35px] flex-shrink-0 flex flex-col items-center py-3 gap-2 transition-colors"
+                                style={{
+                                    backgroundColor: 'var(--bg-primary)',
+                                    borderRight: '1px solid var(--border-secondary)'
+                                }}
+                            >
+                                <button
+                                    onClick={() => toggleExplorerCollapsed()}
+                                    className="p-2 rounded transition-colors group"
+                                    style={{
+                                        color: 'var(--text-primary)',
+                                    }}
+                                    onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                                    onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                                    title="Explorer"
+                                >
+                                    <ChevronRight size={18} />
+                                </button>
+                            </div>
+                        )}
 
                         {/* Editor Panel */}
-                        <Panel id="editor" defaultSize={80} minSize={30}>
-                            <div className="flex flex-col bg-[#272822] h-full w-full">
+                        <Panel id="editor" defaultSize={isExplorerCollapsed ? 95 : 80} minSize={30}>
+                            <div 
+                                className="flex flex-col h-full w-full"
+                                style={{ backgroundColor: 'var(--bg-secondary)' }}
+                            >
                                 {editorContent}
                             </div>
                         </Panel>
diff --git a/src/components/layout/TitleBar.tsx b/src/components/layout/TitleBar.tsx
index 0e2bf01..8858ff8 100644
--- a/src/components/layout/TitleBar.tsx
+++ b/src/components/layout/TitleBar.tsx
@@ -1,7 +1,18 @@
 export function TitleBar() {
     return (
-        <div className="h-[35px] bg-[#1e1f1c] flex items-center justify-center border-b border-[#171717] select-none drag-region">
-            <span className="text-[13px] font-medium text-[#cfcfc2] opacity-80">Cinder Notes</span>
+        <div 
+            className="h-[35px] flex items-center justify-center border-b select-none drag-region"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border-primary)'
+            }}
+        >
+            <span 
+                className="text-[13px] font-medium opacity-80"
+                style={{ color: 'var(--text-primary)' }}
+            >
+                Cinder Notes
+            </span>
         </div>
     );
 }
diff --git a/src/components/layout/editor/Editor.tsx b/src/components/layout/editor/Editor.tsx
index 8440ceb..27e227d 100644
--- a/src/components/layout/editor/Editor.tsx
+++ b/src/components/layout/editor/Editor.tsx
@@ -1,59 +1,97 @@
-import { useState } from 'react';
 import { useAppStore } from '../../../store/useAppStore';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Eye, Edit2 } from 'lucide-react';
+import { Eye, ChevronLeft, FileText, Save, Sparkles } from 'lucide-react';
 
-export function Editor() {
+interface EditorProps {
+    isPreview: boolean;
+    onPreviewChange?: (isPreview: boolean) => void;
+}
+
+export function Editor({ isPreview }: EditorProps) {
     const { activeFileId, activeFileContent, updateFileContent } = useAppStore();
-    const [isPreview, setIsPreview] = useState(false);
+
+    // Check if this is a blank tab
+    const isBlankTab = activeFileId?.startsWith('new-tab-');
 
     // If no active file, just show empty state in main area
     // Tabs are now handled by EditorPane
 
     return (
-        <div className="h-full flex flex-col bg-[#272822] relative group">
+        <div 
+            className="h-full flex flex-col relative group"
+            style={{ backgroundColor: 'var(--editor-bg)' }}
+        >
 
 
-            {!activeFileId ? (
-                <div className="flex-1 flex items-center justify-center bg-[#272822] text-[#75715e]">
+            {!activeFileId || isBlankTab ? (
+                <div 
+                    className="flex-1 flex items-center justify-center"
+                    style={{
+                        backgroundColor: 'var(--editor-bg)',
+                        color: 'var(--text-tertiary)'
+                    }}
+                >
                     <div className="text-center">
-                        <p className="mb-2 text-lg font-medium opacity-50">No file selected</p>
+                        <div className="mb-6 flex justify-center">
+                            <Sparkles size={32} className="text-[#cfcfc2] opacity-70" />
+                        </div>
+                        <p className="mb-6 text-2xl font-semibold opacity-60">Cinder Notes</p>
+                        <div className="space-y-4 text-sm opacity-50 max-w-md">
+                            <div className="flex items-center gap-3 justify-center">
+                                <ChevronLeft size={18} className="text-[#cfcfc2]" />
+                                <p><span className="text-[#cfcfc2]">Select a file</span> from the explorer to start editing</p>
+                            </div>
+                            <div className="flex items-center gap-3 justify-center">
+                                <FileText size={18} className="text-[#cfcfc2]" />
+                                <p><span className="text-[#cfcfc2]">Create new notes</span> in Markdown format</p>
+                            </div>
+                            <div className="flex items-center gap-3 justify-center">
+                                <Eye size={18} className="text-[#cfcfc2]" />
+                                <p><span className="text-[#cfcfc2]">Toggle preview mode</span> to see rendered content</p>
+                            </div>
+                            <div className="flex items-center gap-3 justify-center">
+                                <Save size={18} className="text-[#cfcfc2]" />
+                                <p><span className="text-[#cfcfc2]">Auto-saves</span> as you type</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             ) : (
                 <div className="flex-1 relative flex flex-col min-h-0">
-                    {/* Toolbar/Toggle */}
-                    <button
-                        onClick={() => setIsPreview(!isPreview)}
-                        className="absolute top-4 right-4 z-10 p-2 rounded bg-black/20 hover:bg-black/40 text-[#f8f8f2] transition-opacity opacity-0 group-hover:opacity-100"
-                        title={isPreview ? "Edit" : "Preview"}
-                    >
-                        {isPreview ? <Edit2 size={16} /> : <Eye size={16} />}
-                    </button>
-
                     {isPreview ? (
-                        <div className="flex-1 w-full h-full p-8 overflow-y-auto prose prose-invert prose-stone max-w-none text-[#f8f8f2]">
+                        <div className="flex-1 w-full h-full p-8 overflow-y-auto prose prose-invert prose-stone max-w-none" style={{ color: 'var(--editor-text)' }}>
                             <style>{`
-                        .prose h1, .prose h2, .prose h3, .prose h4 { color: #f92672; }
-                        .prose a { color: #66d9ef; }
-                        .prose code { color: #ae81ff; background: #23241f; padding: 2px 4px; border-radius: 4px; }
-                        .prose pre { background: #23241f; }
-                        .prose strong { color: #f92672; }
-                        .prose ul > li::marker { color: #66d9ef; }
+                        .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--markdown-heading); }
+                        .prose a { color: var(--markdown-link); }
+                        .prose code { color: var(--markdown-code); background: var(--markdown-code-bg); padding: 2px 4px; border-radius: 4px; }
+                        .prose pre { background: var(--markdown-code-bg); }
+                        .prose strong { color: var(--markdown-strong); }
+                        .prose ul > li::marker { color: var(--markdown-list); }
                     `}</style>
                             <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                 {activeFileContent}
                             </ReactMarkdown>
                         </div>
                     ) : (
-                        <textarea
-                            className="flex-1 w-full h-full bg-[#272822] text-[#f8f8f2] p-8 outline-none resize-none font-mono text-[14px] leading-relaxed selection:bg-[#49483e]"
-                            value={activeFileContent}
-                            onChange={(e) => updateFileContent(activeFileId, e.target.value)}
-                            spellCheck={false}
-                            placeholder="Start writing..."
-                        />
+                        <>
+                            <style>{`
+                                textarea::selection {
+                                    background-color: var(--editor-selection-bg);
+                                }
+                            `}</style>
+                            <textarea
+                                className="flex-1 w-full h-full p-8 outline-none resize-none font-mono text-[14px] leading-relaxed"
+                                style={{
+                                    backgroundColor: 'var(--editor-bg)',
+                                    color: 'var(--editor-text)'
+                                }}
+                                value={activeFileContent}
+                                onChange={(e) => updateFileContent(activeFileId, e.target.value)}
+                                spellCheck={false}
+                                placeholder="Start writing..."
+                            />
+                        </>
                     )}
                 </div>
             )}
diff --git a/src/components/layout/editor/EditorHeader.tsx b/src/components/layout/editor/EditorHeader.tsx
new file mode 100644
index 0000000..203ce5e
--- /dev/null
+++ b/src/components/layout/editor/EditorHeader.tsx
@@ -0,0 +1,92 @@
+import { Undo2, Redo2, Eye, Edit2 } from 'lucide-react';
+import { useAppStore } from '../../../store/useAppStore';
+
+interface EditorHeaderProps {
+    isPreview: boolean;
+    onPreviewToggle: () => void;
+}
+
+export function EditorHeader({ isPreview, onPreviewToggle }: EditorHeaderProps) {
+    const { activeFileId, findFile } = useAppStore();
+
+    // Check if this is a blank tab
+    const isBlankTab = activeFileId?.startsWith('new-tab-');
+    const file = activeFileId && !isBlankTab ? findFile(activeFileId) : null;
+    const tabName = isBlankTab ? 'New Tab' : file?.name || '';
+
+    // Only show header if there's an active file or blank tab
+    if (!activeFileId) return null;
+
+    return (
+        <div
+            className="flex items-center justify-between px-2 py-1.5 shrink-0"
+            style={{
+                backgroundColor: 'var(--editor-bg)',
+                borderColor: 'var(--border-primary)'
+            }}
+        >
+            {/* Left side: Undo/Redo buttons */}
+            <div className="flex items-center gap-1">
+                <button
+                    className="p-1.5 rounded cursor-pointer transition-colors"
+                    style={{ color: 'var(--text-secondary)' }}
+                    onMouseEnter={(e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                        e.currentTarget.style.color = 'var(--text-primary)';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                        e.currentTarget.style.color = 'var(--text-secondary)';
+                    }}
+                    title="Undo"
+                >
+                    <Undo2 size={16} />
+                </button>
+                <button
+                    className="p-1.5 rounded cursor-pointer transition-colors"
+                    style={{ color: 'var(--text-secondary)' }}
+                    onMouseEnter={(e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                        e.currentTarget.style.color = 'var(--text-primary)';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                        e.currentTarget.style.color = 'var(--text-secondary)';
+                    }}
+                    title="Redo"
+                >
+                    <Redo2 size={16} />
+                </button>
+            </div>
+
+            {/* Center: Tab name */}
+            <span 
+                className="text-[13px] font-medium flex-1 text-center"
+                style={{ 
+                    color: 'var(--text-primary)',
+                    fontStyle: isBlankTab ? 'italic' : 'normal'
+                }}
+            >
+                {tabName}
+            </span>
+
+            {/* Right side: Preview toggle button */}
+            <button
+                onClick={onPreviewToggle}
+                className="p-1.5 rounded cursor-pointer transition-colors"
+                style={{ color: 'var(--text-secondary)' }}
+                onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                    e.currentTarget.style.color = 'var(--text-primary)';
+                }}
+                onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = 'var(--text-secondary)';
+                }}
+                title={isPreview ? "Edit" : "Preview"}
+            >
+                {isPreview ? <Edit2 size={16} /> : <Eye size={16} />}
+            </button>
+        </div>
+    );
+}
diff --git a/src/components/layout/editor/EditorPane.tsx b/src/components/layout/editor/EditorPane.tsx
index e34042c..ce3b081 100644
--- a/src/components/layout/editor/EditorPane.tsx
+++ b/src/components/layout/editor/EditorPane.tsx
@@ -1,13 +1,21 @@
+import { useState } from 'react';
 import { Editor } from './Editor';
 import { EditorTabs } from './EditorTabs';
+import { EditorHeader } from './EditorHeader';
 import { EditorStatusBar } from './EditorStatusBar';
 
 export function EditorPane() {
+    const [isPreview, setIsPreview] = useState(false);
+
     return (
-        <div className="flex flex-col h-full w-full bg-[#272822]">
+        <div 
+            className="flex flex-col h-full w-full"
+            style={{ backgroundColor: 'var(--bg-secondary)' }}
+        >
             <EditorTabs />
+            <EditorHeader isPreview={isPreview} onPreviewToggle={() => setIsPreview(!isPreview)} />
             <div className="flex-1 min-h-0 relative">
-                <Editor />
+                <Editor isPreview={isPreview} />
             </div>
             <EditorStatusBar />
         </div>
diff --git a/src/components/layout/editor/EditorStatusBar.tsx b/src/components/layout/editor/EditorStatusBar.tsx
index 2f2bbc1..3948237 100644
--- a/src/components/layout/editor/EditorStatusBar.tsx
+++ b/src/components/layout/editor/EditorStatusBar.tsx
@@ -3,7 +3,14 @@ import { EditorStatusBarItem } from './EditorStatusBarItem';
 
 export function EditorStatusBar() {
     return (
-        <div className="h-[22px] bg-[#1e1f1c] border-t border-[#171717] text-[#75715e] flex items-center justify-between px-2 select-none z-10 text-[11px] font-medium tracking-wide">
+        <div 
+            className="h-[22px] border-t text-[11px] font-medium tracking-wide flex items-center justify-between px-2 select-none z-10"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border-primary)',
+                color: 'var(--text-tertiary)'
+            }}
+        >
             <div className="flex items-center h-full">
                 <EditorStatusBarItem>
                     <GitBranch size={10} className="mr-1" />
diff --git a/src/components/layout/editor/EditorStatusBarItem.tsx b/src/components/layout/editor/EditorStatusBarItem.tsx
index c793ef5..d4ff5f7 100644
--- a/src/components/layout/editor/EditorStatusBarItem.tsx
+++ b/src/components/layout/editor/EditorStatusBarItem.tsx
@@ -2,7 +2,14 @@ import type { ReactNode } from 'react';
 
 export function EditorStatusBarItem({ children, className = '' }: { children: ReactNode, className?: string }) {
     return (
-        <div className={`px-2 flex items-center hover:bg-[#3e3d32] cursor-pointer text-[12px] ${className}`}>
+        <div 
+            className={`px-2 flex items-center cursor-pointer text-[12px] rounded transition-colors ${className}`}
+            style={{
+                color: 'var(--text-tertiary)'
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+        >
             {children}
         </div>
     )
diff --git a/src/components/layout/editor/EditorTabs.tsx b/src/components/layout/editor/EditorTabs.tsx
index cda03c1..6f3f2e9 100644
--- a/src/components/layout/editor/EditorTabs.tsx
+++ b/src/components/layout/editor/EditorTabs.tsx
@@ -1,38 +1,76 @@
-
-import { X } from 'lucide-react';
+import { X, Plus } from 'lucide-react';
 import { useAppStore } from '../../../store/useAppStore';
 
 export function EditorTabs() {
-    const { openFiles, activeFileId, selectFile, closeFile, findFile } = useAppStore();
-
-    if (openFiles.length === 0) return null;
+    const { openFiles, activeFileId, selectFile, closeFile, findFile, createNewTab } = useAppStore();
 
     return (
-        <div className="flex bg-[#1e1f1c] border-b border-[#171717]/50 overflow-x-auto no-scrollbar shrink-0">
+        <div 
+            className="flex overflow-x-auto no-scrollbar shrink-0 border-b"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border-primary)',
+                minHeight: '35px'
+            }}
+        >
             {openFiles.map(fileId => {
                 const file = findFile(fileId);
                 const isActive = activeFileId === fileId;
-                if (!file) return null;
+                
+                // Check if this is a blank tab (new-tab-X format)
+                const isBlankTab = fileId.startsWith('new-tab-');
+                const tabName = isBlankTab ? 'New Tab' : file?.name;
 
                 return (
                     <div
                         key={fileId}
                         onClick={() => selectFile(fileId)}
-                        className={`
-                            group flex items-center min-w-[120px] max-w-[200px] h-[35px] px-3 border-r border-[#171717]/50 cursor-pointer text-[13px] select-none
-                            ${isActive ? 'bg-[#272822] text-[#f8f8f2]' : 'bg-[#1e1f1c] text-[#75715e] hover:bg-[#272822]/50'}
-                        `}
+                        className={`group flex items-center min-w-[120px] max-w-[200px] h-[35px] px-3 border-r cursor-pointer text-[13px] select-none transition-colors`}
+                        style={{
+                            borderColor: 'var(--border-primary)',
+                            backgroundColor: isActive ? 'var(--bg-secondary)' : 'transparent',
+                            color: isActive ? 'var(--text-white)' : 'var(--text-tertiary)',
+                            fontStyle: isBlankTab && !isActive ? 'italic' : 'normal',
+                            opacity: isBlankTab && !isActive ? 0.8 : 1
+                        }}
+                        onMouseEnter={(e) => {
+                            if (!isActive) {
+                                e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                            }
+                        }}
+                        onMouseLeave={(e) => {
+                            if (!isActive) {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }
+                        }}
                     >
-                        <span className="truncate flex-1 mr-2">{file.name}</span>
+                        <span className="truncate flex-1 mr-2">{tabName}</span>
                         <span
                             onClick={(e) => { e.stopPropagation(); closeFile(fileId); }}
-                            className={`opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-[#3e3d32] ${isActive ? 'text-[#f8f8f2]' : ''}`}
+                            className={`opacity-0 group-hover:opacity-100 p-0.5 rounded transition-colors`}
+                            style={{
+                                color: isActive ? 'var(--text-white)' : 'var(--text-tertiary)'
+                            }}
+                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
                         >
                             <X size={12} />
                         </span>
                     </div>
                 )
             })}
+            <button
+                onClick={createNewTab}
+                className="flex items-center justify-center h-[35px] px-3 transition-colors"
+                style={{
+                    color: 'var(--text-tertiary)'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
+                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-tertiary)'}
+                title="New Tab"
+            >
+                <Plus size={16} />
+            </button>
         </div>
     )
 }
diff --git a/src/components/layout/explorer/ExplorerActions.tsx b/src/components/layout/explorer/ExplorerActions.tsx
index ead0b8d..5463109 100644
--- a/src/components/layout/explorer/ExplorerActions.tsx
+++ b/src/components/layout/explorer/ExplorerActions.tsx
@@ -1,20 +1,51 @@
-import { FilePlus, FolderPlus, RefreshCw, MinusSquare } from 'lucide-react';
+import { FilePlus, FolderPlus, RefreshCw, ChevronLeft } from 'lucide-react';
+import { useAppStore } from '../../../store/useAppStore';
 
 export function ExplorerActions() {
+    const { toggleExplorerCollapsed } = useAppStore();
+
     return (
-        <div className="flex items-center gap-1 p-2 bg-[#1e1f1c] border-b border-[#2d2e28] text-[#cfcfc2]">
-            <button className="p-1 hover:bg-[#3e3d32] rounded group" title="New File">
+        <div 
+            className="flex items-center gap-1 p-2"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderBottom: '1px solid var(--border-secondary)',
+                color: 'var(--text-primary)'
+            }}
+        >
+            <button 
+                className="p-1 rounded group transition-colors" 
+                title="New File"
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
                 <FilePlus size={16} className="opacity-70 group-hover:opacity-100 transition-opacity" />
             </button>
-            <button className="p-1 hover:bg-[#3e3d32] rounded group" title="New Folder">
+            <button 
+                className="p-1 rounded group transition-colors" 
+                title="New Folder"
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
                 <FolderPlus size={16} className="opacity-70 group-hover:opacity-100 transition-opacity" />
             </button>
-            <button className="p-1 hover:bg-[#3e3d32] rounded group" title="Refresh Explorer">
+            <button 
+                className="p-1 rounded group transition-colors" 
+                title="Refresh Explorer"
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
                 <RefreshCw size={16} className="opacity-70 group-hover:opacity-100 transition-opacity" />
             </button>
             <div className="flex-1" />
-            <button className="p-1 hover:bg-[#3e3d32] rounded group" title="Collapse All">
-                <MinusSquare size={16} className="opacity-70 group-hover:opacity-100 transition-opacity" />
+            <button 
+                onClick={() => toggleExplorerCollapsed()}
+                className="p-1 rounded group transition-colors" 
+                title="Collapse All"
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
+                <ChevronLeft size={16} className="opacity-70 group-hover:opacity-100 transition-opacity" />
             </button>
         </div>
     );
diff --git a/src/components/layout/explorer/ExplorerFooter.tsx b/src/components/layout/explorer/ExplorerFooter.tsx
index 9619c69..9079f0c 100644
--- a/src/components/layout/explorer/ExplorerFooter.tsx
+++ b/src/components/layout/explorer/ExplorerFooter.tsx
@@ -2,20 +2,42 @@ import { Settings, HelpCircle, Archive } from 'lucide-react';
 
 export function ExplorerFooter() {
     return (
-        <div className="flex items-center justify-between bg-[#1e1f1c] border-t border-[#2d2e28] px-2 py-1.5">
+        <div 
+            className="flex items-center justify-between border-t px-2 py-1.5"
+            style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border-secondary)'
+            }}
+        >
             {/* Cinder Vault */}
-            <div className="flex items-center gap-2 cursor-pointer hover:bg-[#2d2e28] px-2 py-1 rounded group transition-colors">
-                <Archive size={14} className="text-[#a6e22e] opacity-80 group-hover:opacity-100" />
-                <span className="text-[12px] text-[#cfcfc2] font-medium opacity-80 group-hover:opacity-100">Cinder Vault</span>
+            <div 
+                className="flex items-center gap-2 cursor-pointer px-2 py-1 rounded group transition-colors"
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
+                <Archive size={14} className="opacity-80 group-hover:opacity-100" style={{ color: '#a6e22e' }} />
+                <span className="text-[12px] font-medium opacity-80 group-hover:opacity-100" style={{ color: 'var(--text-primary)' }}>Cinder Vault</span>
             </div>
 
-            {/* Settings & Help */}
+            {/* Settings, Theme & Help */}
             <div className="flex items-center gap-0.5">
-                <div className="p-1.5 cursor-pointer hover:bg-[#3e3d32] rounded group transition-colors" title="Settings">
-                    <Settings size={14} className="text-[#cfcfc2] opacity-60 group-hover:opacity-100" />
+                <div 
+                    className="p-1.5 cursor-pointer rounded group transition-colors" 
+                    style={{ color: 'var(--text-primary)' }}
+                    onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                    onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                    title="Settings"
+                >
+                    <Settings size={14} className="opacity-60 group-hover:opacity-100" />
                 </div>
-                <div className="p-1.5 cursor-pointer hover:bg-[#3e3d32] rounded group transition-colors" title="Help">
-                    <HelpCircle size={14} className="text-[#cfcfc2] opacity-60 group-hover:opacity-100" />
+                <div 
+                    className="p-1.5 cursor-pointer rounded group transition-colors" 
+                    style={{ color: 'var(--text-primary)' }}
+                    onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--bg-tertiary)'}
+                    onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                    title="Help"
+                >
+                    <HelpCircle size={14} className="opacity-60 group-hover:opacity-100" />
                 </div>
             </div>
         </div>
diff --git a/src/components/layout/explorer/FileExplorer.tsx b/src/components/layout/explorer/FileExplorer.tsx
index 3d1dfc9..79fa808 100644
--- a/src/components/layout/explorer/FileExplorer.tsx
+++ b/src/components/layout/explorer/FileExplorer.tsx
@@ -7,15 +7,26 @@ export function FileExplorer() {
     const { files } = useAppStore();
 
     return (
-        <div className="h-full flex flex-col bg-[#1e1f1c]">
+        <div 
+            className="h-full flex flex-col"
+            style={{ backgroundColor: 'var(--bg-primary)' }}
+        >
             {/* Quick Actions Header */}
             <ExplorerActions />
 
             {/* Main File List */}
             <div className="flex-1 overflow-y-auto no-scrollbar pt-2">
-                <div className="h-[35px] flex items-center px-4 uppercase tracking-widest text-[11px] font-bold text-[#8f908a] opacity-80 group">
+                <div 
+                    className="h-[35px] flex items-center px-4 uppercase tracking-widest text-[11px] font-bold opacity-80 group"
+                    style={{ color: 'var(--text-secondary)' }}
+                >
                     <span className="flex-1">Folders</span>
-                    <span className="opacity-0 group-hover:opacity-100 cursor-pointer hover:text-[#f8f8f2] text-[16px]">...</span>
+                    <span 
+                        className="opacity-0 group-hover:opacity-100 cursor-pointer text-[16px] transition-colors"
+                        style={{ color: 'var(--text-primary)' }}
+                    >
+                        ...
+                    </span>
                 </div>
                 <div>
                     {files.map((node) => (
diff --git a/src/components/layout/explorer/FileTreeItem.tsx b/src/components/layout/explorer/FileTreeItem.tsx
index 4d08eed..bf321d2 100644
--- a/src/components/layout/explorer/FileTreeItem.tsx
+++ b/src/components/layout/explorer/FileTreeItem.tsx
@@ -28,17 +28,29 @@ export function FileTreeItem({ node, depth = 0 }: FileTreeItemProps) {
         <div>
             <div
                 onClick={handleClick}
-                style={{ paddingLeft }}
-                className={`
-          group flex items-center py-1 cursor-pointer text-[13px] select-none
-          ${isActive ? 'bg-[#3e3d32] text-white' : 'text-[#cfcfc2] hover:bg-[#2b2b2b]'}
-        `}
+                style={{ 
+                    paddingLeft,
+                    backgroundColor: isActive ? 'var(--filetree-bg-active)' : 'transparent',
+                    color: isActive ? 'var(--filetree-text-active)' : 'var(--filetree-text)'
+                }}
+                className={`group flex items-center py-1 cursor-pointer text-[13px] select-none transition-colors`}
+                onMouseEnter={(e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.backgroundColor = 'var(--filetree-bg-hover)';
+                    }
+                }}
+                onMouseLeave={(e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                    }
+                }}
             >
                 <span className="mr-1.5 opacity-80 group-hover:opacity-100 flex-shrink-0">
                     {node.type === 'folder' ? (
                         <ChevronRight
                             size={14}
-                            className={`transition-transform duration-200 ${isOpen ? 'rotate-90' : ''} text-[#8f908a]`}
+                            className={`transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+                            style={{ color: 'var(--filetree-icon)' }}
                         />
                     ) : (
                         <span className="w-3.5 inline-block" />
@@ -47,9 +59,9 @@ export function FileTreeItem({ node, depth = 0 }: FileTreeItemProps) {
 
                 <span className="mr-1.5 opacity-70">
                     {node.type === 'folder' ? (
-                        isOpen ? <FolderOpen size={14} className="text-[#8f908a]" /> : <Folder size={14} className="text-[#8f908a]" />
+                        isOpen ? <FolderOpen size={14} style={{ color: 'var(--filetree-icon)' }} /> : <Folder size={14} style={{ color: 'var(--filetree-icon)' }} />
                     ) : (
-                        <FileText size={14} className="text-[#8f908a]" />
+                        <FileText size={14} style={{ color: 'var(--filetree-icon)' }} />
                     )}
                 </span>
 
diff --git a/src/index.css b/src/index.css
index e710df9..d7b7010 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
-
+@import "./theme/theme.css";
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts
index ab9f704..348d2fc 100644
--- a/src/store/useAppStore.ts
+++ b/src/store/useAppStore.ts
@@ -7,12 +7,16 @@ interface AppState {
     activeFileId: string | null;
     openFiles: string[]; // List of file IDs that are open as tabs
     activeFileContent: string;
+    isExplorerCollapsed: boolean;
+    newTabCounter: number; // Counter for generating unique blank tab IDs
 
     // Actions
     selectFile: (fileId: string) => void;
     closeFile: (fileId: string) => void;
     updateFileContent: (fileId: string, content: string) => void;
     findFile: (id: string, nodes?: FileNode[]) => FileNode | null;
+    toggleExplorerCollapsed: () => void;
+    createNewTab: () => void; // Create a new blank tab
 }
 
 export const useAppStore = create<AppState>((set, get) => ({
@@ -20,6 +24,8 @@ export const useAppStore = create<AppState>((set, get) => ({
     activeFileId: null,
     openFiles: [],
     activeFileContent: '',
+    isExplorerCollapsed: false,
+    newTabCounter: 0,
 
     findFile: (id: string, nodes = get().files): FileNode | null => {
         for (const node of nodes) {
@@ -33,6 +39,15 @@ export const useAppStore = create<AppState>((set, get) => ({
     },
 
     selectFile: (fileId: string) => {
+        // Handle blank tabs
+        if (fileId.startsWith('new-tab-')) {
+            set({
+                activeFileId: fileId,
+                activeFileContent: ''
+            });
+            return;
+        }
+
         const file = get().findFile(fileId);
         if (file && file.type === 'file') {
             const { openFiles } = get();
@@ -71,4 +86,22 @@ export const useAppStore = create<AppState>((set, get) => ({
             return {};
         });
     },
+
+    toggleExplorerCollapsed: () => {
+        set((state) => ({
+            isExplorerCollapsed: !state.isExplorerCollapsed
+        }));
+    },
+
+    createNewTab: () => {
+        const { openFiles, newTabCounter } = get();
+        const newTabId = `new-tab-${newTabCounter}`;
+        
+        set({
+            activeFileId: newTabId,
+            openFiles: [...openFiles, newTabId],
+            activeFileContent: '',
+            newTabCounter: newTabCounter + 1
+        });
+    },
 }));
diff --git a/src/theme/theme.css b/src/theme/theme.css
new file mode 100644
index 0000000..35649a6
--- /dev/null
+++ b/src/theme/theme.css
@@ -0,0 +1,745 @@
+/* Theme Variables - Customize your theme here */
+
+/* ============================================
+   MONOKAI THEME (Default)
+   ============================================ */
+:root {
+  /* General Background Colors */
+  --bg-primary: #1e1f1c;
+  --bg-secondary: #272822;
+  --bg-tertiary: #3e3d32;
+  --bg-hover: #2b2b2b;
+  --bg-active: #3e3d32;
+
+  /* Text Colors */
+  --text-primary: #cfcfc2;
+  --text-secondary: #8f908a;
+  --text-tertiary: #75715e;
+  --text-white: #ffffff;
+  --text-light-gray: #2d2e28;
+
+  /* Border Colors */
+  --border-primary: #171717;
+  --border-secondary: #2d2e28;
+  --border-hover: #f92672;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #f92672;
+  --markdown-link: #66d9ef;
+  --markdown-code: #ae81ff;
+  --markdown-code-bg: #23241f;
+  --markdown-strong: #f92672;
+  --markdown-list: #66d9ef;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #3e3d32;
+  --button-text-default: #8f908a;
+  --button-text-hover: #ffffff;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #272822;
+  --activity-bar-border: #171717;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #8f908a;
+  --activity-item-text-hover: #ffffff;
+  --activity-item-text-active: #ffffff;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #f92672;
+
+  /* Editor Colors */
+  --editor-bg: #272822;
+  --editor-text: #f8f8f2;
+  --editor-button-bg: rgba(0, 0, 0, 0.2);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.4);
+  --editor-selection-bg: #49483e;
+
+  /* File Tree Colors */
+  --filetree-text: #cfcfc2;
+  --filetree-text-active: #ffffff;
+  --filetree-bg-active: #3e3d32;
+  --filetree-bg-hover: #2b2b2b;
+  --filetree-icon: #8f908a;
+}
+
+/* ============================================
+   DRACULA THEME
+   ============================================ */
+:root.theme-dracula {
+  /* General Background Colors */
+  --bg-primary: #282a36;
+  --bg-secondary: #21222c;
+  --bg-tertiary: #44475a;
+  --bg-hover: #3a3c43;
+  --bg-active: #44475a;
+
+  /* Text Colors */
+  --text-primary: #f8f8f2;
+  --text-secondary: #6272a4;
+  --text-tertiary: #6272a4;
+  --text-white: #ffffff;
+  --text-light-gray: #44475a;
+
+  /* Border Colors */
+  --border-primary: #21222c;
+  --border-secondary: #44475a;
+  --border-hover: #ff79c6;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #ff79c6;
+  --markdown-link: #8be9fd;
+  --markdown-code: #bd93f9;
+  --markdown-code-bg: #3f3f4d;
+  --markdown-strong: #ff79c6;
+  --markdown-list: #8be9fd;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #44475a;
+  --button-text-default: #6272a4;
+  --button-text-hover: #f8f8f2;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #282a36;
+  --activity-bar-border: #21222c;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #6272a4;
+  --activity-item-text-hover: #f8f8f2;
+  --activity-item-text-active: #f8f8f2;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #ff79c6;
+
+  /* Editor Colors */
+  --editor-bg: #282a36;
+  --editor-text: #f8f8f2;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #44475a;
+
+  /* File Tree Colors */
+  --filetree-text: #f8f8f2;
+  --filetree-text-active: #f8f8f2;
+  --filetree-bg-active: #44475a;
+  --filetree-bg-hover: #3a3c43;
+  --filetree-icon: #6272a4;
+}
+
+/* ============================================
+   NORD THEME
+   ============================================ */
+:root.theme-nord {
+  /* General Background Colors */
+  --bg-primary: #2e3440;
+  --bg-secondary: #3b4252;
+  --bg-tertiary: #434c5e;
+  --bg-hover: #3b4252;
+  --bg-active: #434c5e;
+
+  /* Text Colors */
+  --text-primary: #eceff4;
+  --text-secondary: #81a1c1;
+  --text-tertiary: #81a1c1;
+  --text-white: #ffffff;
+  --text-light-gray: #434c5e;
+
+  /* Border Colors */
+  --border-primary: #3b4252;
+  --border-secondary: #434c5e;
+  --border-hover: #88c0d0;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #88c0d0;
+  --markdown-link: #81a1c1;
+  --markdown-code: #b48ead;
+  --markdown-code-bg: #3b4252;
+  --markdown-strong: #88c0d0;
+  --markdown-list: #81a1c1;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #434c5e;
+  --button-text-default: #81a1c1;
+  --button-text-hover: #eceff4;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #2e3440;
+  --activity-bar-border: #3b4252;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #81a1c1;
+  --activity-item-text-hover: #eceff4;
+  --activity-item-text-active: #eceff4;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #88c0d0;
+
+  /* Editor Colors */
+  --editor-bg: #2e3440;
+  --editor-text: #eceff4;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #434c5e;
+
+  /* File Tree Colors */
+  --filetree-text: #eceff4;
+  --filetree-text-active: #eceff4;
+  --filetree-bg-active: #434c5e;
+  --filetree-bg-hover: #3b4252;
+  --filetree-icon: #81a1c1;
+}
+
+/* ============================================
+   SOLARIZED DARK THEME
+   ============================================ */
+:root.theme-solarized-dark {
+  /* General Background Colors */
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --bg-tertiary: #586e75;
+  --bg-hover: #073642;
+  --bg-active: #586e75;
+
+  /* Text Colors */
+  --text-primary: #93a1a1;
+  --text-secondary: #586e75;
+  --text-tertiary: #586e75;
+  --text-white: #fdf6e3;
+  --text-light-gray: #073642;
+
+  /* Border Colors */
+  --border-primary: #073642;
+  --border-secondary: #586e75;
+  --border-hover: #268bd2;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #268bd2;
+  --markdown-link: #268bd2;
+  --markdown-code: #2aa198;
+  --markdown-code-bg: #073642;
+  --markdown-strong: #268bd2;
+  --markdown-list: #268bd2;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #073642;
+  --button-text-default: #586e75;
+  --button-text-hover: #fdf6e3;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #002b36;
+  --activity-bar-border: #073642;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #586e75;
+  --activity-item-text-hover: #fdf6e3;
+  --activity-item-text-active: #fdf6e3;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #268bd2;
+
+  /* Editor Colors */
+  --editor-bg: #002b36;
+  --editor-text: #fdf6e3;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #073642;
+
+  /* File Tree Colors */
+  --filetree-text: #93a1a1;
+  --filetree-text-active: #fdf6e3;
+  --filetree-bg-active: #586e75;
+  --filetree-bg-hover: #073642;
+  --filetree-icon: #586e75;
+}
+
+/* ============================================
+   ONE DARK THEME
+   ============================================ */
+:root.theme-one-dark {
+  /* General Background Colors */
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #252526;
+  --bg-tertiary: #2d2d30;
+  --bg-hover: #3e3e42;
+  --bg-active: #2d2d30;
+
+  /* Text Colors */
+  --text-primary: #d4d4d4;
+  --text-secondary: #858585;
+  --text-tertiary: #858585;
+  --text-white: #ffffff;
+  --text-light-gray: #2d2d30;
+
+  /* Border Colors */
+  --border-primary: #3e3e42;
+  --border-secondary: #2d2d30;
+  --border-hover: #61afef;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #61afef;
+  --markdown-link: #61afef;
+  --markdown-code: #c586c0;
+  --markdown-code-bg: #1e1e1e;
+  --markdown-strong: #61afef;
+  --markdown-list: #61afef;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #2d2d30;
+  --button-text-default: #858585;
+  --button-text-hover: #ffffff;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #1e1e1e;
+  --activity-bar-border: #2d2d30;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #858585;
+  --activity-item-text-hover: #ffffff;
+  --activity-item-text-active: #ffffff;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #61afef;
+
+  /* Editor Colors */
+  --editor-bg: #1e1e1e;
+  --editor-text: #d4d4d4;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #264f78;
+
+  /* File Tree Colors */
+  --filetree-text: #d4d4d4;
+  --filetree-text-active: #ffffff;
+  --filetree-bg-active: #2d2d30;
+  --filetree-bg-hover: #3e3e42;
+  --filetree-icon: #858585;
+}
+
+/* ============================================
+   GRUVBOX DARK THEME
+   ============================================ */
+:root.theme-gruvbox-dark {
+  /* General Background Colors */
+  --bg-primary: #282828;
+  --bg-secondary: #3c3836;
+  --bg-tertiary: #504945;
+  --bg-hover: #3c3836;
+  --bg-active: #504945;
+
+  /* Text Colors */
+  --text-primary: #ebdbb2;
+  --text-secondary: #928374;
+  --text-tertiary: #928374;
+  --text-white: #fbf1c7;
+  --text-light-gray: #3c3836;
+
+  /* Border Colors */
+  --border-primary: #3c3836;
+  --border-secondary: #504945;
+  --border-hover: #fb4934;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #fb4934;
+  --markdown-link: #83a598;
+  --markdown-code: #d3869b;
+  --markdown-code-bg: #3c3836;
+  --markdown-strong: #fb4934;
+  --markdown-list: #83a598;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #3c3836;
+  --button-text-default: #928374;
+  --button-text-hover: #ebdbb2;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #282828;
+  --activity-bar-border: #3c3836;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #928374;
+  --activity-item-text-hover: #ebdbb2;
+  --activity-item-text-active: #ebdbb2;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #fb4934;
+
+  /* Editor Colors */
+  --editor-bg: #282828;
+  --editor-text: #ebdbb2;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #504945;
+
+  /* File Tree Colors */
+  --filetree-text: #ebdbb2;
+  --filetree-text-active: #fbf1c7;
+  --filetree-bg-active: #504945;
+  --filetree-bg-hover: #3c3836;
+  --filetree-icon: #928374;
+}
+
+/* ============================================
+   TOKYO NIGHT THEME
+   ============================================ */
+:root.theme-tokyo-night {
+  /* General Background Colors */
+  --bg-primary: #1a1b26;
+  --bg-secondary: #16161e;
+  --bg-tertiary: #23283e;
+  --bg-hover: #2e3147;
+  --bg-active: #23283e;
+
+  /* Text Colors */
+  --text-primary: #c0caf5;
+  --text-secondary: #565f89;
+  --text-tertiary: #565f89;
+  --text-white: #ffffff;
+  --text-light-gray: #23283e;
+
+  /* Border Colors */
+  --border-primary: #2e3147;
+  --border-secondary: #23283e;
+  --border-hover: #7aa2f7;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #7aa2f7;
+  --markdown-link: #7aa2f7;
+  --markdown-code: #bb9af7;
+  --markdown-code-bg: #16161e;
+  --markdown-strong: #7aa2f7;
+  --markdown-list: #7aa2f7;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #23283e;
+  --button-text-default: #565f89;
+  --button-text-hover: #c0caf5;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #1a1b26;
+  --activity-bar-border: #23283e;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #565f89;
+  --activity-item-text-hover: #c0caf5;
+  --activity-item-text-active: #c0caf5;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #7aa2f7;
+
+  /* Editor Colors */
+  --editor-bg: #1a1b26;
+  --editor-text: #c0caf5;
+  --editor-button-bg: rgba(0, 0, 0, 0.3);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.5);
+  --editor-selection-bg: #3d59a1;
+
+  /* File Tree Colors */
+  --filetree-text: #c0caf5;
+  --filetree-text-active: #ffffff;
+  --filetree-bg-active: #23283e;
+  --filetree-bg-hover: #2e3147;
+  --filetree-icon: #565f89;
+}
+
+/* ============================================
+   LIGHT THEME
+   ============================================ */
+:root.theme-light {
+  /* General Background Colors */
+  --bg-primary: #f5f5f5;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #ebebeb;
+  --bg-hover: #e8e8e8;
+  --bg-active: #e0e0e0;
+
+  /* Text Colors */
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-tertiary: #999999;
+  --text-white: #000000;
+  --text-light-gray: #cccccc;
+
+  /* Border Colors */
+  --border-primary: #d0d0d0;
+  --border-secondary: #e0e0e0;
+  --border-hover: #0066ff;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #0066ff;
+  --markdown-link: #0066ff;
+  --markdown-code: #d73a49;
+  --markdown-code-bg: #f6f8fa;
+  --markdown-strong: #d73a49;
+  --markdown-list: #0066ff;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #e0e0e0;
+  --button-text-default: #666666;
+  --button-text-hover: #000000;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #ffffff;
+  --activity-bar-border: #d0d0d0;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #666666;
+  --activity-item-text-hover: #000000;
+  --activity-item-text-active: #000000;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #0066ff;
+
+  /* Editor Colors */
+  --editor-bg: #ffffff;
+  --editor-text: #333333;
+  --editor-button-bg: rgba(0, 0, 0, 0.05);
+  --editor-button-hover-bg: rgba(0, 0, 0, 0.1);
+  --editor-selection-bg: #add6ff;
+
+  /* File Tree Colors */
+  --filetree-text: #333333;
+  --filetree-text-active: #000000;
+  --filetree-bg-active: #e0e0e0;
+  --filetree-bg-hover: #f0f0f0;
+  --filetree-icon: #666666;
+}
+
+/* ============================================
+   GITHUB LIGHT THEME
+   ============================================ */
+:root.theme-github-light {
+  /* General Background Colors */
+  --bg-primary: #f6f8fa;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #eaeef2;
+  --bg-hover: #f0f2f5;
+  --bg-active: #eaeef2;
+
+  /* Text Colors */
+  --text-primary: #24292f;
+  --text-secondary: #57606a;
+  --text-tertiary: #8c959f;
+  --text-white: #000000;
+  --text-light-gray: #d0d7de;
+
+  /* Border Colors */
+  --border-primary: #d0d7de;
+  --border-secondary: #eaeef2;
+  --border-hover: #0969da;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #0969da;
+  --markdown-link: #0969da;
+  --markdown-code: #cf222e;
+  --markdown-code-bg: #f6f8fa;
+  --markdown-strong: #cf222e;
+  --markdown-list: #0969da;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #eaeef2;
+  --button-text-default: #57606a;
+  --button-text-hover: #24292f;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #ffffff;
+  --activity-bar-border: #d0d7de;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #57606a;
+  --activity-item-text-hover: #24292f;
+  --activity-item-text-active: #24292f;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #0969da;
+
+  /* Editor Colors */
+  --editor-bg: #ffffff;
+  --editor-text: #24292f;
+  --editor-button-bg: rgba(9, 105, 218, 0.05);
+  --editor-button-hover-bg: rgba(9, 105, 218, 0.1);
+  --editor-selection-bg: #cce5ff;
+
+  /* File Tree Colors */
+  --filetree-text: #24292f;
+  --filetree-text-active: #000000;
+  --filetree-bg-active: #eaeef2;
+  --filetree-bg-hover: #f0f2f5;
+  --filetree-icon: #57606a;
+}
+
+/* ============================================
+   SOLARIZED LIGHT THEME
+   ============================================ */
+:root.theme-solarized-light {
+  /* General Background Colors */
+  --bg-primary: #fdf6e3;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #eee8d5;
+  --bg-hover: #eee8d5;
+  --bg-active: #eee8d5;
+
+  /* Text Colors */
+  --text-primary: #657b83;
+  --text-secondary: #839496;
+  --text-tertiary: #93a1a1;
+  --text-white: #002b36;
+  --text-light-gray: #d6d0c8;
+
+  /* Border Colors */
+  --border-primary: #eee8d5;
+  --border-secondary: #eee8d5;
+  --border-hover: #268bd2;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #268bd2;
+  --markdown-link: #268bd2;
+  --markdown-code: #2aa198;
+  --markdown-code-bg: #eee8d5;
+  --markdown-strong: #cb4b16;
+  --markdown-list: #268bd2;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #eee8d5;
+  --button-text-default: #839496;
+  --button-text-hover: #657b83;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #ffffff;
+  --activity-bar-border: #eee8d5;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #839496;
+  --activity-item-text-hover: #657b83;
+  --activity-item-text-active: #657b83;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #268bd2;
+
+  /* Editor Colors */
+  --editor-bg: #ffffff;
+  --editor-text: #657b83;
+  --editor-button-bg: rgba(38, 139, 210, 0.05);
+  --editor-button-hover-bg: rgba(38, 139, 210, 0.1);
+  --editor-selection-bg: #eee8d5;
+
+  /* File Tree Colors */
+  --filetree-text: #657b83;
+  --filetree-text-active: #002b36;
+  --filetree-bg-active: #eee8d5;
+  --filetree-bg-hover: #f5f0e8;
+  --filetree-icon: #839496;
+}
+
+/* ============================================
+   ONE LIGHT THEME
+   ============================================ */
+:root.theme-one-light {
+  /* General Background Colors */
+  --bg-primary: #fafafa;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f0f0f1;
+  --bg-hover: #f5f5f6;
+  --bg-active: #e8e8e9;
+
+  /* Text Colors */
+  --text-primary: #383a42;
+  --text-secondary: #a0a1a7;
+  --text-tertiary: #9ca0a4;
+  --text-white: #000000;
+  --text-light-gray: #e1e1e6;
+
+  /* Border Colors */
+  --border-primary: #e1e1e6;
+  --border-secondary: #e8e8e9;
+  --border-hover: #4078f2;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #4078f2;
+  --markdown-link: #4078f2;
+  --markdown-code: #e45649;
+  --markdown-code-bg: #f0f0f1;
+  --markdown-strong: #c18401;
+  --markdown-list: #4078f2;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #e8e8e9;
+  --button-text-default: #a0a1a7;
+  --button-text-hover: #383a42;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #ffffff;
+  --activity-bar-border: #e1e1e6;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #a0a1a7;
+  --activity-item-text-hover: #383a42;
+  --activity-item-text-active: #383a42;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #4078f2;
+
+  /* Editor Colors */
+  --editor-bg: #ffffff;
+  --editor-text: #383a42;
+  --editor-button-bg: rgba(64, 120, 242, 0.05);
+  --editor-button-hover-bg: rgba(64, 120, 242, 0.1);
+  --editor-selection-bg: #e0e4f7;
+
+  /* File Tree Colors */
+  --filetree-text: #383a42;
+  --filetree-text-active: #000000;
+  --filetree-bg-active: #e8e8e9;
+  --filetree-bg-hover: #f5f5f6;
+  --filetree-icon: #a0a1a7;
+}
+
+/* ============================================
+   MATERIAL DARK THEME
+   ============================================ */
+:root.theme-material-dark {
+  /* General Background Colors */
+  --bg-primary: #263238;
+  --bg-secondary: #37474f;
+  --bg-tertiary: #455a64;
+  --bg-hover: #455a64;
+  --bg-active: #455a64;
+
+  /* Text Colors */
+  --text-primary: #eeffff;
+  --text-secondary: #b0bec5;
+  --text-tertiary: #90a4ae;
+  --text-white: #ffffff;
+  --text-light-gray: #546e7a;
+
+  /* Border Colors */
+  --border-primary: #37474f;
+  --border-secondary: #455a64;
+  --border-hover: #64b5f6;
+
+  /* Markdown/Editor Colors */
+  --markdown-heading: #64b5f6;
+  --markdown-link: #64b5f6;
+  --markdown-code: #f78c6b;
+  --markdown-code-bg: #1e272c;
+  --markdown-strong: #f78c6b;
+  --markdown-list: #64b5f6;
+
+  /* Button & Interactive Colors */
+  --button-bg-hover: #455a64;
+  --button-text-default: #b0bec5;
+  --button-text-hover: #eeffff;
+
+  /* ActivityBar Colors */
+  --activity-bar-bg: #37474f;
+  --activity-bar-border: #263238;
+  
+  /* ActivityBar Item Colors */
+  --activity-item-text-default: #b0bec5;
+  --activity-item-text-hover: #eeffff;
+  --activity-item-text-active: #eeffff;
+  --activity-item-bg-active: transparent;
+  --activity-item-border-active: #64b5f6;
+
+  /* Editor Colors */
+  --editor-bg: #263238;
+  --editor-text: #eeffff;
+  --editor-button-bg: rgba(100, 181, 246, 0.15);
+  --editor-button-hover-bg: rgba(100, 181, 246, 0.25);
+  --editor-selection-bg: #546e7a;
+
+  /* File Tree Colors */
+  --filetree-text: #eeffff;
+  --filetree-text-active: #ffffff;
+  --filetree-bg-active: #455a64;
+  --filetree-bg-hover: #37474f;
+  --filetree-icon: #b0bec5;
+}