diff --git a/docs/_template.html b/docs/_template.html
index 3baf0ece5..bb0c86c2c 100644
--- a/docs/_template.html
+++ b/docs/_template.html
@@ -6,22 +6,18 @@
     <title>{{fsdocs-page-title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="author" content="{{fsdocs-authors}}">
-
-    <link rel="stylesheet" id="theme_link" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.6.0/materia/bootstrap.min.css">
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
-
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link rel="stylesheet" id="theme_link" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.1/dist/materia/bootstrap.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
     <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-
     <link rel="shortcut icon" type="image/x-icon" href="{{root}}img/favicon.ico">
     <link type="text/css" rel="stylesheet" href="{{root}}content/navbar-{{fsdocs-navbar-position}}.css" />
     <link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-{{fsdocs-theme}}.css" />
     <link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-custom.css" />
     <script type="text/javascript" src="{{root}}content/fsdocs-tips.js"></script>
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
     <!-- BEGIN SEARCH BOX: this adds support for the search box -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.css" />
     <!-- END SEARCH BOX: this adds support for the search box -->
@@ -29,27 +25,25 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-expand-md navbar-light bg-secondary {{fsdocs-navbar-position}}" id="fsdocs-nav">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-expand-md p-3 bg-body {{fsdocs-navbar-position}}" id="fsdocs-nav">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse navbar-nav-scroll" id="navbarsExampleDefault">
             <a href="{{fsdocs-logo-link}}"><img id="fsdocs-logo" src="{{fsdocs-logo-src}}" /></a>
+            <fsdocs-dark-light-toggle></fsdocs-dark-light-toggle>
             <!-- BEGIN SEARCH BOX: this adds support for the search box -->
             <div id="header">
-                <div class="searchbox" id="fsdocs-searchbox">
-                    <label for="search-by">
-                        <i class="fas fa-search"></i>
-                    </label>
-                    <input data-search-input="" id="search-by" type="search" placeholder="Search..." />
+                <div id="fsdocs-searchbox" class="d-flex align-items-center rounded p-1">
+                    <iconify-icon icon="ic:outline-search" width="24" height="24"></iconify-icon>
+                    <input class="form-control mx-1 p-0" data-search-input="" id="search-by" type="search" placeholder="Search..." />
                     <span data-search-clear="">
-                        <i class="fas fa-times"></i>
                     </span>
                 </div>
             </div>
 
             <!-- END SEARCH BOX: this adds support for the search box -->
-            <ul class="navbar-nav">
+            <ul class="navbar-nav border-bottom">
                 <li class="nav-header">Links</li>
                 <li class="nav-item" id="fsdocs-license-link"><a class="nav-link" href="{{fsdocs-license-link}}">License</a></li>
                 <li class="nav-item" id="fsdocs-release-notes-link"><a class="nav-link" href="{{fsdocs-release-notes-link}}">Release Notes</a></li>
@@ -70,12 +64,13 @@ <h3 class="muted"><a href="{{fsdocs-collection-name-link}}">{{fsdocs-collection-
         </div>
 
         <!-- BEGIN SEARCH BOX: this adds support for the search box -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.css" />
         <script type="text/javascript">var fsdocs_search_baseurl = '{{root}}';</script>
+        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js"></script>
         <script type="text/javascript" src="{{root}}content/fsdocs-search.js"></script>
         <!-- END SEARCH BOX: this adds support for the search box -->
+        <script type="module" src="{{root}}content/darkLight.js"></script>
     </div>
 </body>
 
diff --git a/docs/content/darkLight.js b/docs/content/darkLight.js
new file mode 100644
index 000000000..451c0f0ae
--- /dev/null
+++ b/docs/content/darkLight.js
@@ -0,0 +1,84 @@
+import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
+import 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';
+
+export class DarkLightToggle extends LitElement {
+    static properties = {
+        _theme: 'light'
+    }
+
+    constructor() {
+        super();
+        this.theme = localStorage.getItem("theme");
+        if (this.theme === "dark") {
+            document.documentElement.setAttribute("data-bs-theme", "dark");
+            this._theme = "dark";
+        }
+    }
+
+    toggleTheme() {
+        const current = document.documentElement.getAttribute("data-bs-theme");
+        if (current === "dark") {
+            document.documentElement.setAttribute("data-bs-theme", "light");
+            localStorage.setItem("theme", "light");
+            this._theme = "light";
+        } else {
+            document.documentElement.setAttribute("data-bs-theme", "dark");
+            localStorage.setItem("theme", "dark");
+            this._theme = "dark";
+        }
+    }
+
+    static styles = css`
+      div {
+        margin: 1rem 0;
+      }
+
+      input[type=checkbox] {
+        opacity: 0;
+        position: absolute;
+        margin: 0;
+      }
+
+      label {
+        background-color: rgb(34, 34, 34);
+        width: 45px;
+        height: 20px;
+        border-radius: 40px;
+        position: relative;
+        padding: 3px;
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      div label .ball {
+        background-color: rgb(255, 255, 255);
+        width: 18px;
+        height: 18px;
+        position: absolute;
+        left: 5px;
+        top: 4px;
+        border-radius: 50%;
+        transition: transform 0.2s linear;
+      }
+
+      div input[type=checkbox]:checked + label .ball {
+        transform: translateX(25px);
+      }
+    `;
+
+    render() {
+        return html`
+            <div @click="${this.toggleTheme}">
+                <input type="checkbox" ?checked=${this._theme === 'dark'}>
+                <label for="checkbox">
+                    <iconify-icon icon="ph:sun-fill" style="color: #f39c12;"></iconify-icon>
+                    <iconify-icon icon="ph:moon-fill" style="color: #f1c40f;"></iconify-icon>
+                    <span class="ball"></span>
+                </label>
+            </div>`;
+    }
+}
+
+customElements.define('fsdocs-dark-light-toggle', DarkLightToggle);
diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css
index 7b97d922d..c8db72ac5 100644
--- a/docs/content/fsdocs-default.css
+++ b/docs/content/fsdocs-default.css
@@ -1,24 +1,28 @@
-@import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara&family=Roboto+Mono&display=swap');
 /*--------------------------------------------------------------------------
   Formatting for page & standard document content
 /*--------------------------------------------------------------------------*/
 
-body {
-    font-family: 'Hind Vadodara', sans-serif;
-    /*    padding-top: 0px;
-    padding-bottom: 40px;
-*/
+:root {
+    --bs-font-sans-serif: 'Hind Vadodara', sans-serif;
+}
+
+#fsdocs-searchbox {
+    border: 1px solid var(--bs-body-color);
+}
+
+#fsdocs-searchbox input {
+    color: var(--bs-body-color);
+}
+
+#fsdocs-searchbox input::placeholder {
+    color: var(--bs-tertiary-color);
 }
 
 blockquote {
     margin: 0 1em 0 0.25em;
-    margin-top: 0px;
-    margin-right: 1em;
-    margin-bottom: 0px;
-    margin-left: 0.25em;
     padding: 0 .75em 0 1em;
-    border-left: 1px solid #777;
-    border-right: 0px solid #777;
+    border-left: 1px solid var(--bs-gray-600);
+    border-right: 0 solid var(--bs-gray-600);
 }
 
 /* Format the heading - nicer spacing etc. */
@@ -26,25 +30,25 @@ blockquote {
     overflow: hidden;
 }
 
-    .masthead .muted a {
-        text-decoration: none;
-        color: #999999;
-    }
+.masthead .muted a {
+    text-decoration: none;
+    color: var(--bs-gray-500);
+}
 
-    .masthead ul, .masthead li {
-        margin-bottom: 0px;
-    }
+.masthead ul, .masthead li {
+    margin-bottom: 0;
+}
 
-    .masthead .nav li {
-        margin-top: 15px;
-        font-size: 110%;
-    }
+.masthead .nav li {
+    margin-top: 15px;
+    font-size: 110%;
+}
 
-    .masthead h3 {
-        margin-top: 15px;
-        margin-bottom: 5px;
-        font-size: 170%;
-    }
+.masthead h3 {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    font-size: 1.4rem;
+}
 
 /*--------------------------------------------------------------------------
   Formatting fsdocs-content
@@ -52,7 +56,7 @@ blockquote {
 
 /* Change font sizes for headings etc. */
 #fsdocs-content h1 {
-    margin: 30px 0px 15px 0px;
+    margin: 30px 0 15px 0;
     /* font-weight: 400; */
     font-size: 2rem;
     letter-spacing: 1.78px;
@@ -62,18 +66,18 @@ blockquote {
 
 #fsdocs-content h2 {
     font-size: 1.6rem;
-    margin: 20px 0px 10px 0px;
+    margin: 20px 0 10px 0;
     font-weight: 400;
 }
 
 #fsdocs-content h3 {
     font-size: 1.2rem;
-    margin: 15px 0px 10px 0px;
+    margin: 15px 0 10px 0;
     font-weight: 400;
 }
 
 #fsdocs-content hr {
-    margin: 0px 0px 20px 0px;
+    margin: 0 0 20px 0;
 }
 
 #fsdocs-content li {
@@ -81,7 +85,7 @@ blockquote {
     line-height: 1.375rem;
     letter-spacing: 0.01px;
     font-weight: 500;
-    margin: 0px 0px 15px 0px;
+    margin: 0 0 15px 0;
 }
 
 #fsdocs-content p {
@@ -89,19 +93,18 @@ blockquote {
     line-height: 1.375rem;
     letter-spacing: 0.01px;
     font-weight: 500;
-    color: #262626;
 }
 
 #fsdocs-content a {
-    color: #4974D1;
+    color: var(--bs-blue);
 }
+
 /* remove the default bootstrap bold on dt elements */
 #fsdocs-content dt {
     font-weight: normal;
 }
 
 
-
 /*--------------------------------------------------------------------------
   Formatting tables in fsdocs-content, using learn.microsoft.com tables
 /*--------------------------------------------------------------------------*/
@@ -112,81 +115,77 @@ blockquote {
     font-size: 0.875rem;
 }
 
-    #fsdocs-content .table caption {
-        font-size: 0.8rem;
-        font-weight: 600;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        padding: 1.125rem;
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: #e3e3e3;
-        text-align: right;
-    }
-
-    #fsdocs-content .table td,
-    #fsdocs-content .table th {
-        display: table-cell;
-        word-wrap: break-word;
-        padding: 0.75rem 1rem 0.75rem 0rem;
-        line-height: 1.5;
-        vertical-align: top;
-        border-top: 1px solid #e3e3e3;
-        border-right: 0;
-        border-left: 0;
-        border-bottom: 0;
-        border-style: solid;
-    }
+#fsdocs-content .table caption {
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 1.125rem;
+    border-width: 0 0 1px;
+    border-style: solid;
+    border-color: var(--bs-gray-200);
+    text-align: right;
+}
 
-    /* suppress the top line on inner lists such as tables of exceptions */
-    #fsdocs-content .table .fsdocs-exception-list td,
-    #fsdocs-content .table .fsdocs-exception-list th {
-        border-top: 0
-    }
+#fsdocs-content .table td,
+#fsdocs-content .table th {
+    display: table-cell;
+    word-wrap: break-word;
+    padding: 0.75rem 1rem 0.75rem 0rem;
+    line-height: 1.5;
+    vertical-align: top;
+    border-top: 1px solid var(--bs-gray-200);
+    border-right: 0;
+    border-left: 0;
+    border-bottom: 0;
+    border-style: solid;
+}
 
-    #fsdocs-content .table td p:first-child,
-    #fsdocs-content .table th p:first-child {
-        margin-top: 0;
-    }
+/* suppress the top line on inner lists such as tables of exceptions */
+#fsdocs-content .table .fsdocs-exception-list td,
+#fsdocs-content .table .fsdocs-exception-list th {
+    border-top: 0
+}
 
-    #fsdocs-content .table td.nowrap,
-    #fsdocs-content .table th.nowrap {
-        white-space: nowrap;
-    }
+#fsdocs-content .table td p:first-child,
+#fsdocs-content .table th p:first-child {
+    margin-top: 0;
+}
 
-    #fsdocs-content .table td.is-narrow,
-    #fsdocs-content .table th.is-narrow {
-        width: 15%;
-    }
+#fsdocs-content .table td.nowrap,
+#fsdocs-content .table th.nowrap {
+    white-space: nowrap;
+}
 
-    #fsdocs-content .table th:not([scope='row']) {
-        border-top: 0;
-        border-bottom: 1px;
-    }
+#fsdocs-content .table td.is-narrow,
+#fsdocs-content .table th.is-narrow {
+    width: 15%;
+}
 
-    #fsdocs-content .table > caption + thead > tr:first-child > td,
-    #fsdocs-content .table > colgroup + thead > tr:first-child > td,
-    #fsdocs-content .table > thead:first-child > tr:first-child > td {
-        border-top: 0;
-    }
+#fsdocs-content .table th:not([scope='row']) {
+    border-top: 0;
+    border-bottom: 1px;
+}
 
-    #fsdocs-content .table table-striped > tbody > tr:nth-of-type(odd) {
-        background-color: var(--box-shadow-light);
-    }
+#fsdocs-content .table > caption + thead > tr:first-child > td,
+#fsdocs-content .table > colgroup + thead > tr:first-child > td,
+#fsdocs-content .table > thead:first-child > tr:first-child > td {
+    border-top: 0;
+}
 
-    #fsdocs-content .table.min {
-        width: unset;
-    }
+#fsdocs-content .table.min {
+    width: unset;
+}
 
-    #fsdocs-content .table.is-left-aligned td:first-child,
-    #fsdocs-content .table.is-left-aligned th:first-child {
-        padding-left: 0;
-    }
+#fsdocs-content .table.is-left-aligned td:first-child,
+#fsdocs-content .table.is-left-aligned th:first-child {
+    padding-left: 0;
+}
 
-        #fsdocs-content .table.is-left-aligned td:first-child a,
-        #fsdocs-content .table.is-left-aligned th:first-child a {
-            outline-offset: -0.125rem;
-        }
+#fsdocs-content .table.is-left-aligned td:first-child a,
+#fsdocs-content .table.is-left-aligned th:first-child a {
+    outline-offset: -0.125rem;
+}
 
 @media screen and (max-width: 767px), screen and (min-resolution: 120dpi) and (max-width: 767.9px) {
     #fsdocs-content .table.is-stacked-mobile td:nth-child(1) {
@@ -204,13 +203,13 @@ blockquote {
 
 #fsdocs-content .table.has-inner-borders th,
 #fsdocs-content .table.has-inner-borders td {
-    border-right: 1px solid #e3e3e3;
+    border-right: 1px solid var(--bs-gray-200);
 }
 
-    #fsdocs-content .table.has-inner-borders th:last-child,
-    #fsdocs-content .table.has-inner-borders td:last-child {
-        border-right: none;
-    }
+#fsdocs-content .table.has-inner-borders th:last-child,
+#fsdocs-content .table.has-inner-borders td:last-child {
+    border-right: none;
+}
 
 .fsdocs-entity-list .fsdocs-entity-name {
     width: 25%;
@@ -234,73 +233,59 @@ blockquote {
     line-height: 1.375rem;
     letter-spacing: 0.01px;
     font-weight: 500;
-    color: #262626;    
+    color: var(--bs-gray-900);
 }
 
 .fsdocs-xmldoc h1 {
     font-size: 1.2rem;
-    margin: 10px 0px 0px 0px;
+    margin: 10px 0 0 0;
 }
 
 .fsdocs-xmldoc h2 {
     font-size: 1.2rem;
-    margin: 10px 0px 0px 0px;
+    margin: 10px 0 0 0;
 }
 
 .fsdocs-xmldoc h3 {
     font-size: 1.1rem;
-    margin: 10px 0px 0px 0px;
+    margin: 10px 0 0 0;
 }
 
 .fsdocs-member-xmldoc details[open] summary + * {
     margin-top: 1rem;
 }
 
-/* #fsdocs-nav .searchbox {
-    margin-top: 30px;
-    margin-bottom: 30px;
-} */
-
-#fsdocs-nav img.logo{
-    width:90%;
+#fsdocs-nav img.logo {
+    width: 90%;
     /* height:140px; */
-    /* margin:10px 0px 0px 20px; */
-    margin-top:40px;
-    border-style:none;
-}
-
-#fsdocs-nav input{
-    /* margin-left: 20px; */
-    margin-right: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    width: 93%;
-    -webkit-border-radius: 0;
-    border-radius: 0;
+    /* margin:10px 0 0 20px; */
+    margin-top: 40px;
+    border-style: none;
 }
 
 #fsdocs-nav {
     /* margin-left: -5px; */
     /* width: 90%; */
-    font-size:0.95rem;
+    font-size: 0.95rem;
 }
 
-#fsdocs-nav li.nav-header{
+#fsdocs-nav li.nav-header {
     /* margin-left: -5px; */
     /* width: 90%; */
     padding-left: 0;
-    color: #262626;
     text-transform: none;
-    font-size:16px;
+    font-size: 16px;
     margin-top: 9px;
     font-weight: bold;
 }
 
-#fsdocs-nav a{
+#fsdocs-nav a {
     padding-left: 0;
-    color: #6c6c6d;
-    /* margin-left: 5px; */
-    /* width: 90%; */
+    color: var(--bs-gray);
+}
+
+[data-bs-theme=dark] #fsdocs-nav a {
+    color: var(--bs-white);
 }
 
 /*--------------------------------------------------------------------------
@@ -312,8 +297,8 @@ blockquote {
     /* font-size: 0.83rem; */
     font: 0.85rem 'Roboto Mono', monospace;
     background-color: #f7f7f900;
-    border: 0px;
-    padding: 0px;
+    border: 0;
+    padding: 0;
     /* word-wrap: break-word; */
     /* white-space: pre; */
 }
@@ -323,7 +308,7 @@ blockquote {
     background: #3c4e52;
     border-radius: 5px;
     color: #808080;
-    padding: 0px 0px 1px 0px;
+    padding: 0 0 1px 0;
 }
 
 #fsdocs-content pre .fssnip code {
@@ -334,43 +319,43 @@ blockquote {
 #fsdocs-content pre.fssnip,
 #fsdocs-content pre {
     line-height: 13pt;
-    border: 0px solid #d8d8d8;
-    border-top: 0px solid #e3e3e3;
+    border: 0px solid var(--fsdocs-pre-border-color);
+    border-top: 0px solid var(--fsdocs-pre-border-color-top);
     border-collapse: separate;
     white-space: pre;
     font: 0.86rem 'Roboto Mono', monospace;
     width: 100%;
-    margin: 10px 0px 20px 0px;
-    background-color: #f3f4f7;
+    margin: 10px 0 20px 0;
+    background-color: var(--fsdocs-pre-background-color);
     padding: 10px;
     border-radius: 5px;
-    color: #8e0e2b;
+    color:  var(--fsdocs-pre-color);
     max-width: none;
     box-sizing: border-box;
 }
 
 #fsdocs-content pre.fssnip code {
-    font: 0.86rem 'Roboto Mono', monospace;
+    font: 0.86rem monospace;
     font-weight: 600;
 }
 
 #fsdocs-content table.pre {
-    background-color: #fff7ed;
+    background-color: var(--fsdocs-pre-background-color);
 }
 
 #fsdocs-content table.pre pre {
-    padding: 0px;
-    margin: 0px;
-    border-radius: 0px;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
     width: 100%;
-    background-color: #fff7ed;
-    color: #837b79;
+    background-color: var(--fsdocs-pre-background-color);
+    color: var(--bs-body-color);
 }
 
 #fsdocs-content table.pre td {
-    padding: 0px;
+    padding: 0;
     white-space: normal;
-    margin: 0px;
+    margin: 0;
     width: 100%;
 }
 
@@ -388,7 +373,7 @@ blockquote {
     line-height: 1.375rem;
     letter-spacing: 0.01px;
     font-weight: 700;
-    color: #262626;    
+    color: var(--bs-gray-200);
 }
 
 /*--------------------------------------------------------------------------
@@ -400,38 +385,38 @@ blockquote {
     text-decoration: none;
 }
 
-    .fsdocs-source-link img {
-        border-style: none;
-        margin-left: 10px;
-        width: auto;
-        height: 1.4em;        
-    }
+.fsdocs-source-link img {
+    border-style: none;
+    margin-left: 10px;
+    width: auto;
+    height: 1.4em;
+}
 
-    .fsdocs-source-link .hover {
-        display: none;
-    }
+.fsdocs-source-link .hover {
+    display: none;
+}
 
-    .fsdocs-source-link:hover .hover {
-        display: block;
-    }
+.fsdocs-source-link:hover .hover {
+    display: block;
+}
 
-    .fsdocs-source-link .normal {
-        display: block;
-    }
+.fsdocs-source-link .normal {
+    display: block;
+}
 
-    .fsdocs-source-link:hover .normal {
-        display: none;
-    }
+.fsdocs-source-link:hover .normal {
+    display: none;
+}
 
 /*--------------------------------------------------------------------------
   Formatting logo
 /*--------------------------------------------------------------------------*/
 
 #fsdocs-logo {
-    width:140px;
-    height:140px;
-    margin:10px 0px 0px 0px;
-    border-style:none;
+    width: 140px;
+    height: 140px;
+    margin: 10px 0 0 0;
+    border-style: none;
 }
 
 /*--------------------------------------------------------------------------
@@ -439,8 +424,8 @@ blockquote {
 /*--------------------------------------------------------------------------*/
 
 #fsdocs-content table.pre pre {
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
     border: none;
 }
 
