diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index 9ca7f8c5..1b664ce3 100644
--- a/docs/_includes/header_custom.html
+++ b/docs/_includes/header_custom.html
@@ -1,6 +1,12 @@
-<button class="btn js-toggle-dark-mode" aria-label="Switch to light mode">
-  ☼
-</button>
+<div class="js-toggle-dark-mode-wrapper">
+  <button
+    class="btn js-toggle-dark-mode"
+    aria-label="Switch to light mode"
+    type="button"
+  >
+    ☼
+  </button>
+</div>
 
 <script>
   const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index e4c36045..d6922e2e 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -1,3 +1,11 @@
+:root {
+  --outline-color: #{$outline-color-light};
+}
+
+[data-theme="dark"] {
+  --outline-color: #{$outline-color-dark};
+}
+
 html,
 body {
   height: 100%;
@@ -29,7 +37,7 @@ div.site-logo {
   color: $body-text-color;
 }
 
-//Dark mode link styles
+// Dark mode link styles
 html[data-theme="dark"] {
   .main-header a,
   .main-header button,
@@ -56,7 +64,7 @@ html[data-theme="dark"] {
   }
 }
 
-//Label colors
+// Label colors
 main {
   .label-green {
     background-color: $label-success-bg;
@@ -66,3 +74,33 @@ main {
     background-color: $label-error-bg;
   }
 }
+
+// Outline styles
+.search:focus-within,
+.btn:focus,
+.btn:active,
+.btn:focus:hover,
+a:focus-visible,
+summary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--outline-color);
+  border-radius: 2px;
+  transition: box-shadow 0.2s ease;
+}
+
+.aux-nav .aux-nav-list-item {
+  padding: 5px;
+}
+
+.nav-list-item {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.js-toggle-dark-mode {
+  height: 100%;
+}
+
+.js-toggle-dark-mode-wrapper {
+  padding: 5px;
+}
diff --git a/docs/_sass/custom/setup.scss b/docs/_sass/custom/setup.scss
index 98e97982..ee4e35ca 100644
--- a/docs/_sass/custom/setup.scss
+++ b/docs/_sass/custom/setup.scss
@@ -2,8 +2,12 @@
 $blue-400: #4da6ff;
 $green-700: #00755c;
 $red-600: #d13c3c;
+$purple-500: rgba(215, 186, 255, 0.65);
+$lavender: #b69cff;
 
 // Semantic mappings
 $link-color-dark: $blue-400;
 $label-success-bg: $green-700;
 $label-error-bg: $red-600;
+$outline-color-light: $lavender;
+$outline-color-dark: $purple-500;