Google Takvim dark-mode

Google’ın masaüstü sitelerinin çoğunda dark mode(koyu mod) yok, ben bilgisayarımı ve telefonumu koyu modda kullanıyorum ve masaüstünde de Google Takvim ve Çeviriyi koyu modda görmek istiyorum bunun yapmak için hem bu iki site için özel kod hem de Chrome’un chrome://flags yani Experiments kısmından bir ayarla yapılabilen iki seçenek paylaştım.

Öncelikle en kolay seçin Chrome’da gördüğünüz her siteyi koyu moda çevirebilmek için kullanılabilecek yöntem olan chrome://flags kısmından “Auto Dark Mode for Web Contents” ayarını Enable yapmanızdır.

Diğer yöntemde uBlock Origin kullanıyorsanız filtrelere aşağıdaki sitilleri eklemek:

!Google Calendar dark mode
calendar.google.com##html:style(filter:invert(.92))
calendar.google.com##html [aria-label="Takvim"] img,html svg,html [role="tablist"] div :not([aria-disabled="true"]),html [data-ogsr-up],[data-eventchip],[role="complementary"] li > div > div > div,#drawerMiniMonthNavigator [data-focusable="true"] > [aria-label="1"],[aria-label*=", bugün"]:style(filter:invert(1.92))

!Google Translate dark mode
translate.google.com##html:style(filter:invert(.92))
translate.google.com##html [aria-label="Google Çeviri"] > span, [data-ogsr-up]:style(filter:invert(1.92))

uBlock CSS konusunda daha fazla bilgi için: https://wolkanca.com/ublock-origin-ile-css-kontrolu/

Ayrıca dilerseniz Dark Reader isimli Chrome uzantısı da her şeyi sizin için yapabilir diğer hiçbir şeyi yapmanıza gerek kalmaz.

Mobil uygulamalarda ise koyu mod seçeneği mevcut, uygulamaların ayarlarından yapabilirsiniz.

Ek olarak ileri düzey kullanıcı iseniz aşağıdaki sitili de kullanabilirsiniz:

/**
 *Source: https://arcboosts.com/boosts/91/google-calendar-dark-ode
 */

:root{
  color-scheme: dark !important;
  --primary: rgb(51, 128, 230) !important;
  --primary-variant: rgb(143, 156, 177) !important;
  --on-primary: rgb(209, 81, 81) !important;
  --secondary: rgb(23, 106, 250) !important;
  --secondary-variant: rgb(57, 78, 109) !important;
  --on-secondary: rgb(25, 103, 210) !important;
  --on-secondary-variant: rgb(24, 90, 188) !important;
  --surface: #202124 !important;
  --surface-transparent: rgba(255, 255, 255, 0) !important;
  --on-surface: rgb(60, 64, 67) !important;
  --on-surface-variant: rgb(95, 99, 104) !important;
  --on-surface-variant-agm: #70757a !important;
  --background: #fff !important;
  --on-background: rgb(32, 33, 36) !important;
  --textfield-surface: #505050 !important;
  --textfield-primary: rgb(177, 177, 177) !important;
  --textfield-hairline: rgb(128, 134, 139) !important;
  --textfield-error: rgb(197, 34, 31) !important;
  --textfield-on-surface-variant: rgb(95, 99, 104) !important;
  --hairline: #505050 !important;
  --error: rgb(217, 48, 37) !important;
  --on-error: #fff !important;
  --shadow-1: 0px 1px 2px 0px rgba(60, 64, 67, 0.3),
    0px 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
  --shadow-5: 0px 4px 4px 0px rgba(60, 64, 67, 0.3),
    0px 8px 12px 6px rgba(60, 64, 67, 0.15) !important;
  --fab: #557588 !important;
  --fab-hover: #80b1e2 !important;
  --hover: #424242 !important;
  --selected: #636363 !important;
  --dimmed: rgba(32, 33, 36, 0.38) !important;
  --chip-hover: rgb(65, 137, 173) !important;
  --now: rgb(234, 67, 53) !important;
  --mdc-theme-surface: #2c2c2c !important;
}

*{
  color: whitesmoke !important;
}

header{
  background-color: #202124 !important;
}

/************************ search field  *******************/
form[role="search"]{
  background-color: #303134 !important;
}
input::placeholder{
  color: transparent !important;
}

.I7OXgf{
  background-color: var(--mdc-theme-surface) !important;
}

/************************ search for people  *******************/
.OFaVze{
  background-color: var(--mdc-theme-surface) !important;
  box-shadow: unset !important;
}

/* selected person chip*/
.cnTo8e.FYQzvb::before{
  background-color: unset !important;
}
.cnTo8e.FYQzvb.Z3ReZe{
  border-color: var(--mdc-theme-surface) !important;
  background-color: var(--mdc-theme-surface) !important;
}

.L5WGxc *{
  background-color: var(--mdc-theme-surface) !important;
}

.AZW99:hover,
.AZW99:hover *{
  background-color: var(--hover) !important;
}

/************************ searchbox  *******************/
.BYXlo{
  background-color: var(--mdc-theme-surface) !important;
}
#aso_search_form_anchor > table *{
  background-color: var(--mdc-theme-surface) !important;
}
#aso_search_form_anchor
  > div.BYXlo
  > div
  > div:nth-child(1)
  > div.aSTvTe
  > div
  > div
  > div.OA0qNb.ncFHed{
  background-color: var(--surface) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  margin-top: 0.25rem !important;
}
.ncFHed .MocG8c.KKjvXb{
  background-color: var(--fab-hover) !important;
  border-radius: 0.5rem !important;
}
/* calender in searchbox */
.gHQcAb{
  border-radius: 0.5rem !important;
  background-color: var(--surface) !important;
}

/* Hide support button*/
div.gb_we.gb_ue > div > div > div.h8Aqhb{
  display: none;
}

/* hover over number in calendar*/
.yzYBvd:hover{
  background-color: var(--hover) !important;
}

/************************ New entry  *******************/
/* fix button */
.buGMKc,
.dwlvNd.RDPZE .buGMKc:hover,
.dwlvNd.RDPZE .buGMKc:focus{
  border-radius: 0 1rem 1rem 0 !important;
  padding-left: 1rem !important;
  margin-left: -1rem !important;
  width: 14rem !important;
}

div.dwlvNd.Hrn1mc > div > div{
  border-radius: 0 1rem 1rem 0 !important;
  width: 95% !important;
}
.VKy0Ic[aria-selected="true"]{
  background-color: var(--hover) !important;
}
.u3bW4e{
  background-color: var(--selected) !important;
}

/************************ left Sidebar *******************/
/* clicked */
.DWWcKd-OomVLb-LgbsSe-gk6SMd *{
  background-color: var(--selected) !important;
}
/* Hover */
.DWWcKd-OomVLb-LgbsSe-ZmdkE *{
  background-color: var(--hover) !important;
}
/* plus icon */
#qJTzr > div.DWWcKd-OomVLb-LgbsSe-Bz112c-haAclf{
  background-image: url(https://fonts.gstatic.com/s/i/googlematerialicons/add/v21/white-24dp/1x/gm_add_white_24dp.png) !important;
}

/* Hide weird gradient Border*/
div.hEtGGf.HDIIVe.sBn5T::after{
  display: none;
}

/* color settings */
.hqBSCb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-TkwUic{
  background-color: #303134 !important;
}
.s8kOBc .VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd{
  background-color: var(--selected) !important;
}

/************* Trash **********************/
.Lzfnue{
  background-color: var(--mdc-theme-surface) !important;
  border-radius: 0.5rem !important;
  margin-right: 4rem !important;
}
.LOewLb.KKjvXb{
  background-color: var(--fab) !important;
}

/************* Settings **********************/
.yVWOnb{
  margin-top: 0.5rem !important;
}

.cAYGed.KKjvXb .Ioup7e,
.cAYGed.KKjvXb .BMQm1d{
  background-color: var(--fab) !important;
}
.nBzcnc.Wm6kRe.huVZvb:hover,
.GrxScd .SWigMc.Wm6kRe.huVZvb:focus,
.nBzcnc.gk6SMd.huVZvb{
  background-color: var(--hover) !important;
}
/* Modal */
.cC1eCc .VfPpkd-P5QLlc{
  background-color: var(--mdc-theme-surface) !important;
  box-shadow: unset !important;
}
.WmnPA:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me){
  background-color: #303134 !important;
}
/* dropdown */
div.OA0qNb.ncFHed{
  background-color: var(--mdc-theme-surface) !important;
  border-radius: 0.5rem !important;
}

/************* Misc **********************/
[data-is-pill],
[data-is-pill] ~ *,
.E4zakf{
  background-color: var(--primary) !important;
}

/* hide the "more Apps button" */
#gbwa{
  visibility: hidden !important;
}

.jVwmLb{
  border-radius: 5rem !important;
  width: auto !important;
  padding-left: 0rem !important;
}

/* new modal*/
body > div.JPdR6b.QFf4q.qjTEB > div{
  background-color: var(--surface) !important;
}

/* change hover color of calender */
div.yRgNBf > div[role="row"] > span > :hover{
  background-color: var(--fab-hover) !important;
}

Kolay gelsin.