Feature request: Dark theme (with a suggestion of what the CSS code could be)

[hasB4K]

Hi,

It would be awesome to add a Dark Theme (like Tree Style Tab). It could be a simple option. So far I am overriding the css in the chrome/userContent.css in my Firefox's profile like this:

@-moz-document url("moz-extension://[...extension-hash...]/sidebar/panel.html")
{
    html, body
    {
        background-color: #222 !important;
        color: #EEE !important;
    }

    .toolbar-item .btn,
    .change-state-button,
    .cancel-button,
    .erase-button
    {
        filter: invert(90%) !important;
    }

    .progress
    {
        border: 1px solid #777 !important;
        background-color: #CCC !important;
    }

    .toolbar-bottom
    {
        border-top: 1px solid #777 !important;
    }

    .selected
    {
        background-image: linear-gradient(to top, #444, #444) !important;
        box-shadow: 0 0 1px 1px #777 !important;
    }
}

Thanks for the great add-on! Best regards,

[josalhor]

@aesqe

I've been looking into @hasB4K suggestion and I believe this slighly modified version of his CSS looks really great:

html, body
{
  background-color: #222 !important;
  color: #EEE !important;
}

.toolbar-item .btn,
.change-state-button,
.cancel-button,
.erase-button
{
  filter: invert(90%) !important;
}

.progress
{ 
  background-color: #CCC !important;
}

.toolbar-bottom
{
  border-top: 1px solid #777 !important;
}

We could probably detect current theme and dynamically load some CSS. What do you think?

[hasB4K]

Thanks @josalhor! However I have a simple remark.

I think detecting dynamically themes is not a great idea:

• how do you decide to use this theme when the user use a dark theme, or even a blue theme? How do you define what is a dark theme in the first place (since you will need to detect it)?
• when do you know if the visual is okay in the end? This one is subjective for the user.

I would rather let the user decide whether or not he wants to use this theme with an extension option. At least that my stand :)

Have a good day,

[josalhor]

I was thinking of doing this with the default themes of Firefox. Maybe a setting with "Auto" - "Light" - "Dark" would do the trick.

Or would you simply prefer "Light" - "Dark"?

[hasB4K]

Oh ! I see :)

Well, if there is an option to be able to switch, both option are fine to me!

Thank you!

[ffabbroc]

I wasn't able to get either of the above CSS to work. When Firefox loads, the downloads sidebar initially loads dark but then switches back to light.

FYI, I use another Firefox extension called "Tab Center Redux" that provides a similar feature but for tabs. It has an option for "dark mode". Attached is a screenshot of how it configures dark mode.

Thanks, Francesco

[josalhor]

That CSS is now some months old, Firefox may have changed something that was necessary for this to run. @ffabbroc do you have screenshots of how well tabcenter performs on this extension?

[ffabbroc]

Yes, I figured as much. I need to troubleshoot the CSS when I have time.

Here's a screenshot of Firefox with the tab center view showing. It's a very nice extension, since I'm a tab freak. ;)

Let me know if you'd like any more info...

Francesco

[BlackSkorpio]

Hi there guys! Is there any progress on this issue?

Have tried every single "hack" that's mentioned here in the tracker, to no avail! :(

[hasB4K]

Hi @BlackSkorpio I still use the userContent.css provided two years ago and it still works for me on firefox 77.0.1 on a linux distribution.

[pangoleaf]

Just got this extension myself and thought it could do with a dark theme. The CSS in this thread works fine for me so I'm pretty satisfied, would still be great if a proper setting could be added though.

Hi there guys! Is there any progress on this issue?

Have tried every single "hack" that's mentioned here in the tracker, to no avail! :(

Just in case you're not aware, you need to set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config for firefox to use a userContent.css file.