Hi,
I’m trying to change an addons appearance depending on the current theme a user might have. A user could have a light theme or a dark theme installed and I want to change some of the styling and icons depending on that. The default icons like downloads, bookmarks, open new tab & open menu do this automatically.
I first checked to see if the firefox sdk had a feature to detect if the theme is labeled as dark or light (like you can already do with a theme when submitting them) but it does not seem so. It has been talked about in this bugzilla report but it seems nothing was created.
With no solution I decide to create my own, I went ahead and created a JS function to calculate the YIQ to determine if the content over the background color should be lighter or darker (ex. background is black, display white text/icon/etc…).
I figured the above would be harder then finding the browsers/panel background color, however, I was wrong… I tried in data/js/globa.js
(the JavaScript for the panel) to calculate the panel background color BUT it returns transparent…
data/js/global.js
console.log(window.getComputedStyle(document.body, null).backgroundColor); // Returns transparent
Assuming it was set globally I tried the the browser window (XUL document I believe?) in lib/main.js
once again it returns transparent.
lib/main.js
var browserDocument = require("sdk/window/utils").getMostRecentBrowserWindow(),
browserStyles = browserDocument.content.getComputedStyle(browserDocument.content.document.body, null).backgroundColor,
browserStyles2 = browserDocument.content.getDefaultComputedStyle(browserDocument.content.document.body, null).backgroundColor;
console.log(browserStyles); // Returns transparent
console.log(browserStyles2); // Returns transparent
So my questions are…
- Does the firefox sdk have a build in easy way to find the background color? (I searched the docs and can’t find it)
- If no, can you find the browser windows / system theme background color with the method above?
Since someone will most definitely ask, “why not set the panel background color manually”, I do not wish to override a users theme and break their color scheme. I would like tighter integration if possible.
Thanks