Extensions Blog Press Contribute Forum FAQ Videos Changelog About Contact English Dark mode
Chrome extensions you can't live without!
Extensions Blog Press Contribute Support About
Forum FAQ Videos Changelog Bio Contact

Theme Suggestion: Darcula Theme for Checker Plus for Google Calendar

I liked the theme "Darcula" that was made for Checker Plus for Gmail and and wanted to use it in Checker Plus for Google Calendar. (https://jasonsavard.com/forum/discussion/5840/skin-suggestion-jetbrains-darcula). Since the Darcula theme wasn't available in the Calendar theme section, I tried copying the gist CSS. However, I found that it did not cover everything in the calendar UI, so I made some tweaks. I tested it pretty extensively in my Calendar - and tested it in my Gmail, which as far as I can tell looks the same - but still may have missed some edge cases.

here is the gist link: https://gist.github.com/mtd91429/c5e1025accaa0ba2558d7de8a4398796

Some screenshots:


  • Wow, great work and thanks for the screenshots and github code very professonal, i'll be integrating right now and open it up to the calendar users...

  • I made a few additional tweaks to the gist code - this time tweaking some aspects of the Gmail pane:



    The one annoyance that I can't figure out are the scrollbars on long emails:

    Compare that to the scrollbars in the previous message with the calendar. It seems to work everywhere but here...

  • Ok thanks i've merge some changes except for the invert.

  • I think a recent update broke the css styling for this theme in Gmail (but not Calendar)

    Specifically, the top banner area in the "inboxSection" (but not in the "openEmailSection"):

    The Code that seems to be responsible is:

    <style id="skin_background-color" type="text/css"> 

    body:not(.background-skin) #inboxSection,

    body:not(.background-skin) #inboxSection app-header-layout #main-header-toolbar {

    background-color: #f5f5f5 !important;



    I've tried to override this parameter with custom CSS, but I haven't been able to find one that works - there isn't a more specific parameter combination, it seems.

    Of course, one can change the page background via the "Skins & Themes" pop-up - and that works, but the choices don't encompass the specific color (and, more importantly, it requires an extra step)

  • good finding, i will remove the !important from the code in the next update, however you might be able to override the css with this css

    body:not(.background-skin) #inboxSection app-header-layout #main-header-toolbar {background-color: red !important}

  • I tried that override - and it works if one is in the "Skin & Themes" and presses the "Try it out" button. However, if you save the custom CSS and close the extension pop-up, the override won't work on re-opening. I'm guessing it has to do with the order in which the CSS rules are called?

  • hmm in the case you can try adding another specifier like .pageWrapper

    does this work..

    body:not(.background-skin) .pageWrapper #inboxSection app-header-layout #main-header-toolbar {background-color: red !important}

  • Nice! That works. I tried looking for more specifiers, but incorrectly assumed that they needed to become "more narrow" in their specificity. In retrospect, that assumption doesn't make a lot of sense.

  • Added a small update to the css to correct the search input text color. This impacts both mail and calendar apps.

    #searchInputWrapper #searchInput {

    color: var(--secondary-text-color) !important;


    Currently on line 206 of the revised gist

    Without this specification, the current text color defaults to -internal-light-dark-color(black, white);

This website uses cookies to ensure you get the best experience on our website. More info
Got it!