Added dark mode

[dmb1107]

• I've added a toggle for dark mode that changes the CSS variables fg-color and bg-color (defined in base.css)
• Note: I wasn't able to figure out how to make the changes apply without a page refresh. I think it should be an easy fix for someone more knowledgable to do.

[mdolr]

I’ll look into this later, I guess to apply the changes without reloading the page we could use the chrome internal messaging system to communicate between the popup and the core. I can take care of that

[plushugh]

@mdolr could use a media query and use system/browser dark mode settings.

[mdolr]

Hum, I'm testing this right now

• Dark theme is only applied to the popup (settings page) and does not affect the survol container
• From my poor CSS understanding I think you're trying (in core.js) to affect the page body, which we should not interact with, we should limit ourselves to changing the survol container.

Also @plushugh what do you mean exactly ?

[plushugh]

Hum, I'm testing this right now

• Dark theme is only applied to the popup (settings page) and does not affect the survol container

• From my poor CSS understanding I think you're trying (in core.js) to affect the page body, which we should not interact with, we should limit ourselves to changing the survol container.

Also @plushugh what do you mean exactly ?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[mdolr]

Oh didn't know about this, we should use it then, however that doesn't solve the problems I've listed already.

[dmb1107]

Hum, I'm testing this right now

• Dark theme is only applied to the popup (settings page) and does not affect the survol container
• From my poor CSS understanding I think you're trying (in core.js) to affect the page body, which we should not interact with, we should limit ourselves to changing the survol container.

• The dark theme is applied to the survol container but only after you reload the page after toggling it.
• In core.js I only changed the CSS variabels which are used in the survol containers, not the page body.

[mdolr]

isn't document.documentElement.style.setProperty('--bg-color--', '#212121'); here affecting the document's body ? (If some site had exactly the same variable names for example?)

Also do you really have the container working in dark theme ? Because I've tested it before-after reloading, tried every scenario and I couldn't get it to work, it applies to the popup but it doesn't apply to the survol container (at least for me). If you could take a screenshot that would be nice 👍

[dmb1107]

isn't document.documentElement.style.setProperty('--bg-color--', '#212121'); here affecting the document's body ? (If some site had exactly the same variable names for example?)

Also do you really have the container working in dark theme ? Because I've tested it before-after reloading, tried every scenario and I couldn't get it to work, it applies to the popup but it doesn't apply to the survol container (at least for me). If you could take a screenshot that would be nice 👍

• I see what you mean, that definitely would be a problem.
• I just tried running it on my Mac with Chrome and dark mode did not work.

I'm sorry for the confusion, I think it's best that you scrap my PR and let another person have a go at it.

Edit: I just tested on my machine that I developed it on and it's no longer working. I think I had it working at some point and had some CSS cached that made it still in dark mode.

[mdolr]

It's fine don't worry. I'm not sure everything should be removed.
I'll try to see if I can work on this during the weekend, I know @KeshriAyushi22 wanted to work on that maybe he has an idea on how to implement it.