From def80333da1a52c415b0e3cf510c37ea9531257f Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Tue, 16 Dec 2025 22:34:34 +0000
Subject: [PATCH] feat: page style changes

- use CSS variables for colors
- attempt to fix mobile support (tooltips are still kinda broken)
- use 1 decimal place for uptime percentages
---
 .gitattributes               |   2 +-
 internal/database.go         |   2 +-
 www/error.html               |  16 ++
 www/index.html               | 309 ++++++++++++++++++++++-------------
 www/offline.html             |  18 +-
 www/styles.css               |  19 ---
 www/themes/color-dark.css    | 168 ++++---------------
 www/themes/color.css         | 164 ++++---------------
 www/themes/ctp-frappe.css    | 173 ++++----------------
 www/themes/ctp-latte.css     | 173 ++++----------------
 www/themes/ctp-macchiato.css | 173 ++++----------------
 www/themes/ctp-mocha.css     | 173 ++++----------------
 www/themes/monochrome.css    | 156 ++++--------------
 13 files changed, 449 insertions(+), 1097 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index 3f03919..cfb68b3 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1 @@
-themes/*.css linguist-detectable=false
\ No newline at end of file
+www/themes/*.css linguist-detectable=false
\ No newline at end of file
diff --git a/internal/database.go b/internal/database.go
index 95eae4f..88efda1 100644
--- a/internal/database.go
+++ b/internal/database.go
@@ -238,7 +238,7 @@ func calculateUptimePercentages(serviceIndex int) {
 			return 0.0
 		}
 
-		return math.Floor(float64(online)/float64(total)*100*100) / 100
+		return math.Floor(float64(online)/float64(total)*100*10) / 10
 	}
 
 	service.MinuteUptime = calculateUptime(service.MinuteTimeline)
diff --git a/www/error.html b/www/error.html
index 4d2a9ef..30419b0 100644
--- a/www/error.html
+++ b/www/error.html
@@ -9,9 +9,25 @@
 		<link rel="stylesheet" href="/styles.css" />
 		<style>
 			body {
+				background-color: #fafafa;
+				font-family: "Inter", sans-serif;
+				height: 100vh;
+				margin: 0;
+				display: flex;
+				justify-content: center;
 				align-items: center;
 			}
 
+			body::before {
+				content: "";
+				position: fixed;
+				inset: 0;
+				background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+				background-size: 48px 48px;
+				background-position: center;
+				pointer-events: none;
+			}
+
 			main {
 				display: flex;
 				flex-direction: column;
diff --git a/www/index.html b/www/index.html
index 6b88f81..c23e76e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -8,10 +8,59 @@
 		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 		<link rel="stylesheet" href="/styles.css" />
 		<style>
+			:root {
+				--bg-body: #fafafa;
+				--bg-main: white;
+				--text-primary: black;
+				--text-secondary: rgba(0, 0, 0, 0.6);
+
+				--border-primary: black;
+				--border-secondary: rgba(0, 0, 0, 0.5);
+				--border-subtle: rgba(0, 0, 0, 0.1);
+				--border-dotted: rgba(0, 0, 0, 0.1);
+				--border-outline: rgba(0, 0, 0, 0.04);
+
+				--accent-primary: black;
+				--accent-secondary: white;
+				--accent-tertiary: rgba(0, 0, 0, 0.4);
+				--accent-muted: rgba(0, 0, 0, 0.3);
+				--accent-faded: rgba(0, 0, 0, 0.2);
+
+				--status-online: black;
+				--status-online-border: unset;
+				--status-degraded: white;
+				--status-degraded-pattern: black;
+				--status-degraded-border: unset;
+				--status-offline: white;
+				--status-offline-x: black;
+				--status-offline-border: unset;
+				--status-unknown: rgb(235, 235, 235);
+
+				--hover-bg: rgba(0, 0, 0, 0.03);
+				--hover-text: black;
+				--selected-bg: rgba(0, 0, 0, 0.08);
+
+				--tooltip-bg: black;
+				--tooltip-text: white;
+				--tooltip-border: transparent;
+
+				--shadow-color: rgba(0, 0, 0, 0.1);
+			}
+
 			* {
 				box-sizing: border-box;
 			}
 
+			body {
+				background-color: var(--bg-body);
+				color: var(--text-primary);
+				font-family: "Inter", sans-serif;
+				height: 100vh;
+				margin: 0;
+				display: flex;
+				justify-content: center;
+			}
+
 			main {
 				position: relative;
 				display: flex;
@@ -19,11 +68,11 @@
 				width: 100%;
 				height: max-content;
 				min-height: 100%;
-				max-width: 40rem;
+				max-width: 39.625rem;
 				padding: 4rem 2rem 1.5rem;
-				background-color: white;
+				background-color: var(--bg-main);
 				z-index: 1;
-				outline: 1px solid rgba(0, 0, 0, 0.04);
+				outline: 1px solid var(--border-outline);
 			}
 
 			h1 {
@@ -31,11 +80,12 @@
 				margin-top: 1rem;
 				margin-bottom: 1rem;
 				font-size: 1.5rem;
+				color: var(--text-primary);
 			}
 
 			hr {
 				border: 0;
-				border-bottom: 2px dotted rgba(0, 0, 0, 0.1);
+				border-bottom: 2px dotted var(--border-dotted);
 			}
 
 			p {
@@ -47,6 +97,7 @@
 				display: flex;
 				align-items: end;
 				height: 4.375rem;
+				color: var(--accent-primary);
 			}
 
 			#emoticon span {
@@ -55,8 +106,8 @@
 			}
 
 			#overall-status {
-				background-color: black;
-				color: white;
+				background-color: var(--accent-primary);
+				color: var(--accent-secondary);
 				padding: 0.5rem;
 				font-size: 0.875rem;
 				width: fit-content;
@@ -64,7 +115,7 @@
 
 			#pattern {
 				flex-grow: 1;
-				background-image: repeating-linear-gradient(-45deg, #000, #000 10px, transparent 0px, transparent 20px);
+				background-image: repeating-linear-gradient(-45deg, var(--accent-primary), var(--accent-primary) 10px, transparent 0px, transparent 20px);
 			}
 
 			#caption {
@@ -76,7 +127,7 @@
 			}
 
 			#last-updated {
-				color: rgba(0, 0, 0, 0.6);
+				color: var(--text-secondary);
 				font-size: 0.875rem;
 				margin: 0;
 			}
@@ -118,7 +169,7 @@
 				margin: 0;
 				font-size: 1.25rem;
 				text-decoration: none;
-				color: black;
+				color: var(--text-primary);
 				font-weight: 600;
 
 				display: flex;
@@ -128,11 +179,11 @@
 
 			.service-name svg {
 				height: 1rem;
-				color: rgba(0, 0, 0, 0.2);
+				color: var(--accent-faded);
 			}
 
 			.service-name:hover svg {
-				color: rgba(0, 0, 0, 0.8);
+				color: var(--accent-primary);
 			}
 
 			.status {
@@ -157,20 +208,22 @@
 			.bars > div {
 				display: flex;
 				justify-content: center;
-				width: calc(100% / 30);
+				width: 1.188rem;
 				height: 2.5rem;
-				position: relative;
+				flex-shrink: 0;
 			}
 
 			.status-bar {
 				background-color: transparent;
 				border: 1px solid black;
-				width: calc(100% - 0.188rem);
+				width: 1rem;
 				height: 100%;
-				transition: transform 100ms ease-in-out;
-				position: relative;
+				transition: transform 70ms ease-out;
 				z-index: 0;
 				border-radius: 3px;
+
+				/* this weird hack fixes some inconsistencies  */
+				transform: translateX(0px);
 			}
 
 			.bars > div:hover .status-bar {
@@ -183,14 +236,15 @@
 
 				position: absolute;
 				bottom: 100%;
-				left: 50%;
+				left: var(--tooltip-left, 50%);
 
 				margin-bottom: 0.5rem;
 				font-family: "JetBrains Mono", monospace;
 				font-weight: 600;
 
-				background-color: black;
-				color: white;
+				background-color: var(--tooltip-bg);
+				color: var(--tooltip-text);
+				border: 1px solid var(--tooltip-border);
 				padding: 0.45rem 0.5rem;
 				border-radius: 0.25rem;
 				font-size: 0.75rem;
@@ -201,7 +255,8 @@
 			}
 
 			.status-bar.Online {
-				background-color: black;
+				background-color: var(--status-online);
+				border-color: var(--status-online-border);
 			}
 
 			.status-bar.Unknown {
@@ -213,16 +268,32 @@
 				width: 6px;
 				height: 6px;
 				border-radius: 100%;
-				background: rgb(235, 235, 235);
+				background: var(--status-unknown);
+				border-color: var(--status-unknown-border);
 				position: absolute;
 				inset: 0;
 				margin: auto;
 			}
 
 			.status-bar.Degraded {
-				background-color: white;
-				background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
+				background-color: var(--status-degraded);
+				background-image: linear-gradient(
+					45deg,
+					var(--status-degraded-pattern) 25%,
+					transparent 25%,
+					transparent 50%,
+					var(--status-degraded-pattern) 50%,
+					var(--status-degraded-pattern) 75%,
+					transparent 75%,
+					transparent
+				);
 				background-size: 8px 8px;
+				border-color: var(--status-degraded-border);
+			}
+
+			.status-bar.Offline {
+				background-color: var(--status-offline);
+				border-color: var(--status-offline-border);
 			}
 
 			.status-bar.Offline::before {
@@ -234,11 +305,24 @@
 				justify-content: center;
 				font-size: 2rem;
 				font-weight: 700;
-				color: black;
+				color: var(--status-offline-x);
 				pointer-events: none;
 				overflow: hidden;
 			}
 
+			/* only show when screen is small */
+			.bars-gradient {
+				display: none !important;
+				position: absolute !important;
+				left: 0;
+				bottom: 0;
+				width: 2.5rem !important;
+				height: 3rem !important;
+				background: linear-gradient(to left, transparent, var(--bg-main));
+				pointer-events: none;
+				z-index: 10;
+			}
+
 			.bars-footer {
 				position: relative;
 				display: flex;
@@ -246,7 +330,7 @@
 				font-size: 0.75rem;
 				font-family: "JetBrains Mono", monospace;
 				margin-top: 0.5rem;
-				color: rgba(0, 0, 0, 0.4);
+				color: var(--accent-muted);
 				width: 100%;
 			}
 
@@ -256,15 +340,15 @@
 
 			.bars-footer hr {
 				flex-grow: 1;
-				border-color: rgba(0, 0, 0, 0.1);
+				border-color: var(--border-subtle);
 			}
 
 			.uptime-percentage {
 				position: absolute;
 				left: 50%;
 				transform: translateX(-50%);
-				background-color: white;
-				color: rgba(0, 0, 0, 0.5);
+				background-color: var(--bg-main);
+				color: var(--accent-tertiary);
 			}
 
 			footer {
@@ -275,13 +359,13 @@
 			}
 
 			footer a {
-				color: rgba(0, 0, 0, 0.3);
+				color: var(--accent-muted);
 				font-size: 0.875rem;
 				text-decoration: none;
 			}
 
 			footer a:hover {
-				color: black;
+				color: var(--accent-primary);
 			}
 
 			.combobox {
@@ -299,8 +383,8 @@
 				font-family: "Inter", sans-serif;
 				font-size: 0.825rem;
 
-				background-color: white;
-				border: 1px solid rgba(0, 0, 0, 0.5);
+				background-color: var(--bg-main);
+				border: 1px solid var(--border-secondary);
 				border-radius: 4px;
 				outline: none;
 				padding: 0;
@@ -308,17 +392,22 @@
 
 				cursor: pointer;
 				transition: background-color 100ms ease;
+				color: var(--text-primary);
+			}
+
+			.combobox-trigger.open {
+				border-color: var(--border-primary);
 			}
 
 			.combobox-trigger:hover {
-				background-color: rgba(0, 0, 0, 0.03);
+				background-color: var(--hover-bg);
 			}
 
 			.combobox-trigger div {
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				border-left: 1px solid rgba(0, 0, 0, 0.5);
+				border-left: 1px solid var(--border-secondary);
 			}
 
 			.combobox-trigger.open div svg {
@@ -328,13 +417,13 @@
 			.combobox-dropdown {
 				position: absolute;
 				width: 100%;
-				background-color: white;
-				border: 1px solid black;
+				background-color: var(--bg-main);
+				border: 1px solid var(--border-primary);
 				display: none;
 				flex-direction: column;
 				z-index: 100;
 				border-radius: 4px;
-				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+				box-shadow: 0 10px 25px var(--shadow-color);
 			}
 
 			.combobox-dropdown.open {
@@ -344,103 +433,77 @@
 			.combobox-option {
 				padding: 0.35rem 0.5rem;
 				cursor: pointer;
-				color: black;
+				color: var(--text-primary);
 				font-size: 0.825rem;
 				text-decoration: none;
 			}
 
 			.combobox-option.selected {
-				background-color: rgba(0, 0, 0, 0.08);
+				background-color: var(--selected-bg);
 			}
 
 			.combobox-option:hover {
-				background-color: black;
-				color: white;
+				background-color: var(--accent-primary);
+				color: var(--accent-secondary);
 			}
 
-			@media (max-width: 640px) {
+			@media (min-width: 39.625rem) {
+				body::before {
+					content: "";
+					position: fixed;
+					inset: 0;
+					background-image: linear-gradient(90deg, var(--border-outline) 1px, transparent 1px),
+						linear-gradient(var(--border-outline) 1px, transparent 1px);
+					background-size: 48px 48px;
+					background-position: center;
+					pointer-events: none;
+				}
+			}
+
+			@media (max-width: 39.625rem) {
+				body {
+					background-color: var(--bg-main);
+				}
+
 				main {
-					padding: 3rem 1rem 2rem;
+					width: 100%;
 				}
 
-				#emoticon {
-					font-size: 2.5rem;
+				.bars-container {
+					overflow-x: hidden;
+					padding-top: 3rem;
+					margin-top: -3rem;
 				}
 
-				h1 {
-					font-size: 1.25rem;
+				.bars-gradient {
+					display: block !important;
+				}
+			}
+
+			@media (max-width: 30rem) {
+				main {
+					padding: 4rem 1rem 1.5rem;
 				}
 
-				h2 {
-					font-size: 1.125rem;
-				}
-
-				#overall-status {
-					font-size: 0.8125rem;
-				}
-
-				.status {
-					font-size: 0.6875rem;
-				}
-
-				.bars {
-					gap: 0.15rem;
-				}
-
-				.status-bar {
-					height: 2rem;
-				}
-
-				.legend-item {
-					font-size: 0.6875rem;
-				}
-
-				.legend-item .status-bar {
-					width: 0.875rem;
-					height: 0.875rem;
-				}
-
-				.bars-footer {
-					font-size: 0.6875rem;
+				#caption {
+					align-items: start;
 				}
 
 				#legend {
-					gap: 0.75rem;
-				}
-			}
-
-			@media (max-width: 480px) {
-				main {
-					padding: 2rem 0.875rem 1.5rem;
+					gap: 0.5rem;
+					flex-direction: column;
+					margin-top: 0.25rem;
 				}
 
-				#emoticon {
-					font-size: 2rem;
+				.bars > div:hover .status-bar::after {
+					position: fixed;
+					left: 50vw;
+					transform: translateX(-50%);
+					bottom: 4rem;
 				}
 
-				h1 {
-					font-size: 1.125rem;
-				}
-
-				h2 {
-					font-size: 1rem;
-				}
-
-				.bars {
-					gap: 0.125rem;
-				}
-
-				.status-bar {
-					height: 1.75rem;
-				}
-
-				.status-bar:hover::after {
-					font-size: 0.6rem;
-					padding: 0.35rem 0.4rem;
-				}
-
-				#services {
-					gap: 2rem;
+				.uptime-percentage {
+					transform: translateX(0%);
 				}
 			}
 		</style>
@@ -535,6 +598,8 @@
 					<div class="bars-container">
 						{{ if eq $.View "minutes" }}
 						<div class="bars">
+							<div class="bars-gradient"></div>
+
 							{{ range $timelineIndex, $timelineStatus := $serviceStatus.MinuteTimeline }}
 							<div>
 								<div
@@ -546,13 +611,15 @@
 						</div>
 
 						<div class="bars-footer">
-							<span>30 minutes ago</span>
+							<span class="timeline-length">30 minutes ago</span>
 							<hr />
 							<span class="uptime-percentage">{{ $serviceStatus.MinuteUptime }}% uptime</span>
 							<span>now</span>
 						</div>
 						{{ else if eq $.View "hours" }}
 						<div class="bars">
+							<div class="bars-gradient"></div>
+
 							{{ range $timelineIndex, $timelineStatus := $serviceStatus.HourTimeline }}
 							<div>
 								<div
@@ -564,7 +631,7 @@
 						</div>
 
 						<div class="bars-footer">
-							<span>24 hours ago</span>
+							<span class="timeline-length">24 hours ago</span>
 							<hr />
 							<span class="uptime-percentage">{{ $serviceStatus.HourUptime }}% uptime</span>
 							<span>now</span>
@@ -572,6 +639,8 @@
 
 						{{ else }}
 						<div class="bars">
+							<div class="bars-gradient"></div>
+
 							{{ range $timelineIndex, $timelineStatus := $serviceStatus.DayTimeline }}
 							<div>
 								<div
@@ -583,7 +652,7 @@
 						</div>
 
 						<div class="bars-footer">
-							<span>30 days ago</span>
+							<span class="timeline-length">30 days ago</span>
 							<hr />
 							<span class="uptime-percentage">{{ $serviceStatus.DayUptime }}% uptime</span>
 							<span>today</span>
@@ -620,6 +689,20 @@
 		</main>
 
 		<script>
+			// responsiveness
+			const timelineLengthTexts = document.querySelectorAll(".timeline-length");
+
+			function resizeUpdate() {
+				timelineLengthTexts.forEach((t) => {
+					const amountOfBars = Math.ceil(t.parentElement.clientWidth / 19); // each bar is 19px
+					t.textContent = `${amountOfBars} {{ .View }} ago`;
+				});
+			}
+
+			resizeUpdate();
+			window.addEventListener("resize", resizeUpdate);
+
+			// last updated text
 			const lastUpdatedText = document.querySelector("#last-updated");
 
 			function update() {
diff --git a/www/offline.html b/www/offline.html
index 750e2b8..1c8915f 100644
--- a/www/offline.html
+++ b/www/offline.html
@@ -6,12 +6,28 @@
 		<title>website offline</title>
 
 		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-		<link rel="stylesheet" href="/styles.css" />
+		<link rel="stylesheet" href="/fonts.css" />
 		<style>
 			body {
+				background-color: #fafafa;
+				font-family: "Inter", sans-serif;
+				height: 100vh;
+				margin: 0;
+				display: flex;
+				justify-content: center;
 				align-items: center;
 			}
 
+			body::before {
+				content: "";
+				position: fixed;
+				inset: 0;
+				background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+				background-size: 48px 48px;
+				background-position: center;
+				pointer-events: none;
+			}
+
 			main {
 				display: flex;
 				flex-direction: column;
diff --git a/www/styles.css b/www/styles.css
index f399424..d0a1727 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -60,22 +60,3 @@
 	font-weight: 600;
 	src: url("/fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2"), url("/fonts/jetbrains-mono-v24-latin-600.ttf") format("truetype");
 }
-
-body {
-	background-color: #fafafa;
-	font-family: "Inter", sans-serif;
-	height: 100vh;
-	margin: 0;
-	display: flex;
-	justify-content: center;
-}
-
-body::before {
-	content: "";
-	position: fixed;
-	inset: 0;
-	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
-	background-size: 48px 48px;
-	background-position: center;
-	pointer-events: none;
-}
diff --git a/www/themes/color-dark.css b/www/themes/color-dark.css
index 0c16e99..f9d67d7 100644
--- a/www/themes/color-dark.css
+++ b/www/themes/color-dark.css
@@ -1,146 +1,40 @@
 /* Colored Dark Mode Theme */
-body {
-	background-color: #0a0f1a;
-	color: #e0e7ff;
-}
+:root {
+	--bg-body: #0a0f1a;
+	--bg-main: #111827;
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
-		linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px);
-}
+	--text-primary: #e2e8f0;
+	--text-secondary: rgba(224, 231, 255, 0.7);
 
-main {
-	background-color: #111827;
-	outline: 1px solid rgba(59, 130, 246, 0.15);
-}
+	--border-primary: rgba(59, 130, 246, 0.15);
+	--border-secondary: rgba(71, 85, 105, 0.6);
+	--border-subtle: rgba(224, 231, 255, 0.15);
+	--border-dotted: rgba(224, 231, 255, 0.2);
+	--border-outline: rgba(59, 130, 246, 0.15);
 
-hr {
-	border-bottom: 2px dotted rgba(224, 231, 255, 0.2);
-}
+	--accent-primary: #2563eb;
+	--accent-secondary: #e0e7ff;
+	--accent-tertiary: rgba(96, 165, 250, 0.8);
+	--accent-muted: rgba(59, 130, 246, 0.4);
+	--accent-faded: rgba(59, 130, 246, 0.4);
 
-#emoticon {
-	color: #60a5fa;
-}
+	--status-online: #10b981;
+	--status-online-border: #059669;
+	--status-degraded: #f59e0b;
+	--status-degraded-pattern: rgba(0, 0, 0, 0.2);
+	--status-degraded-border: #d97706;
+	--status-offline: #dc2626;
+	--status-offline-x: #fef2f2;
+	--status-offline-border: #b91c1c;
+	--status-unknown: #475569;
 
-#overall-status {
-	background-color: #1e40af;
-	color: #e0e7ff;
-}
+	--hover-bg: #334155;
+	--hover-text: white;
+	--selected-bg: rgba(59, 130, 246, 0.15);
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #1e40af, #1e40af 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: #1e293b;
+	--tooltip-text: #f1f5f9;
+	--tooltip-border: rgba(38, 89, 172, 0.2);
 
