Google Calendar Dark Mode

Stylus.css

/* calendar.google.com */

:root {
    --base-bg-color: #111111;
    --base-fg-color: #eeeeee;
    
    --border-color: #202020;
    
    --button-hover-bg-color: #333333;
    --button-hover-border-color: #404040;
    --button-hover-fg-color: #efefef;
    
    --button-normal-bg-color: #222222;
    --button-normal-border-color: #404040;
    --button-normal-fg-color: #efefef;
    
    --faded-fg-color: #424242;
    --label-fg-color: #8c8c8c;
}

/* ******************** *
 *                      *
 *    Shared Styling    *
 *                      *
 * ******************** */

/* border color (sidebar, calendar) */
body[data-viewfamily="EVENT"] .SGWAac {
    border-top-color: var(--border-color);
}

/* controls svg */
div.rF3YF svg, div.rF3YF span {
    color: var(--base-fg-color);
    fill: var(--base-fg-color);
}

/* controls text */
.gb_qa svg, .gb_Cc svg, .gb_Zc .gb_7d, .gb_Oc .gb_7d {
    color: var(--base-fg-color);
}

/* ******************** *
 *                      *
 *    Header Styling    *
 *                      *
 * ******************** */

/* background color */
#gb {
    background-color: var(--base-bg-color) !important;
}

/* border color */
.gb_F {
    border-color: var(--border-color);
}

/* button */
.GXlaye.qRI4pc {
    background-color: var(--button-normal-bg-color);
    border-color: var(--button-normal-border-color);
}

/* button (hover) */
.GXlaye.qRI4pc:hover {
    background-color: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-fg-color);
}

/* button text */
.GXlaye .snByac {
    color: var(--button-normal-fg-color);
}

/* date text */
.rSoRzd {
    color: var(--base-fg-color);
}

/* dropdown button */
.Cd9hpd {
    background-color: var(--button-normal-bg-color);
    border-color: var(--button-normal-border-color);
}

/* dropdown button text */
.Cd9hpd .snByac {
    color: var(--button-normal-fg-color);
}

/* dropdown button (hover) */
.Cd9hpd:hover {
    background-color: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
}

/* dropdown button (open) */
.Cd9hpd .mAozAc.iWO5td {
    background-color: var(--button-normal-bg-color);
}

/* dropdown menu */
.JPdR6b {
    background-color: var(--base-bg-color);
}

/* dropdown menu item icon */
.z80M1.N2RpBe::before {
    border-color: var(--button-normal-border-color);
}

/* dropdown menu item (hover) */
.z80M1.FwR7Pc {
    background-color: var(--button-hover-bg-color);
}

/* dropdown menu text */
.z80M1 {
    color: var(--base-fg-color);
}

/* google button */
.gb_ia {
    background-color: var(--button-normal-bg-color);
    border-color: var(--button-normal-border-color);
}

/* google button (hover) */
.gb_ia:hover {
    background-color: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
}

/* ********************* *
 *                       *
 *    Sidebar Styling    *
 *                       *
 * ********************* */

/* background color */
body {
    background-color: var(--base-bg-color);
}

/* button */
.SaBhMc {
    background-color: var(--button-normal-bg-color);
}

/* button (hover) */
.SaBhMc:hover {
    color: var(--button-hover-bg-color);
}

/* button text */
.u5sQsb {
    color: var(--button-normal-fg-color);
}

/* calendar flair */
.hEtGGf::after {
    background-image: none;
}

/* calendar label */
.MSZkRb .r4nke {
    color: var(--label-fg-color);
}

/* calendar list label */
.uQ1ixe .snByac {
    color: var(--label-fg-color);
}

/* calendar list icon */
.Ii6cVc,
.MbUTNc,
.uHMk6b {
    border-color: var(--base-bg-color);
}

/* calendar list item */
.NI2kfb {
    color: var(--base-fg-color);
}

/* calendar row */
.W0m3G .r4nke,
.W0m3G::before {
    background: transparent;
}

/* calendar cell (today) */
.TUH0Sd.i8dSE .r4nke {
    background-color: var(--button-hover-bg-color);
    color: var(--button-hover-fg-color);
}

/* meeting label */
.fWMZdd {
    color: var(--label-fg-color);
}

/* meeting search field */
.ULpymb {
    background-color: var(--base-bg-color);
}

/* meeting search field text */
.ULpymb .zHQkBf {
    color: var(--base-fg-color);
}

/* meeting search field background */
.J09ahd {
    background-color: transparent;
}

/* meeting search results */
.VOEIyf .jBmls {
    background-color: var(--base-bg-color);
}

/* meeting search result item */
.oKubKe[aria-selected="true"] {
    background-color: var(--button-hover-bg-color);
}

/* ********************** *
 *                        *
 *    Calendar Styling    *
 *                        *
 * ********************** */

/* background color */
.tNDBE {
    background-color: var(--base-bg-color);
}

/* border color */
.PhLhOd {
    border-right-color: var(--border-color);
}

.QIadxc {
    border-bottom-color: var(--border-color);
}

.t8qpF {
    border-right-color: var(--border-color);
}

.zYZlv {
    border-right-color: var(--border-color);
}

.tNDBE:not(.Wyo4Qe) {
    border-left-color: var(--border-color);
}

/* past all-day event */
.g3dbUc.UflSff.jKgTF.QGRmIf[style*="background-color"] {
    opacity: 25%;
}

/* calendar item (hover) */
.g3dbUc.smECzc:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--button-hover-fg-color);
}

/* calendar today */
.ef2wWc {
    background-color: #0D0D0D;
}

/* calendar today text */
.YK7obe {
    color: var(--button-hover-fg-color);
}

/* calendar today day */
.yzYBvd.F262Ye {
    background-color: transparent;
}

/* calendar today day text */
.YK7obe .yzYBvd.F262Ye {
    color: var(--button-hover-fg-color);
}

/* text */
.g3dbUc.smECzc {
    color: var(--base-fg-color);
}

/* faded text */
.g3dbUc.UflSff {
    color: var(--faded-fg-color);
}

/* event modal background */
.JtukPc {
    background-color: var(--base-bg-color);
}

/* event modal shadow */
.RDlrG {
    box-shadow: 0px 24px 38px 3px rgba(255,255,255,.14),
                0px 9px 46px 8px rgba(255,255,255,.12),
                0px 11px 15px -7px rgba(255,255,255,.2);
}

/* event modal "are you going" background */
.NAFvr {
    background-color: rgb(255,255,255,0.08);
    border-top: 1px solid rgb(255,255,255,0.1);
}

/* event modal "are you going" foreground */
.YTCBlf {
    color: var(--base-fg-color);
}

/* event modal text */
.agOyMd .JAPzS,
.agOyMd div.DN1TJ,
.pdqVLc .DN1TJ,
.NI2kfb {
    color: var(--base-fg-color);
}