diff --git a/_includes/topnav.html b/_includes/topnav.html
index 30715638..ae37f63c 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,81 +1,88 @@
 <!-- Navigation -->
 <nav class="navbar navbar-inverse navbar-static-top">
-    <div class="container topnavlinks">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{{site.baseurl}}/"><img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo"><span class="projectTitle"> {{site.topnav_title}}</span></a>
-        </div>
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <ul class="nav navbar-nav navbar-right">
-                <!-- toggle sidebar button -->
-                <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
-                <!-- entries without drop-downs appear here -->
+  <div class="container topnavlinks">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="{{site.baseurl}}/">
+        <img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo">
+        <span class="projectTitle"> {{site.topnav_title}}</span>
+      </a>
+    </div>
 
-{% assign topnav = site.data[page.topnav] %}
-{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-right">
+        <!-- toggle sidebar button -->
+        <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
 
-                {% for entry in topnav.topnav %}
-                {% for item in entry.items %}
-                {% if item.external_url %}
-                <li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
-                {% elsif page.url contains item.url %}
-                <li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
-                {% else %}
-                <li><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
-                {% endif %}
-                {% endfor %}
-                {% endfor %}
-                <!-- entries with drop-downs appear here -->
-                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
-                {% for entry in topnav_dropdowns %}
-                {% for folder in entry.folders %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        {% for folderitem in folder.folderitems %}
-                        {% if folderitem.external_url %}
-                        <li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
-                        {% elsif page.url contains folderitem.url %}
-                        <li class="dropdownActive"><a href="{{folderitem.url |  remove: "/"}}">{{folderitem.title}}</a></li>
-                        {% else %}
-                        <li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
-                        {% endif %}
-                        {% endfor %}
-                    </ul>
-                </li>
-                {% endfor %}
+        <!-- entries without drop-downs appear here -->
+        {% assign topnav = site.data[page.topnav] %}
+        {% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
+
+        {% for entry in topnav.topnav %}
+          {% for item in entry.items %}
+            {% if item.external_url %}
+              <li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
+            {% elsif page.url contains item.url %}
+              <li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
+            {% else %}
+              <li><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
+            {% endif %}
+          {% endfor %}
+        {% endfor %}
+
+        <!-- entries with drop-downs appear here -->
+        <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
+        {% for entry in topnav_dropdowns %}
+          {% for folder in entry.folders %}
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                {% for folderitem in folder.folderitems %}
+                  {% if folderitem.external_url %}
+                    <li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
+                  {% elsif page.url contains folderitem.url %}
+                    <li class="dropdownActive"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
+                  {% else %}
+                    <li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
+                  {% endif %}
                 {% endfor %}
-                {% if site.feedback_disable == null or site.feedback_disable == false %}
-			{% include feedback.html %}
-		{% endif %}
-                <!--comment out this block if you want to hide search-->
-                <!--
-                <li>
-                    <div id="search-demo-container">
-                        <input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
-                        <ul id="results-container"></ul>
-                    </div>
-                    <script src="{{ "/third_party/js/jekyll-search.js"}}" type="text/javascript"></script>
-                    <script type="text/javascript">
-                            SimpleJekyllSearch.init({
-                                searchInput: document.getElementById('search-input'),
-                                resultsContainer: document.getElementById('results-container'),
-                                dataSource: '{{ "/search.json" }}',
-                                searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
-                    noResultsText: '{{site.data.strings.search_no_results_text}}',
-                            limit: 10,
-                            fuzzy: true,
-                    })
-                    </script>
-                </li>
-                -->
-            </ul>
-        </div>
-        </div>
-        <!-- /.container -->
+              </ul>
+            </li>
+          {% endfor %}
+        {% endfor %}
+
+        {% if site.feedback_disable == null or site.feedback_disable == false %}
+          {% include feedback.html %}
+        {% endif %}
+
+        <!-- Commented out block for search -->
+        <!--
+        <li>
+          <div id="search-demo-container">
+            <input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
+            <ul id="results-container"></ul>
+          </div>
+          <script src="{{ "/third_party/js/jekyll-search.js"}}" type="text/javascript"></script>
+          <script type="text/javascript">
+            SimpleJekyllSearch.init({
+              searchInput: document.getElementById('search-input'),
+              resultsContainer: document.getElementById('results-container'),
+              dataSource: '{{ "/search.json" }}',
+              searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
+              noResultsText: '{{site.data.strings.search_no_results_text}}',
+              limit: 10,
+              fuzzy: true
+            })
+          </script>
+        </li>
+        -->
+      </ul>
+    </div>
+  </div>
+  <!-- /.container -->
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index 0d7602de..9284eed5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,106 +1,110 @@
 <!DOCTYPE html>
 <html>
 <head>
-    {% include head.html %}
-    <script>
-        $(document).ready(function() {
-            // Initialize navgoco with default options
-            $("#mysidebar").navgoco({
-                caretHtml: '',
-                accordion: true,
-                openClass: 'active', // open
-                save: false, // leave false or nav highlighting doesn't work right
-                cookie: {
-                    name: 'navgoco',
-                    expires: false,
-                    path: '/'
-                },
-                slide: {
-                    duration: 400,
-                    easing: 'swing'
-                }
-            });
+  {% include head.html %}
 
-            $("#collapseAll").click(function(e) {
-                e.preventDefault();
-                $("#mysidebar").navgoco('toggle', false);
-            });
+  <!-- Theme stylesheet -->
+  <link id="theme-stylesheet" rel="stylesheet" href="{{ '/css/theme-dark.css' | relative_url }}">
 
-            $("#expandAll").click(function(e) {
-                e.preventDefault();
-                $("#mysidebar").navgoco('toggle', true);
-            });
+  <script>
+    // Load saved theme from localStorage
+    document.addEventListener("DOMContentLoaded", function () {
+      const themeLink = document.getElementById("theme-stylesheet");
+      const savedTheme = localStorage.getItem("theme") || "dark";
+      themeLink.href = "/css/theme-" + savedTheme + ".css";
+    });
+  </script>
 
-        });
+  <script>
+    $(document).ready(function () {
+      // Theme toggle logic
+      $("#theme-toggle").click(function (e) {
+        e.preventDefault();
+        const themeLink = $("#theme-stylesheet");
+        const currentHref = themeLink.attr("href");
+        const newTheme = currentHref.includes("dark") ? "light" : "dark";
+        themeLink.attr("href", "/css/theme-" + newTheme + ".css");
+        localStorage.setItem("theme", newTheme);
+      });
 
-    </script>
-    <script>
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-    </script>
-    <script>
-        $(document).ready(function() {
-            $("#tg-sb-link").click(function() {
-                $("#tg-sb-sidebar").toggle();
-                $("#tg-sb-content").toggleClass('col-md-9');
-                $("#tg-sb-content").toggleClass('col-md-12');
-                $("#tg-sb-icon").toggleClass('fa-toggle-on');
-                $("#tg-sb-icon").toggleClass('fa-toggle-off');
-            });
-        });
-    </script>
-    {% if page.datatable == true %}
-    <!-- Include the standard DataTables bits -->
+      // Initialize navgoco with default options
+      $("#mysidebar").navgoco({
+        caretHtml: '',
+        accordion: true,
+        openClass: 'active',
+        save: false,
+        cookie: {
+          name: 'navgoco',
+          expires: false,
+          path: '/'
+        },
+        slide: {
+          duration: 400,
+          easing: 'swing'
+        }
+      });
+
+      $("#collapseAll").click(function (e) {
+        e.preventDefault();
+        $("#mysidebar").navgoco('toggle', false);
+      });
+
+      $("#expandAll").click(function (e) {
+        e.preventDefault();
+        $("#mysidebar").navgoco('toggle', true);
+      });
+
+      $('[data-toggle="tooltip"]').tooltip();
+
+      $("#tg-sb-link").click(function () {
+        $("#tg-sb-sidebar").toggle();
+        $("#tg-sb-content").toggleClass('col-md-9 col-md-12');
+        $("#tg-sb-icon").toggleClass('fa-toggle-on fa-toggle-off');
+      });
+    });
+  </script>
+
+  {% if page.datatable == true %}
+    <!-- DataTables setup -->
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
-    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
-    <!-- First, this walks through the tables that occur between ...-begin
-         and ...-end and add the "datatable" class to them.
-         Then it invokes DataTable's standard initializer
-         Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
-      -->
+    <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
     <script>
-      $(document).ready(function(){
-          $('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
-          $('table.display').DataTable( {
-              paging: true,
-              stateSave: true,
-              searching: true
-          });
-       });
+      $(document).ready(function () {
+        $('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
+        $('table.display').DataTable({
+          paging: true,
+          stateSave: true,
+          searching: true
+        });
+      });
     </script>
-    {% endif %}
-
+  {% endif %}
 </head>
 <body>
-{% include topnav.html %}
-<!-- Page Content -->
-<div class="container">
-  <div id="main">
-    <!-- Content Row -->
-    <div class="row">
+
+  {% include topnav.html %}
+
+  <!-- Page Content -->
+  <div class="container">
+    <div id="main">
+      <div class="row">
         {% assign content_col_size = "col-md-12" %}
         {% unless page.hide_sidebar %}
-            <!-- Sidebar Column -->
-            <div class="col-md-3" id="tg-sb-sidebar">
-                {% include sidebar.html %}
-            </div>
-            {% assign content_col_size = "col-md-9" %}
+          <div class="col-md-3" id="tg-sb-sidebar">
+            {% include sidebar.html %}
+          </div>
+          {% assign content_col_size = "col-md-9" %}
         {% endunless %}
 
-        <!-- Content Column -->
-        <div class="{{content_col_size}}" id="tg-sb-content">
-            {{content}}
+        <div class="{{ content_col_size }}" id="tg-sb-content">
+          {{ content }}
         </div>
-    <!-- /.row -->
-</div>
-<!-- /.container -->
-</div>
-<!-- /#main -->
+      </div>
     </div>
+  </div>
 
+  {% if site.google_analytics %}
+    {% include google_analytics.html %}
+  {% endif %}
 </body>
-{% if site.google_analytics %}
-{% include google_analytics.html %}
-{% endif %}
 </html>
diff --git a/css/theme-dark.css b/css/theme-dark.css
new file mode 100644
index 00000000..64ba5ff2
--- /dev/null
+++ b/css/theme-dark.css
@@ -0,0 +1,28 @@
+/* theme-dark.css */
+
+body {
+    background-color: #121212;
+    color: #f1f1f1;
+}
+
+a {
+    color: #90caf9;
+}
+
+.navbar {
+    background-color: #1f1f1f;
+}
+
+#tg-sb-sidebar {
+    background-color: #1e1e1e;
+    border-right: 1px solid #333;
+}
+
+#tg-sb-content {
+    background-color: #1a1a1a;
+}
+
+pre, code {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+}
diff --git a/css/theme-light.css b/css/theme-light.css
new file mode 100644
index 00000000..fb2a1e7d
--- /dev/null
+++ b/css/theme-light.css
@@ -0,0 +1,28 @@
+/* theme-light.css */
+
+body {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+a {
+    color: #1a0dab;
+}
+
+.navbar {
+    background-color: #f8f9fa;
+}
+
+#tg-sb-sidebar {
+    background-color: #f1f1f1;
+    border-right: 1px solid #ccc;
+}
+
+#tg-sb-content {
+    background-color: #ffffff;
+}
+
+pre, code {
+    background-color: #f5f5f5;
+    color: #333333;
+}