migrated mulish font and darkreader

assets/styles/application.template.scss

@@ -1,11 +1,21 @@
+// loading bootstrap
+// TODO: Refactor to use bootstrap sass variable for theming.
 @import 'bootstrap/scss/bootstrap.scss';
 
+// The Mulish font, we use font-weight 300 - 700
+@import '@fontsource/mulish/300';
+@import '@fontsource/mulish/index'; // 400
+@import '@fontsource/mulish/500';
+@import '@fontsource/mulish/600';
+@import '@fontsource/mulish/700';
+
+// layouts
 @import './layouts/main';
 
+// navigators
 @import './navigators/navbar';
 
-
-
+// features and services, only imported if enabled.
 {{ range $feature, $featureDef := site.Params.features }}
   {{ with $featureDef }}
     {{ $featureEnabled := or (not (isset . "enable")) .enable }}

assets/styles/colortheme/colortheme.css

@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+   @media only screen and (min-width: 1200px) {
+    .dynamic-navbar .navbar-icon-svg-dark {
+      filter: invert(1);
+    };
+  }
+  
+  @media only screen and (min-width: 1200px) {
+    .dropdown-menu-icons-only {
+      width: 25px;
+      min-width: 3rem;
+    }
+  }
+  
+  .menu-icon-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }

assets/styles/layouts/main.css

@@ -35,7 +35,7 @@ Yellow:  #FFC212
   
   body {
     background-color: #f9fafc;
-    font-family: "Muli";
+    font-family: "Mulish";
   }
   
   h1,