-#last-updated {
-	color: rgba(224, 231, 255, 0.7);
-}
-
-.service-name {
-	color: #e2e8f0;
-}
-
-.service-name svg {
-	color: rgba(59, 130, 246, 0.4);
-}
-
-.service-name:hover svg {
-	color: rgba(96, 165, 250, 0.9);
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: #1e293b;
-	color: #f1f5f9;
-	border: 1px solid rgba(38, 89, 172, 0.2);
-}
-
-.status-bar.Online {
-	background-color: #10b981;
-	border-color: #059669;
-}
-
-.status-bar.Unknown::before {
-	background-color: #475569;
-}
-
-.status-bar.Degraded {
-	background-color: #f59e0b;
-	border-color: #d97706;
-	background-image: linear-gradient(
-		45deg,
-		rgba(0, 0, 0, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(0, 0, 0, 0.2) 50%,
-		rgba(0, 0, 0, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #dc2626;
-	border-color: #b91c1c;
-}
-
-.status-bar.Offline::before {
-	color: #fef2f2;
-}
-
-.bars-footer {
-	color: rgba(224, 231, 255, 0.6);
-}
-
-.bars-footer hr {
-	border-color: rgba(224, 231, 255, 0.15);
-}
-
-.uptime-percentage {
-	background-color: #111827;
-	color: rgba(96, 165, 250, 0.8);
-}
-
-footer a {
-	color: #60a5fa;
-}
-
-footer a:hover {
-	color: #93c5fd;
-}
-
-/* Combobox */
-.combobox-trigger {
-	color: #e0e7ff;
-	background-color: #1e293b;
-	border: 1px solid rgba(71, 85, 105, 0.6);
-}
-
-.combobox-trigger:hover {
-	background-color: #334155;
-	border-color: rgba(96, 165, 250, 0.5);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(71, 85, 105, 0.6);
-}
-
-.combobox-dropdown {
-	background-color: #1e293b;
-	border: 1px solid rgba(59, 130, 246, 0.4);
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-}
-
-.combobox-option {
-	color: #e2e8f0;
-}
-
-.combobox-option.selected {
-	background-color: rgba(59, 130, 246, 0.15);
-}
-
-.combobox-option:hover {
-	background-color: #2563eb;
-	color: white;
+	--shadow-color: rgba(0, 0, 0, 0.5);
 }
diff --git a/www/themes/color.css b/www/themes/color.css
index f6392e1..22d9157 100644
--- a/www/themes/color.css
+++ b/www/themes/color.css
@@ -1,142 +1,40 @@
 /* Colored Theme */
+:root {
+	--bg-body: rgba(37, 99, 235, 0.04);
+	--bg-main: #f8fafc;
 
-body {
-	background-color: rgba(37, 99, 235, 0.04);
-}
+	--text-primary: #0f172a;
+	--text-secondary: rgba(15, 23, 42, 0.6);
 
-body::before {
-	background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px), linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px);
-}
+	--border-primary: rgba(15, 23, 42, 0.4);
+	--border-secondary: rgba(15, 23, 42, 0.4);
+	--border-subtle: rgba(15, 23, 42, 0.15);
+	--border-dotted: rgba(15, 23, 42, 0.15);
+	--border-outline: rgba(37, 99, 235, 0.1);
 
-main {
-	background-color: #f8fafc;
-	outline: 1px solid rgba(37, 99, 235, 0.1);
-}
+	--accent-primary: #2563eb;
+	--accent-secondary: white;
+	--accent-tertiary: rgba(37, 99, 235, 0.75);
+	--accent-muted: rgba(37, 99, 235, 0.5);
+	--accent-faded: rgba(37, 99, 235, 0.4);
 
-hr {
-	border-bottom: 2px dotted rgba(15, 23, 42, 0.15);
-}
+	--status-online: #22c55e;
+	--status-online-border: #16a34a;
+	--status-degraded: #facc15;
+	--status-degraded-pattern: rgba(255, 255, 255, 0.4);
+	--status-degraded-border: #eab308;
+	--status-offline: #ef4444;
+	--status-offline-x: white;
+	--status-offline-border: #dc2626;
+	--status-unknown: rgba(0, 0, 0, 0.1);
 
-#emoticon {
-	color: #2563eb;
-}
+	--hover-bg: rgba(37, 99, 235, 0.05);
+	--hover-text: white;
+	--selected-bg: rgba(37, 99, 235, 0.12);
 
-#overall-status {
-	background-color: #2563eb;
-	color: white;
-}
+	--tooltip-bg: #0f172a;
+	--tooltip-text: white;
+	--tooltip-border: transparent;
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #2563eb, #2563eb 10px, transparent 0px, transparent 20px);
-}
-
-#last-updated {
-	color: rgba(15, 23, 42, 0.6);
-}
-
-.service-name {
-	color: #0f172a;
-}
-
-.service-name svg {
-	color: rgba(37, 99, 235, 0.4);
-}
-
-.service-name:hover svg {
-	color: rgba(37, 99, 235, 0.9);
-}
-
-.bars > div:hover .status-bar::after {
-	background-color: #0f172a;
-	color: white;
-}
-
-.status-bar.Online {
-	background-color: #22c55e;
-	border-color: #16a34a;
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: #16a34a;
-}
-
-.status-bar.Degraded {
-	background-color: #facc15;
-	border-color: #eab308;
-	background-image: linear-gradient(
-		45deg,
-		rgba(255, 255, 255, 0.4) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(255, 255, 255, 0.4) 50%,
-		rgba(255, 255, 255, 0.4) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #ef4444;
-	border-color: #dc2626;
-}
-
-.status-bar.Offline::before {
-	color: white;
-}
-
-.status-bar.Unknown::before {
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
-.bars-footer {
-	color: rgba(15, 23, 42, 0.45);
-}
-
-.bars-footer hr {
-	border-color: rgba(15, 23, 42, 0.15);
-}
-
-.uptime-percentage {
-	background-color: #f8fafc;
-	color: rgba(37, 99, 235, 0.75);
-}
-
-footer a {
-	color: #2563eb;
-}
-
-footer a:hover {
-	color: #1e40af;
-}
-
-.combobox-trigger {
-	background-color: #f8fafc;
-	border: 1px solid rgba(15, 23, 42, 0.4);
-}
-
-.combobox-trigger:hover {
-	background-color: rgba(37, 99, 235, 0.05);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(15, 23, 42, 0.4);
-}
-
-.combobox-dropdown {
-	background-color: #f8fafc;
-	border: 1px solid rgba(15, 23, 42, 0.4);
-}
-
-.combobox-option {
-	color: #0f172a;
-}
-
-.combobox-option.selected {
-	background-color: rgba(37, 99, 235, 0.12);
-}
-
-.combobox-option:hover {
-	background-color: #2563eb;
-	color: white;
+	--shadow-color: rgba(0, 0, 0, 0.1);
 }
diff --git a/www/themes/ctp-frappe.css b/www/themes/ctp-frappe.css
index 2c86b6c..4ae1eaf 100644
--- a/www/themes/ctp-frappe.css
+++ b/www/themes/ctp-frappe.css
@@ -1,151 +1,40 @@
 /* Catppuccin Frappé Theme */
-body {
-	background-color: #303446; /* Base */
-	color: #c6d0f5; /* Text */
-}
+:root {
+	--bg-body: #303446; /* Base */
+	--bg-main: #292c3c; /* Mantle */
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(140, 170, 238, 0.08) 1px, transparent 1px),
-		linear-gradient(rgba(140, 170, 238, 0.08) 1px, transparent 1px);
-}
+	--text-primary: #c6d0f5; /* Text */
+	--text-secondary: rgba(165, 173, 206, 0.6); /* Overlay2 @ 60% */
 
-main {
-	background-color: #292c3c; /* Mantle */
-	outline: 1px solid rgba(140, 170, 238, 0.12);
-}
+	--border-primary: #8caaee; /* Blue */
+	--border-secondary: rgba(98, 104, 128, 0.6); /* Overlay1 @ 60% */
+	--border-subtle: rgba(140, 170, 238, 0.2); /* Blue @ 20% */
+	--border-dotted: rgba(140, 170, 238, 0.4); /* Blue @ 40% */
+	--border-outline: rgba(140, 170, 238, 0.12); /* Blue @ 12% */
 
-hr {
-	border-bottom: 2px dotted rgba(140, 170, 238, 0.4); /* Blue */
-}
+	--accent-primary: #8caaee; /* Blue */
+	--accent-secondary: #292c3c; /* Mantle */
+	--accent-tertiary: rgba(140, 170, 238, 0.85); /* Blue @ 85% */
+	--accent-muted: rgba(140, 170, 238, 0.5); /* Blue @ 50% */
+	--accent-faded: rgba(140, 170, 238, 0.4); /* Blue @ 40% */
 
-#emoticon {
-	color: #8caaee; /* Blue */
-}
+	--status-online: #a6d189; /* Green */
+	--status-online-border: #a6d189; /* Green */
+	--status-degraded: #e5c890; /* Yellow */
+	--status-degraded-pattern: rgba(35, 38, 52, 0.35); /* Crust @ 35% */
+	--status-degraded-border: #e5c890; /* Yellow */
+	--status-offline: #e78284; /* Red */
+	--status-offline-x: #292c3c; /* Mantle */
+	--status-offline-border: #e78284; /* Red */
+	--status-unknown: #414559; /* Surface0 */
 
-#overall-status {
-	background-color: #8caaee; /* Blue */
-	color: #292c3c; /* Mantle */
-}
+	--hover-bg: rgba(140, 170, 238, 0.12); /* Blue @ 12% */
+	--hover-text: #292c3c; /* Mantle */
+	--selected-bg: rgba(140, 170, 238, 0.15); /* Blue @ 15% */
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #8caaee, #8caaee 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: #292c3c; /* Mantle */
+	--tooltip-text: #c6d0f5; /* Text */
+	--tooltip-border: rgba(140, 170, 238, 0.3); /* Blue @ 30% */
 
-#last-updated {
-	color: rgba(165, 173, 206, 0.6); /* Overlay2 */
-}
-
-.service-name {
-	color: #c6d0f5; /* Text */
-}
-
-.service-name svg {
-	color: rgba(140, 170, 238, 0.4); /* Blue faded */
-}
-
-.service-name:hover svg {
-	color: #8caaee; /* Blue */
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: #292c3c; /* Crust */
-	color: #c6d0f5; /* Text */
-	border: 1px solid rgba(140, 170, 238, 0.3);
-}
-
-.status-bar.Online {
-	background-color: #a6d189; /* Green */
-	border-color: #a6d189; /* Green */
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: #81c563;
-}
-
-.status-bar.Unknown::before {
-	background-color: #414559; /* Surface0 */
-}
-
-.status-bar.Degraded {
-	background-color: #e5c890; /* Yellow */
-	border-color: #e5c890; /* Yellow */
-	background-image: linear-gradient(
-		45deg,
-		rgba(35, 38, 52, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(35, 38, 52, 0.2) 50%,
-		rgba(35, 38, 52, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #e78284; /* Red */
-	border-color: #e78284; /* Red */
-}
-
-.status-bar.Offline::before {
-	color: #292c3c; /* Mantle */
-}
-
-.bars-footer {
-	color: rgba(140, 170, 238, 0.5); /* Blue */
-}
-
-.bars-footer hr {
-	border-color: rgba(140, 170, 238, 0.2); /* Blue */
-}
-
-.uptime-percentage {
-	background-color: #292c3c; /* Mantle */
-	color: rgba(140, 170, 238, 0.85); /* Blue */
-}
-
-footer a {
-	color: #8caaee; /* Blue */
-}
-
-footer a:hover {
-	color: #8caaee; /* Blue */
-	filter: brightness(0.8);
-}
-
-/* Combobox */
-.combobox-trigger {
-	background-color: #232634; /* Crust */
-	color: #c6d0f5; /* Text */
-	border: 1px solid rgba(98, 104, 128, 0.6); /* Overlay1 */
-}
-
-.combobox-trigger:hover {
-	background-color: #292c3c; /* Mantle */
-	border-color: rgba(140, 170, 238, 0.5);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(98, 104, 128, 0.6);
-}
-
-.combobox-dropdown {
-	background-color: #232634; /* Crust */
-	border: 1px solid rgba(140, 170, 238, 0.4);
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-
-.combobox-option {
-	color: #c6d0f5; /* Text */
-}
-
-.combobox-option.selected {
-	background-color: rgba(140, 170, 238, 0.15);
-}
-
-.combobox-option:hover {
-	background-color: #8caaee; /* Blue */
-	color: #292c3c; /* Mantle */
+	--shadow-color: rgba(0, 0, 0, 0.4); /* Black @ 40% */
 }
diff --git a/www/themes/ctp-latte.css b/www/themes/ctp-latte.css
index 6da8c3b..fbcef16 100644
--- a/www/themes/ctp-latte.css
+++ b/www/themes/ctp-latte.css
@@ -1,151 +1,40 @@
 /* Catppuccin Latte Theme */
-body {
-	background-color: #eff1f5; /* Base */
-	color: #4c4f69; /* Text */
-}
+:root {
+	--bg-body: #eff1f5; /* Base */
+	--bg-main: #e6e9ef; /* Mantle */
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(30, 102, 245, 0.08) 1px, transparent 1px),
-		linear-gradient(rgba(30, 102, 245, 0.08) 1px, transparent 1px);
-}
+	--text-primary: #4c4f69; /* Text */
+	--text-secondary: rgba(92, 95, 119, 0.6); /* Overlay2 @ 60% */
 
-main {
-	background-color: #e6e9ef; /* Mantle */
-	outline: 1px solid rgba(30, 102, 245, 0.12);
-}
+	--border-primary: #1e66f5; /* Blue */
+	--border-secondary: rgba(124, 127, 147, 0.6); /* Overlay1 @ 60% */
+	--border-subtle: rgba(30, 102, 245, 0.2); /* Blue @ 20% */
+	--border-dotted: rgba(30, 102, 245, 0.4); /* Blue @ 40% */
+	--border-outline: rgba(30, 102, 245, 0.12); /* Blue @ 12% */
 
-hr {
-	border-bottom: 2px dotted rgba(30, 102, 245, 0.4); /* Blue */
-}
+	--accent-primary: #1e66f5; /* Blue */
+	--accent-secondary: #e6e9ef; /* Mantle */
+	--accent-tertiary: rgba(30, 102, 245, 0.85); /* Blue @ 85% */
+	--accent-muted: rgba(30, 102, 245, 0.5); /* Blue @ 50% */
+	--accent-faded: rgba(30, 102, 245, 0.4); /* Blue @ 40% */
 
-#emoticon {
-	color: #1e66f5; /* Blue */
-}
+	--status-online: #40a02b; /* Green */
+	--status-online-border: #40a02b; /* Green */
+	--status-degraded: #df8e1d; /* Yellow */
+	--status-degraded-pattern: rgba(220, 224, 232, 0.6); /* Crust @ 60% */
+	--status-degraded-border: #df8e1d; /* Yellow */
+	--status-offline: #d20f39; /* Red */
+	--status-offline-x: #e6e9ef; /* Mantle */
+	--status-offline-border: #d20f39; /* Red */
+	--status-unknown: #bcc0cc; /* Surface0 */
 
-#overall-status {
-	background-color: #1e66f5; /* Blue */
-	color: #e6e9ef; /* Mantle */
-}
+	--hover-bg: rgba(30, 102, 245, 0.12); /* Blue @ 12% */
+	--hover-text: #e6e9ef; /* Mantle */
+	--selected-bg: rgba(30, 102, 245, 0.15); /* Blue @ 15% */
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #1e66f5, #1e66f5 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: #e6e9ef; /* Mantle */
+	--tooltip-text: #4c4f69; /* Text */
+	--tooltip-border: rgba(30, 102, 245, 0.3); /* Blue @ 30% */
 
-#last-updated {
-	color: rgba(140, 143, 161, 1); /* Overlay2 */
-}
-
-.service-name {
-	color: #4c4f69; /* Text */
-}
-
-.service-name svg {
-	color: rgba(30, 102, 245, 0.4); /* Blue faded */
-}
-
-.service-name:hover svg {
-	color: #1e66f5; /* Blue */
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: #e6e9ef; /* Mantle */
-	color: #4c4f69; /* Text */
-	border: 1px solid rgba(30, 102, 245, 0.3);
-}
-
-.status-bar.Online {
-	background-color: #40a02b; /* Green */
-	border-color: #40a02b; /* Green */
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: #357a22;
-}
-
-.status-bar.Unknown::before {
-	background-color: #ccd0da; /* Surface0 */
-}
-
-.status-bar.Degraded {
-	background-color: #df8e1d; /* Yellow */
-	border-color: #df8e1d; /* Yellow */
-	background-image: linear-gradient(
-		45deg,
-		rgba(230, 233, 239, 0.3) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(230, 233, 239, 0.3) 50%,
-		rgba(230, 233, 239, 0.3) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #d20f39; /* Red */
-	border-color: #d20f39; /* Red */
-}
-
-.status-bar.Offline::before {
-	color: #e6e9ef; /* Mantle */
-}
-
-.bars-footer {
-	color: rgba(30, 102, 245, 0.6); /* Blue */
-}
-
-.bars-footer hr {
-	border-color: rgba(30, 102, 245, 0.2); /* Blue */
-}
-
-.uptime-percentage {
-	background-color: #e6e9ef; /* Mantle */
-	color: rgba(30, 102, 245, 0.85); /* Blue */
-}
-
-footer a {
-	color: #1e66f5; /* Blue */
-}
-
-footer a:hover {
-	color: #1e66f5; /* Blue */
-	filter: brightness(0.8);
-}
-
-/* Combobox */
-.combobox-trigger {
-	background-color: #dce0e8; /* Crust */
-	color: #4c4f69; /* Text */
-	border: 1px solid rgba(156, 160, 176, 0.6); /* Overlay1 */
-}
-
-.combobox-trigger:hover {
-	background-color: #d0d4db;
-	border-color: rgba(30, 102, 245, 0.5);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(156, 160, 176, 0.6);
-}
-
-.combobox-dropdown {
-	background-color: #dce0e8; /* Crust */
-	border: 1px solid rgba(30, 102, 245, 0.4);
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
-
-.combobox-option {
-	color: #4c4f69; /* Text */
-}
-
-.combobox-option.selected {
-	background-color: rgba(30, 102, 245, 0.15);
-}
-
-.combobox-option:hover {
-	background-color: #1e66f5; /* Blue */
-	color: white;
+	--shadow-color: rgba(0, 0, 0, 0.15); /* Black @ 15% */
 }
diff --git a/www/themes/ctp-macchiato.css b/www/themes/ctp-macchiato.css
index b44389d..36d236d 100644
--- a/www/themes/ctp-macchiato.css
+++ b/www/themes/ctp-macchiato.css
@@ -1,151 +1,40 @@
 /* Catppuccin Macchiato Theme */
-body {
-	background-color: #24273a; /* Base */
-	color: #cad3f5; /* Text */
-}
+:root {
+	--bg-body: #24273a; /* Base */
+	--bg-main: #1e2030; /* Mantle */
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(138, 173, 244, 0.08) 1px, transparent 1px),
-		linear-gradient(rgba(138, 173, 244, 0.08) 1px, transparent 1px);
-}
+	--text-primary: #cad3f5; /* Text */
+	--text-secondary: rgba(165, 173, 203, 0.6); /* Overlay2 @ 60% */
 
-main {
-	background-color: #1e2030; /* Mantle */
-	outline: 1px solid rgba(138, 173, 244, 0.12);
-}
+	--border-primary: #8aadf4; /* Blue */
+	--border-secondary: rgba(110, 115, 141, 0.6); /* Overlay1 @ 60% */
+	--border-subtle: rgba(138, 173, 244, 0.2); /* Blue @ 20% */
+	--border-dotted: rgba(138, 173, 244, 0.4); /* Blue @ 40% */
+	--border-outline: rgba(138, 173, 244, 0.12); /* Blue @ 12% */
 
-hr {
-	border-bottom: 2px dotted rgba(138, 173, 244, 0.4); /* Blue */
-}
+	--accent-primary: #8aadf4; /* Blue */
+	--accent-secondary: #1e2030; /* Mantle */
+	--accent-tertiary: rgba(138, 173, 244, 0.85); /* Blue @ 85% */
+	--accent-muted: rgba(138, 173, 244, 0.5); /* Blue @ 50% */
+	--accent-faded: rgba(138, 173, 244, 0.4); /* Blue @ 40% */
 
-#emoticon {
-	color: #8aadf4; /* Blue */
-}
+	--status-online: #a6da95; /* Green */
+	--status-online-border: #a6da95; /* Green */
+	--status-degraded: #eed49f; /* Yellow */
+	--status-degraded-pattern: rgba(24, 25, 38, 0.35); /* Crust @ 35% */
+	--status-degraded-border: #eed49f; /* Yellow */
+	--status-offline: #ed8796; /* Red */
+	--status-offline-x: #1e2030; /* Mantle */
+	--status-offline-border: #ed8796; /* Red */
+	--status-unknown: #363a4f; /* Surface0 */
 
