Improve theme handling in BitcoinProgressBar.js

- Introduced fallback colors and utilized CSS variables for styling.
- Replaced hardcoded color values with dynamic CSS variable values.
- Enhanced theme change listener to respond to storage changes and class mutations for real-time UI updates.

static/js/BitcoinProgressBar.js

@@ -8,8 +8,10 @@
 const BitcoinMinuteRefresh = (function () {
     // Constants
     const STORAGE_KEY = 'bitcoin_last_refresh_time';
-    const BITCOIN_COLOR = '#f7931a';
+    // Default fallback colors if CSS vars aren't available
-    const DEEPSEA_COLOR = '#0088cc';
+    const FALLBACK_BITCOIN_COLOR = '#f2a900';
+    const FALLBACK_DEEPSEA_COLOR = '#0088cc';
+
     const DOM_IDS = {
         TERMINAL: 'bitcoin-terminal',
         STYLES: 'bitcoin-terminal-styles',
@@ -45,9 +47,32 @@ const BitcoinMinuteRefresh = (function () {
     let uptimeInterval = null;
     let isInitialized = false;
     let refreshCallback = null;
-    let currentThemeColor = BITCOIN_COLOR; // Default Bitcoin color
+    let currentThemeColor = '';
+    let currentThemeRGB = '';
     let dragListenersAdded = false;
 
+    /**
+     * Get theme colors from CSS variables
+     */
+    function getThemeColors() {
+        // Try to get CSS variables from document root
+        const rootStyles = getComputedStyle(document.documentElement);
+        let primaryColor = rootStyles.getPropertyValue('--primary-color').trim();
+        let primaryColorRGB = rootStyles.getPropertyValue('--primary-color-rgb').trim();
+
+        // If CSS vars not available, use theme toggle state
+        if (!primaryColor) {
+            const isDeepSea = localStorage.getItem(STORAGE_KEYS.THEME) === 'true';
+            primaryColor = isDeepSea ? FALLBACK_DEEPSEA_COLOR : FALLBACK_BITCOIN_COLOR;
+            primaryColorRGB = isDeepSea ? '0, 136, 204' : '242, 169, 0';
+        }
+
+        return {
+            color: primaryColor,
+            rgb: primaryColorRGB
+        };
+    }
+
     /**
      * Logging helper function
      * @param {string} message - Message to log
@@ -79,24 +104,22 @@ const BitcoinMinuteRefresh = (function () {
      * Apply the current theme color 
      */
     function applyThemeColor() {
-        // Check if theme toggle is set to DeepSea
+        // Get current theme colors
-        const isDeepSeaTheme = localStorage.getItem(STORAGE_KEYS.THEME) === 'true';
+        const theme = getThemeColors();
-        currentThemeColor = isDeepSeaTheme ? DEEPSEA_COLOR : BITCOIN_COLOR;
+        currentThemeColor = theme.color;
+        currentThemeRGB = theme.rgb;
 
         // Don't try to update DOM elements if they don't exist yet
         if (!terminalElement) return;
 
-        // Define color values based on theme
-        const rgbValues = isDeepSeaTheme ? '0, 136, 204' : '247, 147, 26';
-
         // Create theme config
         const themeConfig = {
             color: currentThemeColor,
             borderColor: currentThemeColor,
-            boxShadow: `0 0 5px rgba(${rgbValues}, 0.3)`,
+            boxShadow: `0 0 5px rgba(${currentThemeRGB}, 0.3)`,
-            textShadow: `0 0 5px rgba(${rgbValues}, 0.8)`,
+            textShadow: `0 0 5px rgba(${currentThemeRGB}, 0.8)`,
-            borderColorRGBA: `rgba(${rgbValues}, 0.5)`,
+            borderColorRGBA: `rgba(${currentThemeRGB}, 0.5)`,
-            textShadowStrong: `0 0 8px rgba(${rgbValues}, 0.8)`
+            textShadowStrong: `0 0 8px rgba(${currentThemeRGB}, 0.8)`
         };
 
         // Apply styles to terminal
@@ -144,6 +167,13 @@ const BitcoinMinuteRefresh = (function () {
         if (miniLabel) {
             miniLabel.style.color = themeConfig.color;
         }
+
+        // Update show button if it exists
+        const showButton = document.getElementById(DOM_IDS.SHOW_BUTTON);
+        if (showButton) {
+            showButton.style.backgroundColor = themeConfig.color;
+            showButton.style.boxShadow = `0 0 10px rgba(${currentThemeRGB}, 0.5)`;
+        }
     }
 
     /**
@@ -156,6 +186,25 @@ const BitcoinMinuteRefresh = (function () {
                 applyThemeColor();
             }
         });
+
+        // Listen for custom theme change events
+        document.addEventListener('themeChanged', function () {
+            applyThemeColor();
+        });
+
+        // Watch for class changes on HTML element that might indicate theme changes
+        const observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'class') {
+                    applyThemeColor();
+                }
+            });
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
     }
 
     /**
@@ -413,13 +462,12 @@ const BitcoinMinuteRefresh = (function () {
      * Add CSS styles for the terminal
      */
     function addStyles() {
-        // Use the currentThemeColor variable instead of hardcoded colors
+        // Get current theme colors for initial styling
+        const theme = getThemeColors();
+
         const styleElement = document.createElement('style');
         styleElement.id = DOM_IDS.STYLES;
 
-        // Generate RGB values for dynamic colors
-        const rgbValues = currentThemeColor === DEEPSEA_COLOR ? '0, 136, 204' : '247, 147, 26';
-
         styleElement.textContent = `
       /* Terminal Container */
       .bitcoin-terminal {
@@ -428,14 +476,14 @@ const BitcoinMinuteRefresh = (function () {
         right: 20px;
         width: 230px;
         background-color: #000000;
-        border: 1px solid ${currentThemeColor};
+        border: 1px solid var(--primary-color, ${theme.color});
-        color: ${currentThemeColor};
+        color: var(--primary-color, ${theme.color});
         font-family: 'VT323', monospace;
         z-index: 9999;
         overflow: hidden;
         padding: 8px;
         transition: all 0.3s ease;
-        box-shadow: 0 0 5px rgba(${rgbValues}, 0.3);
+        box-shadow: 0 0 5px rgba(var(--primary-color-rgb, ${theme.rgb}), 0.3);
       }
       
       /* Terminal Header */
@@ -443,20 +491,19 @@ const BitcoinMinuteRefresh = (function () {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-bottom: 1px solid ${currentThemeColor};
+        border-bottom: 1px solid var(--primary-color, ${theme.color});
         padding-bottom: 5px;
         margin-bottom: 8px;
-        cursor: grab; /* Add grab cursor on hover */
+        cursor: grab;
       }
 
-      /* Apply grabbing cursor during active drag */
       .terminal-header:active,
       .bitcoin-terminal.dragging .terminal-header {
         cursor: grabbing;
       }
       
       .terminal-title {
-        color: ${currentThemeColor};
+        color: var(--primary-color, ${theme.color});
         font-weight: bold;
         font-size: 1.1rem;
         animation: terminal-flicker 4s infinite;
@@ -524,14 +571,14 @@ const BitcoinMinuteRefresh = (function () {
         font-weight: bold;
       }
       
-      /* Uptime Display - Modern Digital Clock Style (Horizontal) */
+      /* Uptime Display */
       .uptime-timer {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 5px;
         background-color: #111;
-        border: 1px solid rgba(${rgbValues}, 0.5);
+        border: 1px solid rgba(var(--primary-color-rgb, ${theme.rgb}), 0.5);
         margin-top: 5px;
       }
       
@@ -586,7 +633,7 @@ const BitcoinMinuteRefresh = (function () {
         position: fixed;
         bottom: 10px;
         right: 10px;
-        background-color: ${currentThemeColor};
+        background-color: var(--primary-color, ${theme.color});
         color: #000;
         border: none;
         padding: 8px 12px;
@@ -594,7 +641,7 @@ const BitcoinMinuteRefresh = (function () {
         cursor: pointer;
         z-index: 9999;
         display: none;
-        box-shadow: 0 0 10px rgba(${rgbValues}, 0.5);
+        box-shadow: 0 0 10px rgba(var(--primary-color-rgb, ${theme.rgb}), 0.5);
       }
       
       /* CRT scanline effect */
@@ -660,7 +707,7 @@ const BitcoinMinuteRefresh = (function () {
         letter-spacing: 1px;
         opacity: 0.7;
         margin-left: 45px;
-        color: ${currentThemeColor};
+        color: var(--primary-color, ${theme.color});
       }
       
       #${DOM_IDS.MINIMIZED_UPTIME} {
@@ -855,9 +902,6 @@ const BitcoinMinuteRefresh = (function () {
         // Store the refresh callback
         refreshCallback = refreshFunc;
 
-        // Get current theme status
-        applyThemeColor();
-
         // Create the terminal element if it doesn't exist
         if (!document.getElementById(DOM_IDS.TERMINAL)) {
             createTerminalElement();
@@ -865,11 +909,11 @@ const BitcoinMinuteRefresh = (function () {
             // Get references to existing elements
             terminalElement = document.getElementById(DOM_IDS.TERMINAL);
             uptimeElement = document.getElementById('uptime-timer');
-
-            // Apply theme to existing element
-            applyThemeColor();
         }
 
+        // Apply theme colors
+        applyThemeColor();
+
         // Set up listener for theme changes
         setupThemeChangeListener();
 
@@ -923,6 +967,9 @@ const BitcoinMinuteRefresh = (function () {
             } catch (e) {
                 log("Error reading updated server time: " + e.message, 'error');
             }
+        } else if (event.key === STORAGE_KEYS.THEME) {
+            // Update theme when theme preference changes
+            applyThemeColor();
         }
     }
 
@@ -933,6 +980,9 @@ const BitcoinMinuteRefresh = (function () {
         if (!document.hidden) {
             log("Page became visible, updating");
 
+            // Apply current theme when page becomes visible
+            applyThemeColor();
+
             // Update immediately when page becomes visible
             updateClock();
             updateUptime();
@@ -989,6 +1039,11 @@ const BitcoinMinuteRefresh = (function () {
             showButton.textContent = 'Show Monitor';
             showButton.onclick = showTerminal;
             document.body.appendChild(showButton);
+
+            // Apply current theme to the button
+            const theme = getThemeColors();
+            showButton.style.backgroundColor = theme.color;
+            showButton.style.boxShadow = `0 0 10px rgba(${theme.rgb}, 0.5)`;
         }
 
         document.getElementById(DOM_IDS.SHOW_BUTTON).style.display = 'block';