From 744ee95af109e3e9190c07db56b022b0325dcf94 Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Tue, 23 Jan 2024 01:19:51 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Added=20theming=20support,=20We?=
 =?UTF-8?q?=20are=20almost=20ready=20for=20release!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/img/{purplewaves.svg => aluwaves.svg}  | 30 +++++-
 public/img/darkwaves.svg                      | 67 -------------
 public/img/macchiatowaves.svg                 | 96 +++++++++++++++++++
 public/img/mochawaves.svg                     | 93 ++++++++++++++++++
 src/components/Dropdown.astro                 |  9 +-
 src/components/Footer.astro                   | 21 ++--
 src/components/GameItem.astro                 |  2 +-
 src/components/Header.astro                   |  6 +-
 src/components/Input.astro                    |  2 +-
 .../SettingsContent/CustomizationTab.astro    | 11 +++
 src/components/SettingsContent/ProxyTab.astro | 27 ++++++
 src/components/SettingsTablist.astro          | 74 ++++++++------
 src/components/ThemeLoader.astro              | 18 ++++
 src/components/UVRegistrar.astro              |  4 +-
 src/layouts/Layout.astro                      | 57 +++++++++--
 src/pages/games.astro                         |  2 +-
 src/pages/settings.astro                      |  2 +-
 17 files changed, 392 insertions(+), 129 deletions(-)
 rename public/img/{purplewaves.svg => aluwaves.svg} (63%)
 delete mode 100644 public/img/darkwaves.svg
 create mode 100644 public/img/macchiatowaves.svg
 create mode 100644 public/img/mochawaves.svg
 create mode 100644 src/components/SettingsContent/CustomizationTab.astro
 create mode 100644 src/components/SettingsContent/ProxyTab.astro
 create mode 100644 src/components/ThemeLoader.astro

diff --git a/public/img/purplewaves.svg b/public/img/aluwaves.svg
similarity index 63%
rename from public/img/purplewaves.svg
rename to public/img/aluwaves.svg
index b702a55..5c077aa 100644
--- a/public/img/purplewaves.svg
+++ b/public/img/aluwaves.svg
@@ -1,6 +1,8 @@
-<svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>
+<svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390"
+  xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
+  <style>
           .path-0{
-            animation:pathAnim-0 4s;
+            animation:pathAnim-0 15s;
             animation-timing-function: linear;
             animation-iteration-count: infinite;
           }
@@ -20,9 +22,18 @@
             100%{
               d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
             }
-          }</style><style class="darkreader darkreader--sync" media="screen"></style><defs><linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%"><stop offset="5%" stop-color="#702dc2" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #5a249b;"></stop><stop offset="95%" stop-color="#3d097d" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #310764;"></stop></linearGradient></defs><path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: none;"></path><style>
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
+      <stop offset="5%" stop-color="#702dc2"></stop>
+      <stop offset="95%" stop-color="#3d097d"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
+  <style>
           .path-1{
-            animation:pathAnim-1 4s;
+            animation:pathAnim-1 15s;
             animation-timing-function: linear;
             animation-iteration-count: infinite;
           }
@@ -42,4 +53,13 @@
             100%{
               d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
             }
