diff --git a/css/style.css b/css/style.css
index 4ced717..a65e833 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,18 @@ body {
   margin: 0;
   font-family: "Nunito", sans-serif;
   background: var(--bgColor);
+  --liteColor: white;
+  --liteText: #777;
+  --darkColor: black;
+  --darkText: #aaa;
+  --mintColor: #c7fcee;
+  --mintText: #5f8c80;
+  --purpColor: #cfc7fc;
+  --purpText: #7166af;
+  --yellColor: #fcfcbf;
+  --yellText: #8c8c5f;
+  --blueColor: #ade3ff;
+  --blueText: #46748c;
 }
 @media (prefers-color-scheme: light) {
   body {
@@ -217,6 +229,96 @@ body.blue-mode {
   position: absolute;
   text-align: center;
 }
+.main button.change-color-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 1rem;
+  font: inherit;
+  color: inherit;
+  border: none;
+  border-radius: 100rem;
+  height: 3rem;
+  width: 3rem;
+  text-align: center;
+  line-height: 3rem;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.8);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+}
+.main button.change-color-button:hover {
+  background: white;
+}
+.main dialog.change-color-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: var(--bgColor);
+  color: var(--textColor);
+  padding: 2rem;
+  border: 0;
+  border-radius: 0 0 0.25rem 0.25rem;
+  width: 100%;
+  max-height: calc(100vh - 2rem);
+  overflow: scroll;
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3), 0 0.15rem 1rem rgba(0, 0, 0, 0.1);
+  font-size: 1.33rem;
+}
+.main dialog.change-color-dialog h4 {
+  margin: 0 0 1rem;
+  text-align: center;
+  font-size: 1.9rem;
+  font-weight: 400;
+}
+.main dialog.change-color-dialog form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.main dialog.change-color-dialog form input[type=button], .main dialog.change-color-dialog form input[type=submit] {
+  font: inherit;
+  color: inherit;
+  padding: 0.5rem 1rem;
+  border: 0;
+  margin: 1rem 0.5rem 0;
+  background: var(--textColor);
+  color: var(--bgColor);
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+.main dialog.change-color-dialog form input[type=button]:hover, .main dialog.change-color-dialog form input[type=submit]:hover {
+  background: var(--boldColor);
+}
+.main dialog.change-color-dialog .radio-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+.main dialog.change-color-dialog .radio-buttons > div {
+  margin: 0.5rem 0;
+}
+.main dialog.change-color-dialog .radio-buttons > div input {
+  display: none;
+}
+.main dialog.change-color-dialog .radio-buttons > div label div {
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  margin: 0 0.25rem 0 0.75rem;
+  line-height: 2rem;
+  text-align: center;
+}
+.main dialog.change-color-dialog .radio-buttons > div input:checked + label div {
+  border: 3px solid;
+}
+.main dialog.change-color-dialog[open] + button.change-color-button {
+  display: none;
+}
 
 @media (max-width: 69rem), (orientation: portrait) {
   .main > .text-container {
diff --git a/css/style.scss b/css/style.scss
index e189918..dd03929 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -26,6 +26,8 @@ body {
 		--boldColor: white;
 	}
 
+	--liteColor: white;
+	--liteText: #777;
 	&.lite-mode {
 		--bgColor: white;
 		--textColor: #777;
@@ -33,6 +35,8 @@ body {
 		--boldColor: black;
 	}
 
+	--darkColor: black;
+	--darkText: #aaa;
 	&.dark-mode {
 		--bgColor: black;
 		--iconColor: white;
@@ -40,6 +44,8 @@ body {
 		--boldColor: white;
 	}
 
+	--mintColor: #c7fcee;
+	--mintText: #5f8c80;
 	&.mint-mode {
 		--bgColor: #c7fcee;
 		--iconColor: #486b61;
@@ -47,6 +53,8 @@ body {
 		--boldColor: #10352b;
 	}
 
+	--purpColor: #cfc7fc;
+	--purpText: #7166af;
 	&.purp-mode {
 		--bgColor: #cfc7fc;
 		--iconColor: #5a518c;
@@ -54,6 +62,8 @@ body {
 		--boldColor: #312c4c;
 	}
 
+	--yellColor: #fcfcbf;
+	--yellText: #8c8c5f;
 	&.yell-mode {
 		--bgColor: #fcfcbf;
 		--iconColor: #54543f;
@@ -61,6 +71,8 @@ body {
 		--boldColor: #353528;
 	}
 
+	--blueColor: #ade3ff;
+	--blueText: #46748c;
 	&.blue-mode {
 		--bgColor: #ade3ff;
 		--iconColor: #394b54;
@@ -243,6 +255,111 @@ body {
 			}
 		}
 	}
+
+	button.change-color-button {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin: 1rem;
+		font: inherit;
+		color: inherit;
+		border: none;
+		border-radius: 100rem;
+		height: 3rem;
+		width: 3rem;
+		text-align: center;
+		line-height: 3rem;
+		padding: 0;
+		background: rgba(255, 255, 255, 0.8);
+		color: rgba(0, 0, 0, 0.6);
+		cursor: pointer;
+
+		&:hover {
+			background: white;
+		}
+	}
+	
+	dialog.change-color-dialog {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		background: var(--bgColor);
+		color: var(--textColor);
+		padding: 2rem;
+		border: 0;
+		border-radius: 0 0 0.25rem 0.25rem;
+		width: 100%;
+		max-height: calc(100vh - 2rem);
+		overflow: scroll;
+		box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3),
+					0 0.15rem 1rem rgba(0, 0, 0, 0.1);
+
+		font-size: 1.33rem;
+
+		h4 {
+			margin: 0 0 1rem;
+			text-align: center;
+			font-size: 1.9rem;
+			font-weight: 400;
+		}
+
+		form {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+
+			input[type='button'], input[type='submit'] {
+				font: inherit;
+				color: inherit;
+				padding: 0.5rem 1rem;
+				border: 0;
+				margin: 1rem 0.5rem 0;
+				background: var(--textColor);
+				color: var(--bgColor);
+				border-radius: 0.25rem;
+				cursor: pointer;
+
+				&:hover {
+					background: var(--boldColor);
+				}
+			}
+		}
+
+		.radio-buttons {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			width: 100%;
+
+			> div {
+				margin: 0.5rem 0;
+
+				input {
+					display: none;
+				}
+
+				label div {
+					display: inline-block;
+					height: 2rem;
+					width: 2rem;
+					border-radius: 50%;
+					margin: 0 0.25rem 0 0.75rem;
+					line-height: 2rem;
+					text-align: center;
+				}
+
+				input:checked + label div {
+					border: 3px solid;
+				}
+			}
+		}
+	}
+
+	dialog.change-color-dialog[open] + button.change-color-button {
+		display: none;
+	}
 }
 
 @media(max-width: 69rem), (orientation: portrait) {
diff --git a/index.html b/index.html
index bf21515..9e97f49 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,22 @@
 			</a>
 		</div>
 	</div>
+	<dialog class="change-color-dialog">
+		<h4>If you could pick any color,<br>what color would you pick?</h4>
+		<form method="dialog">
+			<div class="radio-buttons"></div>
+			<input type="button" value="save" id="color-change-save">
+			<input type="submit" value="exit">
+		</form>
+	</dialog>
+	<button class="change-color-button" aria-label="change color">
+		<i class="fas fa-paint-brush"></i>
+	</button>
+	<noscript>
+		<style>
+			button.change-color-button { display: none; }
+		</style>
+	</noscript>
 </section>
 
 <!-- I guess it doesn't make sense for a purely visual easter egg to be visible to screen readers..? -->
diff --git a/js/script.js b/js/script.js
index 9f08c5e..1cd8d16 100644
--- a/js/script.js
+++ b/js/script.js
@@ -123,6 +123,16 @@ const sequences = [
 
 const lastFourKeys = [];
 
+function changeColor(word) {
+	const clapper = document.querySelector('.clapper');
+	clapper.classList.toggle('clapping');
+	setTimeout(() => {
+		document.body.setAttribute('class', `${word.toLowerCase()}-mode`);
+		document.querySelector(`#change-color-to-${word}`).checked = true;
+		setTimeout(() => clapper.classList.toggle('clapping'), 500);
+	}, 500);
+}
+
 addEventListener('keypress', e => {
 	lastFourKeys.push(e.code);
 	while(lastFourKeys.length > 4) lastFourKeys.shift();
@@ -135,16 +145,50 @@ addEventListener('keypress', e => {
 				return;
 			}
 
-			const clapper = document.querySelector('.clapper');
-			clapper.classList.toggle('clapping');
-			setTimeout(() => {
-				document.body.setAttribute('class', `${word.toLowerCase()}-mode`);
-				setTimeout(() => clapper.classList.toggle('clapping'), 500);
-			}, 500);
+			changeColor(word);
 		}
 	});
 });
 
+document.querySelector('button.change-color-button').addEventListener('click', () => {
+	document.querySelector('dialog.change-color-dialog').show();
+});
+
+sequences.forEach(({word}) => {
+	if(word !== 'SAVE') {
+		const container = document.createElement('div');
+
+		const radio = document.createElement('input');
+		radio.type = 'radio';
+		radio.name = 'change-color-radio';
+		radio.id = `change-color-to-${word}`;
+		radio.checked = document.body.classList.contains(`${word.toLowerCase()}-mode`) ||
+			(document.body.classList.length === 0 && 
+				((isDarkMode() && word === 'DARK') || (!isDarkMode() && word === 'LITE')));
+		radio.addEventListener('click', () => {
+			changeColor(word);
+		});
+
+		const label = document.createElement('label');
+		label.setAttribute('for', radio.id);
+		const color = document.createElement('div');
+		color.setAttribute('style', 
+			`background-color: var(--${word.toLowerCase()}Color); color: var(--${word.toLowerCase()}Text)`);
+		label.appendChild(color);
+		label.setAttribute('aria-label', word.toLowerCase());
+
+		container.appendChild(radio);
+		container.appendChild(label);
+
+		document.querySelector('.change-color-dialog .radio-buttons').appendChild(container);
+	}
+});
+
+document.querySelector('#color-change-save').addEventListener('click', () => {
+	localStorage.setItem('color-mode', document.body.getAttribute('class'));
+	alert('Saved!');
+});
+
 function among() {
 	alert('haha among us');
 }