theme

8to16 · 8to16 · commit dc2d4050f2b7 · 2026-01-22T08:32:04.000Z
diff --git a/src/globalstyles/colors.css b/src/globalstyles/colors.css
@@ -1,7 +1,9 @@
 /* this is global so no need to import it */
 /* TODO: better theming system */
 
-:root {
+html {
+  color-scheme: light;
+
   /* omniblocks colours */
   --accent-1: #59c0c0;
   --accent-2: #49b0b0;
@@ -16,7 +18,9 @@
 }
 
 /* turn the light stuff into dark */
-:global(.ob-dark-theme) {
+html.ob-dark-theme {
+  color-scheme: dark;
+
   --page-background: #33333f;
   --page-foreground: white;
   --black-transparent: #ffffff33;
diff --git a/src/lib/Layout.jsx b/src/lib/Layout.jsx
@@ -12,16 +12,17 @@ const AppShell = styled.div`
   flex-direction: column;
   height: 100vh;
   width: 100vw;
-  background-color: var(--page-background, #1e1e1e);
-  color: var(--page-foreground, #cccccc);
+  background-color: var(--page-background);
+  color: var(--page-foreground);
   overflow: hidden;
   label: AppShell;
 `;
 
 const ActivityBar = styled.nav`
   width: 48px;
-  background-color: var(--activity-bar-bg, #333);
-  border-right: 1px solid var(--border-color, #252525);
+  /* Slightly darker or same as background depending on theme */
+  background-color: var(--page-background); 
+  border-right: 1px solid var(--black-transparent);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,8 +33,9 @@ const ActivityBar = styled.nav`
 
 const TabList = styled(Tabs.List)`
   display: flex;
-  background: var(--tab-bar-bg, #252526);
-  border-bottom: 1px solid rgba(0,0,0,0.3);
+  /* Uses the transparent black to slightly darken the tab row */
+  background: var(--black-transparent); 
+  border-bottom: 1px solid var(--black-transparent);
   height: 35px;
   label: TabList;
 `;
@@ -43,24 +45,31 @@ const TabTrigger = styled(Tabs.Trigger)`
   font-size: 11px;
   border: none;
   background: transparent;
-  color: #888;
+  color: var(--page-foreground);
+  opacity: 0.6;
   cursor: pointer;
   display: flex;
   align-items: center;
-  transition: background 0.2s;
+  transition: all 0.2s;
+
   &[data-state='active'] {
-    color: #fff;
-    background: var(--editor-bg, #1e1e1e);
-    border-bottom: 1px solid var(--accent-1, #007acc);
+    opacity: 1;
+    background: var(--page-background);
+    border-bottom: 2px solid var(--accent-1);
+  }
+  
+  &:hover { 
+    background: var(--white-transparent); 
+    opacity: 1;
   }
-  &:hover { background: rgba(255,255,255,0.05); }
   label: TabTrigger;
 `;
 
 const StatusBar = styled.footer`
   height: 22px;
-  background-color: var(--status-bar-bg, #007acc);
-  color: white;
+  /* Use accent color for the classic IDE status bar look */
+  background-color: var(--accent-1);
+  color: white; 
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -70,10 +79,22 @@ const StatusBar = styled.footer`
 `;
 
 const Resizer = styled(Separator)`
-  background-color: #000;
-  &[aria-orientation="horizontal"] { cursor: col-resize; }
-  &[aria-orientation="vertical"] { cursor: row-resize; }
-  &:hover { background-color: var(--accent-1, #007acc); }
+  background-color: var(--black-transparent);
+  transition: background-color 0.2s;
+  
+  &[aria-orientation="horizontal"] { 
+    width: 2px;
+    cursor: col-resize; 
+  }
+  &[aria-orientation="vertical"] { 
+    height: 2px;
+    cursor: row-resize; 
+  }
+  
+  &[data-resize-handle-active],
+  &:hover { 
+    background-color: var(--accent-1); 
+  }
 `;
 
 // --- Slot Helpers ---
@@ -89,13 +110,25 @@ const TabbedSlot = ({ panels, activeId, onToggle, onSelect }) => {
         <div style={{ flex: 1 }} />
         <button 
           onClick={() => onToggle(activeId)} 
-          style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', padding: '0 10px', fontSize: '14px' }}
+          style={{ 
+            background: 'none', 
+            border: 'none', 
+            color: 'var(--page-foreground)', 
+            opacity: 0.5,
+            cursor: 'pointer', 
+            padding: '0 10px', 
+            fontSize: '14px' 
+          }}
         >
           ×
         </button>
       </TabList>
       {panels.map(p => (
-        <Tabs.Content key={p.id} value={p.id} style={{ flex: 1, overflow: 'auto', background: 'var(--editor-bg, #1e1e1e)' }}>
+        <Tabs.Content 
+          key={p.id} 
+          value={p.id} 
+          style={{ flex: 1, overflow: 'auto', background: 'var(--page-background)' }}
+        >
           {p.component}
         </Tabs.Content>
       ))}
@@ -115,7 +148,6 @@ export const OmniLayout = () => {
     activeSelection 
   } = useOmniLayout();
 
-  // Sort panels into UI buckets
   const sidebarPanels = panels.filter(p => p.position === 'left');
   const activeSidebar = sidebarPanels.find(p => isOpen(p.id));
   
@@ -126,17 +158,18 @@ export const OmniLayout = () => {
     <AppShell>
       <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
         
-        {/* 1. Activity Bar (Icons for Sidebars) */}
+        {/* 1. Activity Bar */}
         <ActivityBar>
           {sidebarPanels.map(p => (
             <div 
               key={p.id} 
               onClick={() => togglePanel(p.id)} 
               style={{ 
                 cursor: 'pointer', 
+                color: isOpen(p.id) ? 'var(--accent-1)' : 'var(--page-foreground)',
                 opacity: isOpen(p.id) ? 1 : 0.4, 
                 fontSize: 20,
-                transition: 'opacity 0.2s'
+                transition: 'all 0.2s'
               }}
               title={p.title}
             >
@@ -151,8 +184,19 @@ export const OmniLayout = () => {
           {/* Sidebar Slot */}
           {activeSidebar && (
             <>
-              <Panel collapsible defaultSize={20} minSize={10} style={{ display: 'flex', flexDirection: 'column', background: '#252526' }}>
-                <div style={{ height: '35px', padding: '0 12px', display: 'flex', alignItems: 'center', fontSize: 11, fontWeight: 700, borderBottom: '1px solid rgba(0,0,0,0.2)' }}>
+              <Panel collapsible defaultSize={20} minSize={10} style={{ display: 'flex', flexDirection: 'column', background: 'var(--black-transparent)' }}>
+                <div style={{ 
+                  height: '35px', 
+                  padding: '0 12px', 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  fontSize: 11, 
+                  fontWeight: 700, 
+                  letterSpacing: '0.5px',
+                  borderBottom: '1px solid var(--black-transparent)',
+                  color: 'var(--page-foreground)',
+                  opacity: 0.8
+                }}>
                   {activeSidebar.title.toUpperCase()}
                 </div>
                 <div style={{ flex: 1, overflow: 'auto' }}>{activeSidebar.component}</div>
@@ -194,7 +238,7 @@ export const OmniLayout = () => {
         </Group>
       </div>
 
-      {/* 3. Hackable Status Bar */}
+      {/* 3. Status Bar */}
       <StatusBar>
         <div style={{ display: 'flex', gap: '15px' }}>
           {statusItems.filter(i => i.alignment === 'left').map(item => (
diff --git a/src/lib/Monaco.jsx b/src/lib/Monaco.jsx
@@ -2,65 +2,51 @@
 import React, { useRef, useEffect, useState } from 'react';
 import Editor, { loader } from '@monaco-editor/react';
 
-// --- Lazy Worker Configuration ---
-const configureMonacoEnvironment = () => {
-  if (typeof self === 'undefined' || self.MonacoEnvironment) return;
-
-  self.MonacoEnvironment = {
-    async getWorker(_, label) {
-      let WorkerModule;
-      switch (label) {
-        case 'json':
-          WorkerModule = await import('monaco-editor/esm/vs/language/json/json.worker?worker');
-          break;
-        case 'css':
-        case 'scss':
-        case 'less':
-          WorkerModule = await import('monaco-editor/esm/vs/language/css/css.worker?worker');
-          break;
-        case 'html':
-        case 'handlebars':
-        case 'razor':
-          WorkerModule = await import('monaco-editor/esm/vs/language/html/html.worker?worker');
-          break;
-        case 'typescript':
-        case 'javascript':
-          WorkerModule = await import('monaco-editor/esm/vs/language/typescript/ts.worker?worker');
-          break;
-        default:
-          WorkerModule = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
-      }
-      return new WorkerModule.default();
-    },
-  };
-};
-
-const MonacoEditor = ({ 
-  language = 'javascript', 
-  value = '', 
-  onChange, 
-  theme = 'omni-dark' 
-}) => {
-  const editorRef = useRef(null);
+const MonacoEditor = ({ language = 'javascript', value = '', onChange }) => {
+  const monacoRef = useRef(null);
   const [isReady, setIsReady] = useState(false);
 
+  // Helper to get current theme name based on HTML class
+  const getThemeName = () => 
+    document.documentElement.classList.contains('ob-dark-theme') ? 'omni-dark' : 'omni-light';
+
   useEffect(() => {
     let isMounted = true;
 
     const initMonaco = async () => {
-      // 1. Setup workers
-      configureMonacoEnvironment();
-
-      // 2. Actually download the library
       const monaco = await import('monaco-editor');
-
-      // 3. Configure the loader with the downloaded instance
       loader.config({ monaco });
-
-      // 4. Wait for the loader to initialize fully
-      await loader.init();
+      const instance = await loader.init();
 
       if (isMounted) {
+        const style = getComputedStyle(document.documentElement);
+        const accent = style.getPropertyValue('--accent-1').trim() || '#59c0c0';
+
+        // 1. Define Dark Theme
+        instance.editor.defineTheme('omni-dark', {
+          base: 'vs-dark',
+          inherit: true,
+          rules: [],
+          colors: {
+            'editor.background': '#33333f', // Hardcoded fallbacks prevent empty flashes
+            'editorCursor.foreground': accent,
+            'editor.selectionBackground': `${accent}33`,
+          },
+        });
+
+        // 2. Define Light Theme
+        instance.editor.defineTheme('omni-light', {
+          base: 'vs',
+          inherit: true,
+          rules: [],
+          colors: {
+            'editor.background': '#e8e8e8',
+            'editorCursor.foreground': accent,
+            'editor.selectionBackground': `${accent}33`,
+          },
+        });
+
+        monacoRef.current = instance;
         setIsReady(true);
       }
     };
@@ -69,54 +55,40 @@ const MonacoEditor = ({
     return () => { isMounted = false; };
   }, []);
 
-  const handleEditorWillMount = (monaco) => {
-    monaco.editor.defineTheme('omni-dark', {
-      base: 'vs-dark',
-      inherit: true,
-      rules: [],
-      colors: {
-        'editor.background': '#33333f', // OmniBlocks background
-        'editorCursor.foreground': '#59c0c0',
-        'editor.lineHighlightBackground': '#3e3e4a',
-        'editor.selectionBackground': '#59c0c033',
-      },
+  // 3. Observer: Only calls setTheme (Much lighter than defineTheme)
+  useEffect(() => {
+    if (!isReady || !monacoRef.current) return;
+
+    const observer = new MutationObserver(() => {
+      monacoRef.current.editor.setTheme(getThemeName());
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
     });
-  };
-
-  const handleEditorDidMount = (editor) => {
-    editorRef.current = editor;
-  };
-
-  // We return the "Loading..." state manually until the JS is downloaded and initialized
-  if (!isReady) {
-    return (
-      <div style={{ 
-        height: '100%', 
-        width: '100%', 
-        background: '#33333f', 
-      }}>
-      </div>
-    );
-  }
+
+    // Set initial theme
+    monacoRef.current.editor.setTheme(getThemeName());
+
+    return () => observer.disconnect();
+  }, [isReady]);
+
+  if (!isReady) return <div style={{ height: '100%', background: 'var(--page-background)' }} />;
 
   return (
-    <div style={{ height: '100%', width: '100%', background: '#33333f' }}>
+    <div style={{ height: '100%', width: '100%' }}>
       <Editor
         height="100%"
         language={language}
         value={value}
-        theme={theme}
+        theme={getThemeName()}
         onChange={onChange}
-        onMount={handleEditorDidMount}
-        beforeMount={handleEditorWillMount}
         options={{
           automaticLayout: true,
           fontSize: 13,
-          fontFamily: "var(--font-mono, 'Fira Code', monospace)",
           minimap: { enabled: false },
           scrollBeyondLastLine: false,
-          fixedOverflowWidgets: true,
-          padding: { top: 8 }
         }}
       />
     </div>
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import 'modern-normalize';
 import './index.css'; 
+import './globalstyles/colors.css'; 
 import { LayoutProvider } from './hooks/useOmniLayout';
 import { OmniLayout } from './lib/Layout';
 import { CorePlugin } from './plugins/corePlugin';
