Full dark mode?

[KraXen72]

I know its not really a simplify thing but it would be really neat to have an option to invert/dark modeify the preview pane/the part of the page where it shows the email, so we can enjoy full dark mode without slowing down the loading of gmail too much (by using custom dark mode extentions) http://prntscr.com/qmoseg

[KraXen72]

https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh dynamic theme does pretty well but slows the loading of the page a lot...

[leggett]

Requires giving access to every website you visit (unideal).

Did you try this in Gmail with Simplify enabled? Did it work well across different rich text or html emails?

[KraXen72]

Yes, suprisingly. If you enable simplify and this extention, it looks really good across all emails, it only takes too long to load. If you could maybe trim down the dark reader code a bit (it is opensource and has a github) so it doesent take too long to load, it would be ideal... I only want gmail in dark mode, not other pa ges really..

[KraXen72]

proof: normal mail: http://prntscr.com/qn517v rich text/html email: http://prntscr.com/qn52aa is as good as it can get

i almost want to use the extentions combined but the load time with dark reader on is soo looong...

[leggett]

I started playing with this for v2 and got further than I expected. But it has some unintended consequences / difficulties to get really right.

This email from FexEx is a good example:

Using Gmail's dark mode on mobile, I see that the header is not inverted but the icons in the footer are (making the YouTube icon impossible to read.

[leggett]

Here is another example of Simplify dark mode on desktop vs original vs dark mode on mobile:

[leggett]

I'm guessing getting from 90% to 99% is a sizable task but I'll keep digging into it. If anyone has any pointers, tips, or resources on this, please share.

Maybe I can get it to 99%. Or maybe can detect when there are complex elements and turn off full dark mode for just those emails. As it is, I think it will be at least good enough to include in v2 as a "use at your own risk" feature that you opt into.

[leggett]

A few good write-ups: https://habr.com/en/company/yandex/blog/450032/ https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b https://wgtwo.com/blog/hacking-dark-themes-with-css-blend-modes/

[KraXen72]

i already posted this here but this extention does a pretty good job in general + is open source https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh

https://github.com/darkreader/darkreader

use Dynamic filter

i digged a bit into it and found this specific code used for gmail by the dark reader extention:

mail.google.com

INVERT
img.Hl
img.Hk
img.Ha
.asor_t0
.asor_i4
.ita-icon-0
.gb_df
img[src$="google_gsuite"]
.rY>.sa
.buh

CSS
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
    .buk {
        background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_default_v1_2x.png) !important;
    }
    .bui {
        background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_comfortable_v1_2x.png) !important;
    }
    .buj {
        background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_compact_v1_2x.png) !important;
    }
}
.buk {
    background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_default_v1_1x.png) !important;
}
.bui {
    background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_comfortable_v1_1x.png) !important;
}
.buj {
    background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/rfr/density_compact_v1_1x.png) !important;
}
::-webkit-scrollbar-thumb {
    background-color: #424242 !important;
}
::-webkit-scrollbar {
    background-color: transparent !important
}

for now i will use the extention because i have gmail pinned and never close it so loading time shouldn't be that much of an issue

[leggett]

I've got dark theme support working in Simplify v2 now.