Skip to content

Instantly share code, notes, and snippets.

@kherge
Last active May 17, 2023 18:11
Show Gist options
  • Save kherge/1ca15afaa2385268fd8818625045d31e to your computer and use it in GitHub Desktop.
Save kherge/1ca15afaa2385268fd8818625045d31e to your computer and use it in GitHub Desktop.
Google Calendar Dark Mode
/* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment