Giter Site home page Giter Site logo

About dark theme (not an issue) about mozext HOT 7 CLOSED

DenB10 avatar DenB10 commented on July 18, 2024
About dark theme (not an issue)

from mozext.

Comments (7)

4ch1m avatar 4ch1m commented on July 18, 2024 1

Dude... that's awesome! 👍 😄

I just integrated it on the dev-branch.

Please provide a pull-request next time... so I can quickly see the changes... and you can claim credit for it. 😉

Thanks, @DenB10.

from mozext.

4ch1m avatar 4ch1m commented on July 18, 2024
1. The dark theme is activated "manually" via an option and not automatically when you use (like me) the dark theme of Thunderbird.

I'm aware of that.
Unfortunately I don't see any (obvious) way to detect Thunderbird's theme-settings via (extension-)code.
If you have any concrete ideas/implementations for that, a PR would be greatly appreciated.

2. It would be nice if the dark theme also worked on the popup.

What do you mean by "on the popup"?
Dialog-windows/popups should also appear in a dark theme.

from mozext.

DenB10 avatar DenB10 commented on July 18, 2024

What do you mean by "on the popup"?
Dialog-windows/popups should also appear in a dark theme.

Sorry, I misspoke. What I call "popup" is the context menu that appears when you click on the "Signature Switch" toolbar button in the compose window.
But I found a way to make the dark theme apply to this menu too: you just have to modify the files "compose/popup.html" and "compose/popup.js":

compose.zip

Note: the theme change is immediate on this menu but not on the options page (you have to refresh it); it would be nice if the refresh of the options tab was automatic too!

Unfortunately I don't see any (obvious) way to detect Thunderbird's theme-settings via (extension-)code.
If you have any concrete ideas/implementations for that, a PR would be greatly appreciated.

Starting from the previous version of Signature Switch (2.14.0), I tried to copy the content of the file "_libraries/mdb.dark-min.css" (that is present in the new version 2.15.0) under @media (preferences-color-scheme: dark) {...} into the file "options/page.css". It works but the headers of the inactive tabs of the options page have not the right font size nor the right color. Probably a small change to make in this css?

For the button menu of the compose window, it's easier, just add a "compose/popup.css" like this one:

@media (prefers-color-scheme: dark) {
  .m-2 {
    background-color: #35393b;
  }
  hr {
    color: #b4b7b8;
  }
}

With reference in the "popup.html" file obviously.

from mozext.

DenB10 avatar DenB10 commented on July 18, 2024

I think I managed to make a version that takes into account the Thunderbird theme without any special action from the user in the extension options.
There is still the icon of the context menu in the compose window, which is impossible to change according to the theme: black on black in dark theme, it's not very nice, the solution would be a colored icon!

I send it here because I don't see how to do it in "pull request":
signature_switch-2.15.0mod-tb.zip

from mozext.

4ch1m avatar 4ch1m commented on July 18, 2024

Sorry, I misspoke. What I call "popup" is the context menu that appears when you click on the "Signature Switch" toolbar button in the compose window.

Oh. You're right.
I totally missed that one.
I just fixed/added that to the dev-branch.

But I found a way to make the dark theme apply to this menu too: you just have to modify the files "compose/popup.html" and "compose/popup.js":

The extension is using Material Design Bootstrap for the UI.

So all (CSS-)definitions should come from that framework; and not from manual overrides.

Note: the theme change is immediate on this menu but not on the options page (you have to refresh it); it would be nice if the refresh of the options tab was automatic too!

Yes. The standard (white) background color is present for a millisecond (until everything is done loading).
That's not perfect... but not a major annoyance, I guess.

... Probably a small change to make in this css?

For the button menu of the compose window, it's easier, just add a "compose/popup.css" like this one:

@media (prefers-color-scheme: dark) {
  .m-2 {
    background-color: #35393b;
  }
  hr {
    color: #b4b7b8;
  }
}

Like mentioned above.
I'd like to stick with the definitions provided by MDB.

But thanks for your efforts, @DenB10. 👍

from mozext.

DenB10 avatar DenB10 commented on July 18, 2024

@4ch1m

Like mentioned above.
I'd like to stick with the definitions provided by MDB.

Let me answer even if this thread is closed. I think you didn't see my second message in which I send you a mod that is entirely based on unchanged MDB.
Take a look at it and do what you want with it, I won't impose anything on you ;)

signature_switch-2.15.0mod-tb.zip

from mozext.

DenB10 avatar DenB10 commented on July 18, 2024

Please provide a pull-request next time... so I can quickly see the changes... and you can claim credit for it.

I know, I tried to make a pull request but I didn't succeed, I'm not very good 😄
As for the credit, I don't care, it's not my goal!

from mozext.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.