diff --git a/README.md b/README.md
index eb566bc..e98f4a9 100644
--- a/README.md
+++ b/README.md
@@ -22,3 +22,6 @@ Run Hugo dev server with autocompile of assets
 
 - before launch
   - [ ] change baseURL in config/production/config.toml
+
+- nice to haves:
+  - [ ] transform colors to CSS vars (and use for easier dark mode)
diff --git a/assets/scss/_kerberos-config.scss b/assets/scss/_kerberos-config.scss
index dc34f32..3983115 100644
--- a/assets/scss/_kerberos-config.scss
+++ b/assets/scss/_kerberos-config.scss
@@ -111,6 +111,17 @@ $fullhd: 1400px;
   --bg-white: hsl(0, 0%, 100%);
   --bg-white-hsl: 0, 0%, 100%;
 
+  body.dark {
+    --hub: hsl(200, 93%, 77%);
+    --hub-hsl: 200, 93%, 77%;
+
+    --text-muted: hsl(210, 14%, 89%);
+    --text-muted-hsl: 210, 14%, 89%;
+
+    --bg: hsl(210, 11%, 15%);
+    --bg-hsl: 210, 11%, 15%;
+  }
+
   // ---------- UI ---------- //
 
   --radius: 4px;
diff --git a/assets/scss/_kerberos.scss b/assets/scss/_kerberos.scss
index ba3eeb6..c728394 100644
--- a/assets/scss/_kerberos.scss
+++ b/assets/scss/_kerberos.scss
@@ -89,6 +89,11 @@ img {
 .navbar {
   @extend %box-shadow-bigger;
   margin-top: 6px; // make the whole gradient visible
+  .navbar-nav {
+    .nav-link {
+      color: var(--text-muted);
+    }
+  }
 }
 
 .footer {
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 0789939..289438e 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -18,11 +18,6 @@ $navbar-dark-active-color:          $link-color-dark;
 
 /** Theme styles */
 
-body.dark {
-  background: $body-bg-dark;
-  color: $body-color-dark;
-}
-
 body.dark a {
   color: $link-color-dark;
 }
diff --git a/assets/scss/layouts/_footer.scss b/assets/scss/layouts/_footer.scss
index 7d21811..9adfcb6 100644
--- a/assets/scss/layouts/_footer.scss
+++ b/assets/scss/layouts/_footer.scss
@@ -2,6 +2,19 @@
   border-top: 1px solid $gray-200;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
+  body.dark & {
+    background: #212529;
+  }
+  a {
+    color: var(--text);
+    &:hover, &:focus {
+      color: var(--hub);
+      text-decoration: none;
+      body.dark & {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .footer ul {
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
index 728e73c..7ad6e78 100644
--- a/assets/scss/layouts/_header.scss
+++ b/assets/scss/layouts/_header.scss
@@ -11,7 +11,7 @@
 }
 
 .navbar-brand {
-  font-weight: $headings-font-weight;
+  font-weight: 600;
 }
 
 .navbar-light .navbar-brand,
@@ -25,9 +25,11 @@
 }
 
 @include media-breakpoint-up(md) {
+  /*
   .navbar-brand {
     font-size: $font-size-xl;
   }
+  */
 
   .navbar-text {
     margin-left: 1.25rem;
diff --git a/assets/scss/layouts/_pages.scss b/assets/scss/layouts/_pages.scss
index ca1af55..18b278b 100644
--- a/assets/scss/layouts/_pages.scss
+++ b/assets/scss/layouts/_pages.scss
@@ -14,8 +14,13 @@
   figcaption {
     text-align: center;
     font-weight: 400;
-    font-size: 13px;
     padding: 10px 0 0 0;
+    p {
+      font-size: 14px;
+      opacity: 0.7;
+      padding: 0 size(2);
+      line-height: size(2);
+    }
   }
 }
 
diff --git a/assets/scss/layouts/_sidebar.scss b/assets/scss/layouts/_sidebar.scss
index 89b2d6b..54b481b 100644
--- a/assets/scss/layouts/_sidebar.scss
+++ b/assets/scss/layouts/_sidebar.scss
@@ -76,21 +76,31 @@ a.docs-link,
     color: var(--text);
     background: var(--bg-muted);
     text-decoration: none;
+    body.dark & {
+      color: var(--bg-white);
+      background: hsla(var(--bg-muted-hsl), 0.05);
+    }
   }
   &.active {
     text-decoration: none;
     color: var(--hub);
     font-weight: 500;
     background: hsla(var(--hub-hsl), 0.1);
+    body.dark & {
+      color: hsl(200.4, 93.2%, 77.1%);
+      background: hsla(200.4, 93.2%, 77.1%, 0.1);
+    }
   }
 }
 
 .page-links { // TOC
   a {
     margin: 0;
-    font-size: 0.9em;
+    font-size: 13px;
+    line-height: size(1.5);
     font-weight: 500;
     color: var(--text);
+    padding: size(0.5) size(1);
   }
   li {
     margin-top: 0.375rem;
@@ -98,7 +108,6 @@ a.docs-link,
     ul {
       li {
         padding-left: 1rem;
-        margin-top: 0.125rem;
         padding-top: 0.125rem;
         a {
           font-weight: 400;
diff --git a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
index ca235e3..f09e358 100644
--- a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
+++ b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
@@ -8525,10 +8525,6 @@ body {
 
 /** Theme variables */
 /** Theme styles */
-body.dark {
-  background: #212529;
-  color: #dee2e6; }
-
 body.dark a {
   color: #8ed6fb; }
 
@@ -9167,6 +9163,15 @@ table {
   border-top: 1px solid #e9ecef;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem; }
+  body.dark .footer {
+    background: #212529; }
+  .footer a {
+    color: var(--text); }
+    .footer a:hover, .footer a:focus {
+      color: var(--hub);
+      text-decoration: none; }
+      body.dark .footer a:hover, body.dark .footer a:focus {
+        text-decoration: underline; }
 
 .footer ul {
   margin-bottom: 0; }
@@ -9183,7 +9188,7 @@ table {
   margin-left: 1rem; }
 
 .navbar-brand {
-  font-weight: 700; }
+  font-weight: 600; }
 
 .navbar-light .navbar-brand,
 .navbar-light .navbar-brand:hover,
@@ -9194,8 +9199,11 @@ table {
   color: #5d2f86; }
 
 @media (min-width: 768px) {
+  /*
   .navbar-brand {
-    font-size: 1.375rem; }
+    font-size: $font-size-xl;
+  }
+  */
   .navbar-text {
     margin-left: 1.25rem; } }
 
@@ -9408,8 +9416,12 @@ table {
 .docs-content figure figcaption {
   text-align: center;
   font-weight: 400;
-  font-size: 13px;
   padding: 10px 0 0 0; }
+  .docs-content figure figcaption p {
+    font-size: 14px;
+    opacity: 0.7;
+    padding: 0 24px;
+    line-height: 24px; }
 
 .anchor {
   visibility: hidden;
@@ -9534,25 +9546,32 @@ a.docs-link,
     color: var(--text);
     background: var(--bg-muted);
     text-decoration: none; }
+    body.dark a.docs-link:hover, body.dark .page-links a:hover {
+      color: var(--bg-white);
+      background: hsla(var(--bg-muted-hsl), 0.05); }
   a.docs-link.active,
   .page-links a.active {
     text-decoration: none;
     color: var(--hub);
     font-weight: 500;
     background: hsla(var(--hub-hsl), 0.1); }
+    body.dark a.docs-link.active, body.dark .page-links a.active {
+      color: #8ed6fb;
+      background: hsla(200.4, 93.2%, 77.1%, 0.1); }
 
 .page-links a {
   margin: 0;
-  font-size: 0.9em;
+  font-size: 13px;
+  line-height: 18px;
   font-weight: 500;
-  color: var(--text); }
+  color: var(--text);
+  padding: 6px 12px; }
 
 .page-links li {
   margin-top: 0.375rem;
   padding-top: 0.375rem; }
   .page-links li ul li {
     padding-left: 1rem;
-    margin-top: 0.125rem;
     padding-top: 0.125rem; }
     .page-links li ul li a {
       font-weight: 400;
@@ -9648,6 +9667,13 @@ a.docs-link,
   --radius: 4px;
   --card-paddingV: 24px;
   --card-paddingH: 12px; }
+  :root body.dark {
+    --hub: hsl(200, 93%, 77%);
+    --hub-hsl: 200, 93%, 77%;
+    --text-muted: hsl(210, 14%, 89%);
+    --text-muted-hsl: 210, 14%, 89%;
+    --bg: hsl(210, 11%, 15%);
+    --bg-hsl: 210, 11%, 15%; }
   @media only screen and (min-width: 768px) {
     :root {
       --card-paddingV: 24px;
@@ -9745,6 +9771,8 @@ img {
 
 .navbar {
   margin-top: 6px; }
+  .navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {
+    color: var(--text-muted); }
 
 .footer {
   box-shadow: 0 -4px 34px rgba(0, 0, 0, 0.04), 0 -3px 4px rgba(0, 0, 0, 0.1);