mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 01:19:59 +02:00
feat: Disable light weight themes and use our own ones, b=no-bug, c=common, tabs, workspaces
This commit is contained in:
parent
3fca0657b5
commit
ee20de3c3d
6 changed files with 32 additions and 32 deletions
|
@ -21,3 +21,5 @@ pref('zen.theme.window.scheme', 'auto'); // auto, light, dark
|
||||||
pref('zen.theme.acrylic-elements', false);
|
pref('zen.theme.acrylic-elements', false);
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
|
// Light weight themes
|
||||||
|
pref('zen.theme.disable-lightweight', false);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
||||||
index d8c79cbae4de3ebfc5dc62f3597c7be4965a5429..4398108bd6d74aa8b6689baaf5334d8ba9a26c4e 100644
|
index fe01b25c520d1be71224b136b1ce46e9577e11a1..e5501590f3695ed4c2e19be5c104958b497c886e 100644
|
||||||
--- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
--- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
||||||
+++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
+++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
|
||||||
@@ -31,7 +31,7 @@ const toolkitVariableMap = [
|
@@ -31,7 +31,7 @@ const toolkitVariableMap = [
|
||||||
|
@ -11,3 +11,12 @@ index d8c79cbae4de3ebfc5dc62f3597c7be4965a5429..4398108bd6d74aa8b6689baaf5334d8b
|
||||||
}
|
}
|
||||||
// Remove the alpha channel
|
// Remove the alpha channel
|
||||||
const { r, g, b } = rgbaChannels;
|
const { r, g, b } = rgbaChannels;
|
||||||
|
@@ -317,7 +317,7 @@ LightweightThemeConsumer.prototype = {
|
||||||
|
}
|
||||||
|
|
||||||
|
let theme = useDarkTheme ? themeData.darkTheme : themeData.theme;
|
||||||
|
- if (!theme) {
|
||||||
|
+ if (!theme || Services.prefs.getBoolPref("zen.theme.disable-lightweight")) {
|
||||||
|
theme = { id: DEFAULT_THEME_ID };
|
||||||
|
}
|
||||||
|
let hasTheme = theme.id != DEFAULT_THEME_ID || useDarkTheme;
|
||||||
|
|
|
@ -103,7 +103,7 @@ body > #confetti {
|
||||||
:root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true']))
|
:root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true']))
|
||||||
#zen-sidebar-top-buttons-customization-target
|
#zen-sidebar-top-buttons-customization-target
|
||||||
&,
|
&,
|
||||||
#zen-sidebar-foot-buttons {
|
#zen-sidebar-foot-buttons & {
|
||||||
--tab-border-radius: 6px;
|
--tab-border-radius: 6px;
|
||||||
--toolbarbutton-border-radius: var(--tab-border-radius);
|
--toolbarbutton-border-radius: var(--tab-border-radius);
|
||||||
--toolbarbutton-inner-padding: 7px;
|
--toolbarbutton-inner-padding: 7px;
|
||||||
|
|
|
@ -136,9 +136,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& #nav-bar {
|
& #nav-bar {
|
||||||
/* Add bottom margin */
|
|
||||||
margin-bottom: var(--zen-toolbox-padding);
|
|
||||||
|
|
||||||
/* Hide flexible spaces */
|
/* Hide flexible spaces */
|
||||||
& toolbarspring {
|
& toolbarspring {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -1275,7 +1272,6 @@
|
||||||
.zen-essentials-container {
|
.zen-essentials-container {
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
|
||||||
padding-bottom: var(--zen-toolbox-padding);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
transition:
|
transition:
|
||||||
|
@ -1299,6 +1295,7 @@
|
||||||
min-width: calc(100% + var(--zen-toolbox-padding) * 2);
|
min-width: calc(100% + var(--zen-toolbox-padding) * 2);
|
||||||
width: calc(100% + var(--zen-toolbox-padding) * 2);
|
width: calc(100% + var(--zen-toolbox-padding) * 2);
|
||||||
padding: 0 var(--zen-toolbox-padding);
|
padding: 0 var(--zen-toolbox-padding);
|
||||||
|
padding-top: 6px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1091,8 +1091,8 @@
|
||||||
}
|
}
|
||||||
if (themedColors.length === 2) {
|
if (themedColors.length === 2) {
|
||||||
return [
|
return [
|
||||||
`linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`,
|
`linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
|
||||||
`linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`,
|
`linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
|
||||||
].join(', ');
|
].join(', ');
|
||||||
} else if (themedColors.length === 3) {
|
} else if (themedColors.length === 3) {
|
||||||
let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
|
let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
|
||||||
|
@ -1100,9 +1100,9 @@
|
||||||
let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
|
let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
|
||||||
if (!forToolbar) {
|
if (!forToolbar) {
|
||||||
return [
|
return [
|
||||||
`radial-gradient(circle at -30% -30%, ${color2}, transparent 100%)`,
|
`radial-gradient(circle at 0% 0%, ${color2}, transparent 100%)`,
|
||||||
`radial-gradient(circle at 130% -30%, ${color3}, transparent 100%)`,
|
`radial-gradient(circle at 100% 0%, ${color3}, transparent 100%)`,
|
||||||
`linear-gradient(to top, ${color1} -30%, transparent 60%)`,
|
`linear-gradient(to top, ${color1} 0%, transparent 60%)`,
|
||||||
].join(', ');
|
].join(', ');
|
||||||
}
|
}
|
||||||
return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
|
return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
|
||||||
|
@ -1250,19 +1250,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
getMostDominantColor(allColors) {
|
getMostDominantColor(allColors) {
|
||||||
const dominantColor = this.getPrimaryColor(allColors);
|
return this.getPrimaryColor(allColors);
|
||||||
if (!dominantColor) {
|
|
||||||
return this.hexToRgb(this.getNativeAccentColor());
|
|
||||||
}
|
|
||||||
const result = this.pSBC(
|
|
||||||
this.isDarkMode ? 0.2 : -0.5,
|
|
||||||
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
|
|
||||||
);
|
|
||||||
const color = result?.match(/\d+/g)?.map(Number);
|
|
||||||
if (!color || color.length !== 3) {
|
|
||||||
return this.hexToRgb(this.getNativeAccentColor());
|
|
||||||
}
|
|
||||||
return color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blendColors(rgb1, rgb2, percentage) {
|
blendColors(rgb1, rgb2, percentage) {
|
||||||
|
@ -1359,9 +1347,11 @@
|
||||||
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
|
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
|
||||||
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
|
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
|
||||||
|
|
||||||
const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
|
let dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
|
||||||
const isDefaultTheme =
|
const isDefaultTheme = !dominantColor;
|
||||||
dominantColor?.toString() === this.hexToRgb(this.getNativeAccentColor()).toString();
|
if (isDefaultTheme) {
|
||||||
|
dominantColor = this.hexToRgb(this.getNativeAccentColor());
|
||||||
|
}
|
||||||
|
|
||||||
const opacitySlider = browser.document.getElementById(
|
const opacitySlider = browser.document.getElementById(
|
||||||
'PanelUI-zen-gradient-generator-opacity'
|
'PanelUI-zen-gradient-generator-opacity'
|
||||||
|
@ -1472,9 +1462,10 @@
|
||||||
if (dominantColor) {
|
if (dominantColor) {
|
||||||
browser.document.documentElement.style.setProperty(
|
browser.document.documentElement.style.setProperty(
|
||||||
'--zen-primary-color',
|
'--zen-primary-color',
|
||||||
typeof dominantColor === 'string'
|
this.pSBC(
|
||||||
? dominantColor
|
this.isDarkMode ? 0.2 : -0.5,
|
||||||
: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
|
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
|
||||||
|
)
|
||||||
);
|
);
|
||||||
let isDarkMode = this.isDarkMode;
|
let isDarkMode = this.isDarkMode;
|
||||||
if (!isDefaultTheme) {
|
if (!isDefaultTheme) {
|
||||||
|
|
|
@ -192,14 +192,14 @@
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: calc(100% - 8px);
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 4px;
|
left: 8px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -215,6 +215,7 @@
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
background: light-dark(black, white);
|
background: light-dark(black, white);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue