ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 19:59:59 +02:00
Code Releases Wiki Activity

Refactor theme preferences by removing unused color options and adjusting border radius settings

Browse source
This commit is contained in:
mr. M 2025-02-09 17:20:27 +01:00
parent 988056e59c
commit 1475d3daee
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
5 changed files with 1 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/browser/app/profile/zen-browser.js
View file

@ -103,15 +103,13 @@ pref('zen.rice.share.notice.accepted', false);
pref('zen.theme.border-radius', 10); // In pixels
#else
#ifdef XP_WIN
pref('zen.theme.border-radius', 12); // In pixels
pref('zen.theme.border-radius', 10); // In pixels
#else
pref('zen.theme.border-radius', 8); // In pixels
#endif
#endif
pref('zen.theme.color-prefs.use-workspace-colors', true);
pref('zen.theme.color-prefs.amoled', false);
pref('zen.theme.color-prefs.colorful', false);
pref('zen.view.compact.hide-tabbar', true);
pref('zen.view.compact.hide-toolbar', false);

30
src/browser/base/content/zen-styles/zen-theme.css
View file

@ -222,33 +222,3 @@
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
}
}
@media (prefers-color-scheme: dark) {
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
:root {
--zen-dark-color-mix-base: hsl(5 5 5);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
}
}
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
:root {
--zen-in-content-dialog-background: rgb(28, 28, 32);
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
}
}
}

36
src/browser/components/preferences/zen-settings.js
View file

@ -507,7 +507,6 @@ var gZenLooksAndFeel = {
Services.prefs.removeObserver(pref, this);
}
});
this.setDarkThemeListener();
this.setCompactModeStyle();
this.applySidebarLayout();
@ -560,41 +559,6 @@ var gZenLooksAndFeel = {
}
},
setDarkThemeListener() {
const chooser = document.getElementById('zen-dark-theme-styles-form');
const radios = [...chooser.querySelectorAll('input')];
for (let radio of radios) {
if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
radio.checked = true;
} else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
radio.checked = true;
} else if (
radio.value === 'default' &&
!Services.prefs.getBoolPref('zen.theme.color-prefs.amoled') &&
!Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')
) {
radio.checked = true;
}
radio.addEventListener('change', (e) => {
let value = e.target.value;
switch (value) {
case 'amoled':
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', true);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
break;
case 'colorful':
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', true);
break;
default:
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
break;
}
});
}
},
setCompactModeStyle() {
const chooser = document.getElementById('zen-compact-mode-styles-form');
const radios = [...chooser.querySelectorAll('input')];

141
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View file

@ -68,147 +68,6 @@
<hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
<html:div id="ZenDarkThemeStyles">
<html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
<description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-dark-theme-styles-amoled" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-dark-theme-styles-default" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-dark-theme-styles-colorful" />
</div>
</label>
</form>
</html:div>
<html:div data-l10n-id="preferences-web-appearance-footer">
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
</html:div>

19
src/browser/themes/shared/preferences/zen-preferences.css
View file

@ -51,24 +51,6 @@ groupbox {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
groupbox {
background: #141414;
}
}
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
groupbox {
background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
}
:root {
--zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 70%, #0f0f0f 30%));
}
}
}
.subcategory + groupbox,
#noFxaAccount,
#hasFxaAccount {
@ -182,7 +164,6 @@ groupbox h2 {
margin-bottom: 15px;
}
#zen-dark-theme-styles-form,
#zen-compact-mode-styles-form {
display: flex;
justify-content: space-between;