diff --git a/_includes/topnav.html b/_includes/topnav.html
index 30715638..0277b658 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,81 +1,69 @@
 <!-- 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 -->
-
-{% 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 %}
+      <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">
+          <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
+  
+          <!-- Theme Toggle Button -->
+          <li>
+            <a href="#" id="theme-toggle">
+              <i class="fa fa-adjust"></i> Theme
+            </a>
+          </li>
+  
+          {% 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 %}
+              {% elsif page.url contains item.url %}
                 <li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
-                {% else %}
+              {% 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 %}
-                {% 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 -->
-</nav>
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+  
+          {% 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 %}
+          {% endfor %}
+  
+          {% if site.feedback_disable == null or site.feedback_disable == false %}
+            {% include feedback.html %}
+          {% endif %}
+        </ul>
+      </div>
+    </div>
+  </nav>
+  
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 0d7602de..1db779af 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,14 +2,37 @@
 <html>
 <head>
     {% include head.html %}
+
+    <!-- Theme stylesheet -->
+    <link id="theme-stylesheet" rel="stylesheet" href="{{ '/css/theme-dark.css' | relative_url }}">
+
+    <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() {
+        $(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);
+            });
+
             // Initialize navgoco with default options
             $("#mysidebar").navgoco({
                 caretHtml: '',
                 accordion: true,
-                openClass: 'active', // open
-                save: false, // leave false or nav highlighting doesn't work right
+                openClass: 'active',
+                save: false,
                 cookie: {
                     name: 'navgoco',
                     expires: false,
@@ -21,86 +44,67 @@
                 }
             });
 
-            $("#collapseAll").click(function(e) {
+            $("#collapseAll").click(function (e) {
                 e.preventDefault();
                 $("#mysidebar").navgoco('toggle', false);
             });
 
-            $("#expandAll").click(function(e) {
+            $("#expandAll").click(function (e) {
                 e.preventDefault();
                 $("#mysidebar").navgoco('toggle', true);
             });
 
-        });
+            $('[data-toggle="tooltip"]').tooltip();
 
-    </script>
-    <script>
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-    </script>
-    <script>
-        $(document).ready(function() {
-            $("#tg-sb-link").click(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');
+                $("#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 %}
-    <!-- Include the standard DataTables bits -->
-    <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>
-      $(document).ready(function(){
-          $('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
-          $('table.display').DataTable( {
-              paging: true,
-              stateSave: true,
-              searching: true
-          });
-       });
-    </script>
+        <!-- DataTables setup -->
+        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
+        <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
+                });
+            });
+        </script>
     {% endif %}
-
 </head>
 <body>
-{% include topnav.html %}
-<!-- Page Content -->
-<div class="container">
-  <div id="main">
-    <!-- Content Row -->
-    <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" %}
-        {% endunless %}
 
-        <!-- Content Column -->
-        <div class="{{content_col_size}}" id="tg-sb-content">
-            {{content}}
+    {% 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 %}
+                    <div class="col-md-3" id="tg-sb-sidebar">
+                        {% include sidebar.html %}
+                    </div>
+                    {% assign content_col_size = "col-md-9" %}
+                {% endunless %}
+
+                <div class="{{ content_col_size }}" id="tg-sb-content">
+                    {{ content }}
+                </div>
+            </div>
         </div>
-    <!-- /.row -->
-</div>
-<!-- /.container -->
-</div>
-<!-- /#main -->
     </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;
+}