From 055287201c957bb673d98d9fa896e281b180dc03 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 29 Jul 2025 12:01:14 +1200 Subject: [PATCH] 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 | 2 +- renderer/customization.js | 120 ++++++++++++++++++++++++++++++++++++ renderer/settings.html | 58 +++++++++++++++-- theme-manager.js | 15 ++++- themes/arctic-ice.json | 17 +++++ themes/cherry-blossom.json | 17 +++++ themes/cosmic-purple.json | 17 +++++ themes/cyberpunk.json | 17 +++++ themes/emerald-dream.json | 17 +++++ themes/lavender-fields.json | 17 +++++ themes/midnight-rose.json | 17 +++++ themes/mocha-coffee.json | 17 +++++ 12 files changed, 325 insertions(+), 6 deletions(-) create mode 100644 themes/arctic-ice.json create mode 100644 themes/cherry-blossom.json create mode 100644 themes/cosmic-purple.json create mode 100644 themes/cyberpunk.json create mode 100644 themes/emerald-dream.json create mode 100644 themes/lavender-fields.json create mode 100644 themes/midnight-rose.json create mode 100644 themes/mocha-coffee.json diff --git a/documentation/FEATURES.md b/documentation/FEATURES.md index dcee111..f4237d6 100644 --- a/documentation/FEATURES.md +++ b/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. diff --git a/renderer/customization.js b/renderer/customization.js index bc60fc1..74c9aec 100644 --- a/renderer/customization.js +++ b/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%)' } }; diff --git a/renderer/settings.html b/renderer/settings.html index 5b874ab..e8396fb 100644 --- a/renderer/settings.html +++ b/renderer/settings.html @@ -23,9 +23,10 @@ } .theme-selector { - display: flex; - gap: 10px; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + 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 @@
Sunset + + + + + + + + diff --git a/theme-manager.js b/theme-manager.js index c9c0b0a..d0a07b2 100644 --- a/theme-manager.js +++ b/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 { diff --git a/themes/arctic-ice.json b/themes/arctic-ice.json new file mode 100644 index 0000000..b9875ae --- /dev/null +++ b/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" +} diff --git a/themes/cherry-blossom.json b/themes/cherry-blossom.json new file mode 100644 index 0000000..8ccfc0e --- /dev/null +++ b/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" +} diff --git a/themes/cosmic-purple.json b/themes/cosmic-purple.json new file mode 100644 index 0000000..10aef6e --- /dev/null +++ b/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" +} diff --git a/themes/cyberpunk.json b/themes/cyberpunk.json new file mode 100644 index 0000000..f75a979 --- /dev/null +++ b/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" +} diff --git a/themes/emerald-dream.json b/themes/emerald-dream.json new file mode 100644 index 0000000..abe86e1 --- /dev/null +++ b/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" +} diff --git a/themes/lavender-fields.json b/themes/lavender-fields.json new file mode 100644 index 0000000..f9def7f --- /dev/null +++ b/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" +} diff --git a/themes/midnight-rose.json b/themes/midnight-rose.json new file mode 100644 index 0000000..621245f --- /dev/null +++ b/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" +} diff --git a/themes/mocha-coffee.json b/themes/mocha-coffee.json new file mode 100644 index 0000000..3b797f4 --- /dev/null +++ b/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" +}