dark mode fixes

pages/_includes/layout/menu.html

@@ -1,10 +1,10 @@
-<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
+<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}" id="menu">
    {% assign current-page = include.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
-      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          {% include ui/icon.html icon=icon  %}
          <span class="nav-link-title">
             {{ level-1[1].title }}

pages/_includes/layout/topnav.html

@@ -1,5 +1,5 @@
-<header class="navbar navbar-expand-md">
-   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 white-logo=include.dark %}
+<header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %}">
+   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=include.dark %}
 </header>
 
 {% if page.nav-position == "top" or page.nav-position == "all" %}

pages/_includes/parts/navbar.html

@@ -2,7 +2,7 @@
 {% assign person = site.data.people | where: "id", include.person %}
 {% assign person = person[0] %}
 
-<div class="container{% if include.fluid %}-fluid{% endif %}{% if include.dark %} navbar-dark bg-dark{% endif %}">
+<div class="container{% if include.fluid %}-fluid{% endif %}">
    <a class="navbar-toggler" data-toggle="modal" data-target="#aside">
       <span class="navbar-toggler-icon"></span>
    </a>
@@ -11,8 +11,8 @@
       {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
       {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
       {% if include.logo %}
-         <img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
-         <img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
+         <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
+         <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
       {% endif %}
       {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
    </a>

pages/_layouts/default.html

@@ -8,7 +8,7 @@ layout: base
    {% include layout/sidenav.html %}
    {% endif %}
 
-   {% include layout/topnav.html %}
+   {% include layout/topnav.html dark=page.header-dark %}
 
    <div class="main-content flex-fill d-flex flex-column mw-100">
 

scss/_dark.scss

@@ -9,9 +9,11 @@ body.theme-dark {
   .sidebar,
   .sidenav,
   .topnav,
-  .dropdown-menu {
+  .navbar,
+  .dropdown-menu,
+  .form-control {
     background: rgba(0, 0, 0, .1);
-    border-color: transparent;
+    color: inherit;
   }
 
   .text-default {
@@ -21,5 +23,9 @@ body.theme-dark {
   .avatar-list-stacked .avatar {
     box-shadow: 0 0 0 2px #2b3648;
   }
+
+  .navbar-brand-logo {
+    filter: brightness(0) invert(1);
+  }
 }
 

scss/_variables.scss

@@ -49,7 +49,7 @@ $text-color: #495057 !default;
 $text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
-$border-color: #e1e5ec !default;
+$border-color: rgba(0, 0, 0, 0.08) !default;
 
 $social-colors: (
   "facebook": #3b5998,

scss/mixins/_theme-color-lighter.scss

@@ -1,5 +1,5 @@
 @function theme-color-lighter($color) {
-  @return mix($color, #fff, 30%);
+  @return rgba($color, .2);
 }
 
 @function theme-color-lightest($color) {

scss/ui/_inputs.scss

@@ -17,7 +17,7 @@ textarea {
 
 .form-control {
   &:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+    -webkit-box-shadow: 0 0 0 1000px #fff inset;
   }
 
   &:disabled,
@@ -38,7 +38,7 @@ textarea {
 
 .form-fieldset {
   padding: 1rem;
-  background: $gray-100;
+  background: $min-black;
   border: 1px solid $border-color;
   border-radius: $border-radius;
 }

scss/ui/_tables.scss

@@ -1,8 +1,10 @@
 .table {
+  color: inherit;
+
   thead {
     th {
       border-width: $table-border-width;
-      background: $gray-100;
+      background: $min-black;
       text-transform: uppercase;
       font-size: $h6-font-size;
       font-weight: 600;