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

Add per-theme colors for URL bar and tabs

Browse Source 
Introduces new color properties for the URL bar and tab strip in all themes, updates the theme system and CSS to support these, and ensures the renderer applies the correct colors to the main UI. This allows each theme to fully customize the appearance of the URL bar and tabs for a more cohesive look.
This commit is contained in:
Andrew Zambazos
2025-12-27 21:59:09 +13:00
parent abac7ed092
commit c864ca187c
15 changed files with 294 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/customization.js
+124 -12
View File
@@ -13,7 +13,15 @@ class BrowserCustomizer {
darkPurple: '#1B1035',
primary: '#7B2EFF',
accent: '#00C6FF',
text: '#E0E0E0'
text: '#E0E0E0',
urlBarBg: '#1C2030',
urlBarText: '#E0E0E0',
urlBarBorder: '#3E4652',
tabBg: '#161925',
tabText: '#A4A7B3',
tabActive: '#1C2030',
tabActiveText: '#E0E0E0',
tabBorder: '#2B3040'
},
layout: 'centered',
showLogo: true,
@@ -31,7 +39,15 @@ class BrowserCustomizer {
darkPurple: '#2c5282',
primary: '#3182ce',
accent: '#00d9ff',
text: '#e2e8f0'
text: '#e2e8f0',
urlBarBg: '#2d5282',
urlBarText: '#e2e8f0',
urlBarBorder: '#1e3a5f',
tabBg: '#2a4365',
tabText: '#cbd5e0',
tabActive: '#2d5282',
tabActiveText: '#e2e8f0',
tabBorder: '#1a365d'
},
layout: 'centered',
showLogo: true,
@@ -46,7 +62,15 @@ class BrowserCustomizer {
darkPurple: '#4a5568',
primary: '#68d391',
accent: '#9ae6b4',
text: '#f7fafc'
text: '#f7fafc',
urlBarBg: '#2d3748',
urlBarText: '#f7fafc',
urlBarBorder: '#4a5568',
tabBg: '#2d3748',
tabText: '#cbd5e0',
tabActive: '#4a5568',
tabActiveText: '#f7fafc',
tabBorder: '#1a202c'
},
layout: 'centered',
showLogo: true,
@@ -61,7 +85,15 @@ class BrowserCustomizer {
darkPurple: '#c05621',
primary: '#ed8936',
accent: '#fbb040',
text: '#fffaf0'
text: '#fffaf0',
urlBarBg: '#975a16',
urlBarText: '#fffaf0',
urlBarBorder: '#c05621',
tabBg: '#975a16',
tabText: '#fde4b6',
tabActive: '#c05621',
tabActiveText: '#fffaf0',
tabBorder: '#744210'
},
layout: 'centered',
showLogo: true,
@@ -76,7 +108,15 @@ class BrowserCustomizer {
darkPurple: '#2a0a3a',
primary: '#ff0080',
accent: '#00ffff',
text: '#ffffff'
text: '#ffffff',
urlBarBg: '#1a0520',
urlBarText: '#ffffff',
urlBarBorder: '#ff0080',
tabBg: '#1a0520',
tabText: '#00ffff',
tabActive: '#2a0a3a',
tabActiveText: '#ff0080',
tabBorder: '#ff0080'
},
layout: 'centered',
showLogo: true,
@@ -91,7 +131,15 @@ class BrowserCustomizer {
darkPurple: '#3d3046',
primary: '#d4af37',
accent: '#ffd700',
text: '#f5f5dc'
text: '#f5f5dc',
urlBarBg: '#3d3046',
urlBarText: '#f5f5dc',
urlBarBorder: '#d4af37',
tabBg: '#2d2433',
tabText: '#d4af37',
tabActive: '#3d3046',
tabActiveText: '#ffd700',
tabBorder: '#1c1820'
},
layout: 'centered',
showLogo: true,
@@ -106,7 +154,15 @@ class BrowserCustomizer {
darkPurple: '#d1e7ff',
primary: '#4169e1',
accent: '#87ceeb',
text: '#2f4f4f'
text: '#2f4f4f',
urlBarBg: '#e6f3ff',
urlBarText: '#2f4f4f',
urlBarBorder: '#4169e1',
tabBg: '#e6f3ff',
tabText: '#4169e1',
tabActive: '#d1e7ff',
tabActiveText: '#2f4f4f',
tabBorder: '#f0f8ff'
},
layout: 'centered',
showLogo: true,
@@ -121,7 +177,15 @@ class BrowserCustomizer {
darkPurple: '#ffd4db',
primary: '#ff69b4',
accent: '#ffb6c1',
text: '#8b4513'
text: '#8b4513',
urlBarBg: '#ffe4e8',
urlBarText: '#8b4513',
urlBarBorder: '#ff69b4',
tabBg: '#ffe4e8',
tabText: '#ff69b4',
tabActive: '#ffd4db',
tabActiveText: '#8b4513',
tabBorder: '#fff5f8'
},
layout: 'centered',
showLogo: true,
@@ -136,7 +200,15 @@ class BrowserCustomizer {
darkPurple: '#2d1b69',
primary: '#8a2be2',
accent: '#da70d6',
text: '#e6e6fa'
text: '#e6e6fa',
urlBarBg: '#1a0b3d',
urlBarText: '#e6e6fa',
urlBarBorder: '#8a2be2',
tabBg: '#1a0b3d',
tabText: '#da70d6',
tabActive: '#2d1b69',
tabActiveText: '#e6e6fa',
tabBorder: '#0f0524'
},
layout: 'centered',
showLogo: true,
@@ -151,7 +223,15 @@ class BrowserCustomizer {
darkPurple: '#2d5a44',
primary: '#50c878',
accent: '#98fb98',
text: '#f0fff0'
text: '#f0fff0',
urlBarBg: '#1a3a2e',
urlBarText: '#f0fff0',
urlBarBorder: '#50c878',
tabBg: '#1a3a2e',
tabText: '#98fb98',
tabActive: '#2d5a44',
tabActiveText: '#f0fff0',
tabBorder: '#0d2818'
},
layout: 'centered',
showLogo: true,
@@ -166,7 +246,15 @@ class BrowserCustomizer {
darkPurple: '#5d3a26',
primary: '#d2691e',
accent: '#daa520',
text: '#faf0e6'
text: '#faf0e6',
urlBarBg: '#4a2c1a',
urlBarText: '#faf0e6',
urlBarBorder: '#d2691e',
tabBg: '#4a2c1a',
tabText: '#daa520',
tabActive: '#5d3a26',
tabActiveText: '#faf0e6',
tabBorder: '#3c2414'
},
layout: 'centered',
showLogo: true,
@@ -181,7 +269,15 @@ class BrowserCustomizer {
darkPurple: '#e6d8ff',
primary: '#9370db',
accent: '#dda0dd',
text: '#4b0082'
text: '#4b0082',
urlBarBg: '#ede4ff',
urlBarText: '#4b0082',
urlBarBorder: '#9370db',
tabBg: '#ede4ff',
tabText: '#9370db',
tabActive: '#e6d8ff',
tabActiveText: '#4b0082',
tabBorder: '#f8f4ff'
},
layout: 'centered',
showLogo: true,
@@ -467,6 +563,14 @@ class BrowserCustomizer {
root.style.setProperty('--primary', this.currentTheme.colors.primary);
root.style.setProperty('--accent', this.currentTheme.colors.accent);
root.style.setProperty('--text', this.currentTheme.colors.text);
root.style.setProperty('--url-bar-bg', this.currentTheme.colors.urlBarBg);
root.style.setProperty('--url-bar-text', this.currentTheme.colors.urlBarText);
root.style.setProperty('--url-bar-border', this.currentTheme.colors.urlBarBorder);
root.style.setProperty('--tab-bg', this.currentTheme.colors.tabBg);
root.style.setProperty('--tab-text', this.currentTheme.colors.tabText);
root.style.setProperty('--tab-active', this.currentTheme.colors.tabActive);
root.style.setProperty('--tab-active-text', this.currentTheme.colors.tabActiveText);
root.style.setProperty('--tab-border', this.currentTheme.colors.tabBorder);
// Apply gradient to body if it exists
const body = document.body;
@@ -701,6 +805,14 @@ class BrowserCustomizer {
root.style.setProperty('--primary', theme.colors.primary);
root.style.setProperty('--accent', theme.colors.accent);
root.style.setProperty('--text', theme.colors.text);
root.style.setProperty('--url-bar-bg', theme.colors.urlBarBg);
root.style.setProperty('--url-bar-text', theme.colors.urlBarText);
root.style.setProperty('--url-bar-border', theme.colors.urlBarBorder);
root.style.setProperty('--tab-bg', theme.colors.tabBg);
root.style.setProperty('--tab-text', theme.colors.tabText);
root.style.setProperty('--tab-active', theme.colors.tabActive);
root.style.setProperty('--tab-active-text', theme.colors.tabActiveText);
root.style.setProperty('--tab-border', theme.colors.tabBorder);
// Apply gradient to body if it exists
const body = document.body;
renderer/script.js
+38 -2
View File
@@ -31,6 +31,25 @@ function addToSiteHistory(url) {
}
}
// Apply theme colors to the main UI (URL bar and tabs)
function applyThemeToMainUI(theme) {
if (!theme || !theme.colors) return;
const root = document.documentElement;
// Apply URL bar and tab colors
if (theme.colors.urlBarBg) root.style.setProperty('--url-bar-bg', theme.colors.urlBarBg);
if (theme.colors.urlBarText) root.style.setProperty('--url-bar-text', theme.colors.urlBarText);
if (theme.colors.urlBarBorder) root.style.setProperty('--url-bar-border', theme.colors.urlBarBorder);
if (theme.colors.tabBg) root.style.setProperty('--tab-bg', theme.colors.tabBg);
if (theme.colors.tabText) root.style.setProperty('--tab-text', theme.colors.tabText);
if (theme.colors.tabActive) root.style.setProperty('--tab-active', theme.colors.tabActive);
if (theme.colors.tabActiveText) root.style.setProperty('--tab-active-text', theme.colors.tabActiveText);
if (theme.colors.tabBorder) root.style.setProperty('--tab-border', theme.colors.tabBorder);
console.log('[THEME] Applied theme colors to main UI');
}
// 1) cache hot DOM references
const urlBox = document.getElementById('url');
const tabBarEl = document.getElementById('tab-bar');
@@ -337,8 +356,11 @@ function createTab(inputUrl) {
navigate();
}
} else if (e.channel === 'theme-update') {
const theme = e.args[0];
// Apply theme to main UI
applyThemeToMainUI(theme);
const home = document.getElementById('home-webview');
if (home) home.send('theme-update', ...e.args);
if (home) home.send('theme-update', theme);
}
});
@@ -1066,6 +1088,17 @@ if (homeContainerEl) {
}
window.addEventListener('DOMContentLoaded', () => {
// Initialize theme from localStorage
const savedTheme = localStorage.getItem('currentTheme');
if (savedTheme) {
try {
const theme = JSON.parse(savedTheme);
applyThemeToMainUI(theme);
} catch (err) {
console.error('Error applying saved theme:', err);
}
}
// Initial boot
createTab();
// Handle IPC messages from the static home webview (bookmarks navigation)
@@ -1096,9 +1129,12 @@ window.addEventListener('DOMContentLoaded', () => {
}
// Theme update from settings webview
if (e.channel === 'theme-update' && e.args[0]) {
const theme = e.args[0];
// Apply theme colors to the main renderer
applyThemeToMainUI(theme);
const homeWebview = document.getElementById('home-webview');
if (homeWebview) {
homeWebview.send('theme-update', e.args[0]);
homeWebview.send('theme-update', theme);
}
}
});
renderer/style.css
+24 -23
View File
@@ -38,6 +38,16 @@ html, body {
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
--accent-600: hsl(var(--accent-h) var(--accent-s) 52%);
--accent-700: hsl(var(--accent-h) var(--accent-s) 46%);
/* URL bar and tab theme colors (defaults) */
--url-bar-bg: #1C2030;
--url-bar-text: #E0E0E0;
--url-bar-border: #3E4652;
--tab-bg: #161925;
--tab-text: #A4A7B3;
--tab-active: #1C2030;
--tab-active-text: #E0E0E0;
--tab-border: #2B3040;
}
/* TAB STRIP */
@@ -47,10 +57,8 @@ html, body {
gap: 2px;
/* Increase left padding to avoid overlap with OS window controls area */
padding: 6px 10px 0 var(--window-controls-offset);
background:
linear-gradient(180deg, rgba(16,18,26,0.65), rgba(16,18,26,0.55))
, transparent;
border-bottom: 1px solid #232634; /* hairline under tabs */
background: var(--tab-bg);
border-bottom: 1px solid var(--tab-border);
overflow-x: auto; /* scroll when many tabs */
scrollbar-color: #444 #2a2a3c; /* thumb and track for Firefox */
scrollbar-width: thin; /* slimmer track */
@@ -66,8 +74,7 @@ html, body {
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background:
linear-gradient(180deg, rgba(20,22,30,0.7), rgba(20,22,30,0.6));
background: var(--url-bar-bg);
gap: 12px;
/* flatter header to reduce paint cost */
box-shadow: none;
@@ -76,6 +83,7 @@ html, body {
z-index: 10000;
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
border-bottom: 1px solid var(--url-bar-border);
}
/* Make the top nav a draggable region on macOS when we use a hidden titlebar.
@@ -116,10 +124,8 @@ html, body {
padding: 6px 10px;
border-radius: 999px; /* pill */
/* glassy, accented border */
background:
linear-gradient(180deg, rgba(28,31,44,0.8), rgba(22,25,37,0.8)) padding-box,
linear-gradient(135deg, rgba(140, 86, 255, 0.35), rgba(62, 149, 255, 0.25)) border-box;
border: 1px solid transparent;
background: var(--url-bar-bg);
border: 1px solid var(--url-bar-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
@@ -133,7 +139,7 @@ html, body {
flex: 1;
background: transparent;
border: none;
color: var(--text);
color: var(--url-bar-text);
font-size: 14px;
outline: none;
}
@@ -411,12 +417,10 @@ body:has(#home-container.active) #downloads-btn {
padding: 4px 10px; /* slimmer padding */
margin: 0;
height: 28px; /* reduce overall tab height */
color: #ddd;
color: var(--tab-text);
/* sleek glass tile */
background:
linear-gradient(180deg, rgba(36,38,45,0.9), rgba(29,31,39,0.9)) padding-box,
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
border: 1px solid transparent;
background: var(--tab-bg);
border: 1px solid var(--tab-border);
border-bottom: none; /* let it visually merge with the strip line */
border-radius: 10px 10px 0 0; /* slightly tighter radius */
cursor: pointer;
@@ -429,16 +433,13 @@ body:has(#home-container.active) #downloads-btn {
}
.tab:hover {
background:
linear-gradient(180deg, rgba(42,44,56,0.95), rgba(33,35,46,0.95)) padding-box,
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
background: var(--tab-bg);
opacity: 0.85;
}
.tab.active {
color: #fff;
background:
linear-gradient(180deg, rgba(50,53,66,0.98), rgba(40,42,56,0.98)) padding-box,
linear-gradient(180deg, rgba(140, 86, 255, 0.35), rgba(62, 149, 255, 0.25)) border-box;
color: var(--tab-active-text);
background: var(--tab-active);
box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}