Closed marcysutton closed 8 years ago
@marcysutton is it possible to pull these values from the theme? We may need to at least create two different color schemes: one for the dark theme and one for the light theme.
Possibly. I did check light and dark themes though, and it worked for both. The dark theme as a whole has horrible contrast.
@dylanb the selected color is hard-coded along with the background colors, but they seem to work okay in both themes. I received a demo extension from Mozilla that shows how to store the default text color of a document in a blank CSS file–which we could then invert to set a selected color–but it seems like overkill given we are rearchitecting our extensions right now.
Here is some of the code that creates a new style rule based on the default text color, where kStyleSheet
is a blank CSS file in the project directory:
function loadIntoWindow(window) {
if (!window || window.document.documentElement.getAttribute("windowtype") != "navigator:browser")
return;
let doc = window.document;
var ss = doc.createProcessingInstruction("xml-stylesheet", 'href="' + kStyleSheet + '" type="text/css"');
doc.insertBefore(ss, doc.documentElement);
ss.addEventListener("load", {
handleEvent: function(e) {
if (e.type === "load") {
ss.removeEventListener("load", this);
while (ss.sheet.cssRules.length > 0) {
ss.sheet.deleteRule(0);
}
var color = window.getComputedStyle(window.document.documentElement, "").color;
color = color.replace("0,", "255,")
Components.utils.reportError(color);
ss.sheet.insertRule("* {color: " + color + ";}", 0);
}
}
});
}
That is a good starting point but needs a lot of work because simply swapping all 0 color values for 255 is a bit simplistic. I'm going to merge this PR, perhaps you could add that to the React refactor project.
@dylanb I didn't see any other color values, so I wasn't sure if there was a safer way to handle this. Hard-coded a color to fix the issue.
Closes https://github.com/dequelabs/axe-firefox-devtools/issues/45