Mess with themes

Author: MrBlankCoding

src/assets/styles/editor.css

@@ -58,13 +58,24 @@ html {
 }
 
 
+.logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.logo a {
+  text-decoration: none;
+  color: inherit;
+}
+
 .editor-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-md) var(--space-lg);
+  padding: var(--space-sm) var(--space-lg);
   background: var(--bg-secondary);
-  height: var(--toolbar-height);
+  height: var(--header-height);
 }
 
 .toolbar-group {
@@ -77,7 +88,8 @@ html {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
+  height: 40px;
+  padding: 0 var(--space-md);
   background: var(--bg-tertiary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);

src/assets/styles/global_theme.css

@@ -1,98 +1,96 @@
-/* CodeTweak App Global Theme */
 :root {
-  --primary: #6366f1;
-  --primary-hover: #4f46e5;
-  --primary-light: rgba(99, 102, 241, 0.1);
-  --secondary: #8b5cf6;
-  --accent: #06b6d4;
-
-  --bg-primary: #0a0d1a;
-  --bg-secondary: #111827;
-  --bg-tertiary: #1f2937;
-  --bg-hover: #374151;
-  
-  --text-primary: #ffffff;
-  --text-secondary: #d1d5db;
-  --text-muted: #9ca3af;
-  --text-accent: #60a5fa;
-  
-  --border-primary: #374151;
-  --border-secondary: #4b5563;
-  --border-accent: #6366f1;
+  --primary: #61afef; 
+  --primary-hover: #528bff;
+  --primary-light: rgba(97, 175, 239, 0.15);
+  --secondary: #c678dd;
+  --accent: #56b6c2;
+
+  --bg-primary: #282c34;
+  --bg-secondary: #21252b;
+  --bg-tertiary: #2c313a;
+  --bg-hover: #3e4451;
+
+  --text-primary: #abb2bf;
+  --text-secondary: #7d8799;
+  --text-muted: #5c6370;
+  --text-accent: #61afef;
+
+  --border-primary: #3e4451;
+  --border-secondary: #4b5263;
+  --border-accent: #61afef;
   --border-focus: var(--primary);
-  
-  --success: #10b981;
-  --success-light: rgba(16, 185, 129, 0.1);
-  --warning: #f59e0b;
-  --warning-light: rgba(245, 158, 11, 0.1);
-  --error: #ef4444;
-  --error-light: rgba(239, 68, 68, 0.1);
-  --info: #3b82f6;
-  --info-light: rgba(59, 130, 246, 0.1);
-  
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.05), 0 0 20px rgba(99, 102, 241, 0.1);
-  --shadow-focus: 0 0 0 3px var(--primary-light);
-  
-  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.3);
+
+  --success: #98c379;
+  --success-light: rgba(152, 195, 121, 0.15);
+  --warning: #d19a66;
+  --warning-light: rgba(209, 154, 102, 0.15);
+  --error: #e06c75;
+  --error-light: rgba(224, 108, 117, 0.15);
+  --info: #56b6c2;
+  --info-light: rgba(86, 182, 194, 0.15);
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
+  --shadow-glow: 0 0 10px rgba(97, 175, 239, 0.2);
+  --shadow-focus: 0 0 0 3px rgba(97, 175, 239, 0.25);
+
+  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.5);
   --backdrop-blur: blur(4px);
   --modal-z-index: 1000;
-  
-  --space-xs: 0.25rem;    /* 4px */
-  --space-sm: 0.5rem;     /* 8px */
-  --space-md: 1rem;       /* 16px */
-  --space-lg: 1.5rem;     /* 24px */
-  --space-xl: 2rem;       /* 32px */
-  
-  --radius-sm: 0.25rem;   /* 4px */
-  --radius-md: 0.5rem;    /* 8px */
-  --radius-lg: 0.75rem;   /* 12px */
-  --radius-full: 9999px;  /* Fully rounded */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
 
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Monaco', 'Consolas', monospace;
-  
-  --text-xs: 0.75rem;     /* 12px */
-  --text-sm: 0.875rem;    /* 14px */
-  --text-base: 1rem;      /* 16px */
-  --text-lg: 1.125rem;    /* 18px */
-  --text-xl: 1.25rem;     /* 20px */
-  --text-2xl: 1.5rem;     /* 24px */
-  
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
-  
+
   --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;
   --leading-relaxed: 1.625;
-  
+
+  /* === Transitions === */
   --transition-fast: 0.1s ease-in-out;
   --transition-normal: 0.2s ease-in-out;
   --transition-slow: 0.3s ease-in-out;
   --transition-slower: 0.5s ease-in-out;
   --transition-modal: 0.2s cubic-bezier(0.33, 1, 0.68, 1);
-  --backdrop-blur: blur(4px);
-  --modal-z-index: 1000;
-  
+
   --transition-colors: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
   --transition-transform: transform var(--transition-fast);
   --transition-opacity: opacity var(--transition-fast);
   --transition-all: all var(--transition-fast);
-  
+
+  /* === Layout === */
   --header-height: 60px;
-  
+
   --z-base: 0;
   --z-sticky: 20;
   --z-fixed: 30;
   --z-modal: 50;
   --z-toast: 80;
-  
+
+  /* === Form Elements === */
   --form-element-height: 40px;
   --form-element-padding: var(--space-sm) var(--space-md);
   --form-element-border: var(--border-primary);
@@ -102,63 +100,13 @@
   --button-padding: var(--space-sm) var(--space-lg);
   --button-radius: var(--radius-md);
   --button-font-weight: var(--font-medium);
-  
+
   --editor-font-size: 14px;
   --editor-line-height: 1.5;
   --editor-tab-size: 2;
-  
-  --scrollbar-width: 6px;
-  --scrollbar-track: transparent;
-  --scrollbar-thumb: var(--border-secondary);
-  --scrollbar-thumb-hover: var(--text-muted);
-  
-  /* Modal styles */
-  --backdrop-blur: blur(4px);
-  --modal-z-index: 1000;
-}
-
-body.light-theme {
-  --primary: #4f56e5;
-  --primary-hover: #4146cf;
-  --primary-light: rgba(79, 86, 229, 0.12); 
-  --secondary: #7646e0;
-  --accent: #1491c9;
-
-  --bg-primary: #f5f7fb;        
-  --bg-secondary: #eef2f7;      
-  --bg-tertiary: #e6ebf3;       
-  --bg-hover: #e7eefc;          
-
-  --text-primary: #1f2937;      
-  --text-secondary: #334155;    
-  --text-muted: #64748b;        
-  --text-accent: #2a5cd6;
-
-  --border-primary: #dde5ef;    
-  --border-secondary: #c7d2e1;  
-  --border-accent: #4f56e5;
-  --border-focus: var(--primary);
-
-  --success: #059669;
-  --success-light: rgba(5, 150, 105, 0.08);
-  --warning: #d97706;
-  --warning-light: rgba(217, 119, 6, 0.08);
-  --error: #dc2626;
-  --error-light: rgba(220, 38, 38, 0.08);
-  --info: #2563eb;
-  --info-light: rgba(37, 99, 235, 0.08);
-
-  /* Softer elevation for light surfaces */
-  --shadow-xs: 0 1px 2px 0 rgba(2, 6, 23, 0.02);
-  --shadow-sm: 0 1px 3px 0 rgba(2, 6, 23, 0.04);
-  --shadow-md: 0 4px 6px -1px rgba(2, 6, 23, 0.06), 0 2px 4px -1px rgba(2, 6, 23, 0.04);
-  --shadow-lg: 0 10px 15px -3px rgba(2, 6, 23, 0.05), 0 4px 6px -2px rgba(2, 6, 23, 0.03);
-  --shadow-glow: 0 0 0 1px rgba(79, 86, 229, 0.05), 0 0 20px rgba(79, 86, 229, 0.08);
-  --shadow-focus: 0 0 0 3px var(--primary-light);
-
-  --shadow-modal: 0 10px 25px rgba(2, 6, 23, 0.10);
 
+  --scrollbar-width: 6px;
   --scrollbar-track: transparent;
-  --scrollbar-thumb: var(--border-secondary);
-  --scrollbar-thumb-hover: var(--text-muted);
-}
+  --scrollbar-thumb: #4b5263;
+  --scrollbar-thumb-hover: #5c6370;
+}