-#overall-status {
-	background-color: #8aadf4; /* Blue */
-	color: #1e2030; /* Mantle */
-}
+	--hover-bg: rgba(138, 173, 244, 0.12); /* Blue @ 12% */
+	--hover-text: #1e2030; /* Mantle */
+	--selected-bg: rgba(138, 173, 244, 0.15); /* Blue @ 15% */
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #8aadf4, #8aadf4 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: #1e2030; /* Mantle */
+	--tooltip-text: #cad3f5; /* Text */
+	--tooltip-border: rgba(138, 173, 244, 0.3); /* Blue @ 30% */
 
-#last-updated {
-	color: rgba(165, 173, 203, 0.6); /* Overlay2 */
-}
-
-.service-name {
-	color: #cad3f5; /* Text */
-}
-
-.service-name svg {
-	color: rgba(138, 173, 244, 0.4); /* Blue faded */
-}
-
-.service-name:hover svg {
-	color: #8aadf4; /* Blue */
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: #1e2030; /* Mantle */
-	color: #cad3f5; /* Text */
-	border: 1px solid rgba(138, 173, 244, 0.3);
-}
-
-.status-bar.Online {
-	background-color: #a6da95; /* Green */
-	border-color: #a6da95; /* Green */
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: #8bd074;
-}
-
-.status-bar.Unknown::before {
-	background-color: #363a4f; /* Surface0 */
-}
-
-.status-bar.Degraded {
-	background-color: #eed49f; /* Yellow */
-	border-color: #eed49f; /* Yellow */
-	background-image: linear-gradient(
-		45deg,
-		rgba(30, 32, 48, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(30, 32, 48, 0.2) 50%,
-		rgba(30, 32, 48, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #ed8796; /* Red */
-	border-color: #ed8796; /* Red */
-}
-
-.status-bar.Offline::before {
-	color: #1e2030; /* Mantle */
-}
-
-.bars-footer {
-	color: rgba(138, 173, 244, 0.5); /* Blue */
-}
-
-.bars-footer hr {
-	border-color: rgba(138, 173, 244, 0.2); /* Blue */
-}
-
-.uptime-percentage {
-	background-color: #1e2030; /* Mantle */
-	color: rgba(138, 173, 244, 0.85); /* Blue */
-}
-
-footer a {
-	color: #8aadf4; /* Blue */
-}
-
-footer a:hover {
-	color: #8aadf4; /* Blue */
-	filter: brightness(0.8);
-}
-
-/* Combobox */
-.combobox-trigger {
-	background-color: #181926; /* Crust */
-	color: #cad3f5; /* Text */
-	border: 1px solid rgba(91, 96, 120, 0.6); /* Overlay1 */
-}
-
-.combobox-trigger:hover {
-	background-color: #1e2030; /* Mantle */
-	border-color: rgba(138, 173, 244, 0.5);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(91, 96, 120, 0.6);
-}
-
-.combobox-dropdown {
-	background-color: #181926; /* Crust */
-	border: 1px solid rgba(138, 173, 244, 0.4);
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-
-.combobox-option {
-	color: #cad3f5; /* Text */
-}
-
-.combobox-option.selected {
-	background-color: rgba(138, 173, 244, 0.15);
-}
-
-.combobox-option:hover {
-	background-color: #8aadf4; /* Blue */
-	color: #1e2030; /* Mantle */
+	--shadow-color: rgba(0, 0, 0, 0.4); /* Black @ 40% */
 }
diff --git a/www/themes/ctp-mocha.css b/www/themes/ctp-mocha.css
index 9afc487..9728b87 100644
--- a/www/themes/ctp-mocha.css
+++ b/www/themes/ctp-mocha.css
@@ -1,151 +1,40 @@
 /* Catppuccin Mocha Theme */
-body {
-	background-color: #1e1e2e; /* Base */
-	color: #cdd6f4; /* Text */
-}
+:root {
+	--bg-body: #1e1e2e; /* Base */
+	--bg-main: #181825; /* Mantle */
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(137, 180, 250, 0.08) 1px, transparent 1px),
-		linear-gradient(rgba(137, 180, 250, 0.08) 1px, transparent 1px);
-}
+	--text-primary: #cdd6f4; /* Text */
+	--text-secondary: rgba(166, 173, 200, 0.6); /* Overlay2 @ 60% */
 
-main {
-	background-color: #181825; /* Mantle */
-	outline: 1px solid rgba(137, 180, 250, 0.12);
-}
+	--border-primary: #89b4fa; /* Blue */
+	--border-secondary: rgba(108, 112, 134, 0.6); /* Overlay1 @ 60% */
+	--border-subtle: rgba(137, 180, 250, 0.2); /* Blue @ 20% */
+	--border-dotted: rgba(137, 180, 250, 0.4); /* Blue @ 40% */
+	--border-outline: rgba(137, 180, 250, 0.12); /* Blue @ 12% */
 
-hr {
-	border-bottom: 2px dotted rgba(137, 180, 250, 0.4); /* Blue */
-}
+	--accent-primary: #89b4fa; /* Blue */
+	--accent-secondary: #181825; /* Mantle */
+	--accent-tertiary: rgba(137, 180, 250, 0.85); /* Blue @ 85% */
+	--accent-muted: rgba(137, 180, 250, 0.5); /* Blue @ 50% */
+	--accent-faded: rgba(137, 180, 250, 0.4); /* Blue @ 40% */
 
-#emoticon {
-	color: #89b4fa; /* Blue */
-}
+	--status-online: #a6e3a1; /* Green */
+	--status-online-border: #a6e3a1; /* Green */
+	--status-degraded: #f9e2af; /* Yellow */
+	--status-degraded-pattern: rgba(17, 17, 27, 0.35); /* Crust @ 35% */
+	--status-degraded-border: #f9e2af; /* Yellow */
+	--status-offline: #f38ba8; /* Red */
+	--status-offline-x: #181825; /* Mantle */
+	--status-offline-border: #f38ba8; /* Red */
+	--status-unknown: #313244; /* Surface0 */
 
-#overall-status {
-	background-color: #89b4fa; /* Blue */
-	color: #181825; /* Mantle */
-}
+	--hover-bg: rgba(137, 180, 250, 0.12); /* Blue @ 12% */
+	--hover-text: #181825; /* Mantle */
+	--selected-bg: rgba(137, 180, 250, 0.15); /* Blue @ 15% */
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #89b4fa, #89b4fa 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: #181825; /* Mantle */
+	--tooltip-text: #cdd6f4; /* Text */
+	--tooltip-border: rgba(137, 180, 250, 0.3); /* Blue @ 30% */
 
-#last-updated {
-	color: rgba(166, 173, 200, 0.6); /* Overlay2 */
-}
-
-.service-name {
-	color: #cdd6f4; /* Text */
-}
-
-.service-name svg {
-	color: rgba(137, 180, 250, 0.4); /* Blue faded */
-}
-
-.service-name:hover svg {
-	color: #89b4fa; /* Blue */
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: #181825; /* Mantle */
-	color: #cdd6f4; /* Text */
-	border: 1px solid rgba(137, 180, 250, 0.3);
-}
-
-.status-bar.Online {
-	background-color: #a6e3a1; /* Green */
-	border-color: #a6e3a1; /* Green */
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: #8ad882;
-}
-
-.status-bar.Unknown::before {
-	background-color: #313244; /* Surface0 */
-}
-
-.status-bar.Degraded {
-	background-color: #f9e2af; /* Yellow */
-	border-color: #f9e2af; /* Yellow */
-	background-image: linear-gradient(
-		45deg,
-		rgba(24, 24, 37, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(24, 24, 37, 0.2) 50%,
-		rgba(24, 24, 37, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 8px 8px;
-}
-
-.status-bar.Offline {
-	background-color: #f38ba8; /* Red */
-	border-color: #f38ba8; /* Red */
-}
-
-.status-bar.Offline::before {
-	color: #181825; /* Mantle */
-}
-
-.bars-footer {
-	color: rgba(137, 180, 250, 0.5); /* Blue */
-}
-
-.bars-footer hr {
-	border-color: rgba(137, 180, 250, 0.2); /* Blue */
-}
-
-.uptime-percentage {
-	background-color: #181825; /* Mantle */
-	color: rgba(137, 180, 250, 0.85); /* Blue */
-}
-
-footer a {
-	color: #89b4fa; /* Blue */
-}
-
-footer a:hover {
-	color: #89b4fa; /* Blue */
-	filter: brightness(0.8);
-}
-
-/* Combobox */
-.combobox-trigger {
-	background-color: #11111b; /* Crust */
-	color: #cdd6f4; /* Text */
-	border: 1px solid rgba(88, 91, 112, 0.6); /* Overlay1 */
-}
-
-.combobox-trigger:hover {
-	background-color: #181825; /* Mantle */
-	border-color: rgba(137, 180, 250, 0.5);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(88, 91, 112, 0.6);
-}
-
-.combobox-dropdown {
-	background-color: #11111b; /* Crust */
-	border: 1px solid rgba(137, 180, 250, 0.4);
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-
-.combobox-option {
-	color: #cdd6f4; /* Text */
-}
-
-.combobox-option.selected {
-	background-color: rgba(137, 180, 250, 0.15);
-}
-
-.combobox-option:hover {
-	background-color: #89b4fa; /* Blue */
-	color: #181825; /* Mantle */
+	--shadow-color: rgba(0, 0, 0, 0.4); /* Black @ 40% */
 }
diff --git a/www/themes/monochrome.css b/www/themes/monochrome.css
index 069f697..7fb7529 100644
--- a/www/themes/monochrome.css
+++ b/www/themes/monochrome.css
@@ -1,131 +1,39 @@
-/* Default Theme */
-body {
-	background-color: #fcfcfc;
-}
+/* Monochrome Theme - default (as seen in index.html) */
+:root {
+	--bg-body: #fafafa;
+	--bg-main: white;
+	--text-primary: black;
+	--text-secondary: rgba(0, 0, 0, 0.6);
 
-/* Grid */
-body::before {
-	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
-}
+	--border-primary: black;
+	--border-secondary: rgba(0, 0, 0, 0.5);
+	--border-subtle: rgba(0, 0, 0, 0.1);
+	--border-dotted: rgba(0, 0, 0, 0.1);
+	--border-outline: rgba(0, 0, 0, 0.04);
 
-main {
-	background-color: white;
-	outline: 1px solid rgba(0, 0, 0, 0.04);
-}
+	--accent-primary: black;
+	--accent-secondary: white;
+	--accent-tertiary: rgba(0, 0, 0, 0.4);
+	--accent-muted: rgba(0, 0, 0, 0.3);
+	--accent-faded: rgba(0, 0, 0, 0.2);
 
-hr {
-	border-bottom: 2px dotted rgba(0, 0, 0, 0.1);
-}
+	--status-online: black;
+	--status-online-border: unset;
+	--status-degraded: white;
+	--status-degraded-pattern: black;
+	--status-degraded-border: unset;
+	--status-offline: white;
+	--status-offline-x: black;
+	--status-offline-border: unset;
+	--status-unknown: rgb(235, 235, 235);
 
-#overall-status {
-	background-color: black;
-	color: white;
-}
+	--hover-bg: rgba(0, 0, 0, 0.03);
+	--hover-text: black;
+	--selected-bg: rgba(0, 0, 0, 0.08);
 
-#pattern {
-	background-image: repeating-linear-gradient(-45deg, #000, #000 10px, transparent 0px, transparent 20px);
-}
+	--tooltip-bg: black;
+	--tooltip-text: white;
+	--tooltip-border: transparent;
 
-#last-updated {
-	color: rgba(0, 0, 0, 0.6);
-}
-
-.service-name {
-	color: black;
-}
-
-.service-name svg {
-	color: rgba(0, 0, 0, 0.2);
-}
-
-.service-name:hover svg {
-	color: rgba(0, 0, 0, 0.8);
-}
-
-.status-bar {
-	border: 1px solid black;
-}
-
-/* Tooltip */
-.bars > div:hover .status-bar::after {
-	background-color: black;
-	color: white;
-}
-
-.bars > div:hover .status-bar.Online {
-	background-color: rgba(0, 0, 0, 0.7);
-}
-
-.status-bar.Online {
-	background-color: black;
-}
-
-.status-bar.Unknown::before {
-	background-color: rgb(235, 235, 235);
-}
-
-.status-bar.Degraded {
-	background-color: white;
-	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
-}
-
-.status-bar.Offline {
-	background-color: white;
-}
-
-.status-bar.Offline::before {
-	color: black;
-}
-
-.bars-footer {
-	color: rgba(0, 0, 0, 0.4);
-}
-
-.bars-footer hr {
-	border-color: rgba(0, 0, 0, 0.1);
-}
-
-.uptime-percentage {
-	background-color: white;
-	color: rgba(0, 0, 0, 0.5);
-}
-
-footer a {
-	color: rgba(0, 0, 0, 0.3);
-}
-
-footer a:hover {
-	color: black;
-}
-
-/* Combobox */
-.combobox-trigger {
-	background-color: white;
-	border: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-.combobox-trigger:hover {
-	background-color: rgba(0, 0, 0, 0.03);
-}
-
-.combobox-trigger div {
-	border-left: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-.combobox-dropdown {
-	background-color: white;
-	border: 1px solid black;
-}
-
-.combobox-option {
-	color: black;
-}
-
-.combobox-option.selected {
-	background-color: rgba(0, 0, 0, 0.08);
-}
-
-.combobox-option:hover {
-	background-color: black;
-	color: white;
+	--shadow-color: rgba(0, 0, 0, 0.1);
 }