use css variables in style

Author: topi314

src/main/resources/static/index.html

@@ -4,65 +4,64 @@
     <meta charset="UTF-8">
     <title>Lavalink Config Server</title>
     <link rel="icon" href="lavalink.svg" type="image/png">
+    <meta name="darkreader-lock">
     <style>
+        :root {
+            --font-family: Arial;
+            --button-border-radius: 20px;
+            --transition-duration: 0.3s;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #1e1e1e;
+                --text-color: #ffffff;
+                --button-bg: #ff624a;
+                --button-hover-bg: #e65c00;
+            }
+        }
+
+        @media (prefers-color-scheme: light) {
+            :root {
+                --background-color: #ffffff;
+                --text-color: #000000;
+                --button-bg: #ff624a;
+                --button-hover-bg: #e65c00;
+            }
+        }
+
         body {
-            background-color: #ff624a;
-            color: #ffffff;
-            font-family: Arial, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: var(--font-family), sans-serif;
             text-align: center;
             padding-top: 100px;
-            transition: background-color 0.3s ease, color 0.3s ease;
+            transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
         }
+
         img {
             width: 150px;
             margin-bottom: 30px;
         }
+
         h1 {
             font-size: 36px;
             margin-bottom: 20px;
         }
+
         a.button {
             display: inline-block;
             padding: 12px 24px;
-            background-color: #ff624a;
+            background-color: var(--button-bg);
             color: #ffffff;
             text-decoration: none;
-            border-radius: 20px;
+            border-radius: var(--button-border-radius);
             font-size: 18px;
-            transition: background-color 0.3s ease, color 0.3s ease;
+            transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
         }
-        a.button:hover {
-            background-color: #e65c00;
-        }
-        @media (prefers-color-scheme: dark) {
-            body {
-                background-color: #1e1e1e;
-                color: #ffffff;
-            }
-
-            a.button {
-                background-color: #ff624a;
-                color: #ffffff;
-            }
-
-            a.button:hover {
-                background-color: #e65c00;
-            }
-        }
-        @media (prefers-color-scheme: light) {
-            body {
-                background-color: #ffffff;
-                color: #000000;
-            }
 
-            a.button {
-                background-color: #ff624a;
-                color: #ffffff;
-            }
-
-            a.button:hover {
-                background-color: #e65c00;
-            }
+        a.button:hover {
+            background-color: var(--button-hover-bg);
         }
     </style>
 </head>