make it in the single theme

components/air-quality-card.js

@@ -5,29 +5,27 @@ class AirQualityCard extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
-        
         .air-quality-card {
-          background: rgba(0, 0, 0, 0.7);
+          background: var(--card-bg);
           border-radius: 16px;
           padding: 1.5rem;
-          box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
-          border: 1px solid rgba(0, 255, 255, 0.3);
+          box-shadow: 0 0 30px rgba(0, 201, 255, 0.2);
+          border: 1px solid var(--primary);
           backdrop-filter: blur(10px);
-          color: #00ffff;
-          font-family: 'Orbitron', sans-serif;
+          color: var(--primary);
+          font-family: 'Poppins', sans-serif;
           position: relative;
           overflow: hidden;
         }
-        
-        .air-quality-card::before {
+.air-quality-card::before {
           content: '';
           position: absolute;
           top: -50%;
           left: -50%;
           width: 200%;
           height: 200%;
-          background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
-          animation: rotate 20s linear infinite;
+          background: radial-gradient(circle, rgba(0, 201, 255, 0.1) 0%, transparent 70%);
+animation: rotate 20s linear infinite;
           z-index: -1;
         }
         
@@ -40,11 +38,11 @@ class AirQualityCard extends HTMLElement {
           font-size: 1.5rem;
           font-weight: 700;
           margin-bottom: 1.5rem;
-          color: #00ffff;
+          color: var(--primary);
           display: flex;
           align-items: center;
-          text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-        }
+          text-shadow: 0 0 10px rgba(0, 201, 255, 0.5);
+}
         
         .card-title i {
           margin-right: 0.75rem;
@@ -62,19 +60,19 @@ class AirQualityCard extends HTMLElement {
           border-radius: 12px;
           padding: 1rem;
           border: 1px solid rgba(0, 255, 255, 0.2);
-          box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
-          transition: all 0.3s ease;
+          box-shadow: 0 0 15px rgba(0, 201, 255, 0.1);
+transition: all 0.3s ease;
         }
         
         .metric:hover {
           transform: translateY(-5px);
-          box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
-        }
+          box-shadow: 0 0 25px rgba(0, 201, 255, 0.3);
+}
         
         .metric-title {
           font-size: 0.9rem;
-          color: rgba(0, 255, 255, 0.8);
-          margin-bottom: 0.5rem;
+          color: rgba(0, 201, 255, 0.8);
+margin-bottom: 0.5rem;
           text-transform: uppercase;
           letter-spacing: 1px;
         }
@@ -95,13 +93,13 @@ class AirQualityCard extends HTMLElement {
           font-size: 1.8rem;
           font-weight: 700;
           color: white;
-          text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
-        }
+          text-shadow: 0 0 10px rgba(0, 201, 255, 0.7);
+}
         
         .metric-subtext {
           font-size: 0.75rem;
-          color: rgba(0, 255, 255, 0.6);
-          margin-top: 0.5rem;
+          color: rgba(0, 201, 255, 0.6);
+margin-top: 0.5rem;
         }
         
         .gauge {
@@ -118,12 +116,10 @@ class AirQualityCard extends HTMLElement {
           border-radius: 4px 4px 0 0;
           transition: height 1s ease-out;
         }
-        
-        .co2-gauge { background: linear-gradient(to top, #00ff88, #00ffff); }
-        .smoke-gauge { background: linear-gradient(to top, #ffaa00, #ff5500); }
-        .aqi-gauge { background: linear-gradient(to top, #5500ff, #aa00ff); }
-        
-        .gauge-markers {
+        .co2-gauge { background: linear-gradient(to top, var(--success), var(--primary)); }
+        .smoke-gauge { background: linear-gradient(to top, var(--warning), var(--danger)); }
+        .aqi-gauge { background: linear-gradient(to top, #0099ff, var(--primary)); }
+.gauge-markers {
           position: absolute;
           bottom: 0;
           width: 100%;

style.css

@@ -1,34 +1,35 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
 :root {
-  --primary: #4f46e5;
-  --primary-dark: #4338ca;
-  --secondary: #10b981;
-  --danger: #dc2626;
-  --warning: #d97706;
-  --success: #059669;
-  --info: #2563eb;
-  --dark: #1e293b;
-  --light: #ffffff;
+  --primary: #00c9ff;
+  --primary-dark: #00a8ff;
+  --secondary: #00ffaa;
+  --danger: #ff3d3d;
+  --warning: #ffaa00;
+  --success: #00ff88;
+  --dark: #0f172a;
+  --light: #f8fafc;
   --muted: #64748b;
+  --card-bg: rgba(15, 23, 42, 0.8);
+  --card-border: rgba(0, 201, 255, 0.3);
 }
 
 body {
   font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
   min-height: 100vh;
-  color: #1e293b;
+  color: #f8fafc;
 }
-
 .glass-card {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--card-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 30px 0 rgba(0, 201, 255, 0.1);
   transition: all 0.3s ease;
-  border: 1px solid rgba(203, 213, 225, 0.3);
+  border: 1px solid var(--card-border);
 }
 .glass-card:hover {
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
+  box-shadow: 0 8px 40px 0 rgba(0, 201, 255, 0.2);
   transform: translateY(-2px);
 }
 .led {
@@ -39,32 +40,31 @@ body {
   transition: all 0.3s ease;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
-
 .led-green {
-  background-color: #10b981;
-  border: 1px solid #059669;
+  background-color: var(--success);
+  border: 1px solid #00d494;
 }
 
 .led-yellow {
-  background-color: #f59e0b;
-  border: 1px solid #d97706;
+  background-color: var(--warning);
+  border: 1px solid #e69500;
 }
 
 .led-red {
-  background-color: #ef4444;
-  border: 1px solid #dc2626;
+  background-color: var(--danger);
+  border: 1px solid #ff2e2e;
 }
 
 .led-active-green {
-  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
 }
 
 .led-active-yellow {
-  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
 }
 
 .led-active-red {
-  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
+  box-shadow: 0 0 15px rgba(255, 61, 61, 0.5);
 }
 .led-pulse {
   animation: pulse 1.5s infinite;
@@ -145,20 +145,18 @@ body {
 ::-webkit-scrollbar {
   width: 8px;
 }
-
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(0, 201, 255, 0.4);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--primary);
 }
-
 /* Animations */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
@@ -171,7 +169,6 @@ body {
 
 /* Glow effects */
 .glow-primary {
-  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
+  box-shadow: 0 0 15px rgba(0, 201, 255, 0.5);
 }
-
 .g