From 4a4afe92b8fc1fb747186318cad50360adb0a85a Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #59)" <claude@firefrostgaming.com>
Date: Sat, 4 Apr 2026 03:41:19 +0000
Subject: [PATCH] feat: Full dark mode for Decap CMS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DARK THEME:
- Background: #0F0F1E (Dark)
- Sidebar: Gradient dark with subtle borders
- Content area: Dark with lighter cards
- Inputs/editors: Dark with visible borders
- Scrollbars: Dark themed

BRAND COLORS PRESERVED:
🔥 Fire Orange - Tasks collection
❄️ Frost Teal - Buttons, links, header accent
💜 Arcane Purple - Active states, focus rings, hover
🌑 Dark - Everything else

Using CSS custom properties for consistency.

Signed-off-by: claude@firefrostgaming.com
---
 admin/index.html | 375 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 255 insertions(+), 120 deletions(-)

diff --git a/admin/index.html b/admin/index.html
index 2173f25..6a40bd5 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -7,12 +7,97 @@
   <title>Firefrost CMS</title>
   <style>
     /* ═══════════════════════════════════════════════════════════
-       FIREFROST GAMING - DECAP CMS BRANDING
+       FIREFROST GAMING - DECAP CMS DARK MODE
        Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
     ═══════════════════════════════════════════════════════════ */
     
+    :root {
+      --ff-fire: #FF6B35;
+      --ff-fire-light: #FF8C42;
+      --ff-frost: #4ECDC4;
+      --ff-frost-dark: #3DBDB5;
+      --ff-arcane: #A855F7;
+      --ff-arcane-dim: rgba(168, 85, 247, 0.3);
+      --ff-dark: #0F0F1E;
+      --ff-dark-mid: #1a1a2e;
+      --ff-dark-light: #252540;
+      --ff-dark-lighter: #2f2f4a;
+      --ff-text: #e0e0e0;
+      --ff-text-dim: #a0a0a0;
+    }
+
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--ff-dark) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       GLOBAL DARK BACKGROUND
+    ═══════════════════════════════════════════════════════════ */
+    
+    #nc-root,
+    [class*="App"],
+    [class*="Container"],
+    main,
+    section {
+      background: var(--ff-dark) !important;
+      color: var(--ff-text) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       HEADER - Dark with Frost accent
+    ═══════════════════════════════════════════════════════════ */
+    
+    header,
+    [class*="AppHeader"],
+    nav[class*="Header"] {
+      background: var(--ff-dark) !important;
+      border-bottom: 2px solid var(--ff-frost) !important;
+    }
+
+    header *,
+    [class*="AppHeader"] * {
+      color: var(--ff-text) !important;
+    }
+
+    a[href*="firefrostgaming.com"] {
+      color: var(--ff-frost) !important;
+      font-weight: 600 !important;
+    }
+
+    a[href*="firefrostgaming.com"]:hover {
+      color: var(--ff-fire) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       SIDEBAR - Dark gradient
+    ═══════════════════════════════════════════════════════════ */
+    
+    aside,
+    [class*="Sidebar"],
+    nav:not([class*="Header"]) {
+      background: linear-gradient(180deg, var(--ff-dark-mid) 0%, var(--ff-dark) 100%) !important;
+      border-right: 1px solid var(--ff-dark-lighter) !important;
+    }
+
+    /* Sidebar text */
+    aside *,
+    [class*="Sidebar"] *,
+    [class*="Collection"] {
+      color: var(--ff-text) !important;
+    }
+
+    /* Search box */
+    input[type="search"],
+    input[placeholder*="Search"],
+    [class*="Search"] input {
+      background: var(--ff-dark-light) !important;
+      border: 1px solid var(--ff-dark-lighter) !important;
+      color: var(--ff-text) !important;
+    }
+
+    input[type="search"]::placeholder {
+      color: var(--ff-text-dim) !important;
     }
 
     /* ═══════════════════════════════════════════════════════════
@@ -20,7 +105,7 @@
     ═══════════════════════════════════════════════════════════ */
     
     a[href*="/collections/tasks"] {
-      background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
+      background: linear-gradient(135deg, var(--ff-fire) 0%, var(--ff-fire-light) 100%) !important;
       color: white !important;
       border-radius: 8px !important;
       font-weight: 700 !important;
@@ -32,7 +117,7 @@
     }
 
     a[href*="/collections/tasks"]:hover {
-      background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%) !important;
+      background: linear-gradient(135deg, var(--ff-fire-light) 0%, var(--ff-fire) 100%) !important;
       transform: translateY(-1px) !important;
       box-shadow: 0 5px 16px rgba(255, 107, 53, 0.5) !important;
     }
@@ -43,153 +128,215 @@
     }
 
     /* ═══════════════════════════════════════════════════════════
-       ❄️ FROST TEAL - Primary Actions (Save, Publish, Create)
+       CONTENT AREA - Dark
     ═══════════════════════════════════════════════════════════ */
     
-    /* Publish/Save buttons */
-    button[class*="PublishButton"],
-    button[class*="ToolbarButton"],
-    div[class*="ToolbarButton"] > button,
-    button:not([disabled])[class*="Button"]:not([class*="Delete"]):not([class*="Cancel"]) {
-      background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
-      color: #0F0F1E !important;
-      border: none !important;
-      font-weight: 600 !important;
+    [class*="EntryEditor"],
+    [class*="Collection"],
+    [class*="Content"],
+    [class*="Pane"],
+    [class*="Panel"] {
+      background: var(--ff-dark) !important;
+      color: var(--ff-text) !important;
     }
 
-    button[class*="PublishButton"]:hover,
-    button[class*="ToolbarButton"]:hover {
-      background: linear-gradient(135deg, #3DBDB5 0%, #4ECDC4 100%) !important;
-      box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4) !important;
+    /* Collection header */
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--ff-text) !important;
     }
 
-    /* Quick Add dropdown button */
-    button[class*="DropdownButton"],
-    [class*="QuickAdd"] button {
-      background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
-      color: #0F0F1E !important;
+    /* Entry list items */
+    [class*="ListCard"],
+    [class*="EntryCard"],
+    li[class*="Entry"],
+    [class*="ObjectWidgetTopBar"],
+    ul[class*="List"] > li {
+      background: var(--ff-dark-mid) !important;
+      border: 1px solid var(--ff-dark-lighter) !important;
+      color: var(--ff-text) !important;
+      border-radius: 6px !important;
+      margin: 8px 0 !important;
+    }
+
+    [class*="ListCard"]:hover,
+    [class*="EntryCard"]:hover,
+    li[class*="Entry"]:hover {
+      border-left: 3px solid var(--ff-arcane) !important;
+      background: var(--ff-dark-light) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       EDITOR AREA
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* Editor panes */
+    [class*="ControlPane"],
+    [class*="PreviewPane"] {
+      background: var(--ff-dark) !important;
+    }
+
+    /* Text inputs and textareas */
+    input,
+    textarea,
+    select,
+    [class*="TextField"],
+    [class*="TextArea"],
+    [contenteditable="true"] {
+      background: var(--ff-dark-light) !important;
+      border: 1px solid var(--ff-dark-lighter) !important;
+      color: var(--ff-text) !important;
+      border-radius: 4px !important;
+    }
+
+    input:focus,
+    textarea:focus,
+    select:focus,
+    [contenteditable="true"]:focus {
+      border-color: var(--ff-arcane) !important;
+      box-shadow: 0 0 0 3px var(--ff-arcane-dim) !important;
+      outline: none !important;
+    }
+
+    /* Markdown editor */
+    [class*="Editor"],
+    [class*="Markdown"],
+    .cm-editor,
+    .CodeMirror {
+      background: var(--ff-dark-light) !important;
+      color: var(--ff-text) !important;
+    }
+
+    .cm-content,
+    .CodeMirror-code,
+    .cm-line {
+      color: var(--ff-text) !important;
+    }
+
+    /* Editor toolbar */
+    [class*="Toolbar"],
+    [class*="EditorToolbar"] {
+      background: var(--ff-dark-mid) !important;
+      border-bottom: 1px solid var(--ff-dark-lighter) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       ❄️ BUTTONS - Frost Teal
+    ═══════════════════════════════════════════════════════════ */
+    
+    button:not([disabled]):not([class*="Delete"]):not([class*="Cancel"]) {
+      background: linear-gradient(135deg, var(--ff-frost) 0%, var(--ff-frost-dark) 100%) !important;
+      color: var(--ff-dark) !important;
       border: none !important;
       font-weight: 600 !important;
       border-radius: 6px !important;
     }
 
+    button:not([disabled]):not([class*="Delete"]):not([class*="Cancel"]):hover {
+      background: linear-gradient(135deg, var(--ff-frost-dark) 0%, var(--ff-frost) 100%) !important;
+      box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4) !important;
+    }
+
+    /* Cancel/secondary buttons */
+    button[class*="Cancel"],
+    button[class*="Secondary"] {
+      background: transparent !important;
+      border: 2px solid var(--ff-frost) !important;
+      color: var(--ff-frost) !important;
+    }
+
+    /* Delete buttons - keep red */
+    button[class*="Delete"] {
+      background: #dc3545 !important;
+      color: white !important;
+    }
+
+    /* Disabled buttons */
+    button[disabled] {
+      background: var(--ff-dark-lighter) !important;
+      color: var(--ff-text-dim) !important;
+      cursor: not-allowed !important;
+    }
+
     /* ═══════════════════════════════════════════════════════════
-       💜 ARCANE PURPLE - Selected/Active States
+       💜 ACTIVE STATES - Arcane Purple
     ═══════════════════════════════════════════════════════════ */
     
-    /* Active sidebar item */
     a[aria-current="true"],
     a[class*="active"],
     li[class*="active"] > a {
-      border-left: 4px solid #A855F7 !important;
-      background: rgba(168, 85, 247, 0.1) !important;
+      border-left: 4px solid var(--ff-arcane) !important;
+      background: var(--ff-arcane-dim) !important;
     }
 
-    /* Selected/focused inputs */
-    input:focus, 
-    textarea:focus,
-    [class*="Editor"]:focus-within {
-      border-color: #A855F7 !important;
-      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
+    /* Dropdown/menu items */
+    [class*="Dropdown"],
+    [class*="Menu"],
+    [role="listbox"],
+    [role="menu"] {
+      background: var(--ff-dark-mid) !important;
+      border: 1px solid var(--ff-dark-lighter) !important;
     }
 
-    /* Dropdown active items */
     [class*="DropdownItem"]:hover,
     [class*="MenuItem"]:hover,
     [role="option"]:hover,
     [role="menuitem"]:hover {
-      background: rgba(168, 85, 247, 0.15) !important;
+      background: var(--ff-arcane-dim) !important;
     }
 
     /* ═══════════════════════════════════════════════════════════
-       🌑 DARK THEME - Headers & Containers
+       LINKS
     ═══════════════════════════════════════════════════════════ */
     
-    /* Top header bar */
-    header,
-    [class*="AppHeader"],
-    nav[class*="Header"] {
-      background: #0F0F1E !important;
-      border-bottom: 2px solid #4ECDC4 !important;
-    }
-
-    /* Header text */
-    header *,
-    [class*="AppHeader"] * {
-      color: white !important;
-    }
-
-    /* Site link in header */
-    a[href*="firefrostgaming.com"] {
-      color: #4ECDC4 !important;
-      font-weight: 600 !important;
-    }
-
-    a[href*="firefrostgaming.com"]:hover {
-      color: #FF6B35 !important;
-    }
-
-    /* ═══════════════════════════════════════════════════════════
-       SIDEBAR POLISH
-    ═══════════════════════════════════════════════════════════ */
-    
-    /* Sidebar background subtle gradient */
-    aside,
-    [class*="Sidebar"],
-    nav:not([class*="Header"]) {
-      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%) !important;
-      border-right: 1px solid rgba(78, 205, 196, 0.3) !important;
-    }
-
-    /* Collection headers */
-    [class*="SidebarHeading"],
-    [class*="CollectionLabel"] {
-      color: #0F0F1E !important;
-      font-weight: 600 !important;
-    }
-
-    /* ═══════════════════════════════════════════════════════════
-       LINKS & ACCENTS
-    ═══════════════════════════════════════════════════════════ */
-    
-    /* General links - Frost teal */
     a:not([href*="/collections"]):not([class*="Button"]) {
-      color: #4ECDC4 !important;
+      color: var(--ff-frost) !important;
     }
 
     a:not([href*="/collections"]):not([class*="Button"]):hover {
-      color: #FF6B35 !important;
-    }
-
-    /* Entry cards hover */
-    [class*="ListCard"]:hover,
-    [class*="EntryCard"]:hover,
-    li[class*="Entry"]:hover {
-      border-left: 3px solid #A855F7 !important;
-      background: rgba(168, 85, 247, 0.05) !important;
+      color: var(--ff-fire) !important;
     }
 
     /* ═══════════════════════════════════════════════════════════
-       BUTTONS - SECONDARY ACTIONS
+       SCROLLBARS - Dark themed
     ═══════════════════════════════════════════════════════════ */
     
-    /* Cancel/secondary buttons - subtle */
-    button[class*="Cancel"],
-    button[class*="Secondary"] {
-      background: transparent !important;
-      border: 2px solid #4ECDC4 !important;
-      color: #4ECDC4 !important;
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
     }
 
-    button[class*="Cancel"]:hover,
-    button[class*="Secondary"]:hover {
-      background: rgba(78, 205, 196, 0.1) !important;
+    ::-webkit-scrollbar-track {
+      background: var(--ff-dark);
     }
 
-    /* Delete buttons - keep red for danger */
-    button[class*="Delete"] {
-      background: #dc3545 !important;
-      color: white !important;
+    ::-webkit-scrollbar-thumb {
+      background: var(--ff-dark-lighter);
+      border-radius: 5px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--ff-frost);
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       MISC
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* Dividers and borders */
+    hr, [class*="Divider"] {
+      border-color: var(--ff-dark-lighter) !important;
+    }
+
+    /* Tooltips */
+    [class*="Tooltip"] {
+      background: var(--ff-dark-mid) !important;
+      color: var(--ff-text) !important;
+      border: 1px solid var(--ff-dark-lighter) !important;
+    }
+
+    /* Loading spinner area */
+    [class*="Loading"] {
+      background: var(--ff-dark) !important;
     }
 
   </style>
@@ -197,10 +344,9 @@
 <body>
   <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
   <script>
-    // After CMS loads, apply additional styling via JS as fallback
     document.addEventListener('DOMContentLoaded', function() {
       setTimeout(function() {
-        // Style Tasks link
+        // Force Tasks link styling
         const tasksLinks = document.querySelectorAll('a[href*="/collections/tasks"]');
         tasksLinks.forEach(function(link) {
           link.style.background = 'linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)';
@@ -210,21 +356,10 @@
           link.style.padding = '12px 16px';
           link.style.margin = '4px 8px';
           link.style.boxShadow = '0 3px 12px rgba(255, 107, 53, 0.4)';
-          link.style.display = 'block';
-          link.style.textDecoration = 'none';
-          // Style all children too
           link.querySelectorAll('*').forEach(function(child) {
             child.style.color = 'white';
           });
         });
-
-        // Style header
-        const headers = document.querySelectorAll('header, [class*="AppHeader"]');
-        headers.forEach(function(header) {
-          header.style.background = '#0F0F1E';
-          header.style.borderBottom = '2px solid #4ECDC4';
-        });
-
       }, 500);
     });
   </script>