Properly set theme based first on local storage value then prefers theme media query (#88)

* update initial theme determination function

* small styling fixes

Author: colegoldsmith

src/css/asciidoc/source-block.css

@@ -72,7 +72,7 @@
     position: absolute;
     right: 0;
     padding: var(--ds-space-1);
-    height: calc(100% - var(--ds-space-1));
+    height: calc(100% - var(--ds-space-2));
     margin-top: 0.15em;
     z-index: 10;
   }

src/js/02-on-this-page.js

@@ -34,7 +34,7 @@
     listItem.dataset.level = level
     listItem.className = '!m-0'
     link.className =
-      `block py-1 pr-1 !no-underline !text-secondary 
+      `block py-1 pr-1 !no-underline text-body-small
       hover:!text-link [&.is-active]:!text-link [&.is-active]:border-[var(--ds-primary-main)] border-l-2`
     if (level === 1) link.classList.add('pl-2', 'text-button')
     if (level === 2) link.classList.add('pl-4', '!text-tertiary')

src/partials/head-scripts.hbs

@@ -45,8 +45,14 @@
 />
 
 <script>
-  document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ||
-  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' || 'light')
+  function getTheme() {
+    var localStorage = window.localStorage.getItem("theme");
+    var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (localStorage) return localStorage;
+    if (prefersDark) return "dark";
+    return "light";
+  }
+  document.documentElement.setAttribute("data-theme", getTheme());
 </script>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

src/partials/nav.hbs

@@ -1,5 +1,5 @@
 {{#with page.navigation}}
-<nav id="side-nav" class="h-full bg-level1 overflow-y-scroll flex flex-col w-[18.5rem] py-4 px-2" 
+<nav id="side-nav" class="h-full bg-level1 overflow-y-scroll flex flex-col w-[18.5rem] pt-4 px-2" 
   {{#if page.component}} data-component="{{page.component.name}}"
     data-version="{{page.version}}" {{/if}}>
       {{> nav-tree navigation=this}}