diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b26ca60..cea773a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,7 +15,7 @@
 		<header>
 			<a href="#start-of-content" class="hide-unless-focused">Skip to Content</a>
 			<section>
-				<a href="/" aria-label="index link" id="logo">
+				<a href="/" aria-label="index link" id="logo" title="go to site index">
 					{{ partial "logo.svg.html" . }}
 				</a>
 				<a href="/">
@@ -25,18 +25,18 @@
 			<section>
 				{{ $currentPage := . }}
 				{{ range .Site.Menus.main }}
-				{{ $active := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
-				{{ $active = or $active (eq .Name $currentPage.Title) }}
-				{{ $active = or $active (and (eq .Name "Blog") (eq $currentPage.Section "post")) }}
-				{{ $active = or $active (and (eq .Name "Tags") (eq $currentPage.Section "tags")) }}
-				<a href="{{ .URL }}">{{ .Name }}</a>
+					{{ $active := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
+					{{ $active = or $active (eq .Name $currentPage.Title) }}
+					{{ $active = or $active (and (eq .Name "Blog") (eq $currentPage.Section "post")) }}
+					{{ $active = or $active (and (eq .Name "Tags") (eq $currentPage.Section "tags")) }}
+					<a href="{{ .URL }}">{{ .Name }}</a>
 				{{ end }}
 			</section>
-			<section style="position:absolute;height:100%;right:0">
-				<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme">
+			<section style="position:absolute;height:100%;right:0" aria-hidden="true">
+				<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme" title="toggle dark theme">
 					{{ partial "theme-toggle.html" . }}
 				</button>
-				<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment">
+				<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment" title="toggle text alignment">
 					{{ partial "align-toggle.html" . }}
 				</button>
 			</section>
diff --git a/src/stylus/core.styl b/src/stylus/core.styl
index fe67d02..d8b510c 100644
--- a/src/stylus/core.styl
+++ b/src/stylus/core.styl
@@ -221,7 +221,7 @@ ul.horizontal-blocks
 			flex-grow 1
 			display flex
 			padding 0.5em 2em
-			background-color rgba(255, 255, 255, 0.05)
+			background-color var(--header-bg)
 			text-align center
 			justify-content center
 			align-items center
@@ -229,5 +229,5 @@ ul.horizontal-blocks
 			white-space nowrap
 
 			&:hover
-				background-color rgba(255, 255, 255, 0.1)
+				background-color var(--header-hover-bg)
 
diff --git a/src/stylus/theme.styl b/src/stylus/theme.styl
index aed527d..961e3b2 100644
--- a/src/stylus/theme.styl
+++ b/src/stylus/theme.styl
@@ -101,3 +101,7 @@ body.dark-theme .hide-in-dark-theme { display: none }
 body.dark-theme .hide-in-light-theme { display: inherit }
 body.light-theme .hide-in-dark-theme { display: inherit }
 body.light-theme .hide-in-light-theme { display: none }
+
+@media (prefers-reduced-motion: no-preference) {
+  * { transition: background-color 0.2s ease, color 0.2s ease }
+}
diff --git a/static/global.js b/static/global.js
index 0e3a632..6f00ade 100644
--- a/static/global.js
+++ b/static/global.js
@@ -1,27 +1,11 @@
 const body = document.body
 const queryAll = sel => document.querySelectorAll(sel)
 
-const initTheme = () => {
-	const curTheme = localStorage.getItem('theme')
-	const oldTheme = curTheme	== 'dark' ? 'light' : 'dark'
-	body.classList.add(`${curTheme}-theme`)
-	body.classList.remove(`${oldTheme}-theme`)
+const resetTheme = () => {
+	body.classList.remove('dark-theme', 'light-theme')
 }
 
-if (localStorage.getItem('theme') === null) {
-	localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-}
-
-initTheme()
-
-const toggleTheme = ev => {
-	localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark')
-	initTheme()
-	if (!!ev.target) ev.preventDefault()
-	return false
-}
-
-queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
+queryAll('.theme-toggler').forEach(a => a.addEventListener('click', () => console.log('yo')))
 queryAll('.js-only').forEach(a => a.classList.remove('js-only'))
 queryAll('.js-disabled-only').forEach(a => a.remove())
 
@@ -39,18 +23,15 @@ initAlign()
 const toggleAlign = ev => {
 	localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center')
 	initAlign()
-	if (!!ev.target) ev.preventDefault()
+	if (ev.target) ev.preventDefault()
 	return false
 }
 
 queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign))
 
 window.addEventListener('load', _ev => {
-	console.log('loaded')
 	const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',')
-	console.log(selector)
 	queryAll(selector).forEach(el => {
-		console.log(el)
 		const anchorLink = document.createElement('a')
 		anchorLink.classList.add('anchor-link')
 		anchorLink.textContent = '§'