mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 12:35:28 +02:00
111 lines
3.9 KiB
JavaScript
111 lines
3.9 KiB
JavaScript
|
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
"use strict";
|
|
|
|
/* INCLUDE THIS FILE AS:
|
|
* <script src="chrome://browser/content/zenThemeModifier.js"></script>
|
|
*
|
|
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
|
|
*/
|
|
|
|
const kZenThemeAccentColorPref = "zen.theme.accent-color";
|
|
const kZenThemeBorderRadiusPref = "zen.theme.border-radius";
|
|
|
|
/**
|
|
* ZenThemeModifier controls the application of theme data to the browser,
|
|
* for examplem, it injects the accent color to the document. This is used
|
|
* because we need a way to apply the accent color without having to worry about
|
|
* shadow roots not inheriting the accent color.
|
|
*
|
|
* note: It must be a firefox builtin page with access to the browser's configuration
|
|
* and services.
|
|
*/
|
|
var ZenThemeModifier = {
|
|
_inMainBrowserWindow: false,
|
|
|
|
/**
|
|
* Listen for theming updates from the LightweightThemeChild actor, and
|
|
* begin listening to changes in preferred color scheme.
|
|
*/
|
|
init() {
|
|
this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
|
|
this.listenForEvents();
|
|
this.updateAllThemeBasics();
|
|
this._onPrefersColorSchemeChange();
|
|
},
|
|
|
|
listenForEvents() {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
|
|
|
|
Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
|
|
Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this));
|
|
},
|
|
|
|
handleEvent(event) {
|
|
// note: even might be undefined, but we shoudnt use it!
|
|
this.updateAllThemeBasics();
|
|
},
|
|
|
|
/**
|
|
* Update all theme basics, like the accent color.
|
|
*/
|
|
updateAllThemeBasics() {
|
|
this.updateAccentColor();
|
|
this.updateBorderRadius();
|
|
},
|
|
|
|
updateBorderRadius() {
|
|
const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4);
|
|
document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
|
|
},
|
|
|
|
/**
|
|
* Update the accent color.
|
|
*/
|
|
updateAccentColor() {
|
|
const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
|
|
document.documentElement.style.setProperty("--zen-primary-color", accentColor);
|
|
// Notify the page that the accent color has changed, only if a function
|
|
// handler is defined.
|
|
if (typeof window.zenPageAccentColorChanged === "function") {
|
|
window.zenPageAccentColorChanged(accentColor);
|
|
}
|
|
},
|
|
|
|
_onPrefersColorSchemeChange() {
|
|
this._updateZenAvatar();
|
|
},
|
|
|
|
_updateZenAvatar() {
|
|
const mainWindowEl = document.documentElement;
|
|
// Dont override the sync avatar if it's already set
|
|
if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {
|
|
return;
|
|
}
|
|
let profile = ProfileService.currentProfile;
|
|
if (!profile || profile.zenAvatarPath == "") return;
|
|
// TODO: actually use profile data to generate the avatar, instead of just using the name
|
|
let avatarUrl = this._getThemedAvatar(profile.zenAvatarPath);
|
|
if (document.documentElement.hasAttribute("privatebrowsingmode")) {
|
|
avatarUrl = "chrome://global/skin/icons/indicator-private-browsing.svg";
|
|
}
|
|
mainWindowEl.style.setProperty("--zen-avatar-image-url", `url(${avatarUrl})`);
|
|
mainWindowEl.style.setProperty("--avatar-image-url", `var(--zen-avatar-image-url)`, "important");
|
|
},
|
|
|
|
_getThemedAvatar(avatarPath) {
|
|
if (!avatarPath.startsWith("chrome://browser/content/zen-avatars/avatar-")
|
|
|| !avatarPath.endsWith(".svg")) {
|
|
return avatarPath;
|
|
}
|
|
let withoutExtension = avatarPath.slice(0, -4);
|
|
let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
|
|
return `${withoutExtension}-${scheme}.svg`;
|
|
},
|
|
};
|
|
|
|
if (typeof Services !== "undefined")
|
|
ZenThemeModifier.init();
|