-          }</style><style class="darkreader darkreader--sync" media="screen"></style><defs><linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%"><stop offset="5%" stop-color="#702dc2" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #5a249b;"></stop><stop offset="95%" stop-color="#3d097d" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #310764;"></stop></linearGradient></defs><path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: none;"></path></svg>
\ No newline at end of file
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
+      <stop offset="5%" stop-color="#702dc2"></stop>
+      <stop offset="95%" stop-color="#3d097d"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
+</svg>
\ No newline at end of file
diff --git a/public/img/darkwaves.svg b/public/img/darkwaves.svg
deleted file mode 100644
index 41c5e31..0000000
--- a/public/img/darkwaves.svg
+++ /dev/null
@@ -1,67 +0,0 @@
-<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>
-          .path-0{
-            animation:pathAnim-0 4s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-          }
-          @keyframes pathAnim-0{
-            0%{
-              d: path("M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z");
-            }
-            25%{
-              d: path("M 0,700 C 0,700 0,175 0,175 C 71.32051282051285,180.2 142.6410256410257,185.4 224,167 C 305.3589743589743,148.6 396.7564102564103,106.60000000000001 493,110 C 589.2435897435897,113.39999999999999 690.3333333333333,162.2 764,171 C 837.6666666666667,179.8 883.9102564102564,148.60000000000002 962,129 C 1040.0897435897436,109.39999999999998 1150.0256410256409,101.39999999999999 1235,111 C 1319.9743589743591,120.60000000000001 1379.9871794871797,147.8 1440,175 C 1440,175 1440,700 1440,700 Z");
-            }
-            50%{
-              d: path("M 0,700 C 0,700 0,175 0,175 C 67.12051282051283,184.24615384615385 134.24102564102566,193.49230769230766 207,195 C 279.75897435897434,196.50769230769234 358.15641025641025,190.27692307692308 452,171 C 545.8435897435897,151.72307692307692 655.1333333333334,119.39999999999999 727,113 C 798.8666666666666,106.60000000000001 833.3102564102564,126.12307692307695 916,145 C 998.6897435897436,163.87692307692305 1129.625641025641,182.1076923076923 1225,187 C 1320.374358974359,191.8923076923077 1380.1871794871795,183.44615384615383 1440,175 C 1440,175 1440,700 1440,700 Z");
-            }
-            75%{
-              d: path("M 0,700 C 0,700 0,175 0,175 C 76.09999999999997,135.03076923076924 152.19999999999993,95.06153846153846 224,110 C 295.80000000000007,124.93846153846154 363.30000000000007,194.7846153846154 441,231 C 518.6999999999999,267.2153846153846 606.5999999999999,269.8 693,234 C 779.4000000000001,198.2 864.3000000000002,124.0153846153846 941,118 C 1017.6999999999998,111.9846153846154 1086.2,174.13846153846154 1168,195 C 1249.8,215.86153846153846 1344.9,195.43076923076922 1440,175 C 1440,175 1440,700 1440,700 Z");
-            }
-            100%{
-              d: path("M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z");
-            }
-          }</style><path d="M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667e66" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><style>
-          .path-1{
-            animation:pathAnim-1 4s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-          }
-          @keyframes pathAnim-1{
-            0%{
-              d: path("M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z");
-            }
-            25%{
-              d: path("M 0,700 C 0,700 0,350 0,350 C 82.77179487179487,328.6871794871795 165.54358974358973,307.374358974359 250,311 C 334.45641025641027,314.625641025641 420.59743589743596,343.18974358974356 503,357 C 585.402564102564,370.81025641025644 664.0666666666667,369.8666666666667 738,350 C 811.9333333333333,330.1333333333333 881.1358974358975,291.3435897435897 955,292 C 1028.8641025641025,292.6564102564103 1107.3897435897436,332.7589743589744 1189,349 C 1270.6102564102564,365.2410256410256 1355.3051282051283,357.6205128205128 1440,350 C 1440,350 1440,700 1440,700 Z");
-            }
-            50%{
-              d: path("M 0,700 C 0,700 0,350 0,350 C 65.52820512820512,346.8307692307692 131.05641025641023,343.66153846153844 217,344 C 302.94358974358977,344.33846153846156 409.30256410256413,348.18461538461537 490,343 C 570.6974358974359,337.81538461538463 625.7333333333332,323.6 702,326 C 778.2666666666668,328.4 875.7641025641026,347.41538461538465 952,366 C 1028.2358974358974,384.58461538461535 1083.2102564102565,402.73846153846154 1161,400 C 1238.7897435897435,397.26153846153846 1339.3948717948717,373.63076923076926 1440,350 C 1440,350 1440,700 1440,700 Z");
-            }
-            75%{
-              d: path("M 0,700 C 0,700 0,350 0,350 C 68.02820512820512,330.8897435897436 136.05641025641023,311.77948717948715 221,324 C 305.94358974358977,336.22051282051285 407.80256410256425,379.7717948717949 483,404 C 558.1974358974358,428.2282051282051 606.7333333333332,433.1333333333333 686,414 C 765.2666666666668,394.8666666666667 875.2641025641026,351.6948717948718 960,327 C 1044.7358974358974,302.3051282051282 1104.2102564102565,296.08717948717947 1180,303 C 1255.7897435897435,309.91282051282053 1347.8948717948717,329.95641025641027 1440,350 C 1440,350 1440,700 1440,700 Z");
-            }
-            100%{
-              d: path("M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z");
-            }
-          }</style><path d="M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667e88" class="transition-all duration-300 ease-in-out delay-150 path-1"></path><style>
-          .path-2{
-            animation:pathAnim-2 4s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-          }
-          @keyframes pathAnim-2{
-            0%{
-              d: path("M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z");
-            }
-            25%{
-              d: path("M 0,700 C 0,700 0,525 0,525 C 55.110256410256426,538.3461538461538 110.22051282051285,551.6923076923077 204,557 C 297.77948717948715,562.3076923076923 430.2282051282051,559.5769230769231 507,558 C 583.7717948717949,556.4230769230769 604.8666666666667,556 687,537 C 769.1333333333333,518 912.3051282051283,480.42307692307696 994,467 C 1075.6948717948717,453.57692307692304 1095.9128205128204,464.3076923076923 1160,478 C 1224.0871794871796,491.6923076923077 1332.0435897435898,508.3461538461538 1440,525 C 1440,525 1440,700 1440,700 Z");
-            }
-            50%{
-              d: path("M 0,700 C 0,700 0,525 0,525 C 98.69487179487183,536.551282051282 197.38974358974366,548.1025641025641 278,541 C 358.61025641025634,533.8974358974359 421.1358974358974,508.1410256410257 495,497 C 568.8641025641026,485.8589743589743 654.0666666666667,489.3333333333333 736,491 C 817.9333333333333,492.6666666666667 896.5974358974356,492.52564102564105 969,499 C 1041.4025641025644,505.47435897435895 1107.5435897435898,518.5641025641025 1185,524 C 1262.4564102564102,529.4358974358975 1351.228205128205,527.2179487179487 1440,525 C 1440,525 1440,700 1440,700 Z");
-            }
-            75%{
-              d: path("M 0,700 C 0,700 0,525 0,525 C 66.24871794871794,489.1051282051282 132.49743589743588,453.2102564102564 212,463 C 291.5025641025641,472.7897435897436 384.25897435897434,528.2641025641026 481,535 C 577.7410256410257,541.7358974358974 678.4666666666667,499.7333333333333 747,481 C 815.5333333333333,462.2666666666667 851.874358974359,466.80256410256413 926,491 C 1000.125641025641,515.1974358974359 1112.0358974358974,559.0564102564103 1204,568 C 1295.9641025641026,576.9435897435897 1367.9820512820513,550.9717948717948 1440,525 C 1440,525 1440,700 1440,700 Z");
-            }
-            100%{
-              d: path("M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z");
-            }
-          }</style><path d="M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667eff" class="transition-all duration-300 ease-in-out delay-150 path-2"></path></svg>
\ No newline at end of file
diff --git a/public/img/macchiatowaves.svg b/public/img/macchiatowaves.svg
new file mode 100644
index 0000000..f8dfa54
--- /dev/null
+++ b/public/img/macchiatowaves.svg
@@ -0,0 +1,96 @@
+<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590"
+  xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
+  <style>
+          .path-0{
+            animation:pathAnim-0 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-0{
+            0%{
+              d: path("M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,112 C 289.5,106 579,100 819,100 C 1059,100 1249.5,106 1440,112 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,112 C 300.5,84 601,56 841,56 C 1081,56 1260.5,84 1440,112 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,112 C 256,112.5 512,113 752,113 C 992,113 1216,112.5 1440,112 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="5%" stop-color="#1e2030"></stop>
+      <stop offset="95%" stop-color="#181926"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
+  <style>
+          .path-1{
+            animation:pathAnim-1 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-1{
+            0%{
+              d: path("M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,262 C 191,240.5 382,219 622,219 C 862,219 1151,240.5 1440,262 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,262 C 305.5,268.5 611,275 851,275 C 1091,275 1265.5,268.5 1440,262 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,262 C 286,273.5 572,285 812,285 C 1052,285 1246,273.5 1440,262 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="5%" stop-color="#1e2030"></stop>
+      <stop offset="95%" stop-color="#181926"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
+  <style>
+          .path-2{
+            animation:pathAnim-2 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-2{
+            0%{
+              d: path("M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,412 C 218,423 436,434 676,434 C 916,434 1178,423 1440,412 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,412 C 264,431 528,450 768,450 C 1008,450 1224,431 1440,412 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,412 C 245.5,439.5 491,467 731,467 C 971,467 1205.5,439.5 1440,412 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="5%" stop-color="#1e2030"></stop>
+      <stop offset="95%" stop-color="#181926"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
+</svg>
\ No newline at end of file
diff --git a/public/img/mochawaves.svg b/public/img/mochawaves.svg
new file mode 100644
index 0000000..b4f78a4
--- /dev/null
+++ b/public/img/mochawaves.svg
@@ -0,0 +1,93 @@
+<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590"
+    xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
+    <style>
+          .path-0{
+            animation:pathAnim-0 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-0{
+            0%{
+              d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,112 C 166.53333333333336,123.60000000000001 333.0666666666667,135.20000000000002 475,129 C 616.9333333333333,122.79999999999998 734.2666666666667,98.79999999999998 891,93 C 1047.7333333333333,87.20000000000002 1243.8666666666668,99.60000000000001 1440,112 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,112 C 178.66666666666669,132.53333333333333 357.33333333333337,153.06666666666666 507,164 C 656.6666666666666,174.93333333333334 777.3333333333333,176.26666666666668 928,166 C 1078.6666666666667,155.73333333333332 1259.3333333333335,133.86666666666667 1440,112 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,112 C 152,116.4 304,120.8 482,107 C 660,93.2 864,61.199999999999996 1028,59 C 1192,56.800000000000004 1316,84.4 1440,112 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+    <defs>
+        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="5%" stop-color="#181825"></stop>
+            <stop offset="95%" stop-color="#11111b"></stop>
+        </linearGradient>
+    </defs>
+    <path d="M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
+    <style>
+          .path-1{
+            animation:pathAnim-1 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-1{
+            0%{
+              d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,262 C 111.46666666666664,236.13333333333333 222.93333333333328,210.26666666666668 393,211 C 563.0666666666667,211.73333333333332 791.7333333333333,239.06666666666666 976,252 C 1160.2666666666667,264.93333333333334 1300.1333333333332,263.4666666666667 1440,262 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,262 C 164.66666666666663,293.3333333333333 329.33333333333326,324.66666666666663 508,314 C 686.6666666666667,303.33333333333337 879.3333333333335,250.66666666666669 1037,235 C 1194.6666666666665,219.33333333333331 1317.3333333333333,240.66666666666666 1440,262 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,262 C 122.13333333333333,279.4666666666667 244.26666666666665,296.93333333333334 392,303 C 539.7333333333333,309.06666666666666 713.0666666666668,303.73333333333335 892,295 C 1070.9333333333332,286.26666666666665 1255.4666666666667,274.1333333333333 1440,262 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+    <defs>
+        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="5%" stop-color="#181825"></stop>
+            <stop offset="95%" stop-color="#11111b"></stop>
+        </linearGradient>
+    </defs>
+    <path d="M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
+    <style>
+          .path-2{
+            animation:pathAnim-2 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-2{
+            0%{
+              d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
+            }
+            25%{
+              d: path("M 0,600 L 0,412 C 186.93333333333334,388 373.8666666666667,364 512,368 C 650.1333333333333,372 739.4666666666667,404 886,416 C 1032.5333333333333,428 1236.2666666666667,420 1440,412 L 1440,600 L 0,600 Z");
+            }
+            50%{
+              d: path("M 0,600 L 0,412 C 139.33333333333331,406.4 278.66666666666663,400.8 438,405 C 597.3333333333334,409.2 776.6666666666667,423.20000000000005 947,426 C 1117.3333333333333,428.79999999999995 1278.6666666666665,420.4 1440,412 L 1440,600 L 0,600 Z");
+            }
+            75%{
+              d: path("M 0,600 L 0,412 C 168.66666666666663,412.1333333333333 337.33333333333326,412.2666666666667 491,413 C 644.6666666666667,413.7333333333333 783.3333333333335,415.06666666666666 939,415 C 1094.6666666666665,414.93333333333334 1267.3333333333333,413.4666666666667 1440,412 L 1440,600 L 0,600 Z");
+            }
+            100%{
+              d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
+            }
+          }</style>
+    <defs>
+        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="5%" stop-color="#181825"></stop>
+            <stop offset="95%" stop-color="#11111b"></stop>
+        </linearGradient>
+    </defs>
+    <path d="M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/Dropdown.astro b/src/components/Dropdown.astro
index 355006d..974312d 100644
--- a/src/components/Dropdown.astro
+++ b/src/components/Dropdown.astro
@@ -22,11 +22,12 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         box-shadow: 4px 6px 15px 0px #0e0e0e;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
+        position: relative;
     }
     .dropdown-toggle {
         background-color: #2e2e2e;
         border: none;
-        color: white;
+        color: var(--text-color);
         padding: 12px 16px;
         font-size: 16px;
         cursor: pointer;
@@ -46,13 +47,13 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
         background-color: #212121;
-        position: fixed;
-        width: 140px;
+        position: absolute;
+        width: 100%;
     }
     .dropdown-item {
         border-bottom: 1px solid #4d4d4d;
         padding: 10px;
-        color: white;
+        color: var(--text-color);
         cursor: pointer;
     }
     .dropdown-item:nth-last-child(1) {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ced91c8..117c459 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -23,9 +23,18 @@
 </div>
 
 <style>
+:root {
+    --footer-svg-url: url("/img/aluwaves.svg");
+}
+[data-theme="mocha"] {
+    --footer-svg-url: url("/img/mochawaves.svg");
+}
+[data-theme="macchiato"] {
+    --footer-svg-url: url("/img/macchiatowaves.svg");
+}
 #footer {
     padding-top: 20vh;
-    background-image: url("/img/purplewaves.svg");
+    background-image: var(--footer-svg-url);
     background-repeat: no-repeat;
     background-size: 100vw auto;
     width: 100%;
@@ -62,19 +71,19 @@
 
 .footerbrand div a {
     font-family: 'Varela Round', sans-serif;
-    color: #fff !important;
+    color: var(--text-color) !important;
     font-size: 20px;
     font-weight: bold;
 }
 
 .footerbrand p {
     font-family: 'Varela Round', sans-serif;
-    color: #fff;
+    color: var(--text-color);
 }
 
 .footerbrand a {
     font-family: 'Varela Round', sans-serif;
-    color: #fff;
+    color: var(--text-color);
 }
 
 .footerlist-heading {
@@ -93,12 +102,12 @@
 }
 
 .footerlist ul > li > a {
-    color: #fff;
+    color: var(--text-color);
 }
 
 .footerlist > * {
     font-family: 'Varela Round', sans-serif;
-    color: #fff;
+    color: var(--text-color);
 }
 
 .footersocials {
diff --git a/src/components/GameItem.astro b/src/components/GameItem.astro
index 50f14a0..922bbfe 100644
--- a/src/components/GameItem.astro
+++ b/src/components/GameItem.astro
@@ -22,7 +22,7 @@ const { name, image, slugName } = Astro.props;
 }
 
 .game-title {
-    color: white;
+    color: var(--text-color);
     text-align: center;
     max-width: 125px;
 }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1dc4540..b05c4a0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -20,7 +20,7 @@
 }
 
 .title-background {
-    background-color: #7900e1;
+    background-color: var(--accent-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -42,14 +42,14 @@
 }
 
 .header-item {
-    color: #fff;
+    color: var(--text-color);
     text-decoration: none;
     font-size: 22px;
     transition: 250ms ease-in-out;
 }
 
 .header-item:hover {
-    color: #c0c0c0;
+    color: var(--text-color-accent);
 }
 
 @media only screen and (max-width: 1003px) {
diff --git a/src/components/Input.astro b/src/components/Input.astro
index 07553ae..b2c38c3 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -19,7 +19,7 @@ interface Props {
         border: 4px solid #E0E0E0;
         border-radius: 10px;
         background-color: #1b1b1b;
-        color: white;
+        color: var(--text-color);
         transition: 100ms ease-in-out;
     }
     input:focus {
diff --git a/src/components/SettingsContent/CustomizationTab.astro b/src/components/SettingsContent/CustomizationTab.astro
new file mode 100644
index 0000000..e0bad45
--- /dev/null
+++ b/src/components/SettingsContent/CustomizationTab.astro
@@ -0,0 +1,11 @@
+---
+    import Dropdown from "../Dropdown.astro"
+    import Input from "../Input.astro"
+---
+
+<div class="settings-container">
+    <div class="setting__theme">
+        <label class="setting-label">Theme</label>
+        <Dropdown buttonNameDefault="Alu" dropdownList={["Alu", "Macchiato", "Mocha"]}, id="dropdown__selected-theme" />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro
new file mode 100644
index 0000000..c8a5540
--- /dev/null
+++ b/src/components/SettingsContent/ProxyTab.astro
@@ -0,0 +1,27 @@
+---
+    import Input from "../Input.astro"
+    import Dropdown from "../Dropdown.astro"
+---
+
+<div class="settings-container">
+    <div class="setting__selected-proxy">
+      <label class="setting-label">Selected Proxy</label>
+      <Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy" />
+    </div>
+    <div class="setting__search-engine">
+      <label class="setting-label">Search Engine</label>
+      <Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine" />
+    </div>
+    <div class="setting__open_with">
+      <label class="setting-label">Open With</label>
+      <Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with" />
+    </div>
+    <div class="setting__bare-url">
+      <label class="setting-label">Bare URL</label>
+      <Input inputName="bare-url" />
+    </div>
+</div>
+<div class="setting__searxng-url">
+    <label for="searxng-url-input" class="setting-label">Searxng URL</label>
+    <Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
+</div>
\ No newline at end of file
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index 7ee02e3..28740f6 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -1,44 +1,24 @@
 ---
-import Dropdown from "./Dropdown.astro";
-import Input from "./Input.astro";
+import ProxyTab from "./SettingsContent/ProxyTab.astro";
+import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
 ---
 
 <div class="content-hidden">
     <div id="content-setting-tab-proxy">
-        <h1 style="color: white;">Proxy</h1>
-        <div class="settings-container">
-          <div class="setting__selected-proxy">
-            <p class="setting-label">Selected Proxy</p>
-            <Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
-          </div>
-          <div class="setting__search-engine">
-            <p class="setting-label">Search Engine</p>
-            <Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine"></Dropdown>
-          </div>
-          <div class="setting__open_with">
-            <p class="setting-label">Open With</p>
-            <Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with"></Dropdown>
-          </div>
-          <div class="setting__bare-url">
-            <p class="setting-label">Bare URL</p>
-            <Input inputName="bare-url" />
-          </div>
-        </div>
-        <div class="setting__searxng-url">
-          <div class="setting-label">Searxng URL</div>
-          <Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
-        </div>
+        <h1 class="content-setting-header">Proxy</h1>
+        <ProxyTab />
+
     </div>
     <div id="content-setting-tab-customization">
-        <h1 style="color: white;">Customization</h1>
-        <p style="color: white;">Customization settings</p>
+        <h1 class="content-setting-header">Customization</h1>
+        <CustomizationTab />
     </div>
     <div id="content-setting-tab-cloaking">
-        <h1 style="color: white;">Cloaking</h1>
+        <h1 class="content-setting-header">Cloaking</h1>
         <p style="color: white;">Cloaking settings</p>
     </div>
     <div id="content-setting-tab-credits">
-        <h1 style="color: white;">Credits</h1>
+        <h1 class="content-setting-header">Credits</h1>
         <p style="color: white;">Credits settings</p>
     </div>
 </div>
@@ -120,6 +100,8 @@ import Input from "./Input.astro";
     function determineListener(event) {
       if (event.detail == "setting-tab-proxy") {
         addDropdownListener()
+      } else if (event.detail == "setting-tab-customization") {
+        addDropdownListener()
       }
     }
 
@@ -167,6 +149,23 @@ import Input from "./Input.astro";
 
     loadContent('setting-tab-proxy')
 
+    function setupCustomizationSettings() {
+      applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
+      let dropdown = document.getElementById('dropdown__selected-theme-menu')
+      applyDropdownEventListeners(dropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
+    }
+
+    function changeTheme() {
+      let theme = localStorage.getItem('alu__selectedTheme')
+      if (theme) {
+        document.documentElement.setAttribute('data-theme', theme.toLowerCase())
+      }
+      let footer = document.getElementById('footer');
+      if (footer) {
+          footer.dataset.theme = theme.toLowerCase();
+      }
+    }
+
     function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
           applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
@@ -182,6 +181,7 @@ import Input from "./Input.astro";
             if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
             searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
           }
+          // Proxy settings
           applyInputListeners(bareUrlInput, 'alu__bareUrl')
           applyInputListeners(searxngUrlInput, 'alu__searxngUrl')
           applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
@@ -193,6 +193,8 @@ import Input from "./Input.astro";
             bareUrlInput.value = '/bare/'
           }
           checkSearxng();
+        } else if (event.detail == "setting-tab-customization") {
+          setupCustomizationSettings();
         }
     }
 
@@ -209,7 +211,7 @@ import Input from "./Input.astro";
 
     document.addEventListener('setting-tabLoad', setupSettings)
 </script>
-<style>
+<style is:global>
 .content-hidden {
     display: none;
 }
@@ -223,9 +225,19 @@ import Input from "./Input.astro";
     position: relative;
     z-index: 2;
 }
+.content-setting-header {
+  color: var(--text-color);
+}
 .setting-label {
-  color: white;
+  color: var(--text-color);
   font-size: 18px;
+  /* annoying stuff with label elements. */
+  display: block;
+  opacity: 1.0;
+  margin-block: 1em;
+  margin-inline: 0;
+  user-select: none;
+  width: 100%;
 }
 
 .setting__searxng-url {
diff --git a/src/components/ThemeLoader.astro b/src/components/ThemeLoader.astro
new file mode 100644
index 0000000..47fc5f8
--- /dev/null
+++ b/src/components/ThemeLoader.astro
@@ -0,0 +1,18 @@
+<script>
+    function switchTheme() {
+        let currentTheme = localStorage.getItem("alu__selectedTheme")
+
+        if (currentTheme) {
+            document.documentElement.setAttribute("data-theme", currentTheme.toLowerCase());
+            let footer = document.getElementById('footer');
+            if (footer) {
+                footer.dataset.theme = currentTheme.toLowerCase();
+            }
+        }
+    }
+    switchTheme()
+
+
+
+    document.addEventListener('astro:after-swap', switchTheme)
+</script>
\ No newline at end of file
diff --git a/src/components/UVRegistrar.astro b/src/components/UVRegistrar.astro
index 705e28c..528d1f2 100644
--- a/src/components/UVRegistrar.astro
+++ b/src/components/UVRegistrar.astro
@@ -1,6 +1,8 @@
 <script src="/uv/uv.bundle.js" transition:persist is:inline></script>
 <script src="/uv.config.js" transition:persist is:inline></script>
-<script transition:persist>
+<script transition:persist defer>
+  // This is a hack to make sure window.__uv$config is defined, because this means everything has been.
+  if (window.__uv$config == undefined) window.location.reload();
   var form = document.querySelector('form');
   var input = document.querySelector('input');
   window.navigator.serviceWorker.register('/sw.js', {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ef8275a..c512ad7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import { ViewTransitions } from 'astro:transitions';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import ThemeLoader from '../components/ThemeLoader.astro';
 
 interface Props {
 	title: string;
@@ -23,6 +24,7 @@ const { title } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
     <ViewTransitions />
+    <ThemeLoader />
 	</head>
 	<body>
     <Header></Header>
@@ -35,6 +37,45 @@ const { title } = Astro.props;
   box-sizing: border-box;
 }
 
+body {
+  opacity: 0;
+  animation: fadeIn ease 0.15s forwards;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+:root {
+  --background-color: #080808;
+  --background-highlight: #252525;
+  --accent-color: #7900e1;
+  --text-color: #fff;
+  --text-color-accent: #c7c7c7;
+}
+
+[data-theme="mocha"] {
+  /* Catppucin Mocha theme */
+  --background-color: #1e1e2e;
+  --background-highlight: #45475a;
+  --accent-color: #181825;
+  --text-color: #cdd6f4;
+  --text-color-accent: #bac2de;
+}
+
+[data-theme="macchiato"] {
+  /* Catppuccin Macchiato Theme */
+  --background-color: #24273a;
+  --background-highlight: #494d64;
+  --accent-color: #1e2030;
+  --text-color: #cad3f5;
+  --text-color-accent: #b8c0e0;
+}
+
 body, html {
   margin: 0;
   padding: 0;
@@ -43,7 +84,7 @@ body, html {
 }
 
 body {
-  background-color: #080808;
+  background-color: var(--background-color);
   max-width: 100vw;
   margin: 0;
   display: flex;
@@ -68,7 +109,7 @@ body > * {
   }
 } */
 .title-text {
-  color: white;
+  color: var(--text-color);
   text-align: center;
 }
 ::-webkit-scrollbar {
@@ -87,10 +128,10 @@ body > * {
   position: absolute;
   z-index: 1000;
   width: 100vw;
-  height: 100vh;
+  height: 95vh;
   top: 5vh;
   border: none;
-  background-color: #080808;
+  background-color: var(--background-color);
   transition: opacity 250ms ease-in-out;
   pointer-events: none;
 }
@@ -103,8 +144,8 @@ body > * {
   align-items: center;
   padding: 0 1rem;
   height: 5vh;
-  background-color: #7900e1;
-  color: white;
+  background-color: var(--accent-color);
+  color: var(--text-color);
   position: fixed;
   top: 0;
   left: 0;
@@ -117,8 +158,8 @@ body > * {
   padding: 5px;
   padding-inline: 40px;
   border: none;
-  background-color: #252525;
-  color: #c7c7c7;
+  background-color: var(--background-highlight);
+  color: var(--text-color-accent);
   border-radius: 15px;
   cursor: pointer;
 }
diff --git a/src/pages/games.astro b/src/pages/games.astro
index 82df052..44456e8 100644
--- a/src/pages/games.astro
+++ b/src/pages/games.astro
@@ -65,7 +65,7 @@ import GameItem from "../components/GameItem.astro";
 <style>
   
 .grid {
-    color: #fff;
+    color: var(--text-color);
     margin-top: -10px;
     height: max-content;
     width: calc(100% - 60px);
diff --git a/src/pages/settings.astro b/src/pages/settings.astro
index ec0bf7c..365475e 100644
--- a/src/pages/settings.astro
+++ b/src/pages/settings.astro
@@ -2,13 +2,13 @@
 import Switch from "../components/Switch.astro";
 import SettingsTablist from "../components/SettingsTablist.astro";
 import Layout from "../layouts/Layout.astro";
+import ThemeLoader from "../components/ThemeLoader.astro";
 
 ---
 
 <Layout title="Settings | Alu">
     <h1 class="title-text">Settings</h1>
     <SettingsTablist />
-
 </Layout>
 
 <style>