diff --git a/new/docs/index.html b/new/docs/index.html
index d7fd1f4..d2a5825 100644
--- a/new/docs/index.html
+++ b/new/docs/index.html
@@ -11,9 +11,7 @@
 		<script src="/resources/js/docs.js"></script>
 	</head>
 	<body>
-		<div class="hero">
-			{{include "/includes/header.html" "logo-light.svg"}}
-		</div>
+		{{include "/includes/header.html" ""}}
 
 		<div id="autonav"></div>
 
diff --git a/new/includes/header.html b/new/includes/header.html
index d1cef5d..237d165 100644
--- a/new/includes/header.html
+++ b/new/includes/header.html
@@ -1,4 +1,4 @@
-<header>
+<header class="{{index .Args 0}}">
 	<div class="topbar">
 		<div class="wrapper">
 			<div style="flex: 1;"></div>
@@ -23,7 +23,11 @@
 		</div>
 	</div>
 	<div class="navbar wrapper">
-		<a href="/"><img src="/resources/images/{{index .Args 0}}" id="logo" alt="Caddy"></a>
+		<a href="/">
+			<img src="/resources/images/logo-light.svg" class="logo" id="logo-light" alt="Caddy web server">
+			<img src="/resources/images/logo-dark.svg" class="logo" id="logo-dark" alt="Caddy web server">
+		</a>
+		
 
 		<nav role="navigation">
 			<ul>
diff --git a/new/index.html b/new/index.html
index 6ab0a69..7814297 100644
--- a/new/index.html
+++ b/new/index.html
@@ -9,7 +9,7 @@
 	</head>
 	<body>
 		<div class="hero">
-			{{include "/includes/header.html" "logo-dark.svg"}}
+			{{include "/includes/header.html" "dark-header"}}
 		</div>
 
 	</body>
diff --git a/new/resources/css/common.css b/new/resources/css/common.css
index e64a16e..f6d65d5 100644
--- a/new/resources/css/common.css
+++ b/new/resources/css/common.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+.light {
 	--body-bg: white;
 	--text-color: #222;
 	--header-bg: rgba(118, 179, 194, 0.11);
@@ -8,6 +9,7 @@
 	--link-color: #0097f2;
 	--link-decoration-color: #ddd;
 	--link-hover-color: rgb(27, 170, 70);
+	--heading-color: var(--text-color);
 	--code-bg: #f2f8f9;
 	--dropdown-bg: #e8ecef;
 	--dropdown-linkbox: white;
@@ -16,19 +18,21 @@
 	--dropdown-link-hover-bg: rgb(239, 244, 248);
 	--dropdown-link-hover-color: #142633;
 	--dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent);
+	--dropdown-featured-hover-bg: rgb(223, 233, 238); /* rgb(232, 255, 254); */
 	--dropdown-shadow-color: rgb(0 0 0 / .4);
 }
 
-.dark {	
+.dark {
 	--body-bg: #0d171a;
-	--text-color: #a4c0c2;
+	--text-color: #cbe2e4; /* #a4c0c2 */
 	--header-bg: rgba(44, 130, 164, 0.11);
 	--header-border-color: transparent;
-	--main-nav-link-color: #7d8e93;
+	--main-nav-link-color: #86a7b1;
 	--main-nav-link-hover-color: #e2e9ec;
 	--link-color: #34a1e4;
 	--link-decoration-color: #375862;
 	--link-hover-color: rgb(42, 228, 98);
+	--heading-color: #dee8ee;
 	--code-bg: #1f3237;
 	--dropdown-bg: #34414b;
 	--dropdown-linkbox: #202b2f;
@@ -37,17 +41,19 @@
 	--dropdown-link-hover-color: white;
 	--dropdown-link-hover-bg: rgb(30, 48, 63);
 	--dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent);
+	--dropdown-featured-hover-bg: rgb(64, 82, 92);
 	--dropdown-shadow-color: black;
 }
 
-
-.dark .button.secondary {
-	border-color: rgb(64, 121, 136);
+.dark #logo-light,
+.dark-header #logo-light,
+#logo-dark {
+	display: none;
 }
 
-.dark article h2,
-.dark article h3 {
-	color: #e0f8f9;
+.dark #logo-dark,
+.dark-header #logo-dark {
+	display: initial;
 }
 
 
@@ -120,7 +126,6 @@ code {
 	max-width: 1400px;
 	margin-left: auto;
 	margin-right: auto;
-	box-sizing: content-box;
 	padding-left: 50px;
 	padding-right: 50px;
 }
