Text invisible with dark theme (Firefox 68)

[gitoss]

Might be the new fluid addon deisgn, but the addon "Options" text (grey) is nearly invisible against the background (a very, very slightly darker gray) - which makes the addons basically broken as in non-configurable.

[gitut2007]

In my case, FF66 with a dark theme, text (black) is nearly invisible against the background ( dark brownish gray). The problem is themes that change only the background or the text color, so only addons that don't take the colors [neither background nor text color] of a given theme are always viewable [but sometimes are jarring for dark theme users].

[gyng]

Thanks for reporting. I've updated the extension to have basic support for dark mode in 3.5.0.

Wondering if there are any docs from Firefox/Chrome about this for webextensions.

[gitut2007]

After update of addon, still same, I guess 'basic support' means it works on some dark theme cases.

[gyng]

@gitut2007 Can you post a screenshot and what OS you're using? I've only tested it on dark mode/windows.

[gitut2007]

win7. Doesn't let me put the screenshot: ' Something went really wrong, and we can’t process that file. Try again', but it's not regular dark mode, it's https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme

[gitut2007]

A semi-solution: in the file userContent.css , under ... "addon settings on about:addons if you can't read their text" ... one can change the background color, but I haven't found a way to change the black text color which would be the way for keeping the theme truly dark.

[gyng]

@gitut2007 I intend to add an unstyled button to pop out the options page in a new tab as a way for users with custom themes to see options. I just haven't made the time to do it yet, sorry.

[Xezarior]

Hello, I am not sure if this is related, but on my side the options page also is not usable. All text descriptions to checkboxes are not displayed. This is a screenshot from the "popout" settings page for the addon. The issue is the same in the native settings view form the addons manager. I pressed CTRL+A to highlight all present text. As you can see, it is not rendered in the page, although it is present in the page source (hence, I do not have a problem of black text on a black background).

The behaviour is independent of having the dark mode activated or not, and no blocking addons are active on this page. And there are no custom styles applied to the page. I cannot tell since when it behaves this way, as I haven't checked the options in a long time. Firefox tells me the addon is up to date.

If required I can open a new issue for this.

Firefox 67.0.2-64bits on Windows 10 Educational.

---

Edit: Testing above-mentioned method of changing the file userContent.css: By adding the code (not recommended, this selector is a bad idea): #settings-page { background-color: blue !important; } I managed to get the following result:

The "popout" page now also works the same way. This would hint at a similar problem to gitut2007's. For some reason, the white text was just not selectable previously.

[gyng]

@Xezarior thanks for the detailed post. Seems like the "basic support" for dark mode is quite inadequate.

I'm not sure if FF68/69 will fix this since I've seen some issues about dark mode and about:addons filed on bugzilla, but I'll prioritise this when I make some time and work on save-in.

[IchyHusky]

Its completely unusable due to that bug for me. Is there any way to get around it ?

[DanaMW]

I load the following file for my machines: I put savein.css in the chrome folder and set my colors like so. change as you need. @import url("SaveIn.css"); in my userContent.css savein.css

/* savein */

