nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add new built-in themes and update theme selection UI

Browse Source 
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.
This commit is contained in:
Andrew Zambazos
2025-07-29 12:01:14 +12:00
parent aef9b816db
commit 055287201c
12 changed files with 325 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
documentation/FEATURES.md
+1 -1
View File
@@ -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
+120
View File
@@ -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
+54 -4
View File
@@ -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 @@
<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
+14 -1
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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"
}