Lightweight themes consist of two images: one that is used as the background for the tool bars, address bar, search bar, and tab strip, and a second image that's used as the background for the status and find bars at the bottom of the window
Here's a code snippet to self-host your themes. (Based on the test page that can be found at Bug 511771)
JavaScript:
var themes = [ { id: "example-01", name: "Third Planet", headerURL: "http://www.example.com/personas/01/header.jpg", footerURL: "http://www.example.com/personas/01/footer.jpg", textcolor: "#fff", accentcolor: "#6b6b6b" }, { id: "example-02", name: "Foxkeh Boom", headerURL: "http://www.example.com/personas/02/header.jpg", footerURL: "http://www.example.com/personas/02/footer.jpg", textcolor: "#bcf", accentcolor: "#8888FF" } ]; const INSTALL = "InstallBrowserTheme"; const PREVIEW = "PreviewBrowserTheme"; const RESET_PREVIEW = "ResetBrowserThemePreview"; function setTheme(node, theme, action) { node.setAttribute("data-browsertheme", JSON.stringify(themes[theme])); var event = document.createEvent("Events"); event.initEvent(action, true, false); node.dispatchEvent(event); }
HTML:
<button onclick="setTheme(this, 0, INSTALL);" onmouseover="setTheme(this, 0, PREVIEW);" onmouseout="setTheme(this, 0, RESET_PREVIEW);">Install Third Planet Theme</button> <button onclick="setTheme(this, 1, INSTALL);" onmouseover="setTheme(this, 1, PREVIEW);" onmouseout="setTheme(this, 1, RESET_PREVIEW);">Install Foxkeh Boom Theme</button>
Note that preview by mouseover doesn't work unless your site is added to the white list of application.
From within a Bootstrap Style Extension's bootstrap.js, you can issue code similar to the following to install and activate a lightweight theme and uninstall it on plugin deactivation.
let lightweightTheme = { id: "example-01", name: "Third Planet", headerURL: "http://www.example.com/personas/01/header.jpg", footerURL: "http://www.example.com/personas/01/footer.jpg", textcolor: "#fff", accentcolor: "#6b6b6b" }; Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm"); function startup(data, reason) { LightweightThemeManager.themeChanged(lightweightTheme); } function shutdown(data, reason) { LightweightThemeManager.forgetUsedTheme(lightweightTheme.id); }
Site design and Branding © 2019 Moonchild Productions - All rights reserved
Any other content, brand names or logos are copyright or trademark to their respective owners.
Policies: Cookies - User Content
- Privacy.
The Pale Moon Developer Wiki is powered by Enano