@-moz-document url-prefix("moz-extension://adb320b1-d183-47cb-9eb7-b83feae0a356/"),
url-prefix("moz-extension://7749af36-c071-41f4-8e43-7dbb9257de60/") {
    a,
    .link {
        color: var(--MyW) !important;
        text-decoration: none !important;
    }
    a:hover,
    .link:hover {
        color: var(--Myred1) !important;
        text-decoration: none !important;
    }
    a:active,
    .link:active {
        color: var(--Myred1);
    }
    html {
        background-color: var(--Myback);
        color: var(--MyW) !important;
    }
    * {
        color: rgb(146, 138, 138);
    }
    code,
    pre {
        background-color: var(--Myback);
        color: var(--MyW) !important;
    }
    hr {
        background-color: rgb(87, 80, 80) !important;
    }
    input[type="number"],
    input[type="text"],
    textarea {
        outline: solid 2px var(--Myback);
    }
    textarea {
        background-color: var(--Mygray3) !important;
        border: solid 1px rgb(87, 80, 80) !important;
        color: var(--MyW) !important;
    }
    div.button,
    button {
        border: solid 1px var(--MyB);
        background-color: transparent;
    }
    div.button:hover,
    button:hover {
        background-color: var(--Myred1) !important;
    }
    div.button:active,
    button:active {
        background-color: rgb(87, 80, 80) !important;
    }
    div.button.puffy,
    button.puffy {
        color: var(--MyW) !important;
        background-color: var(--MyGreen2);
    }
    div.button.puffy:hover,
    button.puffy:hover {
        background-color: var(--Myblue1);
    }
    div.button.puffy:active,
    button.puffy:active {
        background-color: var(--Myblue1);
    }
    .help {
        color: var(--Myblue2) !important;
        ;
    }
    .error-row {
        background-color: var(--Myred1);
        color: var(--MyW) !important;
    }
    .info-row {
        color: #000 !important;
        background-color: var(--Mytext);
    }
    .help:visited {
        color: var(--Myred2);
    }
    .help:active {
        color: var(--Myred2);
    }
    .help-text {
        color: #000;
        background-color: var(--Mytext);
    }
    .box {
        background-color: var(--Myback);
        color: var(--MyW) !important;
    }
    .chrome-only {
        background-color: rgb(165, 249, 168);
    }
    .click-to-copy:hover {
        outline: solid 2px var(--Myblue1);
    }
    .click-to-copy:active {
        background-color: var(--MyW) !important;
    }
    .badge {
        background-color: var(--MyW) !important;
    }
    .warning.badge {
        background-color: var(--yellow50);
    }
    .firefox.badge {
        background-color: var(--orange50);
    }
    .demo-box>.demo-arrow {
        color: var(--Myback);
    }
    .demo.g1 {
        background-color: var(--purple50);
    }
    .demo.g2 {
        background-color: var(--orange50);
    }
    .demo.g3 {
        background-color: var(--yellow50);
    }
    .demo.g4 {
        background-color: var(--teal50);
    }
}

[DanaMW]

Find your moz-extention://### in the Firefox debug page: about:debugging#/runtime/this-firefox for savein hope that helps someone. P.S. It might be over kill (colors you don't need) but i got tired of reloading firefox so I just did them all.

[irvinm]

For me, I see this situation when either I have Windows 10 "default app mode" = "Dark" or have about:config value user_pref("ui.systemUsesDarkTheme", 1);

I see the same thing as @Xezarior and I can't read most of the configuration text. I'm happy to see there is a workaround using UserContent.css, but in my case I can simply switch the Windows default app mode back to light, reload the options page, make\review my changes, and then switch the mode back to dark without restarting Firefox.

I'm sure there will eventually be a better solution when @gyng gets more time as I do think dark modes\themes are here to stay but it looks like we have some workarounds until then.

@gyng, just as another point of reference, "Tree Style Tab" seems to follow a similar method of presenting options and doesn't change the presented content when the mode changes. It might be a good reference to see how that is done. Just an idea ...

Example with dark mode enabled:

[gyng]

Hey, just wanted to post a status update on my availability. I have been busy at my job and still am, but I'm aware this is an issue for many users. Appreciate the help many have posted here. I can't really commit to a timeline for fixing this, but hopefully sooner rather than later (I'm open to accepting PRs or outside help for a fix).

Last I tried months ago I could not reproduce the issue on Windows 10/Dark mode. Maybe that will have changed in recent months. I'm also considering removing the styling altogether, and using the native browser styles.

[irvinm]

@gyng I gave it shot to try to help out and have a suggested code change that worked for me directly in the browser. Using the "Popout" version of options using the regular "light mode", we get:

Next, changing the default app mode to dark [Settings -> Colors -> Choose your default app mode -> Dark], we get the problematic version of:

Finally, going into STYLE.CSS and editing line 38 (inside the "prefers-color-scheme: dark" section) color value from "white" to "black", we get:

I also tried to test the options page when using light mode with this change and didn't see any changes to the original options page. If this change works in the non-pop-out mode, I think this would work as a solution.

I am not sure if I approached this right, but I hope this helps.

[irvinm]

A better solution might be to just explicitly change the background when in dark mode. This looks better when in dark mode. [leave "color: white" and add "background: black"] It doesn't have to be black, but just something dark.

Now with "light":

Now with "dark":

[gyng]

Apologies for the slow fix for this. The text colour should be fixed in 3.5.1. It should be available pending approval from the respective browsers.

[DanaMW]

Thank you for the update friend. Slow or not it is much appreciated.