src/dashboard/dashboard-logic.js

@@ -118,8 +118,7 @@ async function loadSettings(settingsElements) {
       enableAllScripts: true,
       showNotifications: true,
       confirmBeforeRunning: false,
-      // follow system theme by default
-      darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
+
     };
 
     // Apply defaults and update storage if needed
@@ -140,8 +139,7 @@ async function loadSettings(settingsElements) {
       await chrome.storage.local.set({ settings });
     }
 
-    // Apply theme based on darkMode setting
-    applyTheme(settings.darkMode);
+    
   } catch (error) {
     console.error("Error loading settings:", error);
     showNotification("Error loading settings", "error");
@@ -164,7 +162,7 @@ async function saveSettings(settingsElements) {
     showNotification("Settings saved successfully", "success");
     chrome.runtime.sendMessage({ action: "settingsUpdated" });
 
-    applyTheme(settings.darkMode);
+    
   } catch (error) {
     console.error("Error saving settings:", error);
     showNotification("Failed to save settings: " + error.message, "error");
@@ -257,14 +255,7 @@ async function refreshDashboard() {
   filterScripts(elements, state);
 }
 
-function applyTheme(isDark) {
-  const body = document.body;
-  if (isDark) {
-    body.classList.remove("light-theme");
-  } else {
-    body.classList.add("light-theme");
-  }
-}
+
 
 function exportScript(script) {
   try {
@@ -314,6 +305,5 @@ export {
   saveSettings,
   checkForUpdates,
   refreshDashboard,
-  applyTheme,
   exportScript,
 };

src/dashboard/dashboard.html

@@ -165,9 +165,6 @@ <h2>Browse Greasy Fork Scripts</h2>
   <!-- Notifications -->
   <div class="notification-container" id="notifications"></div>
 
-  <script src="feather.js"></script>
-  <script>
-    feather.replace();
-  </script>
+  
 </body>
 </html>

src/dashboard/feather.js

@@ -16,14 +16,10 @@
          <header class="header">
             <div class="header-left">
                <div class="logo">
-                  <a href="../dashboard/dashboard.html" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
+                  <a href="../dashboard/dashboard.html">
                      <span class="home-icon">
                         <i data-feather="home"></i>
                      </span>
-                     <div>
-                        <span>CodeTweak</span>
-                        <span>Editor</span>
-                     </div>
                   </a>
                </div>
             </div>

src/editor/editor.html

@@ -477,7 +477,7 @@ class ScriptEditor {
   /**
    * Update visibility of script resources section and sidebar icon
    */
-  toggleResourcesSection(show) {
+  toggleResourcesSection() {
     const resourcesPanel = document.getElementById('resources-panel');
     const resourcesIconBtn = document.querySelector('[data-section="resources"]');
 
@@ -1111,31 +1111,13 @@ document.addEventListener("DOMContentLoaded", async () => {
   // Initialize Feather icons
   feather.replace();
 
-  // Apply theme and initialize editor
-  await applyThemeFromSettings();
-  
   const editor = new ScriptEditor();
   editor.init().catch((error) => {
     console.error("Failed to initialize script editor:", error);
   });
-
-  // Listen for runtime theme changes
-  chrome.runtime.onMessage.addListener((msg) => {
-    if (msg.action === "settingsUpdated") {
-      applyThemeFromSettings();
-    }
-  });
 });
 
-async function applyThemeFromSettings() {
-  try {
-    const { settings = {} } = await chrome.storage.local.get("settings");
-    const isDark = settings.darkMode !== false; // default dark mode true
-    document.body.classList.toggle("light-theme", !isDark);
-  } catch (err) {
-    console.error("Error applying theme:", err);
-  }
-}
+
 
 function setupHelpModalTabs() {
   const tabButtons = document.querySelectorAll('.help-tab');