1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 15:55:30 +02:00
zen-desktop/src/browser/base/content/zenThemeModifier.js
2024-08-14 13:37:40 +02:00

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();