diff --git a/index.html b/index.html
index 8026cb3..db9ee1e 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,33 @@
     <title>Minecraft Dynamic Map - LiveAtlas</title>
 
     <style>
+        :root {
+            --background-base: #222222; /* Buttons/sidebar */
+            --background-dark: #121212; /* Body/map labels  */
+            --background-light: #333333; /* Scrollbars/inputs */
+            --background-error: #771616; /* Errors */
+
+            --background-disabled: #555555; /* Disabled controls */
+            --background-hover: #cccccc; /* Button :hover/selected */
+            --background-active: #eeeeee; /* Button :active */
+
+            --outline-focus: #222222; /* Button :focus outline */
+
+            --border-radius: 1rem;
+            --border-color: #333333; /* Control borders */
+
+            --text-base: #cccccc; /* Normal text */
+            --text-emphasis: #eeeeee; /* Chat messages/:focus inputs */
+            --text-subtle: #aaaaaa; /* Skeletons/secondary text */
+            --text-disabled: #999999; /* Disabled controls */
+
+            --text-hover: var(--background-base); /* Text in :hover/selected buttons */
+            --text-active: var(--background-dark); /* Text in :active buttons */
+
+            --text-night: #ddffff; /* Clock time at night */
+            --text-day: #ffdd33; /* Clock time in day */
+        }
+
         @keyframes fade {
             from {
                 opacity: 0;
@@ -33,7 +60,7 @@
         }
 
         html, body {
-            background-color: #121212;
+            background-color: var(--background-dark);
             height: 100%;
             width: 100%;
             margin: 0;
@@ -41,7 +68,7 @@
         }
 
         noscript {
-            color: #cccccc;
+            color: var(--text-base);
             font-size: 1rem;
             font-family: sans-serif;
             text-align: center;
@@ -56,7 +83,7 @@
             right: 0;
             transition: 0.3s opacity linear;
             z-index: 10000;
-            background-color: #121212;
+            background-color: var(--background-dark);
             cursor: wait;
             display: flex;
             flex-direction: column;
diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
index 8f1ab0e..1df4d46 100644
--- a/src/components/ChatBox.vue
+++ b/src/components/ChatBox.vue
@@ -116,7 +116,6 @@
 </script>
 
 <style lang="scss">
-	@import '../scss/variables';
 	@import '../scss/placeholders';
 
 	.chat {
@@ -148,7 +147,7 @@
 
 				&.message--skeleton {
 					font-style: italic;
-					color: #aaaaaa;
+					color: var(--text-subtle);
 				}
 			}
 		}
@@ -160,19 +159,19 @@
 			margin: 1.5rem -1.5rem -1.5rem;
 
 			.chat__input {
-				border-bottom-left-radius: $global-border-radius;
+				border-bottom-left-radius: var(--border-radius);
 				flex-grow: 1;
 			}
 
 			.chat__send {
 				padding-left: 1rem;
 				padding-right: 1rem;
-				border-radius: 0 0 $global-border-radius 0;
+				border-radius: 0 0 var(--border-radius) 0;
 			}
 
 			.chat__error {
-				background-color: #771616;
-				color: #eeeeee;
+				background-color: var(--background-error);
+				color: var(--text-emphasis);
 				font-size: 1.6rem;
 				padding: 0.5rem 1rem;
 				line-height: 2rem;
@@ -183,11 +182,11 @@
 		.chat__login {
 			font-size: 1.6rem;
 			padding: 1.2rem;
-			background-color: #333333;
-			color: #aaaaaa;
+			background-color: var(--background-light);
+			color: var(--text-subtle);
 			margin: 1.5rem -1.5rem -1.5rem;
-			border-bottom-left-radius: $global-border-radius;
-			border-bottom-right-radius: $global-border-radius;
+			border-bottom-left-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
 		}
 
 		@media (max-width: 400px), (max-height: 480px) {
diff --git a/src/components/Map.vue b/src/components/Map.vue
index f77620d..a24f350 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -276,7 +276,7 @@ export default defineComponent({
 	.map {
 		width: 100%;
 		height: 100%;
-		background: #000;
+		background: transparent;
 		z-index: 0;
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 5bc13e0..0e2a7f8 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -88,7 +88,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../scss/variables';
 @import '../scss/placeholders';
 
 .sidebar {
@@ -173,7 +172,7 @@ export default defineComponent({
 
 		.section__skeleton {
 			font-style: italic;
-			color: #aaa;
+			color: var(--text-disabled);
 			text-align: center;
 			align-self: center;
 			margin-top: 1rem;
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 8a7183e..2e38b5d 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -113,7 +113,7 @@
 
 				.message__content {
 					display: block;
-					color: #eeeeee;
+					color: var(--text-emphasis);
 				}
 			}
 		}
diff --git a/src/components/sidebar/PlayerListItem.vue b/src/components/sidebar/PlayerListItem.vue
index a16b5aa..4085599 100644
--- a/src/components/sidebar/PlayerListItem.vue
+++ b/src/components/sidebar/PlayerListItem.vue
@@ -141,7 +141,9 @@ export default defineComponent({
 				cursor: not-allowed;
 			}
 
-			color: #999999;
+			.player__name {
+				color: var(--text-disabled);
+			}
 		}
 
 		&.player--other-world {
@@ -149,7 +151,9 @@ export default defineComponent({
 				opacity: 0.5;
 			}
 
-			color: #999999;
+			.player__name {
+				color: var(--text-disabled);
+			}
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue
index 4a52270..c439e42 100644
--- a/src/components/sidebar/WorldListItem.vue
+++ b/src/components/sidebar/WorldListItem.vue
@@ -90,8 +90,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-	@import '../../scss/variables';
-
 	.world {
 		display: flex;
 		align-items: center;
@@ -130,7 +128,7 @@ export default defineComponent({
 		}
 
 		&.map--selected button {
-			background-color: $global-focus-color;
+			background-color: var(--background-hover);
 		}
 	}
 </style>
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index eb8582f..85a59ba 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -18,9 +18,9 @@
 	appearance: none;
 	border: none;
 	box-shadow: none;
-	background-color: $global-background;
-	color: $global-text-color;
-	border-radius: $global-border-radius;
+	background-color: var(--background-base);
+	color: var(--text-base);
+	border-radius: var(--border-radius);
 	cursor: pointer;
 	display: block;
 	text-align: center;
@@ -29,28 +29,28 @@
 	font-size: 1.6rem;
 
 	&:hover, &.active {
-		background-color: $global-focus-color;
-		color: #222222;
+		background-color: var(--background-hover);
+		color: var(--text-hover);
 	}
 
 	&:focus {
-		outline-color: $global-focus-color;
+		outline-color: var(--outline-focus);
 		outline-width: 0.2rem;
 	}
 
 	&:active {
-		background-color: #eeeeee;
-		color: #121212;
+		background-color: var(--background-active);
+		color: var(--text-active);
 	}
 
 	&[disabled], &.disabled {
-		background-color: $global-disabled-background;
-		color: $global-disabled-text-color;
+		background-color: var(--background-disabled);
+		color: var(--text-disabled);
 		cursor: not-allowed;
 
 		&:hover, &:focus, &:active {
-			background-color: $global-disabled-background;
-			color: $global-disabled-text-color;
+			background-color: var(--background-disabled);
+			color: var(--text-disabled);
 		}
 	}
 
@@ -71,9 +71,9 @@
 }
 
 %panel {
-	background-color: $global-background;
-	color: $global-text-color;
-	border-radius: $global-border-radius;
+	background-color: var(--background-base);
+	color: var(--text-base);
+	border-radius: var(--border-radius);
 	display: flex;
 	flex-direction: column;
 	padding: 1.5rem;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
deleted file mode 100644
index 74b42f4..0000000
--- a/src/scss/_variables.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*!
- * Copyright 2020 James Lyne
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-$global-text-color: #cccccc;
-$global-border-radius: 1rem;
-$global-background: #222222;
-$global-focus-color: #cccccc;
-$global-border-color: #333333;
-
-$global-disabled-background: #555555;
-$global-disabled-text-color: #bbbbbb;
\ No newline at end of file
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index db3d423..f6f486d 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -15,8 +15,8 @@
  */
 
 .leaflet-control {
-	background-color: $global-background;
-	border-radius: $global-border-radius;
+	background-color: var(--background-base);
+	border-radius: var(--border-radius);
 	margin: 0;
 	box-sizing: border-box;
 	overflow: hidden;
@@ -39,20 +39,20 @@
 
 	a {
 		border-radius: 0;
-		border-bottom: 0.1rem solid $global-border-color;
+		border-bottom: 0.1rem solid var(--border-color);
 
 		&.leaflet-disabled {
-			background-color: $global-disabled-background;
+			background-color: var(--background-disabled);
 			cursor: not-allowed;
 
 			&:hover {
-				color: $global-disabled-text-color;
-				border-bottom-color: $global-border-color;
+				color: var(--text-disabled);
+				border-bottom-color: var(--border-color);
 			}
 		}
 
 		&:hover {
-			border-bottom-color: $global-border-color;
+			border-bottom-color: var(--border-color);
 		}
 	}
 
@@ -141,7 +141,7 @@
 .leaflet-control-layers {
 	width: auto;
 	border: none;
-	color: $global-text-color;
+	color: var(--text-base);
 
 	&.leaflet-control-layers-expanded {
 		padding: 0;
@@ -281,7 +281,7 @@
 	animation-fill-mode: forwards;
 	
 	&:focus, &:hover, &:active {
-		background-color: $global-background;
+		background-color: var(--background-base);
 	}
 
 	&[hidden] {
diff --git a/src/scss/leaflet/_popups.scss b/src/scss/leaflet/_popups.scss
index 489ad9c..a4f824f 100644
--- a/src/scss/leaflet/_popups.scss
+++ b/src/scss/leaflet/_popups.scss
@@ -16,14 +16,14 @@
 
 .leaflet-popup {
 	.leaflet-popup-content-wrapper, .leaflet-popup-tip {
-		background-color: $global-background;
-		color: $global-text-color;
+		background-color: var(--background-base);
+		color: var(--text-base);
 	}
 
 	.leaflet-popup-content-wrapper {
 		max-height: 50vh;
 		display: flex;
-		border-radius: $global-border-radius;
+		border-radius: var(--border-radius);
 	}
 
 	.leaflet-popup-content {
@@ -42,8 +42,8 @@
 
 	@at-root  {
 		.leaflet-container a.leaflet-popup-close-button {
-			background-color: $global-background;
-			border-radius: $global-border-radius;
+			background-color: var(--background-base);
+			border-radius: var(--border-radius);
 			width: 2rem;
 			height: 2rem;
 			top: -1rem;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 8b00104..13a2636 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -16,8 +16,6 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-
-@import "variables";
 @import "placeholders";
 @import "leaflet/controls";
 @import "leaflet/popups";
@@ -53,7 +51,7 @@
 
 * {
     scrollbar-width: thin;
-    scrollbar-color: $global-text-color transparent;
+    scrollbar-color: var(--background-hover) transparent;
 }
 
 *::-webkit-scrollbar {
@@ -65,13 +63,13 @@
 }
 
 *::-webkit-scrollbar-thumb {
-	background-color: #333333;
+	background-color: var(--background-light);
 	border-radius: 2rem;
 	transition: background 1s ease-in;
 }
 
 *:hover::-webkit-scrollbar-thumb {
-  background-color: $global-focus-color;
+  background-color: var(--background-hover);
 }
 
 *::-webkit-scrollbar-button {
@@ -84,13 +82,13 @@ html {
 
 body {
 	font-family: Raleway, sans-serif;
-	color: $global-text-color;
+	color: var(--text-base);
 	text-shadow: 0.1rem 0.1rem #000000;
 	letter-spacing: 0.02rem;
 }
 
 html, body {
-    background-color: $global-background;
+    background-color: var(--background-dark);
     height: 100%;
 	overscroll-behavior: none;
 }
@@ -111,7 +109,7 @@ h2 {
 }
 
 a {
-	color: $global-text-color;
+	color: var(--text-base);
 }
 
 button {
@@ -120,22 +118,22 @@ button {
 
 input {
 	appearance: none;
-	background-color: #333333;
+	background-color: var(--background-light);
 	box-shadow: none;
-	color: #cccccc;
+	color: var(--text-base);
 	font-size: 1.6rem;
 	padding: 1rem;
-	border: 0.2rem solid #333333;
+	border: 0.2rem solid var(--border-color);
 	border-radius: 0;
 
 	&:focus {
-		color: #eeeeee;
-		outline-color: #eeeeee;
+		color: var(--text-emphasis);
+		outline-color: var(--text-emphasis);
 	}
 
 	&[disabled] {
-		background-color: #333333;
-		border-color: #333333;
+		background-color: var(--background-disabled);
+		border-color: var(--border-color);
 		cursor: not-allowed;
 	}
 }
@@ -174,7 +172,7 @@ input {
 
 		&:checked {
 			& ~ span {
-				color: #cccccc;
+				color: var(--text-base);
 			}
 
 			& + svg {
@@ -190,7 +188,7 @@ input {
 	}
 
 	span {
-		color: #aaaaaa;
+		color: var(--text-subtle);
 		padding-left: 3rem;
 	}
 }
@@ -220,17 +218,17 @@ input {
 		font-size: 2rem;
 		line-height: 2rem;
 		margin-top: auto;
-		background-color: #222;
+		background-color: var(--background-base);
 		z-index: 1;
 		padding: 0.1rem 0.1rem 0;
 		border-radius: 0.3rem;
 
 		&.night {
-			color: #ddffff;
+			color: var(--text-night);
 		}
 
 		&.day {
-			color: #ffdd33;
+			color: var(--text-day);
 		}
 
 		&.night, &.day {
@@ -327,8 +325,8 @@ input {
 
 		white-space: nowrap;
 
-		color: $global-text-color;
-		background: #121212;
+		color: var(--text-base);
+		background: var(--background-dark);
 		padding: 0.2rem;
 		display: none;
 		max-width: 25vw;