@@ -466,7 +451,7 @@ blockquote {
 #fsdocs-content h6 a,
 #fsdocs-content h6 a:hover,
 #fsdocs-content h6 a:focus {
-    color: #262626;
+    color: var(--bs-body-color);
     text-decoration: none;
     text-decoration-style: none;
     /* outline: none */
@@ -476,6 +461,82 @@ blockquote {
   Formatting for F# code snippets
 /*--------------------------------------------------------------------------*/
 
+:root {
+    --fsdocs-pre-border-color: #d8d8d8;
+    --fsdocs-pre-border-color-top: #e3e3e3;
+    --fsdocs-pre-background-color: #f3f4f7;
+    --fsdocs-pre-color: #8e0e2b;
+    --fsdocs-table-pre-background-color: #fff7ed;
+    --fsdocs-table-pre-color: #837b79;
+    
+    --fsdocs-code-strings-color: #dd1144;
+    --fsdocs-code-printf-color: #E0C57F;
+    --fsdocs-code-escaped-color: #EA8675;
+    --fsdocs-code-identifiers-color: var(--bs-body-color);
+    --fsdocs-code-module-color: #009999;
+    --fsdocs-code-reference-color: #4974D1;
+    --fsdocs-code-value-color: #43AEC6;
+    --fsdocs-code-interface-color: #43AEC6;
+    --fsdocs-code-typearg-color: #43AEC6;
+    --fsdocs-code-disposable-color: #43AEC6;
+    --fsdocs-code-property-color: #43AEC6;
+    --fsdocs-code-punctuation-color: #43AEC6;
+    --fsdocs-code-punctuation2-color: var(--bs-body-color);
+    --fsdocs-code-function-color: #e1e1e1;
+    --fsdocs-code-function2-color: #990000;
+    --fsdocs-code-activepattern-color: #4ec9b0;
+    --fsdocs-code-unioncase-color: #4ec9b0;
+    --fsdocs-code-enumeration-color: #4ec9b0;
+    --fsdocs-code-keywords-color: #b68015;
+    --fsdocs-code-comment-color: #808080;
+    --fsdocs-code-operators-color: #af75c1;
+    --fsdocs-code-numbers-color: #009999;
+    --fsdocs-code-linenumbers-color: #80b0b0;
+    --fsdocs-code-mutable-color: #d1d1d1;
+    --fsdocs-code-inactive-color: #808080;
+    --fsdocs-code-preprocessor-color: #af75c1;
+    --fsdocs-code-fsioutput-color: #808080;
+    --fsdocs-code-tooltip-color: #d1d1d1;
+}
+
+[data-bs-theme=dark] {
+    --fsdocs-pre-border-color: #000000;
+    --fsdocs-pre-border-color-top: #070707;
+    --fsdocs-pre-background-color: #3e3e42;
+    --fsdocs-pre-color: #e2e2e2;
+    --fsdocs-table-pre-background-color: #1d1d1d;
+    --fsdocs-table-pre-color: #c9c9c9;
+
+    --fsdocs-code-strings-color: #ea9a75;
+    --fsdocs-code-printf-color: #E0C57F;
+    --fsdocs-code-escaped-color: #EA8675;
+    --fsdocs-code-identifiers-color: var(--bs-body-color);
+    --fsdocs-code-module-color: #43AEC6;
+    --fsdocs-code-reference-color: #6a8dd8;
+    --fsdocs-code-value-color: #43AEC6;
+    --fsdocs-code-interface-color: #43AEC6;
+    --fsdocs-code-typearg-color: #43AEC6;
+    --fsdocs-code-disposable-color: #2f798a;
+    --fsdocs-code-property-color: #43AEC6;
+    --fsdocs-code-punctuation-color: #43AEC6;
+    --fsdocs-code-punctuation2-color: #e1e1e1;
+    --fsdocs-code-function-color: #e1e1e1;
+    --fsdocs-code-function2-color: #43AEC6;
+    --fsdocs-code-activepattern-color: #4ec9b0;
+    --fsdocs-code-unioncase-color: #4ec9b0;
+    --fsdocs-code-enumeration-color: #4ec9b0;
+    --fsdocs-code-keywords-color: #2248c4;
+    --fsdocs-code-comment-color: #329215;
+    --fsdocs-code-operators-color: #af75c1;
+    --fsdocs-code-numbers-color: #96C71D;
+    --fsdocs-code-linenumbers-color: #80b0b0;
+    --fsdocs-code-mutable-color: #997f0c;
+    --fsdocs-code-inactive-color: #808080;
+    --fsdocs-code-preprocessor-color: #af75c1;
+    --fsdocs-code-fsioutput-color: #808080;
+    --fsdocs-code-tooltip-color: #d1d1d1;
+}
+
 .fsdocs-param-name,
 .fsdocs-return-name,
 .fsdocs-param {
@@ -483,116 +544,142 @@ blockquote {
     font-size: 0.85rem;
     font-family: 'Roboto Mono', monospace;
 }
+
 /* strings --- and stlyes for other string related formats */
 #fsdocs-content span.s {
-    color: #dd1144;
+    color: var(--fsdocs-code-strings-color);
 }
+
 /* printf formatters */
 #fsdocs-content span.pf {
-    color: #E0C57F;
+    color: var(--fsdocs-code-printf-color);
 }
+
 /* escaped chars */
 #fsdocs-content span.e {
-    color: #EA8675;
+    color: var(--fsdocs-code-escaped-color);
 }
 
 /* identifiers --- and styles for more specific identifier types */
 #fsdocs-content span.id {
-    color: #262626;
+    color: var(--fsdocs-identifiers-color);;
 }
+
 /* module */
 #fsdocs-content span.m {
-    color: #009999;
+    color: var(--fsdocs-code-module-color);
 }
+
 /* reference type */
 #fsdocs-content span.rt {
-    color: #4974D1;
+    color: var(--fsdocs-code-reference-color);
 }
+
 /* value type */
 #fsdocs-content span.vt {
-    color: #43AEC6;
+    color: var(--fsdocs-code-value-color);
 }
+
 /* interface */
 #fsdocs-content span.if {
-    color: #43AEC6;
+    color: var(--fsdocs-code-interface-color);
 }
+
 /* type argument */
 #fsdocs-content span.ta {
-    color: #43AEC6;
+    color: var(--fsdocs-code-typearg-color);
 }
+
 /* disposable */
 #fsdocs-content span.d {
-    color: #43AEC6;
+    color: var(--fsdocs-code-disposable-color);
 }
+
 /* property */
 #fsdocs-content span.prop {
-    color: #43AEC6;
+    color: var(--fsdocs-code-property-color);
 }
+
 /* punctuation */
 #fsdocs-content span.p {
-    color: #43AEC6;
+    color: var(--fsdocs-code-punctuation-color);
 }
+
 #fsdocs-content span.pn {
-    color: #262626;
+    color: var(--fsdocs-code-punctuation2-color);
 }
+
 /* function */
 #fsdocs-content span.f {
-    color: #e1e1e1;
+    color: var(--fsdocs-code-function-color);
 }
+
 #fsdocs-content span.fn {
-    color: #990000;
+    color: var(--fsdocs-code-function2-color);
 }
+
 /* active pattern */
 #fsdocs-content span.pat {
-    color: #4ec9b0;
+    color: var(--fsdocs-code-activepattern-color);
 }
