diff --git a/web/src/api/media.ts b/web/src/api/media.ts
index 7f0b53d..ef83ff7 100644
--- a/web/src/api/media.ts
+++ b/web/src/api/media.ts
@@ -28,17 +28,28 @@ export const getEncryptedMediaURL = (mxc?: string): string | undefined => {
 	return getMediaURL(mxc, true)
 }
 
-// This should be synced with the sender colors in ui/timeline/TimelineEvent.css
-const fallbackColors = [
-	"#a4041d", "#9b2200", "#803f00", "#005f00",
-	"#005c45", "#00548c", "#064ab1", "#5d26cd",
-	"#822198", "#9f0850",
-]
+const FALLBACK_COLOR_COUNT = 10
 
 export const getUserColorIndex = (userID: UserID) =>
-	userID.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % fallbackColors.length
+	userID.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % FALLBACK_COLOR_COUNT
 
-export const getUserColor = (userID: UserID) => fallbackColors[getUserColorIndex(userID)]
+function initFallbackColors(): string[] {
+	const style = getComputedStyle(document.body)
+	const output = []
+	for (let i = 0; i < FALLBACK_COLOR_COUNT; i++) {
+		output.push(style.getPropertyValue(`--sender-color-${i}`))
+	}
+	return output
+}
+
+let fallbackColors: string[]
+
+export const getUserColor = (userID: UserID) => {
+	if (!fallbackColors) {
+		fallbackColors = initFallbackColors()
+	}
+	return fallbackColors[getUserColorIndex(userID)]
+}
 
 // note: this should stay in sync with fallbackAvatarTemplate in cmd/gomuks.media.go
 function makeFallbackAvatar(backgroundColor: string, fallbackCharacter: string): string {
diff --git a/web/src/index.css b/web/src/index.css
index 10d3ec5..6d73b00 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,11 +1,128 @@
+:root {
+	--font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+	--monospace-font-stack: "Fira Code", monospace;
+
+	--background-color: #fff;
+	--login-background-color: #eee;
+	--text-color: #000;
+	--inverted-text-color: var(--background-color);
+	--secondary-text-color: #888;
+	--semisecondary-text-color: #555;
+
+	--primary-color: #00c853;
+	--primary-color-dark: #00b24a;
+	--error-color: red;
+
+	--border-color: #ccc;
+	--pill-background-color: #ccc;
+	--button-hover-color: rgba(0, 0, 0, .2);
+	--light-hover-color: rgba(0, 0, 0, .1);
+
+	--timeline-hover-bg-color: #eee;
+	--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
+	--timeline-highlight-hover-bg-color: #eec;
+	--timeline-jump-bg-color: rgba(0, 255, 0, .2);
+	--timeline-jump-hover-bg-color: #cec;
+
+	--room-list-background: linear-gradient(in hsl longer hue, red 0 0, magenta);
+	--room-list-background-overlay: hsla(0, 0%, 96%, .9);
+	--room-list-search-background-overlay: var(--room-list-background-overlay);
+	--space-list-background-overlay: hsla(0, 0%, 96%, .8);
+	--room-list-scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, .1);
+	--room-list-entry-hover-color: rgba(0, 0, 0, 0.075);
+	--room-list-entry-selected-color: rgba(0, 0, 0, 0.125);
+
+	--dimmed-overlay-background-color: rgba(0, 0, 0, .75);
+	--modal-box-shadow-color: rgba(0, 0, 0, 0.15);
+
+	--emoji-selected-border-color: #cec;
+
+	--unread-counter-text-color: var(--inverted-text-color);
+	--unread-counter-message-bg: rgba(0, 0, 0, 0.35);
+	--unread-counter-notification-bg: rgba(50, 150, 0, 0.7);
+	--unread-counter-highlight-bg: rgba(200, 0, 0, 0.7);
+
+	/* These should be synced with the avatar colors in api/media.ts */
+	--sender-color-0: #a4041d;
+	--sender-color-1: #9b2200;
+	--sender-color-2: #803f00;
+	--sender-color-3: #005f00;
+	--sender-color-4: #005c45;
+	--sender-color-5: #00548c;
+	--sender-color-6: #064ab1;
+	--sender-color-7: #5d26cd;
+	--sender-color-8: #822198;
+	--sender-color-9: #9f0850;
+
+	--sent-ok-color: var(--border-color);
+	--sent-error-color: var(--error-color);
+	--blockquote-border-color: var(--border-color);
+	--lightbox-button-color: var(--border-color);
+	--codeblock-background-color: inherit;
+
+	@media (prefers-color-scheme: dark) {
+		--background-color: #000;
+		--login-background-color: #111;
+		--text-color: #fff;
+		--inverted-text-color: var(--background-color);
+		--secondary-text-color: #888;
+		--semisecondary-text-color: #bbb;
+
+		--primary-color: #00b24a;
+		--primary-color-dark: #00c853;
+		--error-color: red;
+
+		--border-color: #222;
+		--pill-background-color: #222;
+		--button-hover-color: rgba(255, 255, 255, .2);
+		--light-hover-color: rgba(255, 255, 255, .1);
+
+		--timeline-hover-bg-color: #111;
+		--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
+		--timeline-highlight-hover-bg-color: #331;
+		--timeline-jump-bg-color: rgba(0, 255, 0, .2);
+		--timeline-jump-hover-bg-color: #131;
+
+		--room-list-background-overlay: hsla(0, 0%, 4%, .8);
+		--space-list-background-overlay: hsla(0, 0%, 4%, .7);
+		--room-list-scrollbar-color: rgba(255, 255, 255, .4) rgba(255, 255, 255, .1);
+		--room-list-entry-hover-color: rgba(255, 255, 255, 0.075);
+		--room-list-entry-selected-color: rgba(255, 255, 255, 0.125);
+
+		--modal-box-shadow-color: rgba(255, 255, 255, 0.1);
+
+		--emoji-selected-border-color: #131;
+
+		--unread-counter-message-bg: rgba(255, 255, 255, 0.5);
+		--unread-counter-notification-bg: rgba(150, 255, 0, 0.7);
+		--unread-counter-highlight-bg: rgba(255, 50, 50, 0.7);
+
+		--sender-color-0: #ff877c;
+		--sender-color-1: #f6913d;
+		--sender-color-2: #db9f00;
+		--sender-color-3: #56c02c;
+		--sender-color-4: #1fc090;
+		--sender-color-5: #21bacd;
+		--sender-color-6: #7aacf4;
+		--sender-color-7: #ad9cfe;
+		--sender-color-8: #d991de;
+		--sender-color-9: #fe84a2;
+
+		--sent-ok-color: #444;
+		--blockquote-border-color: #444;
+		--lightbox-button-color: #ccc;
+	}
+}
+
 body {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+	font-family: var(--font-stack);
 	margin: 0;
 	padding: 0;
-	background-color: #EEE;
+	background-color: var(--login-background-color);
 	line-height: 1.5;
 	font-size: 16px;
 	touch-action: none;
+	color: var(--text-color);
 }
 
 html {
@@ -18,11 +135,16 @@ html {
 }
 
 main {
-	background-color: white;
+	background-color: var(--background-color);
 }
 
 pre, code {
-	font-family: "Fira Code", monospace;
+	font-family: var(--monospace-font-stack);
+}
+
+input, textarea {
+	color: inherit;
+	background-color: inherit;
 }
 
 button, a.button {
@@ -31,13 +153,18 @@ button, a.button {
 	background: none;
 	border: none;
 	border-radius: .25rem;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: inherit;
 
 	&:disabled {
 		cursor: default;
 	}
 
-	&:hover:not(:disabled) {
-		background-color: rgba(0, 0, 0, .2);
+	&:hover:not(:disabled), &:focus:not(:disabled) {
+		background-color: var(--button-hover-color);
 	}
 }
 
@@ -49,14 +176,6 @@ a {
 	}
 }
 
-:root {
-	--primary-color: #00c853;
-	--primary-color-light: #92ffc0;
-	--primary-color-dark: #00b24a;
-	--error-color: red;
-	--error-color-light: #ff6666;
-}
-
 .hidden {
 	display: none !important;
 }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 0a13f8e..6ab690b 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -19,12 +19,10 @@ import App from "./App.tsx"
 import "./index.css"
 
 const styleTags = document.createElement("style")
-// styleTags.textContent = `
-// @import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark);
-// @import "_gomuks/codeblock/github.css" (prefers-color-scheme: light);
-// `
-// TODO switch to the above version after adding global dark theme support
-styleTags.textContent = `@import "_gomuks/codeblock/github.css";`
+styleTags.textContent = `
+@import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark);
+@import "_gomuks/codeblock/github.css" (prefers-color-scheme: light);
+`
 document.head.appendChild(styleTags)
 
 fetch("_gomuks/auth", { method: "POST" }).then(resp => {
diff --git a/web/src/ui/JSONView.css b/web/src/ui/JSONView.css
index 0cb4724..804482a 100644
--- a/web/src/ui/JSONView.css
+++ b/web/src/ui/JSONView.css
@@ -17,6 +17,7 @@ pre.json-view {
 
 	button {
 		padding: 0 .25rem;
+		display: inline-flex;
 	}
 
 	/* If the screen is wide enough, make line-wrapped strings aligned after the object key */
diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css
index d6e86ad..f7a0eb0 100644
--- a/web/src/ui/RoomView.css
+++ b/web/src/ui/RoomView.css
@@ -14,7 +14,7 @@ div.room-view {
 		align-items: center;
 		gap: .5rem;
 		padding-left: .5rem;
-		border-bottom: 1px solid #ccc;
+		border-bottom: 1px solid var(--border-color);
 
 		> span.room-name {
 			font-weight: bold;
@@ -23,14 +23,6 @@ div.room-view {
 		> button.back {
 			height: 2.5rem;
 			width: 2.5rem;
-			padding: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-
-			&:hover, &:focus {
-				background-color: #eee;
-			}
 		}
 	}
 }
diff --git a/web/src/ui/composer/Autocompleter.css b/web/src/ui/composer/Autocompleter.css
index eded547..0cc0411 100644
--- a/web/src/ui/composer/Autocompleter.css
+++ b/web/src/ui/composer/Autocompleter.css
@@ -5,9 +5,9 @@ div.autocompletions-wrapper {
 div.autocompletions {
 	position: absolute;
 	bottom: 1px;
-	border-top: 1px solid #ccc;
-	border-right: 1px solid #ccc;
-	background-color: #fff;
+	border-top: 1px solid var(--border-color);
+	border-right: 1px solid var(--border-color);
+	background-color: var(--background-color);
 	padding: .5rem;
 	max-height: 20rem;
 	overflow: auto;
@@ -21,7 +21,7 @@ div.autocompletions {
 		/*cursor: pointer;*/
 
 		&.selected, &:hover {
-			background-color: #f0f0f0;
+			background-color: var(--light-hover-color);
 		}
 
 		> img {
diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css
index 1f5ae0f..8ca8fa2 100644
--- a/web/src/ui/composer/MessageComposer.css
+++ b/web/src/ui/composer/MessageComposer.css
@@ -1,5 +1,5 @@
 div.message-composer {
-	border-top: 1px solid #ccc;
+	border-top: 1px solid var(--border-color);
 
 	blockquote.reply-body {
 		pre, a.hicli-matrix-uri {
@@ -16,7 +16,7 @@ div.message-composer {
 			line-height: 1.25;
 			flex: 1;
 			resize: none;
-			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+			font-family: var(--font-stack);
 			height: auto;
 			padding: .5rem;
 			border: none;
diff --git a/web/src/ui/emojipicker/EmojiPicker.css b/web/src/ui/emojipicker/EmojiPicker.css
index c544334..0ee0c5c 100644
--- a/web/src/ui/emojipicker/EmojiPicker.css
+++ b/web/src/ui/emojipicker/EmojiPicker.css
@@ -1,13 +1,13 @@
 div.emoji-picker {
 	position: fixed;
-	background-color: white;
+	background-color: var(--background-color);
 	width: 22rem;
 	height: 34rem;
 	border-radius: 1rem;
-	border: 1px solid #ccc;
+	border: 1px solid var(--border-color);
 	display: flex;
 	flex-direction: column;
-	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
 
 	div.emoji-category-bar {
 		/*height: 2.5rem;*/
@@ -15,7 +15,7 @@ div.emoji-picker {
 		justify-content: center;
 		flex-wrap: wrap;
 		padding-top: .5rem;
-		border-bottom: 1px solid #ccc;
+		border-bottom: 1px solid var(--border-color);
 
 		> button {
 			padding-top: .25rem;
@@ -27,7 +27,7 @@ div.emoji-picker {
 			border-bottom-right-radius: 0;
 			border-bottom: 2px solid transparent;
 			&:hover {
-				border-bottom: 2px solid green;
+				border-bottom: 2px solid var(--primary-color-dark);
 			}
 		}
 	}
@@ -36,7 +36,7 @@ div.emoji-picker {
 		display: flex;
 		align-items: center;
 		margin: .5rem;
-		border: 1px solid #ccc;
+		border: 1px solid var(--border-color);
 		border-radius: .25rem;
 		height: 2rem;
 
@@ -67,7 +67,7 @@ div.emoji-picker {
 
 	div.emoji-preview {
 		height: 4.5rem;
-		border-top: 1px solid #ccc;
+		border-top: 1px solid var(--border-color);
 
 		display: grid;
 		grid-template:
@@ -98,7 +98,7 @@ div.emoji-picker {
 
 		> div.emoji-shortcode {
 			grid-area: shortcode;
-			color: #666;
+			color: var(--semisecondary-text-color);
 		}
 	}
 
@@ -120,11 +120,17 @@ div.emoji-picker {
 		align-items: center;
 
 		> button {
-			margin-left: .5rem;
+			margin-left: .25rem;
 			font-size: .8rem;
+			padding: .25rem .5rem;
 		}
 	}
 
+	button.emoji-category-icon {
+		/* The vertical alignment isn't quite right with flex */
+		display: block;
+	}
+
 	button.emoji-category-icon > img, button.emoji > img {
 		width: 1.5rem;
 		height: 1.5rem;
@@ -138,12 +144,8 @@ div.emoji-picker {
 		height: 2.5rem;
 		content-visibility: auto;
 
-		&:hover {
-			background-color: #ccc;
-		}
-
 		&.selected {
-			border: 1px solid #cec;
+			border: 1px solid var(--emoji-selected-border-color);
 			opacity: .8;
 		}
 	}
diff --git a/web/src/ui/login/LoginScreen.css b/web/src/ui/login/LoginScreen.css
index 1cdb67d..4a9cb6e 100644
--- a/web/src/ui/login/LoginScreen.css
+++ b/web/src/ui/login/LoginScreen.css
@@ -3,7 +3,7 @@ main.matrix-login {
 	width: 100%;
 	padding: 3rem 6rem;
 
-	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
 	margin: 2rem;
 
 	@media (width < 800px) {
@@ -49,7 +49,7 @@ main.matrix-login {
 
 	button {
 		background-color: var(--primary-color);
-		color: white;
+		color: var(--inverted-text-color);
 		font-weight: bold;
 
 		&:hover, &:focus {
diff --git a/web/src/ui/modal/Lightbox.css b/web/src/ui/modal/Lightbox.css
index 7a03c4a..b6ef425 100644
--- a/web/src/ui/modal/Lightbox.css
+++ b/web/src/ui/modal/Lightbox.css
@@ -6,7 +6,7 @@ div.overlay {
 	justify-content: center;
 
 	&.dimmed {
-		background-color: rgba(0, 0, 0, 0.75);
+		background-color: var(--dimmed-overlay-background-color);
 	}
 }
 
@@ -19,17 +19,13 @@ div.lightbox {
 		z-index: 1;
 
 		> button, > a {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			color: #ccc;
-			width: 48px;
-			height: 48px;
-			padding: 0;
+			color: var(--lightbox-button-color);
+			width: 3rem;
+			height: 3rem;
 
 			> svg {
-				width: 32px;
-				height: 32px;
+				width: 2rem;
+				height: 2rem;
 			}
 		}
 	}
diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 1d92963..b5eab75 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -1,15 +1,15 @@
 div.room-list-wrapper {
 	grid-area: roomlist;
-	background: linear-gradient(in hsl longer hue, red 0 0, magenta);
+	background: var(--room-list-background);
 	box-sizing: border-box;
 	overflow: hidden;
-	scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+	scrollbar-color: var(--room-list-scrollbar-color);
 	display: flex;
 	flex-direction: column;
 }
 
 div.room-list {
-	background-color: hsla(0, 0%, 96%, .9);
+	background-color: var(--room-list-background-overlay);
 	overflow-y: auto;
 	flex: 1;
 }
@@ -19,7 +19,7 @@ input.room-search {
 	padding: 1rem;
 	box-sizing: border-box;
 	border: none;
-	background-color: hsla(0, 0%, 96%, .9);
+	background-color: var(--room-list-search-background-overlay);
 	outline: none;
 }
 
@@ -27,19 +27,18 @@ div.room-entry {
 	width: 100%;
 	display: flex;
 	gap: 4px;
-	/*border-radius: 4px;*/
 	user-select: none;
 	/*cursor: pointer;*/
 	height: 3rem;
 	contain-intrinsic-height: 3rem;
 	content-visibility: auto;
 
-	&:hover {
-		background-color: rgba(0, 0, 0, 0.075);
+	&:hover, &:focus {
+		background-color: var(--room-list-entry-hover-color);
 	}
 
 	&.active {
-		background-color: rgba(0, 0, 0, 0.125);
+		background-color: var(--room-list-entry-selected-color);
 	}
 
 	> div.room-entry-left {
@@ -93,9 +92,9 @@ div.room-entry {
 			align-items: center;
 			justify-content: center;
 			border-radius: 50%;
-			color: white;
+			color: var(--unread-counter-text-color);
 
-			background-color: rgba(0, 0, 0, 0.35);
+			background-color: var(--unread-counter-message-bg);
 			width: 1rem;
 			height: 1rem;
 			line-height: 1;
@@ -110,11 +109,11 @@ div.room-entry {
 			}
 
 			&.notified:not(.highlighted) {
-				background-color: rgba(50, 150, 0, 0.7);
+				background-color: var(--unread-counter-notification-bg);
 			}
 
 			&.highlighted {
-				background-color: rgba(200, 0, 0, 0.7);
+				background-color: var(--unread-counter-highlight-bg);
 			}
 		}
 	}
diff --git a/web/src/ui/timeline/ReplyBody.css b/web/src/ui/timeline/ReplyBody.css
index f3c4c84..8dcea96 100644
--- a/web/src/ui/timeline/ReplyBody.css
+++ b/web/src/ui/timeline/ReplyBody.css
@@ -1,8 +1,19 @@
 blockquote.reply-body {
 	margin: 0 0 .25rem;
-	border-left: 2px solid #aaa;
+	border-left: 2px solid var(--blockquote-border-color);
 	padding: .25rem .5rem;
 
+	&.sender-color-0 { border-color: var(--sender-color-0); }
+	&.sender-color-1 { border-color: var(--sender-color-1); }
+	&.sender-color-2 { border-color: var(--sender-color-2); }
+	&.sender-color-3 { border-color: var(--sender-color-3); }
+	&.sender-color-4 { border-color: var(--sender-color-4); }
+	&.sender-color-5 { border-color: var(--sender-color-5); }
+	&.sender-color-6 { border-color: var(--sender-color-6); }
+	&.sender-color-7 { border-color: var(--sender-color-7); }
+	&.sender-color-8 { border-color: var(--sender-color-8); }
+	&.sender-color-9 { border-color: var(--sender-color-9); }
+
 	pre {
 		display: inline;
 
@@ -12,10 +23,8 @@ blockquote.reply-body {
 	}
 
 	&:hover, &.composer {
-		border-color: black;
-
 		> div.message-text {
-			color: black;
+			color: var(--text-color);
 		}
 	}
 
@@ -24,18 +33,18 @@ blockquote.reply-body {
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
-		color: #666;
+		color: var(--semisecondary-text-color);
 	}
 
 	&.thread > div.reply-sender > span.event-sender::after {
 		content: " (thread)";
 		font-size: .75rem;
-		color: #666;
+		color: var(--secondary-text-color);
 	}
 
 	&.editing > div.reply-sender > span.event-sender::after {
 		content: " (editing message)";
-		color: #666;
+		color: var(--secondary-text-color);
 	}
 
 	> div.reply-sender {
@@ -60,10 +69,6 @@ blockquote.reply-body {
 				height: 24px;
 				width: 24px;
 			}
-
-			&:hover {
-				background-color: #ccc;
-			}
 		}
 	}
 }
diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx
index 14e8655..5e5f698 100644
--- a/web/src/ui/timeline/ReplyBody.tsx
+++ b/web/src/ui/timeline/ReplyBody.tsx
@@ -79,6 +79,8 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
 	if (isEditing) {
 		classNames.push("editing")
 	}
+	const userColorIndex = getUserColorIndex(event.sender)
+	classNames.push(`sender-color-${userColorIndex}`)
 	return <blockquote data-reply-to={event.event_id} className={classNames.join(" ")} onClick={onClickReply}>
 		<div className="reply-sender">
 			<div className="sender-avatar" title={event.sender}>
@@ -89,7 +91,7 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
 					alt=""
 				/>
 			</div>
-			<span className={`event-sender sender-color-${getUserColorIndex(event.sender)}`}>
+			<span className={`event-sender sender-color-${userColorIndex}`}>
 				{memberEvtContent?.displayname || event.sender}
 			</span>
 			{onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}
diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index eb7d08b..c9278da 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -10,11 +10,11 @@ div.timeline-event {
 		/ 2.5rem .5rem 1fr 2rem;
 
 	&.highlight {
-		background-color: rgba(255, 255, 0, .1);
+		background-color: var(--timeline-highlight-bg-color);
 	}
 
 	&.jump-highlight {
-		background-color: rgba(0, 255, 0, .2);
+		background-color: var(--timeline-jump-bg-color);
 	}
 
 	&.jump-highlight-fadeout {
@@ -22,14 +22,14 @@ div.timeline-event {
 	}
 
 	&:hover {
-		background-color: #eee;
+		background-color: var(--timeline-hover-bg-color);
 
 		&.highlight {
-			background-color: #eec;
+			background-color: var(--timeline-highlight-hover-bg-color);
 		}
 
 		&.jump-highlight {
-			background-color: #cec;
+			background-color: var(--timeline-jump-hover-bg-color);
 		}
 	}
 
@@ -55,7 +55,7 @@ div.timeline-event {
 
 		> span.event-time, > span.event-edited {
 			font-size: .7rem;
-			color: #888;
+			color: var(--secondary-text-color);
 		}
 	}
 
@@ -64,7 +64,7 @@ div.timeline-event {
 		display: none;
 		align-items: end;
 		font-size: .7rem;
-		color: #888;
+		color: var(--secondary-text-color);
 		max-height: 1.25rem;
 		margin-left: .25rem;
 	}
@@ -87,11 +87,11 @@ div.timeline-event {
 		}
 
 		&.error {
-			color: red;
+			color: var(--sent-error-color);
 		}
 
 		&.sending, &.sent {
-			color: #ccc;
+			color: var(--sent-ok-color);
 		}
 	}
 
@@ -150,17 +150,16 @@ span.event-sender {
 	overflow: hidden;
 	text-overflow: ellipsis;
 
-	/* These should be synced with the avatar colors in api/media.ts */
-	&.sender-color-0 { color: #a4041d; }
-	&.sender-color-1 { color: #9b2200; }
-	&.sender-color-2 { color: #803f00; }
-	&.sender-color-3 { color: #005f00; }
-	&.sender-color-4 { color: #005c45; }
-	&.sender-color-5 { color: #00548c; }
-	&.sender-color-6 { color: #064ab1; }
-	&.sender-color-7 { color: #5d26cd; }
-	&.sender-color-8 { color: #822198; }
-	&.sender-color-9 { color: #9f0850; }
+	&.sender-color-0 { color: var(--sender-color-0); }
+	&.sender-color-1 { color: var(--sender-color-1); }
+	&.sender-color-2 { color: var(--sender-color-2); }
+	&.sender-color-3 { color: var(--sender-color-3); }
+	&.sender-color-4 { color: var(--sender-color-4); }
+	&.sender-color-5 { color: var(--sender-color-5); }
+	&.sender-color-6 { color: var(--sender-color-6); }
+	&.sender-color-7 { color: var(--sender-color-7); }
+	&.sender-color-8 { color: var(--sender-color-8); }
+	&.sender-color-9 { color: var(--sender-color-9); }
 }
 
 div.event-content > div.event-reactions {
@@ -174,8 +173,8 @@ div.event-content > div.event-reactions {
 		align-items: center;
 		gap: .25rem;
 
-		background-color: #efe;
-		border: 1px solid #ada;
+		background-color: var(--background-color);
+		border: 1px solid var(--border-color);
 		border-radius: 2rem;
 		padding: 0 .5rem;
 
diff --git a/web/src/ui/timeline/content/index.css b/web/src/ui/timeline/content/index.css
index 632b9d6..510786b 100644
--- a/web/src/ui/timeline/content/index.css
+++ b/web/src/ui/timeline/content/index.css
@@ -1,7 +1,6 @@
-
 div.render-error-body {
 	font-style: italic;
-	color: #555;
+	color: var(--semisecondary-text-color);
 }
 
 div.decryption-error-body {
@@ -10,14 +9,14 @@ div.decryption-error-body {
 
 	> svg {
 		height: 20px;
-		color: red;
+		color: var(--error-color);
 	}
 }
 
 div.redacted-body, div.decryption-pending-body {
 	display: flex;
 	align-items: center;
-	color: #888;
+	color: var(--secondary-text-color);
 
 	> svg {
 		height: 20px;
@@ -52,12 +51,11 @@ div.html-body {
 	overflow: hidden;
 
 	pre.chroma {
-		/* TODO this may need to be undone if the color scheme is customizable */
-		background-color: inherit;
+		background-color: var(--codeblock-background-color);
 	}
 
 	a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias {
-		background-color: #ccc;
+		background-color: var(--pill-background-color);
 		border-radius: 1rem;
 		padding: 0 .25rem;
 		color: inherit;
@@ -106,7 +104,7 @@ div.html-body {
 	}
 
 	blockquote {
-		border-left: 2px solid #ccc;
+		border-left: 2px solid var(--blockquote-border-color);
 		padding-left: .5rem;
 	}
 
diff --git a/web/src/ui/timeline/menu/index.css b/web/src/ui/timeline/menu/index.css
index 67e8b87..5658e0a 100644
--- a/web/src/ui/timeline/menu/index.css
+++ b/web/src/ui/timeline/menu/index.css
@@ -2,29 +2,25 @@ div.event-hover-menu {
 	position: absolute;
 	right: .5rem;
 	top: -1.5rem;
-	background-color: white;
-	border: 1px solid #ccc;
+	background-color: var(--background-color);
+	border: 1px solid var(--border-color);
 	border-radius: .5rem;
 	display: flex;
 	gap: .25rem;
 	padding: .125rem;
 
 	> button {
-		padding: 0;
 		width: 2rem;
 		height: 2rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
 	}
 }
 
 div.event-context-menu-extra {
 	position: fixed;
-	background-color: white;
+	background-color: var(--background-color);
 	border-radius: .5rem;
-	border: 1px solid #ccc;
-	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+	border: 1px solid var(--border-color);
+	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
 
 	display: flex;
 	flex-direction: column;
@@ -32,9 +28,7 @@ div.event-context-menu-extra {
 	> button {
 		border-radius: 0;
 		padding: .5rem .75rem;
-		display: flex;
 		justify-content: left;
-		align-items: center;
 		gap: .5rem;
 
 		&:first-of-type {
@@ -45,7 +39,7 @@ div.event-context-menu-extra {
 		}
 
 		&.redact-button {
-			color: red;
+			color: var(--error-color);
 		}
 	}
 }
@@ -54,7 +48,7 @@ div.view-source-modal {
 	max-width: min(80rem, 80vw);
 	max-height: min(80rem, 80vh);
 	overflow: auto;
-	background-color: white;
+	background-color: var(--background-color);
 	border-radius: 1rem;
 	padding: 1rem;
 }
@@ -62,7 +56,7 @@ div.view-source-modal {
 div.confirm-message-modal {
 	width: min(40rem, 80vw);
 	max-height: min(40rem, 80vh);
-	background-color: white;
+	background-color: var(--background-color);
 	border-radius: 1rem;
 	padding: 1rem;
 	display: flex;
@@ -76,7 +70,7 @@ div.confirm-message-modal {
 	> div.timeline-event-container {
 		margin: .5rem 0;
 		padding-left: .5rem;
-		border-left: 2px solid #ccc;
+		border-left: 2px solid var(--border-color);
 		overflow: auto;
 
 		> div.timeline-event {
@@ -88,7 +82,7 @@ div.confirm-message-modal {
 		padding: 1rem;
 		outline: none;
 		border-radius: .25rem;
-		border: 1px solid #ccc;
+		border: 1px solid var(--border-color);
 	}
 
 	> div.confirm-buttons {