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', darkPurple: '#1B1035',
primary: '#7B2EFF', primary: '#7B2EFF',
accent: '#00C6FF', accent: '#00C6FF',
text: '#E0E0E0' text: '#E0E0E0',
urlBarBg: '#1C2030',
urlBarText: '#E0E0E0',
urlBarBorder: '#3E4652',
tabBg: '#161925',
tabText: '#A4A7B3',
tabActive: '#1C2030',
tabActiveText: '#E0E0E0',
tabBorder: '#2B3040'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -31,7 +39,15 @@ class BrowserCustomizer {
darkPurple: '#2c5282', darkPurple: '#2c5282',
primary: '#3182ce', primary: '#3182ce',
accent: '#00d9ff', accent: '#00d9ff',
text: '#e2e8f0' text: '#e2e8f0',
urlBarBg: '#2d5282',
urlBarText: '#e2e8f0',
urlBarBorder: '#1e3a5f',
tabBg: '#2a4365',
tabText: '#cbd5e0',
tabActive: '#2d5282',
tabActiveText: '#e2e8f0',
tabBorder: '#1a365d'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -46,7 +62,15 @@ class BrowserCustomizer {
darkPurple: '#4a5568', darkPurple: '#4a5568',
primary: '#68d391', primary: '#68d391',
accent: '#9ae6b4', accent: '#9ae6b4',
text: '#f7fafc' text: '#f7fafc',
urlBarBg: '#2d3748',
urlBarText: '#f7fafc',
urlBarBorder: '#4a5568',
tabBg: '#2d3748',
tabText: '#cbd5e0',
tabActive: '#4a5568',
tabActiveText: '#f7fafc',
tabBorder: '#1a202c'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -61,7 +85,15 @@ class BrowserCustomizer {
darkPurple: '#c05621', darkPurple: '#c05621',
primary: '#ed8936', primary: '#ed8936',
accent: '#fbb040', accent: '#fbb040',
text: '#fffaf0' text: '#fffaf0',
urlBarBg: '#975a16',
urlBarText: '#fffaf0',
urlBarBorder: '#c05621',
tabBg: '#975a16',
tabText: '#fde4b6',
tabActive: '#c05621',
tabActiveText: '#fffaf0',
tabBorder: '#744210'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -76,7 +108,15 @@ class BrowserCustomizer {
darkPurple: '#2a0a3a', darkPurple: '#2a0a3a',
primary: '#ff0080', primary: '#ff0080',
accent: '#00ffff', accent: '#00ffff',
text: '#ffffff' text: '#ffffff',
urlBarBg: '#1a0520',
urlBarText: '#ffffff',
urlBarBorder: '#ff0080',
tabBg: '#1a0520',
tabText: '#00ffff',
tabActive: '#2a0a3a',
tabActiveText: '#ff0080',
tabBorder: '#ff0080'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -91,7 +131,15 @@ class BrowserCustomizer {
darkPurple: '#3d3046', darkPurple: '#3d3046',
primary: '#d4af37', primary: '#d4af37',
accent: '#ffd700', accent: '#ffd700',
text: '#f5f5dc' text: '#f5f5dc',
urlBarBg: '#3d3046',
urlBarText: '#f5f5dc',
urlBarBorder: '#d4af37',
tabBg: '#2d2433',
tabText: '#d4af37',
tabActive: '#3d3046',
tabActiveText: '#ffd700',
tabBorder: '#1c1820'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -106,7 +154,15 @@ class BrowserCustomizer {
darkPurple: '#d1e7ff', darkPurple: '#d1e7ff',
primary: '#4169e1', primary: '#4169e1',
accent: '#87ceeb', accent: '#87ceeb',
text: '#2f4f4f' text: '#2f4f4f',
urlBarBg: '#e6f3ff',
urlBarText: '#2f4f4f',
urlBarBorder: '#4169e1',
tabBg: '#e6f3ff',
tabText: '#4169e1',
tabActive: '#d1e7ff',
tabActiveText: '#2f4f4f',
tabBorder: '#f0f8ff'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -121,7 +177,15 @@ class BrowserCustomizer {
darkPurple: '#ffd4db', darkPurple: '#ffd4db',
primary: '#ff69b4', primary: '#ff69b4',
accent: '#ffb6c1', accent: '#ffb6c1',
text: '#8b4513' text: '#8b4513',
urlBarBg: '#ffe4e8',
urlBarText: '#8b4513',
urlBarBorder: '#ff69b4',
tabBg: '#ffe4e8',
tabText: '#ff69b4',
tabActive: '#ffd4db',
tabActiveText: '#8b4513',
tabBorder: '#fff5f8'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -136,7 +200,15 @@ class BrowserCustomizer {
darkPurple: '#2d1b69', darkPurple: '#2d1b69',
primary: '#8a2be2', primary: '#8a2be2',
accent: '#da70d6', accent: '#da70d6',
text: '#e6e6fa' text: '#e6e6fa',
urlBarBg: '#1a0b3d',
urlBarText: '#e6e6fa',
urlBarBorder: '#8a2be2',
tabBg: '#1a0b3d',
tabText: '#da70d6',
tabActive: '#2d1b69',
tabActiveText: '#e6e6fa',
tabBorder: '#0f0524'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -151,7 +223,15 @@ class BrowserCustomizer {
darkPurple: '#2d5a44', darkPurple: '#2d5a44',
primary: '#50c878', primary: '#50c878',
accent: '#98fb98', accent: '#98fb98',
text: '#f0fff0' text: '#f0fff0',
urlBarBg: '#1a3a2e',
urlBarText: '#f0fff0',
urlBarBorder: '#50c878',
tabBg: '#1a3a2e',
tabText: '#98fb98',
tabActive: '#2d5a44',
tabActiveText: '#f0fff0',
tabBorder: '#0d2818'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -166,7 +246,15 @@ class BrowserCustomizer {
darkPurple: '#5d3a26', darkPurple: '#5d3a26',
primary: '#d2691e', primary: '#d2691e',
accent: '#daa520', accent: '#daa520',
text: '#faf0e6' text: '#faf0e6',
urlBarBg: '#4a2c1a',
urlBarText: '#faf0e6',
urlBarBorder: '#d2691e',
tabBg: '#4a2c1a',
tabText: '#daa520',
tabActive: '#5d3a26',
tabActiveText: '#faf0e6',
tabBorder: '#3c2414'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -181,7 +269,15 @@ class BrowserCustomizer {
darkPurple: '#e6d8ff', darkPurple: '#e6d8ff',
primary: '#9370db', primary: '#9370db',
accent: '#dda0dd', accent: '#dda0dd',
text: '#4b0082' text: '#4b0082',
urlBarBg: '#ede4ff',
urlBarText: '#4b0082',
urlBarBorder: '#9370db',
tabBg: '#ede4ff',
tabText: '#9370db',
tabActive: '#e6d8ff',
tabActiveText: '#4b0082',
tabBorder: '#f8f4ff'
}, },
layout: 'centered', layout: 'centered',
showLogo: true, showLogo: true,
@@ -467,6 +563,14 @@ class BrowserCustomizer {
root.style.setProperty('--primary', this.currentTheme.colors.primary); root.style.setProperty('--primary', this.currentTheme.colors.primary);
root.style.setProperty('--accent', this.currentTheme.colors.accent); root.style.setProperty('--accent', this.currentTheme.colors.accent);
root.style.setProperty('--text', this.currentTheme.colors.text); 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 // Apply gradient to body if it exists
const body = document.body; const body = document.body;
@@ -701,6 +805,14 @@ class BrowserCustomizer {
root.style.setProperty('--primary', theme.colors.primary); root.style.setProperty('--primary', theme.colors.primary);
root.style.setProperty('--accent', theme.colors.accent); root.style.setProperty('--accent', theme.colors.accent);
root.style.setProperty('--text', theme.colors.text); 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 // Apply gradient to body if it exists
const body = document.body; 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 // 1) cache hot DOM references
const urlBox = document.getElementById('url'); const urlBox = document.getElementById('url');
const tabBarEl = document.getElementById('tab-bar'); const tabBarEl = document.getElementById('tab-bar');
@@ -337,8 +356,11 @@ function createTab(inputUrl) {
navigate(); navigate();
} }
} else if (e.channel === 'theme-update') { } else if (e.channel === 'theme-update') {
const theme = e.args[0];
// Apply theme to main UI
applyThemeToMainUI(theme);
const home = document.getElementById('home-webview'); 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', () => { 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 // Initial boot
createTab(); createTab();
// Handle IPC messages from the static home webview (bookmarks navigation) // Handle IPC messages from the static home webview (bookmarks navigation)
@@ -1096,9 +1129,12 @@ window.addEventListener('DOMContentLoaded', () => {
} }
// Theme update from settings webview // Theme update from settings webview
if (e.channel === 'theme-update' && e.args[0]) { 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'); const homeWebview = document.getElementById('home-webview');
if (homeWebview) { 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: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
--accent-600: hsl(var(--accent-h) var(--accent-s) 52%); --accent-600: hsl(var(--accent-h) var(--accent-s) 52%);
--accent-700: hsl(var(--accent-h) var(--accent-s) 46%); --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 */ /* TAB STRIP */
@@ -47,10 +57,8 @@ html, body {
gap: 2px; gap: 2px;
/* Increase left padding to avoid overlap with OS window controls area */ /* Increase left padding to avoid overlap with OS window controls area */
padding: 6px 10px 0 var(--window-controls-offset); padding: 6px 10px 0 var(--window-controls-offset);
background: background: var(--tab-bg);
linear-gradient(180deg, rgba(16,18,26,0.65), rgba(16,18,26,0.55)) border-bottom: 1px solid var(--tab-border);
, transparent;
border-bottom: 1px solid #232634; /* hairline under tabs */
overflow-x: auto; /* scroll when many tabs */ overflow-x: auto; /* scroll when many tabs */
scrollbar-color: #444 #2a2a3c; /* thumb and track for Firefox */ scrollbar-color: #444 #2a2a3c; /* thumb and track for Firefox */
scrollbar-width: thin; /* slimmer track */ scrollbar-width: thin; /* slimmer track */
@@ -66,8 +74,7 @@ html, body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 12px; padding: 10px 12px;
background: background: var(--url-bar-bg);
linear-gradient(180deg, rgba(20,22,30,0.7), rgba(20,22,30,0.6));
gap: 12px; gap: 12px;
/* flatter header to reduce paint cost */ /* flatter header to reduce paint cost */
box-shadow: none; box-shadow: none;
@@ -76,6 +83,7 @@ html, body {
z-index: 10000; z-index: 10000;
-webkit-backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
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. /* Make the top nav a draggable region on macOS when we use a hidden titlebar.
@@ -116,10 +124,8 @@ html, body {
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; /* pill */ border-radius: 999px; /* pill */
/* glassy, accented border */ /* glassy, accented border */
background: background: var(--url-bar-bg);
linear-gradient(180deg, rgba(28,31,44,0.8), rgba(22,25,37,0.8)) padding-box, border: 1px solid var(--url-bar-border);
linear-gradient(135deg, rgba(140, 86, 255, 0.35), rgba(62, 149, 255, 0.25)) border-box;
border: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
} }
@@ -133,7 +139,7 @@ html, body {
flex: 1; flex: 1;
background: transparent; background: transparent;
border: none; border: none;
color: var(--text); color: var(--url-bar-text);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
} }
@@ -411,12 +417,10 @@ body:has(#home-container.active) #downloads-btn {
padding: 4px 10px; /* slimmer padding */ padding: 4px 10px; /* slimmer padding */
margin: 0; margin: 0;
height: 28px; /* reduce overall tab height */ height: 28px; /* reduce overall tab height */
color: #ddd; color: var(--tab-text);
/* sleek glass tile */ /* sleek glass tile */
background: background: var(--tab-bg);
linear-gradient(180deg, rgba(36,38,45,0.9), rgba(29,31,39,0.9)) padding-box, border: 1px solid var(--tab-border);
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
border: 1px solid transparent;
border-bottom: none; /* let it visually merge with the strip line */ border-bottom: none; /* let it visually merge with the strip line */
border-radius: 10px 10px 0 0; /* slightly tighter radius */ border-radius: 10px 10px 0 0; /* slightly tighter radius */
cursor: pointer; cursor: pointer;
@@ -429,16 +433,13 @@ body:has(#home-container.active) #downloads-btn {
} }
.tab:hover { .tab:hover {
background: background: var(--tab-bg);
linear-gradient(180deg, rgba(42,44,56,0.95), rgba(33,35,46,0.95)) padding-box, opacity: 0.85;
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
} }
.tab.active { .tab.active {
color: #fff; color: var(--tab-active-text);
background: background: var(--tab-active);
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;
box-shadow: 0 8px 22px rgba(0,0,0,0.35); box-shadow: 0 8px 22px rgba(0,0,0,0.35);
} }
themes/arctic-ice.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#d1e7ff", "darkPurple": "#d1e7ff",
"primary": "#4169e1", "primary": "#4169e1",
"accent": "#87ceeb", "accent": "#87ceeb",
"text": "#2f4f4f" "text": "#2f4f4f",
"urlBarBg": "#e6f3ff",
"urlBarText": "#2f4f4f",
"urlBarBorder": "#4169e1",
"tabBg": "#e6f3ff",
"tabText": "#4169e1",
"tabActive": "#d1e7ff",
"tabActiveText": "#2f4f4f",
"tabBorder": "#f0f8ff"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/cherry-blossom.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#ffd4db", "darkPurple": "#ffd4db",
"primary": "#ff69b4", "primary": "#ff69b4",
"accent": "#ffb6c1", "accent": "#ffb6c1",
"text": "#8b4513" "text": "#8b4513",
"urlBarBg": "#ffe4e8",
"urlBarText": "#8b4513",
"urlBarBorder": "#ff69b4",
"tabBg": "#ffe4e8",
"tabText": "#ff69b4",
"tabActive": "#ffd4db",
"tabActiveText": "#8b4513",
"tabBorder": "#fff5f8"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/cosmic-purple.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#2d1b69", "darkPurple": "#2d1b69",
"primary": "#8a2be2", "primary": "#8a2be2",
"accent": "#da70d6", "accent": "#da70d6",
"text": "#e6e6fa" "text": "#e6e6fa",
"urlBarBg": "#1a0b3d",
"urlBarText": "#e6e6fa",
"urlBarBorder": "#8a2be2",
"tabBg": "#1a0b3d",
"tabText": "#da70d6",
"tabActive": "#2d1b69",
"tabActiveText": "#e6e6fa",
"tabBorder": "#0f0524"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/cyberpunk.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#2a0a3a", "darkPurple": "#2a0a3a",
"primary": "#ff0080", "primary": "#ff0080",
"accent": "#00ffff", "accent": "#00ffff",
"text": "#ffffff" "text": "#ffffff",
"urlBarBg": "#1a0520",
"urlBarText": "#ffffff",
"urlBarBorder": "#ff0080",
"tabBg": "#1a0520",
"tabText": "#00ffff",
"tabActive": "#2a0a3a",
"tabActiveText": "#ff0080",
"tabBorder": "#ff0080"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/default.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#1B1035", "darkPurple": "#1B1035",
"primary": "#7B2EFF", "primary": "#7B2EFF",
"accent": "#00C6FF", "accent": "#00C6FF",
"text": "#E0E0E0" "text": "#E0E0E0",
"urlBarBg": "#1C2030",
"urlBarText": "#E0E0E0",
"urlBarBorder": "#3E4652",
"tabBg": "#161925",
"tabText": "#A4A7B3",
"tabActive": "#1C2030",
"tabActiveText": "#E0E0E0",
"tabBorder": "#2B3040"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/emerald-dream.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#2d5a44", "darkPurple": "#2d5a44",
"primary": "#50c878", "primary": "#50c878",
"accent": "#98fb98", "accent": "#98fb98",
"text": "#f0fff0" "text": "#f0fff0",
"urlBarBg": "#1a3a2e",
"urlBarText": "#f0fff0",
"urlBarBorder": "#50c878",
"tabBg": "#1a3a2e",
"tabText": "#98fb98",
"tabActive": "#2d5a44",
"tabActiveText": "#f0fff0",
"tabBorder": "#0d2818"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/forest.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#4a5568", "darkPurple": "#4a5568",
"primary": "#68d391", "primary": "#68d391",
"accent": "#9ae6b4", "accent": "#9ae6b4",
"text": "#f7fafc" "text": "#f7fafc",
"urlBarBg": "#2d3748",
"urlBarText": "#f7fafc",
"urlBarBorder": "#4a5568",
"tabBg": "#2d3748",
"tabText": "#cbd5e0",
"tabActive": "#4a5568",
"tabActiveText": "#f7fafc",
"tabBorder": "#1a202c"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/lavender-fields.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#e6d8ff", "darkPurple": "#e6d8ff",
"primary": "#9370db", "primary": "#9370db",
"accent": "#dda0dd", "accent": "#dda0dd",
"text": "#4b0082" "text": "#4b0082",
"urlBarBg": "#ede4ff",
"urlBarText": "#4b0082",
"urlBarBorder": "#9370db",
"tabBg": "#ede4ff",
"tabText": "#9370db",
"tabActive": "#e6d8ff",
"tabActiveText": "#4b0082",
"tabBorder": "#f8f4ff"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/midnight-rose.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#3d3046", "darkPurple": "#3d3046",
"primary": "#d4af37", "primary": "#d4af37",
"accent": "#ffd700", "accent": "#ffd700",
"text": "#f5f5dc" "text": "#f5f5dc",
"urlBarBg": "#3d3046",
"urlBarText": "#f5f5dc",
"urlBarBorder": "#d4af37",
"tabBg": "#2d2433",
"tabText": "#d4af37",
"tabActive": "#3d3046",
"tabActiveText": "#ffd700",
"tabBorder": "#1c1820"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/mocha-coffee.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#5d3a26", "darkPurple": "#5d3a26",
"primary": "#d2691e", "primary": "#d2691e",
"accent": "#daa520", "accent": "#daa520",
"text": "#faf0e6" "text": "#faf0e6",
"urlBarBg": "#4a2c1a",
"urlBarText": "#faf0e6",
"urlBarBorder": "#d2691e",
"tabBg": "#4a2c1a",
"tabText": "#daa520",
"tabActive": "#5d3a26",
"tabActiveText": "#faf0e6",
"tabBorder": "#3c2414"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/ocean.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#2c5282", "darkPurple": "#2c5282",
"primary": "#3182ce", "primary": "#3182ce",
"accent": "#00d9ff", "accent": "#00d9ff",
"text": "#e2e8f0" "text": "#e2e8f0",
"urlBarBg": "#2d5282",
"urlBarText": "#e2e8f0",
"urlBarBorder": "#1e3a5f",
"tabBg": "#2a4365",
"tabText": "#cbd5e0",
"tabActive": "#2d5282",
"tabActiveText": "#e2e8f0",
"tabBorder": "#1a365d"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,
themes/sunset.json
+9 -1
View File
@@ -6,7 +6,15 @@
"darkPurple": "#c05621", "darkPurple": "#c05621",
"primary": "#ed8936", "primary": "#ed8936",
"accent": "#fbb040", "accent": "#fbb040",
"text": "#fffaf0" "text": "#fffaf0",
"urlBarBg": "#975a16",
"urlBarText": "#fffaf0",
"urlBarBorder": "#c05621",
"tabBg": "#975a16",
"tabText": "#fde4b6",
"tabActive": "#c05621",
"tabActiveText": "#fffaf0",
"tabBorder": "#744210"
}, },
"layout": "centered", "layout": "centered",
"showLogo": true, "showLogo": true,