Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.

Inverts images on page

About: Dark Google Calendar (2019) Good rating
edited November 2017 in Style Reviews Chrome
Needs .gb_Lc, .gb_Za in Reverse Inversion filter.


  • Hey Shem,
    I guess you are talking about the navigation bar. On my side, the images are fine, so I don't see the point of reversing the inversion.

    If you can, please elaborate on that problem and I will see what I can do.

  • I've come across this as well, and have linked a couple of screenshots of, in particular, the user switcher, along with the following tweak which seems to fix this:

    *:before,img {
        filter: invert(100%) hue-rotate(180deg)!important;

    Basically, reverse the invert, and re-rotate the hue by another 180deg, which takes it back to normal. (this 100% invert may not be the best as the theme only natively inverts by 90%, though inverting by 90% results in washed out colours)


    Hope this helps :)

  • ^^This code works wonders!
  • Thanks @"Aaron Moorley"!

    This is the fix I was looking for.
    I've applied it in the latest update. :)
  • Updated as I realised that the + in the "Create" button (top-left) is also affected by this -

    *:before,img,svg {
        filter:invert(100%) hue-rotate(180deg)!important;
  • Right, I think it looks better with the + affected.

    The only downside is the white bar on the left side of the date selection panel that I cannot get rid of.

  • edited January 5 [?]

    No best exlude imgage by :not() - but this should must use similar code too:

    body *:not(img):not(svg) {
        -webkit-filter: invert(90%) hue-rotate(180deg)!important;
        filter: invert(90%) hue-rotate(180deg)!important;


    If unless there is an even greater lags on the page and works in this method.

  • I've already checked that before and it's not so convenient to work with :not selector.
  • Found a solution to the white bar!

    Turns out, each of the date elements in the date picker have a :before with a background colour. The global invert changes it to black, and the :before selector on the fix I posted above was flipping it back to white.

    Updated code is as follows:

    *:not([data-date]):before, img, svg {
        filter: invert(100%) hue-rotate(180deg) brightness(1.1) contrast(105%)!important;

    Basically just look for all the :before elements, except the ones in the date picker. Seems to work all right from my (limited) testing :)

  • Thank you, @"Aaron Moorley"!

    It works perfectly.
    I've included the fix in the latest update and as before expressed my gratitude to you in the description.

  • Not a problem at all - glad to be of assistance :)

Sign In or Register to comment.