From c864ca187c620a68cf9015245f1eef9400538c11 Mon Sep 17 00:00:00 2001 From: Andrew Zambazos Date: Sat, 27 Dec 2025 21:59:09 +1300 Subject: [PATCH] Add per-theme colors for URL bar and tabs 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. --- renderer/customization.js | 136 ++++++++++++++++++++++++++++++++---- renderer/script.js | 40 ++++++++++- renderer/style.css | 47 +++++++------ themes/arctic-ice.json | 10 ++- themes/cherry-blossom.json | 10 ++- themes/cosmic-purple.json | 10 ++- themes/cyberpunk.json | 10 ++- themes/default.json | 10 ++- themes/emerald-dream.json | 10 ++- themes/forest.json | 10 ++- themes/lavender-fields.json | 10 ++- themes/midnight-rose.json | 10 ++- themes/mocha-coffee.json | 10 ++- themes/ocean.json | 10 ++- themes/sunset.json | 10 ++- 15 files changed, 294 insertions(+), 49 deletions(-) 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,