Docs theme

Author: MrBlankCoding

Chrome/dashboard.html

@@ -264,45 +264,12 @@ <h2>General Settings</h2>
           role="tabpanel"
           aria-labelledby="about-tab-btn"
         >
-          <div class="about-container">
-            <aside class="about-sidebar" role="navigation" aria-label="About navigation">
-              <button class="about-nav active" data-section="getting-started">Getting Started</button>
-              <button class="about-nav" data-section="installing">Installing Scripts</button>
-              <button class="about-nav" data-section="managing">Managing Scripts</button>
-              <button class="about-nav" data-section="creating">Creating Scripts</button>
-              <button class="about-nav" data-section="exporting">Exporting Scripts</button>
-            </aside>
-
-            <div class="about-content">
-              <div class="about-section active" id="getting-started">
-                <h2>Getting Started</h2>
-                <p>CodeTweak lets you run custom JavaScript ("user&nbsp;scripts") on the sites you choose. Click <em>New Script</em> on the dashboard, write or paste code, pick the target sites and save – that's it!</p>
-              </div>
-
-              <div class="about-section" id="installing">
-                <h2>Installing Scripts</h2>
-                <h3>Greasy Fork (1-click)</h3>
-                <p>Click <em>Browse Scripts</em> to open the Greasy&nbsp;Fork dialog, search for a script and press <em>Install</em>.</p>
-                <h3>Drag &amp; Drop</h3>
-                <p>Drag any <code>.js</code> or text file onto the dashboard to import it.</p>
-                <h3>Paste Code</h3>
-                <p>Open the editor, paste a script and click <em>Save</em>.</p>
-                <h3>In-app Greasy Fork search</h3>
-                <p>Use the search field inside the Greasy&nbsp;Fork modal to find scripts without leaving CodeTweak.</p>
-              </div>
-
-              <div class="about-section" id="managing">
-                <h2>Managing Scripts</h2>
-                <p>Use the <em>Scripts</em> table to enable/disable, edit, update, export or delete each script. Filters above the table help locate scripts quickly.</p>
-                <p>The badge on the extension icon shows how many scripts are active on the current tab.</p>
-              </div>
-
-              <div class="about-section" id="creating">
-                <h2>Creating Scripts</h2>
-                <p>The built-in editor supports syntax highlighting and lets you opt-in to Greasemonkey (GM) APIs such as <code>GM_getValue</code>, <code>GM_openInTab</code> and <code>GM_notification</code>. Toggle the checkboxes to inject the APIs you need.</p>
-                <p>You can also declare <code>@resource</code> and <code>@require</code> headers – the editor will fetch and bundle them automatically.</p>
-              </div>
-            </div>
+          <div class="about-simple">
+            <h2>About CodeTweak</h2>
+            <p>
+              For full documentation, guides, and API references, visit:
+              <a href="https://mrblankcoding.github.io/CodeTweak/index.html" target="_blank" rel="noopener">https://mrblankcoding.github.io/CodeTweak/index.html</a>
+            </p>
           </div>
         </section>
       </main>

Chrome/styles/global_theme.css

@@ -1,3 +1,4 @@
+/* CodeTweak App Global Theme */
 :root {
   --primary: #6366f1;
   --primary-hover: #4f46e5;
@@ -287,25 +288,25 @@ body.modal-open {
 }
 
 body.light-theme {
-  --primary: #4f46e5;
-  --primary-hover: #4338ca;
-  --primary-light: rgba(79, 70, 229, 0.08);
-  --secondary: #7c3aed;
-  --accent: #0ea5e9;
-
-  --bg-primary: #f8fafc;        
-  --bg-secondary: #f1f5f9;       
-  --bg-tertiary: #e2e8f0;       
-  --bg-hover: #dbeafe;           
-
-  --text-primary: #1e293b;       
-  --text-secondary: #334155;     
+  --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: #2563eb;        
+  --text-accent: #2a5cd6;
 
-  --border-primary: #e2e8f0;     
-  --border-secondary: #cbd5e1;   
-  --border-accent: #4f46e5;
+  --border-primary: #dde5ef;    
+  --border-secondary: #c7d2e1;  
+  --border-accent: #4f56e5;
   --border-focus: var(--primary);
 
   --success: #059669;
@@ -317,14 +318,15 @@ body.light-theme {
   --info: #2563eb;
   --info-light: rgba(37, 99, 235, 0.08);
 
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
-  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
-  --shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.04), 0 0 20px rgba(79, 70, 229, 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(0, 0, 0, 0.1);
+  --shadow-modal: 0 10px 25px rgba(2, 6, 23, 0.10);
 
   --scrollbar-track: transparent;
   --scrollbar-thumb: var(--border-secondary);

docs/advanced-features.html

@@ -4,38 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Features - CodeTweak User Manual</title>
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />
+    <link rel="stylesheet" href="theme.css">
+    <!-- Prism.js light and dark themes -->
+    <link id="prismLight" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />
+    <link id="prismDark" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" disabled />
     <style>
-        :root {
-            --primary-color: #4ea1ff;
-            --text-primary: #1f2937;
-            --text-secondary: #6b7280;
-            --background: #ffffff;
-            --surface: #f8fafc;
-            --border: #e5e7eb;
-            --code-bg: #f1f5f9;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-            line-height: 1.6;
-            color: var(--text-primary);
-            background: var(--background);
-        }
-
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
+        .container { padding: 2rem; }
 
         .nav-header {
             background: var(--surface);
@@ -541,6 +515,43 @@ <h3>Diagnostic Tools</h3>
         </div>
     </div>
 
+    <script>
+    (function() {
+        const STORAGE_KEY = 'codetweak-docs-theme';
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+        function setPrismFor(theme) {
+            const light = document.getElementById('prismLight');
+            const dark = document.getElementById('prismDark');
+            if (!light || !dark) return;
+            if (theme === 'dark') {
+                light.disabled = true;
+                dark.disabled = false;
+            } else {
+                light.disabled = false;
+                dark.disabled = true;
+            }
+        }
+
+        function applyThemeFromStorageOrSystem() {
+            const explicit = localStorage.getItem(STORAGE_KEY);
+            if (explicit === 'dark' || explicit === 'light') {
+                document.documentElement.setAttribute('data-theme', explicit);
+                setPrismFor(explicit);
+            } else {
+                document.documentElement.removeAttribute('data-theme');
+                setPrismFor(prefersDark.matches ? 'dark' : 'light');
+            }
+        }
+
+        applyThemeFromStorageOrSystem();
+        prefersDark.addEventListener('change', () => {
+            if (!localStorage.getItem(STORAGE_KEY)) {
+                applyThemeFromStorageOrSystem();
+            }
+        });
+    })();
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
 </body>

docs/editor.html

@@ -4,37 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Writing Userscripts - CodeTweak User Manual</title>
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />
+    <link rel="stylesheet" href="theme.css">
+    <!-- Prism.js light and dark themes -->
+    <link id="prismLight" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />
+    <link id="prismDark" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" disabled />
     <style>
-        :root {
-            --primary-color: #2563eb;
-            --text-primary: #1f2937;
-            --text-secondary: #6b7280;
-            --background: #ffffff;
-            --surface: #f9fafb;
-            --border: #e5e7eb;
-            --code-bg: #f3f4f6;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-            line-height: 1.7;
-            color: var(--text-primary);
-            background: var(--background);
-        }
-
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 2rem 1rem;
-        }
+        .container { max-width: 800px; }
 
         .nav-header {
             background: var(--surface);
@@ -105,11 +80,12 @@
         }
 
         .feature-card {
-            background: white;
+            background: var(--surface);
             border: 1px solid var(--border);
             border-radius: 8px;
             padding: 2rem;
             margin-bottom: 2rem;
+            box-shadow: var(--shadow);
         }
 
         pre {
@@ -183,7 +159,7 @@
         }
 
         .nav-btn.secondary {
-            background: white;
+            background: var(--surface);
             color: var(--text-primary);
             border: 1px solid var(--border);
         }
@@ -873,7 +849,45 @@ <h4>Error Handling</h4>
         </div>
     </div>
 
+    <script>
+    (function() {
+        const STORAGE_KEY = 'codetweak-docs-theme';
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+        function setPrismFor(theme) {
+            const light = document.getElementById('prismLight');
+            const dark = document.getElementById('prismDark');
+            if (!light || !dark) return;
+            if (theme === 'dark') {
+                light.disabled = true;
+                dark.disabled = false;
+            } else {
+                light.disabled = false;
+                dark.disabled = true;
+            }
+        }
+
+        function applyThemeFromStorageOrSystem() {
+            const explicit = localStorage.getItem(STORAGE_KEY);
+            if (explicit === 'dark' || explicit === 'light') {
+                document.documentElement.setAttribute('data-theme', explicit);
+                setPrismFor(explicit);
+            } else {
+                document.documentElement.removeAttribute('data-theme');
+                setPrismFor(prefersDark.matches ? 'dark' : 'light');
+            }
+        }
+
+        applyThemeFromStorageOrSystem();
+        prefersDark.addEventListener('change', () => {
+            if (!localStorage.getItem(STORAGE_KEY)) {
+                applyThemeFromStorageOrSystem();
+            }
+        });
+    })();
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>