@@ -135,7 +140,7 @@ header a {
 	text-decoration: none;
 }
 
-header nav > ul {
+header nav>ul {
 	background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255));
 	background-clip: text;
 	-webkit-background-clip: text;
@@ -182,11 +187,11 @@ header nav ul {
 	flex: 1;
 }
 
-.navbar nav > ul > li > a {
+.navbar nav>ul>li>a {
 	-webkit-text-fill-color: rgba(0 0 0 / .1);
 }
 
-.navbar nav > ul > li > a:hover {
+.navbar nav>ul>li>a:hover {
 	-webkit-text-fill-color: rgba(255 255 255 / .4);
 }
 
@@ -194,7 +199,7 @@ header nav ul {
 	position: relative;
 }
 
-.navbar nav > ul > li > a,
+.navbar nav>ul>li>a,
 .navbar .button {
 	text-decoration: none;
 	transition: all 200ms;
@@ -202,7 +207,7 @@ header nav ul {
 	font-weight: 500;
 }
 
-.navbar nav > ul > li > a {
+.navbar nav>ul>li>a {
 	padding: 20px 1.5em;
 	display: block;
 	font-family: Figtree, system-ui;
@@ -210,7 +215,7 @@ header nav ul {
 }
 
 .navbar .button {
-	font-size: 80%;	
+	font-size: 80%;
 }
 
 .icon {
@@ -218,7 +223,7 @@ header nav ul {
 	vertical-align: middle;
 }
 
-#logo {
+.logo {
 	height: 2.25em;
 }
 
@@ -232,34 +237,58 @@ header nav ul {
 	padding: .6em 1.5em;
 	border-radius: 6px;
 	text-decoration: none;
-}
 
-.button.secondary {
-	color: rgb(54 206 255);
-	border: 1px solid rgb(54 206 255);
-}
-
-.button.secondary:hover {
-	color: white;
-	border-color: white;
+	/* necessary for hoversplash: */
+	position: relative;
+	overflow: hidden;
 }
 
 .button.primary {
-	background: linear-gradient(135deg, white 25%, rgba(167,183,193) 80%);
+	background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
 	color: #222;
-	box-shadow: 0 2px 8px rgb(0 0 0 / .3);
 }
 
 .button.primary:hover {
 	color: #1a71cb;
-	transform: scale(1.1);
-	box-shadow: 0 4px 15px rgb(0 0 0 / .2);
 }
 
 .button:active {
-	transition: all 100ms;
+	transition: all 75ms;
 	transform: scale(.95);
-	box-shadow: 2px 2px 5px inset rgba(0, 0, 0, 0.2);
+	box-shadow: 1px 1px 3px inset rgba(0, 0, 0, 0.2);
+}
+
+
+@keyframes hoverSplash {
+	0% {
+		opacity: 1;
+		transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
+	}
+}
+
+.hover-splash {
+	pointer-events: none;
+	position: absolute;
+	/* z-index: 1; */
+	width: 200%;
+	height: 0;
+	padding-bottom: 200%;
+	border-radius: 50%;
+	/* transform: translate3d(-50%,-50%,0) scale3d(0,0,1); */
+	animation: 1s cubic-bezier(.16, 1, .3, 1) hoverSplash;
+}
+
+.button.primary .hover-splash {
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
+.button.secondary .hover-splash {
+	background-color: rgba(24, 156, 233, 0.6);
 }
 
 
@@ -284,8 +313,15 @@ header nav ul {
 }
 
 @keyframes rotateMenu {
-	0%   { transform: rotateX(-90deg) scale(0.75); opacity: 0; }
-	100% { transform: rotateX(0deg) scale(1);      opacity: 1; }
+	0% {
+		transform: rotateX(-90deg) scale(0.75);
+		opacity: 0;
+	}
+
+	100% {
+		transform: rotateX(0deg) scale(1);
+		opacity: 1;
+	}
 }
 
 
@@ -348,13 +384,13 @@ header nav ul {
 .dropdown .flatlinks a,
 .dropdown .featured a {
 	transition: background-color 150ms;
+	font-size: 12px;
 }
 
 .dropdown .flatlinks a {
 	background: var(--dropdown-linkbox);
 	padding: 1em 2em;
 	color: var(--dropdown-link-color);
-	font-size: 14px;
 }
 
 .dropdown .flatlinks a b,
@@ -393,11 +429,9 @@ header nav ul {
 .dropdown .featured a {
 	display: block;
 	padding: 1em;
-	font-size: 14px;
 	line-height: 1.4;
 	border-radius: 10px;
 	color: var(--dropdown-link-color);
-	font-size: 14px;
 	background-color: var(--dropdown-linkbox);
 	background-image: var(--dropdown-featured-bg);
 	/* background-image: linear-gradient(to bottom, rgb(239 244 247), rgba(252,252,252,0)); */
@@ -407,11 +441,7 @@ header nav ul {
 }
 
 .dropdown .featured a:hover {
-	background-color: rgb(223, 233, 238); /* rgb(232, 255, 254); */
-}
-
-.dark .dropdown .featured a:hover {
-	background-color: rgb(64, 82, 92);
+	background-color: var(--dropdown-featured-hover-bg);
 }
 
 .dropdown .featured a b {
diff --git a/new/resources/css/docs.css b/new/resources/css/docs.css
index 1a8a435..4b4e471 100644
--- a/new/resources/css/docs.css
+++ b/new/resources/css/docs.css
@@ -1,3 +1,37 @@
+:root, .light {
+	--header-bg: white;
+	--button-secondary-color: rgb(64, 131, 153);
+	--button-secondary-border-color: rgb(198, 217, 223);
+	--button-secondary-color-hover: rgb(7, 86, 134);
+	--button-secondary-border-color-hover: rgb(155, 191, 213);
+	--nav-current-bg: linear-gradient(to right, #ecf1f3, transparent);
+	--nav-link-hover-shadow-color: rgba(0, 0, 0, 0.15);
+	--nav-link-hover-before-bg: #d2e5e7;
+	--autonav-bg: #fff;
+	--pagenav-hover-bg: #f4f7f9;
+	--cmd-bg: #333;
+	--tip-color: #5c50bb;
+}
+
+.dark {
+	--header-bg: rgba(44, 130, 164, 0.11);
+	--button-secondary-color: rgb(36, 166, 208);
+	--button-secondary-border-color: rgb(38, 116, 140);
+	--button-secondary-color-hover: rgb(0, 194, 255);
+	--button-secondary-border-color-hover: rgb(0, 194, 255);
+	--nav-current-bg: linear-gradient(to right, #1a3c4d, transparent);
+	--nav-link-hover-shadow-color: rgba(255, 255, 255, 0.15);
+	--nav-link-hover-before-bg: #32494f;
+	--autonav-bg: #34404d;
+	--pagenav-hover-bg: #18262f;
+	--cmd-bg: black;
+	--tip-color: #a6b2f7;
+}
+
+
+
+
+
 html,
 body {
 	min-height: 100%;
@@ -7,14 +41,6 @@ body {
 	max-width: 1800px;
 }
 
-:root {
-	--header-bg: white;
-}
-
-.dark {
-	--header-bg: rgba(44, 130, 164, 0.11);
-}
-
 header {
 	border-bottom: 1px solid var(--header-border-color);
 }
@@ -30,12 +56,12 @@ header {
 	color: white;
 }
 .button.secondary {
-	color: rgb(64, 131, 153);
-	border: 1px solid rgb(226, 242, 247);
+	color: var(--button-secondary-color);
+	border: 1px solid var(--button-secondary-border-color);
 }
 .button.secondary:hover {
-	color: rgb(7, 86, 134);
-	border-color: rgb(155, 191, 213);
+	color: var(--button-secondary-color-hover);
+	border: 1px solid var(--button-secondary-border-color-hover);
 }
 
 
@@ -53,9 +79,6 @@ main {
 
 
 
-
-
-
 .docs {
 	display: flex;
 	font-size: 16px;
@@ -63,6 +86,7 @@ main {
 
 .docs nav {
 	flex: 1;
+	min-width: 250px;
 }
 
 
@@ -96,7 +120,7 @@ main nav li li::before {
 	position: absolute;
 	width: 1px;
 	height: 100%;
-	background-color: #d2e5e7;
+	background-color: var(--nav-link-hover-before-bg);
 	transition: .15s;
 }
 
@@ -135,7 +159,7 @@ main nav li:hover > a,
 
 main nav li:hover > a {
 	/* background: #f6fafc; */
-	box-shadow: -10px 0 10px -3px rgba(0, 0, 0, 0.15);
+	box-shadow: -10px 0 10px -3px var(--nav-link-hover-shadow-color);
 }
 
 main nav > ul > li > a::before {
@@ -155,7 +179,7 @@ main nav li a:hover::before {
 }
 
 main nav li a.current {
-	background: linear-gradient(to right, #ecf1f3, transparent);
+	background: var(--nav-current-bg);
 }
 
 main nav .heading {
@@ -208,8 +232,7 @@ article {
 	word-wrap: break-word;
 
 	max-width: 1100px;
-
-	/* color: #222; */
+	min-width: 0;
 }
 
 /*
@@ -281,6 +304,7 @@ article h6 {
 
 	font-family: Gantari;
 	font-weight: 800;
+	color: var(--heading-color);
 }
 
 article h1,
@@ -359,7 +383,7 @@ code {
 }
 
 code.cmd {
-	background-color: #333;
+	background-color: var(--cmd-bg);
 	color: #eaeaea;
 }
 
@@ -481,8 +505,10 @@ article aside.advice::before {
 }
 
 article aside.tip {
-	color: #706b95;
+	color: var(--tip-color);
 }
+
+
 article aside.advice {
 	color: #826848;
 }
@@ -556,7 +582,7 @@ td code {
 	visibility: hidden;
 	left: 75%;
 	top: 0;
-	background: #fff;
+	background: var(--autonav-bg);
 	box-shadow: 0 10px 40px rgb(0 0 0 / .2);
 	border-radius: 10px;
 	border-top-left-radius: 0;
@@ -604,67 +630,10 @@ main nav > ul > li:hover #autonav {
 }
 
 #pagenav a:hover {
-	background: #f4f7f9;
+	background: var(--pagenav-hover-bg);
 }
 
 @keyframes fadeIn {
 	0%   { opacity: 0; transform: translateY(2em); }
 	100% { opacity: 1; transform: translateY(0); }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.dark main nav li a.current {
-	background: linear-gradient(to right, #1a3c4d, transparent);
-}
-
-.dark main nav a {
-	color: #7d8e93;
-}
-
-.dark main nav li:hover > a {
-	box-shadow: -10px 0 10px -3px rgba(255, 255, 255, 0.15);
-}
-
-.dark main nav li li::before {
-	background-color: #32494f
-}
-
-.dark #autonav {
-	background: #36383a;
-}
-
-.dark #pagenav a:hover {
-	background: #18262f;
-}
-
-.dark code.cmd {
-	background: black;
-}
\ No newline at end of file
diff --git a/new/resources/css/home.css b/new/resources/css/home.css
index 09fcca2..279adc2 100644
--- a/new/resources/css/home.css
+++ b/new/resources/css/home.css
@@ -7,4 +7,14 @@
 		radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
 	
 	min-height: 800px;
+}
+
+.button.secondary {
+	color: rgb(54 206 255);
+	border: 1px solid rgb(54 206 255);
+}
+
+.button.secondary:hover {
+	color: white;
+	border-color: white;
 }
\ No newline at end of file
diff --git a/new/resources/js/common.js b/new/resources/js/common.js
index 36e6d80..6eb0a64 100644
--- a/new/resources/js/common.js
+++ b/new/resources/js/common.js
@@ -127,6 +127,9 @@ function getTheme() {
 
 // setTheme changes the configured theme to light, dark, or system and applies it.
 function setTheme(theme) {
+	if (theme !== "light" && theme !== "dark" && theme !== "system") {
+		theme = "system";
+	}
 	localStorage.setItem("theme", theme);
 	$('#current-theme').innerText = theme;
 	if (theme == "system") {
@@ -139,10 +142,8 @@ function setTheme(theme) {
 function applyTheme(lightOrDark) {
 	if (lightOrDark == "dark") {
 		$('html').classList.add('dark');
-		$('#logo').src = '/resources/images/logo-dark.svg';
 	} else {
 		$('html').classList.remove('dark');
-		$('#logo').src = '/resources/images/logo-light.svg';
 	}
 }
 
@@ -157,4 +158,24 @@ function nextTheme() {
 		theme = "system";
 	}
 	setTheme(theme);
-}
\ No newline at end of file
+}
+
+// hoversplash effect!
+on('mouseover', '.button', (e) => {
+	const elem = document.createElement('span');
+	elem.classList.add('hover-splash');
+
+	// get coordinates relative to container
+	const rect = e.target.getBoundingClientRect();
+	const x = e.clientX - rect.left;
+	const y = e.clientY - rect.top;
+
+	elem.style.left = `${x}px`;
+	elem.style.top = `${y}px`;
+
+	e.target.append(elem);
+
+	setTimeout(function() {
+		elem.remove();
+	}, 1000);
+});
\ No newline at end of file
