Add new built-in themes and update theme selection UI

Introduces seven new built-in themes (cyberpunk, midnight-rose, arctic-ice, cherry-blossom, cosmic-purple, emerald-dream, mocha-coffee, lavender-fields) with corresponding JSON files, updates the FEATURES documentation, and enhances the settings UI to display and select these themes. Also updates theme loading logic in theme-manager.js and improves the theme selector layout for better usability.

documentation/FEATURES.md

@@ -50,7 +50,7 @@ For advanced users, Nebula provides tools to manage GPU acceleration.
 
 Nebula offers extensive customization options to personalize your browsing experience.
 
--   **Theme System:** Choose from built-in themes (default, forest, ocean, sunset) or create your own custom themes.
+-   **Theme System:** Choose from built-in themes (default, forest, ocean, sunset, cyberpunk, midnight-rose, arctic-ice, cherry-blossom, cosmic-purple, emerald-dream, mocha-coffee, lavender-fields) or create your own custom themes.
 -   **Live Theme Editor:** Modify colors, gradients, and layout options with real-time preview in the settings.
 -   **Import/Export Themes:** Share custom themes with the community or use themes created by other users.
 -   **Non-Destructive Design:** All customizations are stored separately and can be reset to default at any time.

renderer/customization.js

@@ -67,6 +67,126 @@ class BrowserCustomizer {
         showLogo: true,
         customTitle: 'Nebula Browser',
         gradient: 'linear-gradient(145deg, #744210 0%, #c05621 100%)'
+      },
+      cyberpunk: {
+        name: 'Cyberpunk Neon',
+        colors: {
+          bg: '#0a0a0a',
+          darkBlue: '#1a0520',
+          darkPurple: '#2a0a3a',
+          primary: '#ff0080',
+          accent: '#00ffff',
+          text: '#ffffff'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #0a0a0a 0%, #2a0a3a 50%, #1a0520 100%)'
+      },
+      'midnight-rose': {
+        name: 'Midnight Rose',
+        colors: {
+          bg: '#1c1820',
+          darkBlue: '#2d2433',
+          darkPurple: '#3d3046',
+          primary: '#d4af37',
+          accent: '#ffd700',
+          text: '#f5f5dc'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #1c1820 0%, #3d3046 100%)'
+      },
+      'arctic-ice': {
+        name: 'Arctic Ice',
+        colors: {
+          bg: '#f0f8ff',
+          darkBlue: '#e6f3ff',
+          darkPurple: '#d1e7ff',
+          primary: '#4169e1',
+          accent: '#87ceeb',
+          text: '#2f4f4f'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #f0f8ff 0%, #d1e7ff 100%)'
+      },
+      'cherry-blossom': {
+        name: 'Cherry Blossom',
+        colors: {
+          bg: '#fff5f8',
+          darkBlue: '#ffe4e8',
+          darkPurple: '#ffd4db',
+          primary: '#ff69b4',
+          accent: '#ffb6c1',
+          text: '#8b4513'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #fff5f8 0%, #ffd4db 100%)'
+      },
+      'cosmic-purple': {
+        name: 'Cosmic Purple',
+        colors: {
+          bg: '#0f0524',
+          darkBlue: '#1a0b3d',
+          darkPurple: '#2d1b69',
+          primary: '#8a2be2',
+          accent: '#da70d6',
+          text: '#e6e6fa'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #0f0524 0%, #2d1b69 50%, #4b0082 100%)'
+      },
+      'emerald-dream': {
+        name: 'Emerald Dream',
+        colors: {
+          bg: '#0d2818',
+          darkBlue: '#1a3a2e',
+          darkPurple: '#2d5a44',
+          primary: '#50c878',
+          accent: '#98fb98',
+          text: '#f0fff0'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #0d2818 0%, #2d5a44 100%)'
+      },
+      'mocha-coffee': {
+        name: 'Mocha Coffee',
+        colors: {
+          bg: '#3c2414',
+          darkBlue: '#4a2c1a',
+          darkPurple: '#5d3a26',
+          primary: '#d2691e',
+          accent: '#daa520',
+          text: '#faf0e6'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #3c2414 0%, #5d3a26 100%)'
+      },
+      'lavender-fields': {
+        name: 'Lavender Fields',
+        colors: {
+          bg: '#f8f4ff',
+          darkBlue: '#ede4ff',
+          darkPurple: '#e6d8ff',
+          primary: '#9370db',
+          accent: '#dda0dd',
+          text: '#4b0082'
+        },
+        layout: 'centered',
+        showLogo: true,
+        customTitle: 'Nebula Browser',
+        gradient: 'linear-gradient(145deg, #f8f4ff 0%, #e6d8ff 100%)'
       }
     };
 

renderer/settings.html

@@ -23,9 +23,10 @@
     }
     
     .theme-selector {
-      display: flex;
+      display: grid;
-      gap: 10px;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      flex-wrap: wrap;
+      gap: 15px;
+      padding: 10px 0;
     }
     
     .theme-btn {
@@ -33,13 +34,16 @@
       flex-direction: column;
       align-items: center;
       gap: 8px;
-      padding: 10px;
+      padding: 12px 8px;
       background: transparent;
       border: 2px solid transparent;
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.2s ease;
       color: var(--text);
+      text-align: center;
+      font-size: 0.85rem;
+      min-height: 90px;
     }
     
     .theme-btn:hover {
@@ -56,6 +60,20 @@
       height: 40px;
       border-radius: 4px;
       border: 1px solid rgba(255, 255, 255, 0.2);
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .theme-preview::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      pointer-events: none;
     }
     
     .color-controls {
@@ -235,6 +253,38 @@
             <div class="theme-preview" style="background: linear-gradient(145deg, #744210, #c05621);"></div>
             <span>Sunset</span>
           </button>
+          <button id="theme-cyberpunk" class="theme-btn" data-theme="cyberpunk">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #0a0a0a, #2a0a3a, #1a0520);"></div>
+            <span>Cyberpunk</span>
+          </button>
+          <button id="theme-midnight-rose" class="theme-btn" data-theme="midnight-rose">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #1c1820, #3d3046);"></div>
+            <span>Midnight Rose</span>
+          </button>
+          <button id="theme-arctic-ice" class="theme-btn" data-theme="arctic-ice">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #f0f8ff, #d1e7ff);"></div>
+            <span>Arctic Ice</span>
+          </button>
+          <button id="theme-cherry-blossom" class="theme-btn" data-theme="cherry-blossom">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #fff5f8, #ffd4db);"></div>
+            <span>Cherry Blossom</span>
+          </button>
+          <button id="theme-cosmic-purple" class="theme-btn" data-theme="cosmic-purple">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #0f0524, #2d1b69, #4b0082);"></div>
+            <span>Cosmic Purple</span>
+          </button>
+          <button id="theme-emerald-dream" class="theme-btn" data-theme="emerald-dream">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #0d2818, #2d5a44);"></div>
+            <span>Emerald Dream</span>
+          </button>
+          <button id="theme-mocha-coffee" class="theme-btn" data-theme="mocha-coffee">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #3c2414, #5d3a26);"></div>
+            <span>Mocha Coffee</span>
+          </button>
+          <button id="theme-lavender-fields" class="theme-btn" data-theme="lavender-fields">
+            <div class="theme-preview" style="background: linear-gradient(145deg, #f8f4ff, #e6d8ff);"></div>
+            <span>Lavender Fields</span>
+          </button>
         </div>
       </div>
 

theme-manager.js

@@ -39,7 +39,20 @@ class ThemeManager {
 
   loadDefaultThemes() {
     const defaultThemes = {};
-    const defaultFiles = ['default.json', 'ocean.json', 'forest.json', 'sunset.json'];
+    const defaultFiles = [
+      'default.json', 
+      'ocean.json', 
+      'forest.json', 
+      'sunset.json',
+      'cyberpunk.json',
+      'midnight-rose.json',
+      'arctic-ice.json',
+      'cherry-blossom.json',
+      'cosmic-purple.json',
+      'emerald-dream.json',
+      'mocha-coffee.json',
+      'lavender-fields.json'
+    ];
     
     defaultFiles.forEach(file => {
       try {

themes/arctic-ice.json

@@ -0,0 +1,17 @@
+{
+  "name": "Arctic Ice",
+  "colors": {
+    "bg": "#f0f8ff",
+    "darkBlue": "#e6f3ff",
+    "darkPurple": "#d1e7ff",
+    "primary": "#4169e1",
+    "accent": "#87ceeb",
+    "text": "#2f4f4f"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #f0f8ff 0%, #d1e7ff 100%)",
+  "version": "1.0",
+  "description": "A clean, cool theme inspired by arctic ice with crisp blue tones"
+}

themes/cherry-blossom.json

@@ -0,0 +1,17 @@
+{
+  "name": "Cherry Blossom",
+  "colors": {
+    "bg": "#fff5f8",
+    "darkBlue": "#ffe4e8",
+    "darkPurple": "#ffd4db",
+    "primary": "#ff69b4",
+    "accent": "#ffb6c1",
+    "text": "#8b4513"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #fff5f8 0%, #ffd4db 100%)",
+  "version": "1.0",
+  "description": "A soft, warm theme inspired by cherry blossoms with gentle pink tones"
+}

themes/cosmic-purple.json

@@ -0,0 +1,17 @@
+{
+  "name": "Cosmic Purple",
+  "colors": {
+    "bg": "#0f0524",
+    "darkBlue": "#1a0b3d",
+    "darkPurple": "#2d1b69",
+    "primary": "#8a2be2",
+    "accent": "#da70d6",
+    "text": "#e6e6fa"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #0f0524 0%, #2d1b69 50%, #4b0082 100%)",
+  "version": "1.0",
+  "description": "A space-inspired theme with deep cosmic purples and starlight accents"
+}

themes/cyberpunk.json

@@ -0,0 +1,17 @@
+{
+  "name": "Cyberpunk Neon",
+  "colors": {
+    "bg": "#0a0a0a",
+    "darkBlue": "#1a0520",
+    "darkPurple": "#2a0a3a",
+    "primary": "#ff0080",
+    "accent": "#00ffff",
+    "text": "#ffffff"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #0a0a0a 0%, #2a0a3a 50%, #1a0520 100%)",
+  "version": "1.0",
+  "description": "A futuristic cyberpunk theme with neon pink and cyan highlights"
+}

themes/emerald-dream.json

@@ -0,0 +1,17 @@
+{
+  "name": "Emerald Dream",
+  "colors": {
+    "bg": "#0d2818",
+    "darkBlue": "#1a3a2e",
+    "darkPurple": "#2d5a44",
+    "primary": "#50c878",
+    "accent": "#98fb98",
+    "text": "#f0fff0"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #0d2818 0%, #2d5a44 100%)",
+  "version": "1.0",
+  "description": "A sophisticated theme with rich emerald greens and jewel-like accents"
+}

themes/lavender-fields.json

@@ -0,0 +1,17 @@
+{
+  "name": "Lavender Fields",
+  "colors": {
+    "bg": "#f8f4ff",
+    "darkBlue": "#ede4ff",
+    "darkPurple": "#e6d8ff",
+    "primary": "#9370db",
+    "accent": "#dda0dd",
+    "text": "#4b0082"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #f8f4ff 0%, #e6d8ff 100%)",
+  "version": "1.0",
+  "description": "A peaceful light theme inspired by lavender fields with soft purple hues"
+}

themes/midnight-rose.json

@@ -0,0 +1,17 @@
+{
+  "name": "Midnight Rose",
+  "colors": {
+    "bg": "#1c1820",
+    "darkBlue": "#2d2433",
+    "darkPurple": "#3d3046",
+    "primary": "#d4af37",
+    "accent": "#ffd700",
+    "text": "#f5f5dc"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #1c1820 0%, #3d3046 100%)",
+  "version": "1.0",
+  "description": "An elegant dark theme with rose gold accents and warm undertones"
+}

themes/mocha-coffee.json

@@ -0,0 +1,17 @@
+{
+  "name": "Mocha Coffee",
+  "colors": {
+    "bg": "#3c2414",
+    "darkBlue": "#4a2c1a",
+    "darkPurple": "#5d3a26",
+    "primary": "#d2691e",
+    "accent": "#daa520",
+    "text": "#faf0e6"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #3c2414 0%, #5d3a26 100%)",
+  "version": "1.0",
+  "description": "A warm, cozy theme inspired by coffee and chocolate tones"
+}