From f854b79cb61261bddec4d09d4030337a2d6d823c Mon Sep 17 00:00:00 2001
From: Trung Le <trungle@rta.vn>
Date: Thu, 12 Dec 2024 20:07:17 -0800
Subject: [PATCH] Update rt-html-css-fallback.js

---
 js/rt-html-css-fallback.js | 37 ++++++++++++++-----------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/js/rt-html-css-fallback.js b/js/rt-html-css-fallback.js
index ec03add..3618feb 100644
--- a/js/rt-html-css-fallback.js
+++ b/js/rt-html-css-fallback.js
@@ -1,36 +1,27 @@
+// Check if theme variables are valid color codes
 document.addEventListener('DOMContentLoaded', () => {
     const root = document.documentElement;
     const style = getComputedStyle(root);
 
-    // Default theme colors
-    const defaultColors = {
-        primary: '#2c3e50',
-        secondary: '#3498db',
-        background: '#f8f9fa',
-        accent: '#f5f5f5'
-    };
-
     function isValidColor(color) {
-        if (!color) return false;
         const s = new Option().style;
         s.color = color;
         return s.color !== '';
     }
 
-    function setFallbackColors(prefix) {
-        const colorTypes = ['primary', 'secondary', 'background', 'accent'];
-        
-        colorTypes.forEach(type => {
-            const varName = `--${prefix}${type}`;
-            const currentColor = style.getPropertyValue(varName).trim();
-            
-            if (!isValidColor(currentColor)) {
-                root.style.setProperty(varName, defaultColors[type]);
-            }
-        });
+    // Check and set fallback colors if needed
+    if (!isValidColor(style.getPropertyValue('--primary-color').trim())) {
+        root.style.setProperty('--primary-color', '#2c3e50');
+        root.style.setProperty('--secondary-color', '#3498db');
+        root.style.setProperty('--background-color', '#f8f9fa');
+        root.style.setProperty('--accent-color', '#f5f5f5');
     }
 
-    // Check both naming conventions
-    setFallbackColors('');
-    setFallbackColors('color_theme_');
+    // Check and set fallback colors if needed
+    if (!isValidColor(style.getPropertyValue('--color_theme_primary').trim())) {
+        root.style.setProperty('--color_theme_primary', '#2c3e50');
+        root.style.setProperty('--color_theme_secondary', '#3498db');
+        root.style.setProperty('--color_theme_background', '#f8f9fa');
+        root.style.setProperty('--color_theme_accent', '#f5f5f5');
+    }
 });