diff --git a/lib/docs-viewer.js b/lib/docs-viewer.js
index cb67cff..2d70442 100644
--- a/lib/docs-viewer.js
+++ b/lib/docs-viewer.js
@@ -11,16 +11,17 @@
 customElements.define('docs-viewer', class extends HTMLElement {
   constructor () {
     super()
-
+    const lightMode = document.documentElement.classList.contains('light')
     this.template = document.createElement('template')
     this.template.innerHTML = `
     <div>
       <style>
         ul { list-style-type: none; }
         ul li::before { content: '❥ '; margin-right: 0.5em; }
-        a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none }
+        a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
+        #panel.light a, #panel.light a:visited, #panel.light a:active { color: #7c9735; font-weight: bold; }
         h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
-        code {  background: #333; color: #eee; padding: .25rem; }
+        code {  background: #333; color: #efeaea; padding: .25rem; }
         pre > code { display: block; line-height: 1.025rem; padding-left: 1em; }
         h1, h2, h3, h4, h5, h6 { font-weight: bold; }
         h1 { font-size: 1.6rem; }
@@ -34,7 +35,7 @@ customElements.define('docs-viewer', class extends HTMLElement {
         img { display: block; max-width: 63em; margin: 0 auto; margin-block-start: 1.625rem; margin-block-end: 1.625rem; box-shadow: rgb(123 115 168 / 15%) 0px 13px 24px 0px; }
       </style>
       <header></header>
-      <div id="panel"><slot></slot></div>
+      <div id="panel" class="${lightMode ? 'light' : ''}"><slot></slot></div>
     </div>
     `
     this.root = this.attachShadow({ mode: 'open' })
@@ -46,6 +47,12 @@ customElements.define('docs-viewer', class extends HTMLElement {
     
     this.page = 'readme.md'
 
+    const observer = new MutationObserver(() => {
+      if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
+      else this.panel.classList.remove('light')
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+
     this.panel.addEventListener('click', (evt) => {
       if (evt.target?.tagName !== 'A') return
       const href = evt.target.href
diff --git a/pulse.html b/pulse.html
index 4aee85a..c8393ec 100644
--- a/pulse.html
+++ b/pulse.html
@@ -20,23 +20,24 @@
       border-radius: 8px;
       font-family:'overpass-mono';
       -webkit-font-smoothing: antialiased;
-      color: #eee;
+      color: #efeaea;
       transition: background-color .4s, color .4s;
     }
 
     html, body { overflow: scroll; }
 
     html.light body {
-      background: hsl(0deg, 1.59%, 52.42%);
+      background: #efeaea;
       color: #151517;
     }
-    a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none }
+
+    a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
   
     #logo {
       float: left;
       margin-right: 2rem;
       margin-left: 0.65rem;
-      margin-top: 0.45rem;
+      margin-top: -0.45rem;
     }
   
     nav {
@@ -85,10 +86,6 @@
       width: 72rem;
       margin: 0 auto;
     }
-
-    html.light header {
-      background: hsla(0deg, 1.59%, 52.42%, 0.9)
-    }
   
     h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
     blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }