Update templates/index.html

templates/index.html

@@ -12,6 +12,10 @@
   <link rel="icon" type="image/png" href="https://i.ibb.co/gvKPXJD/eye.gif">
     <title>{{ page_title|safe }}</title>
     <style>
+        :root {
+          --text-color: rgb(63,63,63);
+        }
+        
         button {
           cursor: pointer;
         }
@@ -48,7 +52,7 @@
             margin-bottom: 0px;
             margin-top: 0px !important;
             border-bottom: 2px solid yellow; 
-            color:rgb(83, 83, 83); 
+            color:rgbvar(--text-color); 
             font-family: 'Helvetica'; font-weight: 50;
         }
         .pulse {
@@ -139,17 +143,17 @@
             background-color: transparent;
             border-radius: 5px;
             text-decoration: none;
-            color:rgb(83, 83, 83);
+            color:rgbvar(--text-color);
             transition: 0.5s ease;
         }
         .hoverButton {
-              color: rgb(53,53,53);
+              color: var(--text-color);
         }
         .tag {
             font-family: 'Helvetica'; 
             font-weight: 50;
             margin: auto;
-            color:rgb(53,53,53);
+            color:var(--text-color);
         }
 
         #share {
@@ -232,7 +236,7 @@
                         </a>
                         <!--<a  class="abortButton" href="?new=false&id={{ id }}" id="refreshSameFeedButton" style="display: inline-block;">-->
                         <a  class="abortButton" href="?new=false&id={{ id }}" id="refreshSameFeedButton" style="display: inline-block;">
-                          <button class="hoverButton" style="border-radius: 5px; border: 2px solid rgb(83, 83, 83); background-color: transparent; padding: 10px;">
+                          <button class="hoverButton" style="border-radius: 5px; border: 2px solid rgbvar(--text-color); background-color: transparent; padding: 10px;">
                             refresh
                           </button>
                         </a>
@@ -241,7 +245,7 @@
                         <p id="copied" class="tag" style="visibility: hidden;">copied</p>
                       </div>
 
-                        <p id="info-text" style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">
+                        <p id="info-text" style="color:rgbvar(--text-color); font-family: 'Helvetica'; font-weight: 50;">
 
                           time: <span id="time"></span><br>
 
@@ -251,7 +255,7 @@
                             lat, lon: {{ loc }}
                           </span>
                           
-                          <span id="show-more">more <i style="margin-bottom:20px; color:rgb(83, 83, 83);" id="more-button" class="fa-solid fa-caret-down"></i></span>
+                          <span id="show-more">more <i style="margin-bottom:20px; color:rgbvar(--text-color);" id="more-button" class="fa-solid fa-caret-down"></i></span>
 
                           <span class="tag"><br>a brayden moore website<br></span>
                           thanks for visiting<br>
@@ -471,10 +475,10 @@
       if (additionalInfo.style.height === '0px') {
         const scrollHeight = additionalInfo.scrollHeight;
         additionalInfo.style.height = `${scrollHeight}px`;
-        showMore.innerHTML = 'less <i style="margin-bottom:20px; color:rgb(83, 83, 83);" id="more-button" class="fa-solid fa-caret-up"></i>';
+        showMore.innerHTML = 'less <i style="margin-bottom:20px; color:rgbvar(--text-color);" id="more-button" class="fa-solid fa-caret-up"></i>';
       } else {
         additionalInfo.style.height = '0';
-        showMore.innerHTML = 'more <i style="margin-bottom:20px; color:rgb(83, 83, 83);" id="more-button" class="fa-solid fa-caret-down"></i>';
+        showMore.innerHTML = 'more <i style="margin-bottom:20px; color:rgbvar(--text-color);" id="more-button" class="fa-solid fa-caret-down"></i>';
       }
     });
   });