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.
This commit is contained in:
@@ -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%)'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+54
-4
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user