Merge pull request #103 from netbootxyz/add-dark-mode-support

antonym · web-flow · commit ecf5d580bcc6 · 2025-06-11T23:29:54.000-05:00
Add dark mode support to webapp UI
diff --git a/public/index.ejs b/public/index.ejs
@@ -29,6 +29,7 @@
     <link rel="stylesheet" href="<%= baseurl %>public/vendor/css/bootstrap.min.css">
     <link rel="stylesheet" href="<%= baseurl %>public/vendor/css/docs.min.css">
     <link rel="stylesheet" href="<%= baseurl %>public/vendor/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" href="<%= baseurl %>public/vendor/css/dark-theme.css">
   </head>
   <body>
     <!-- Navigation -->
@@ -54,6 +55,11 @@
         </ul>
         <ul class="navbar-nav ml-auto">
           <div id="statusbar" style="width:500px" ></div>
+          <li class="nav-item">
+            <button class="theme-toggle" onclick="toggleTheme()" title="Toggle dark/light theme">
+              <span id="theme-icon">🌙</span>
+            </button>
+          </li>
         </ul>
       </div>
     </nav>
diff --git a/public/netbootxyz-web.ejs b/public/netbootxyz-web.ejs
@@ -1,14 +1,55 @@
 // netboot.xyz
 // Client side javascript
 
+//// Theme Management ////
+function initializeTheme() {
+  const savedTheme = localStorage.getItem('netbootxyz-theme') || 'light';
+  applyTheme(savedTheme);
+}
+
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  applyTheme(newTheme);
+  localStorage.setItem('netbootxyz-theme', newTheme);
+}
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  const themeIcon = document.getElementById('theme-icon');
+  if (themeIcon) {
+    themeIcon.textContent = theme === 'light' ? '🌙' : '☀️';
+  }
+  
+  // Update Ace Editor theme if it exists
+  updateAceEditorTheme(theme);
+}
+
+function updateAceEditorTheme(theme) {
+  const editorElement = document.getElementById('editor');
+  if (editorElement && typeof ace !== 'undefined') {
+    try {
+      const editor = ace.edit('editor');
+      const aceTheme = theme === 'dark' ? 'ace/theme/monokai' : 'ace/theme/chrome';
+      editor.setTheme(aceTheme);
+    } catch (e) {
+      // Editor might not be initialized yet, ignore
+    }
+  }
+}
+
 
 // Initiate a websocket connection to the server
 var host = window.location.hostname; 
 var port = window.location.port;
 var protocol = window.location.protocol;
 var socket = io.connect(protocol + '//' + host + ':' + port, {path: "<%= baseurl %>socket.io"});
 // If the page is being loaded for the first time render in the homepage
-$(document).ready(function(){renderdash()})
+$(document).ready(function(){
+  // Initialize theme from localStorage or default to light
+  initializeTheme();
+  renderdash();
+})
 
 
 //// Dashboard Page rendering ////
@@ -212,7 +253,9 @@ socket.on('editrenderfile', function(response,filename,metadata){
   </div>\
   <div id="editor" style="height:100%;width:100%"></div>');
   editor = ace.edit('editor');
-  editor.setTheme('ace/theme/chrome');
+  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+  const aceTheme = currentTheme === 'dark' ? 'ace/theme/monokai' : 'ace/theme/chrome';
+  editor.setTheme(aceTheme);
   editor.session.setMode('ace/mode/sh');
   editor.$blockScrolling = Infinity;
   editor.setOptions({
diff --git a/public/vendor/css/dark-theme.css b/public/vendor/css/dark-theme.css