+
 /* union case */
 #fsdocs-content span.u {
-    color: #4ec9b0;
+    color: var(--fsdocs-code-unioncase-color);
 }
+
 /* enumeration */
 #fsdocs-content span.e {
-    color: #4ec9b0;
+    color: var(--fsdocs-code-enumeration-color);
 }
+
 /* keywords */
 #fsdocs-content span.k {
-    color: #b68015;
+    color: var(--fsdocs-code-keywords-color);
     /* font-weight: bold; */
 }
+
 /* comment */
 #fsdocs-content span.c {
-    color: #808080;
+    color: var(--fsdocs-code-comment-color);
     font-weight: 400;
     font-style: italic;
 }
+
 /* operators */
 #fsdocs-content span.o {
-    color: #af75c1;
+    color: var(--fsdocs-code-operators-color);
 }
+
 /* numbers */
 #fsdocs-content span.n {
-    color: #009999;
+    color: var(--fsdocs-code-numbers-color);
 }
+
 /* line number */
 #fsdocs-content span.l {
-    color: #80b0b0;
+    color: var(--fsdocs-code-linenumbers-color);
 }
+
 /* mutable var or ref cell */
 #fsdocs-content span.v {
-    color: #d1d1d1;
+    color: var(--fsdocs-code-mutable-color);
     font-weight: bold;
 }
+
 /* inactive code */
 #fsdocs-content span.inactive {
-    color: #808080;
+    color: var(--fsdocs-code-inactive-color);
 }
+
 /* preprocessor */
 #fsdocs-content span.prep {
-    color: #af75c1;
+    color: var(--fsdocs-code-preprocessor-color);
 }
+
 /* fsi output */
 #fsdocs-content span.fsi {
-    color: #808080;
+    color: var(--fsdocs-code-fsioutput-color);
 }
 
 /* tool tip */
@@ -602,12 +689,11 @@ div.fsdocs-tip {
     font: 0.85rem 'Roboto Mono', monospace;
     padding: 6px 8px 6px 8px;
     display: none;
-    color: #d1d1d1;
+    color: var(--fsdocs-code-tooltip-color);
     pointer-events: none;
 }
 
-    div.fsdocs-tip code {
-        color: #d1d1d1;
-        font: 0.85rem 'Roboto Mono', monospace;
-    }
-
+div.fsdocs-tip code {
+    color: var(--fsdocs-code-tooltip-color);
+    font: 0.85rem 'Roboto Mono', monospace;
+}
diff --git a/docs/content/navbar-fixed-left.css b/docs/content/navbar-fixed-left.css
index 2de6255a8..ca32b7e20 100644
--- a/docs/content/navbar-fixed-left.css
+++ b/docs/content/navbar-fixed-left.css
@@ -13,11 +13,13 @@ body {
         margin-left: 252px;
     }
 }
+
 .navbar {
     overflow-y: auto;
     overflow-x: hidden;
     box-shadow: none;
 }
+
 .navbar.fixed-left {
     position: fixed;
     top: 0;
@@ -25,6 +27,7 @@ body {
     right: 0;
     z-index: 1030;
 }
+
 .navbar-nav .nav-link {
     padding-top: 0.3rem;
     padding-bottom: 0.3rem;
@@ -38,40 +41,32 @@ body {
         align-items: flex-start;
     }
 
-        .navbar.fixed-left .navbar-collapse {
-            flex-grow: 0;
-            flex-direction: column;
-            width: 100%;
-        }
+    .navbar.fixed-left .navbar-collapse {
+        flex-grow: 0;
+        flex-direction: column;
+        width: 100%;
+    }
 
-            .navbar.fixed-left .navbar-collapse .navbar-nav {
-                flex-direction: column;
-                width: 100%;
-            }
+    .navbar.fixed-left .navbar-collapse .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+    }
 
-                .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
-                    width: 100%;
-                }
+    .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
+        width: 100%;
+    }
 
-                    .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
-                        top: 0;
-                    }
+    .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
+        top: 0;
+    }
 }
 
 @media (min-width: 768px) {
     .navbar.fixed-left {
         right: auto;
     }
-
-        .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after {
-            border-top: 0.3em solid transparent;
-            border-left: 0.3em solid;
-            border-bottom: 0.3em solid transparent;
-            border-right: none;
-            vertical-align: baseline;
-        }
-
-        .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
-            left: 100%;
-        }
+    
+    .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
+        left: 100%;
+    }
 }
diff --git a/docs/content/navbar-fixed-right.css b/docs/content/navbar-fixed-right.css
index ad6cef83b..f0bb36e25 100644
--- a/docs/content/navbar-fixed-right.css
+++ b/docs/content/navbar-fixed-right.css
@@ -19,6 +19,7 @@ body {
     overflow-x: hidden;
     box-shadow: none;
 }
