diff --git a/src/_includes/base.njk b/src/_includes/base.njk
index 8dfb980..8e23f18 100644
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -67,6 +67,10 @@
 					<input type="radio" name="color-scheme" value="light">
 					Light
 				</label>
+				<label>
+					<input type="radio" name="color-scheme" value="system">
+					System
+				</label>
 			</fieldset>
 		</header>
 		{{ content | safe }}
@@ -90,11 +94,7 @@
 					return localStorage.getItem('color-scheme');
 				}
 
-				if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-					return "dark";
-				}
-
-				return "light";
+				return "system";
 			};
 
 			const data = new Proxy({
@@ -110,7 +110,7 @@
 			});
 
 			const onRadioChange = e => {
-				data[e.target.name] = e.target.value;
+				data[e.target.name] = e.target.value;					
 			}
 
 			document.querySelectorAll('[name="color-scheme"]').forEach(radio => {
diff --git a/src/css/exceptions/color-scheme-picker.css b/src/css/exceptions/color-scheme-picker.css
index bad8631..e110bbb 100644
--- a/src/css/exceptions/color-scheme-picker.css
+++ b/src/css/exceptions/color-scheme-picker.css
@@ -59,6 +59,12 @@ header > * {
 			}
 		}
 
+		&:has([value="system"]) {
+			&::before {
+				content: "\f390";
+			}
+		}
+
 		&:has(:checked)::before {
 			text-shadow: var(--color-decoration) 1px 0 10px;
 		}