diff --git a/renderer/customization.js b/renderer/customization.js index 5af1b36..1576f28 100644 --- a/renderer/customization.js +++ b/renderer/customization.js @@ -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; diff --git a/renderer/script.js b/renderer/script.js index 1a6198b..4c5dcb7 100644 --- a/renderer/script.js +++ b/renderer/script.js @@ -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); } } }); diff --git a/renderer/style.css b/renderer/style.css index c950995..345bff4 100644 --- a/renderer/style.css +++ b/renderer/style.css @@ -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); } diff --git a/themes/arctic-ice.json b/themes/arctic-ice.json index b9875ae..5488ac0 100644 --- a/themes/arctic-ice.json +++ b/themes/arctic-ice.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/cherry-blossom.json b/themes/cherry-blossom.json index 8ccfc0e..8c33ee2 100644 --- a/themes/cherry-blossom.json +++ b/themes/cherry-blossom.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/cosmic-purple.json b/themes/cosmic-purple.json index 10aef6e..bfc81c7 100644 --- a/themes/cosmic-purple.json +++ b/themes/cosmic-purple.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/cyberpunk.json b/themes/cyberpunk.json index f75a979..2e6ddc7 100644 --- a/themes/cyberpunk.json +++ b/themes/cyberpunk.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/default.json b/themes/default.json index b4b54f6..162b2b7 100644 --- a/themes/default.json +++ b/themes/default.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/emerald-dream.json b/themes/emerald-dream.json index abe86e1..26cbc53 100644 --- a/themes/emerald-dream.json +++ b/themes/emerald-dream.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/forest.json b/themes/forest.json index 2f3dd1d..d05c4d0 100644 --- a/themes/forest.json +++ b/themes/forest.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/lavender-fields.json b/themes/lavender-fields.json index f9def7f..768e015 100644 --- a/themes/lavender-fields.json +++ b/themes/lavender-fields.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/midnight-rose.json b/themes/midnight-rose.json index 621245f..f82f17d 100644 --- a/themes/midnight-rose.json +++ b/themes/midnight-rose.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/mocha-coffee.json b/themes/mocha-coffee.json index 3b797f4..9b2c888 100644 --- a/themes/mocha-coffee.json +++ b/themes/mocha-coffee.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/ocean.json b/themes/ocean.json index 1143854..81f5966 100644 --- a/themes/ocean.json +++ b/themes/ocean.json @@ -6,7 +6,15 @@ "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, diff --git a/themes/sunset.json b/themes/sunset.json index f99bcc4..ed53803 100644 --- a/themes/sunset.json +++ b/themes/sunset.json @@ -6,7 +6,15 @@ "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,