Enhance theme customization and preview in settings

Added support for a dynamic 'Custom' theme button that appears when user settings diverge from predefined themes. Improved theme state management by tracking the active theme name in localStorage, updating button states, and refining the preview to better reflect customizations. Also updated the settings page layout and styles for better user experience and fixed the preview to always show the custom title.

renderer/settings.html

@@ -55,6 +55,22 @@
       background: rgba(123, 46, 255, 0.1);
     }
     
+    .custom-theme-btn {
+      border: 2px dashed rgba(255, 255, 255, 0.3) !important;
+      opacity: 0.9;
+    }
+    
+    .custom-theme-btn:hover {
+      border-color: var(--accent) !important;
+      opacity: 1;
+    }
+    
+    .custom-theme-btn.active {
+      border-color: var(--primary) !important;
+      background: rgba(123, 46, 255, 0.15) !important;
+      opacity: 1;
+    }
+    
     .theme-preview {
       width: 60px;
       height: 40px;
@@ -195,6 +211,13 @@
       color: var(--primary);
     }
     
+    .preview-text {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: var(--primary);
+      margin-top: 5px;
+    }
+    
     .preview-search {
       width: 60%;
       height: 40px;
@@ -237,7 +260,7 @@
       <div class="customization-group">
         <h3>Theme Presets</h3>
         <div class="theme-selector">
-          <button id="theme-default" class="theme-btn active" data-theme="default">
+          <button id="theme-default" class="theme-btn" data-theme="default">
             <div class="theme-preview" style="background: linear-gradient(145deg, #121418, #1B1035);"></div>
             <span>Default</span>
           </button>
@@ -285,6 +308,10 @@
             <div class="theme-preview" style="background: linear-gradient(145deg, #f8f4ff, #e6d8ff);"></div>
             <span>Lavender Fields</span>
           </button>
+          <button id="theme-custom" class="theme-btn custom-theme-btn" data-theme="custom" style="display: none;">
+            <div class="theme-preview" style="background: linear-gradient(145deg, var(--bg), var(--gradient-color));"></div>
+            <span>Custom</span>
+          </button>
         </div>
       </div>
 
@@ -366,7 +393,8 @@
         <h3>Preview</h3>
         <div class="preview-container" id="preview-container">
           <div class="preview-home">
-            <div class="preview-logo">🌌 Nebula</div>
+            <div class="preview-logo" id="preview-logo">../assets/images/Logos/Nebula-Logo.svg</div>
+            <div class="preview-text">Nebula</div>
             <div class="preview-search"></div>
             <div class="preview-bookmarks">
               <div class="preview-bookmark"></div>