+
 .navbar.fixed-right {
     position: fixed;
     top: 0;
@@ -26,10 +27,12 @@ body {
     right: 0;
     z-index: 1030;
 }
+
 .navbar-nav .nav-link {
     padding-top: 0.3rem;
     padding-bottom: 0.3rem;
 }
+
 @media (min-width: 768px) {
     .navbar.fixed-right {
         bottom: 0;
@@ -38,24 +41,24 @@ body {
         align-items: flex-start;
     }
 
-        .navbar.fixed-right .navbar-collapse {
-            flex-grow: 0;
-            flex-direction: column;
-            width: 100%;
-        }
+    .navbar.fixed-right .navbar-collapse {
+        flex-grow: 0;
+        flex-direction: column;
+        width: 100%;
+    }
 
-            .navbar.fixed-right .navbar-collapse .navbar-nav {
-                flex-direction: column;
-                width: 100%;
-            }
+    .navbar.fixed-right .navbar-collapse .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+    }
 
-                .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item {
-                    width: 100%;
-                }
+    .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item {
+        width: 100%;
+    }
 
-                    .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
-                        top: 0;
-                    }
+    .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
+        top: 0;
+    }
 }
 
 @media (min-width: 768px) {
@@ -63,16 +66,8 @@ body {
         left: auto;
     }
 
-        .navbar.fixed-right .navbar-nav .nav-item .dropdown-toggle:after {
-            border-top: 0.3em solid transparent;
-            border-left: none;
-            border-bottom: 0.3em solid transparent;
-            border-right: 0.3em solid;
-            vertical-align: baseline;
-        }
-
-        .navbar.fixed-right .navbar-nav .nav-item .dropdown-menu {
-            left: auto;
-            right: 100%;
-        }
+    .navbar.fixed-right .navbar-nav .nav-item .dropdown-menu {
+        left: auto;
+        right: 100%;
+    }
 }
diff --git a/docs/templates/leftside/_template.html b/docs/templates/leftside/_template.html
index 84a58b472..414b76f5d 100644
--- a/docs/templates/leftside/_template.html
+++ b/docs/templates/leftside/_template.html
@@ -6,21 +6,18 @@
     <title>{{fsdocs-page-title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="author" content="{{fsdocs-authors}}">
-
-    <link rel="stylesheet" id="theme_link" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.6.0/materia/bootstrap.min.css">
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
-
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link rel="stylesheet" id="theme_link" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.1/dist/materia/bootstrap.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
     <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-
+    <link rel="shortcut icon" type="image/x-icon" href="{{root}}img/favicon.ico">
     <link type="text/css" rel="stylesheet" href="{{root}}content/navbar-fixed-right.css" />
     <link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-default.css" />
     <link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-custom.css" />
     <script type="text/javascript" src="{{root}}content/fsdocs-tips.js"></script>
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
     <!-- BEGIN SEARCH BOX: this adds support for the search box -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.css" />
     <!-- END SEARCH BOX: this adds support for the search box -->
@@ -28,27 +25,24 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-expand-md navbar-light bg-secondary fixed-right" id="fsdocs-nav">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-expand-md p-3 body fixed-right" id="fsdocs-nav">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse navbar-nav-scroll" id="navbarsExampleDefault">
             <a href="{{fsdocs-logo-link}}"><img id="fsdocs-logo" src="{{fsdocs-logo-src}}" /></a>
             <!-- BEGIN SEARCH BOX: this adds support for the search box -->
             <div id="header">
-                <div class="searchbox" id="fsdocs-searchbox">
-                    <label for="search-by">
-                        <i class="fas fa-search"></i>
-                    </label>
-                    <input data-search-input="" id="search-by" type="search" placeholder="Search..." />
+                <div id="fsdocs-searchbox" class="d-flex align-items-center rounded p-1">
+                    <iconify-icon icon="ic:outline-search" width="24" height="24"></iconify-icon>
+                    <input class="form-control mx-1 p-0" data-search-input="" id="search-by" type="search" placeholder="Search..." />
                     <span data-search-clear="">
-                        <i class="fas fa-times"></i>
                     </span>
                 </div>
             </div>
 
             <!-- END SEARCH BOX: this adds support for the search box -->
-            <ul class="navbar-nav">
+            <ul class="navbar-nav border-bottom">
                 <li class="nav-header">Links</li>
                 <li class="nav-item" id="fsdocs-license-link"><a class="nav-link" href="{{fsdocs-license-link}}">License (Apache 2.0)</a></li>
                 <li class="nav-item" id="fsdocs-release-notes-link"><a class="nav-link" href="{{fsdocs-release-notes-link}}">Release Notes</a></li>
@@ -75,6 +69,7 @@ <h3 class="muted"><a href="{{fsdocs-collection-name-link}}">{{fsdocs-collection-
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js"></script>
         <script type="text/javascript" src="{{root}}content/fsdocs-search.js"></script>
         <!-- END SEARCH BOX: this adds support for the search box -->
+        <script type="module" src="{{root}}content/darkLight.js"></script>
     </div>
 </body>
 
