diff --git a/routes/__pycache__/main.cpython-313.pyc b/routes/__pycache__/main.cpython-313.pyc
index 7d9d1d0..ffba016 100644
Binary files a/routes/__pycache__/main.cpython-313.pyc and b/routes/__pycache__/main.cpython-313.pyc differ
diff --git a/static/css/colors.css b/static/css/colors.css
index 4d83497..375e358 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -33,7 +33,9 @@
     --text-dark: #333333;
     --text-muted: #6c757d;
     --warning-color: #ffd700;
+    --warning-opacity-15: rgba(255, 215, 0, 0.15);
     --danger-color: #dc3545;
+    --danger-opacity-15: rgba(220, 53, 69, 0.15);
     --shadow-color: rgba(0, 0, 0, 0.1);
     --shadow-color-light: rgba(0, 0, 0, 0.25);
     --border-color: #dee2e6;
diff --git a/templates/rooms/room.html b/templates/rooms/room.html
index 6eee98f..0382dd1 100644
--- a/templates/rooms/room.html
+++ b/templates/rooms/room.html
@@ -1210,9 +1210,9 @@ function toggleStar(filename, path) {
         // Get the current state from the button's title
         const isStarred = starButton.title === 'Unstar';
         
-        // Update button appearance
-        starButton.style.backgroundColor = isStarred ? 'rgba(22,118,123,0.08)' : 'rgba(255,215,0,0.15)';
-        starButton.style.color = isStarred ? '#16767b' : '#ffd700';
+        // Update button appearance using CSS variables
+        starButton.style.backgroundColor = isStarred ? 'var(--primary-opacity-8)' : 'var(--warning-opacity-15)';
+        starButton.style.color = isStarred ? 'var(--primary-color)' : 'var(--warning-color)';
         starButton.title = isStarred ? 'Star' : 'Unstar';
     }
     
@@ -1245,8 +1245,8 @@ function toggleStar(filename, path) {
             // Revert the button if the server request failed
             if (starButton) {
                 const isStarred = starButton.title === 'Unstar';
-                starButton.style.backgroundColor = isStarred ? 'rgba(22,118,123,0.08)' : 'rgba(255,215,0,0.15)';
-                starButton.style.color = isStarred ? '#16767b' : '#ffd700';
+                starButton.style.backgroundColor = isStarred ? 'var(--primary-opacity-8)' : 'var(--warning-opacity-15)';
+                starButton.style.color = isStarred ? 'var(--primary-color)' : 'var(--warning-color)';
                 starButton.title = isStarred ? 'Star' : 'Unstar';
             }
             console.error('Failed to toggle star:', data.error);
@@ -1256,8 +1256,8 @@ function toggleStar(filename, path) {
         // Revert the button if there was an error
         if (starButton) {
             const isStarred = starButton.title === 'Unstar';
-            starButton.style.backgroundColor = isStarred ? 'rgba(22,118,123,0.08)' : 'rgba(255,215,0,0.15)';
-            starButton.style.color = isStarred ? '#16767b' : '#ffd700';
+            starButton.style.backgroundColor = isStarred ? 'var(--primary-opacity-8)' : 'var(--warning-opacity-15)';
+            starButton.style.color = isStarred ? 'var(--primary-color)' : 'var(--warning-color)';
             starButton.title = isStarred ? 'Star' : 'Unstar';
         }
         console.error('Error toggling star:', error);