GoogleContacts-Dark.user.css

/* ==UserStyle==
@name        Google Contacts - Dark Style
@namespace   Devo7v
@version     0.2.13
@homepageURL https://github.com/Devo7v/UserCSS
@supportURL  https://github.com/Devo7v/UserCSS/issues
@updateURL   https://raw.githubusercontent.com/Devo7v/UserCSS/master/GoogleContacts-Dark.user.css
@description Provides a dark theme for Google Contacts with customizable colors
@license     CC-BY-NC-SA-4.0
@author      Devo7v

@preprocessor stylus

@var select gcontacts-accent-color "Accent Color" [
    "Blue-from-Material-Version",
    "Blue-from-Preview-Version",
    "Red-from-Old-Version",
    "Custom"
]
@var select gcontacts-corner "Round/Square Elements"[
    "Round",
    "Square",
    "Squircle"
]
@var color gcontacts-accent-color-custom "Custom Accent Color" #33B679
@var color gcontacts-background-color "Primary Background Color" #111111
@var color gcontacts-text-color "Text Color" #CCCCCC
@var color gcontacts-light-text-color "Text Color" #FFFFFF

@var select SystemTheme "Apply Style Under System Theme"[
"Dark" ,
"Light",
"Always"
]
==/UserStyle== */

@-moz-document url-prefix("http://www.google.com/contacts/"), url-prefix("https://www.google.com/contacts/"), url-prefix("http://contacts.google.com/"), url-prefix("https://contacts.google.com/"){

/*#1A73E8*/

:root{
    if gcontacts-accent-color == "Blue-from-Material-Version"{
        --gcontacts-accent-color: #1A73E8;
        --gcontacts-accent-color-rotate: 0deg; /*HSL 214deg, 82% 51%*/
    }
    else if gcontacts-accent-color == "Blue-from-Preview-Version"{
        --gcontacts-accent-color: #2A56C6;
        --gcontacts-accent-color-rotate: 9deg; /*HSL 223deg, 65% 47%*/
    }
    else if gcontacts-accent-color == "Red-from-Old-Version"{
        --gcontacts-accent-color: #DD4B39;
        --gcontacts-accent-color-rotate: -207deg; /*HSL 7deg, 71% 55%*/
    }
    else if gcontacts-accent-color == "Custom"{
        --gcontacts-accent-color: gcontacts-accent-color-custom;
    }
     if gcontacts-corner == "Round"{
            --gcontacts-corner-radius: 2.0rem;
            --gcontacts-contact-radius: 50%;
    }
    else if gcontacts-corner == "Square"{
            --gcontacts-corner-radius: 0.0rem;
            --gcontacts-contact-radius: 0%;
    }
    else if gcontacts-corner == "Squircle"{
            --gcontacts-corner-radius: 0.75rem;
            --gcontacts-contact-radius: 18.75%;
    }
}

/*=======Set the colors based on system theme options=======*/
if SystemTheme == "Dark" {
    @media (prefers-color-scheme: dark)  {
        :root{
            --gcontacts-background-color: gcontacts-background-color; /*#111111*/
            --gcontacts-background-color-2: #222222;
            --gcontacts-background-color-3: #333333;
            --gcontacts-border-color: #555555;
            --gcontacts-text-color: #333333;
            --gcontacts-text-color: gcontacts-text-color; /*#CCCCCC*/
            --gcontacts-light-text-color: gcontacts-light-text-color; /*#FFFFFF*/
            --gcontacts-icon-color: #FFFFFF;
        }
    }
    @media (prefers-color-scheme: light)  {
        :root{
            --gcontacts-background-color: #FFFFFF;
            --gcontacts-background-color-2: #FFFFFF;
            --gcontacts-background-color-3: #EEEEEE;
            --gcontacts-border-color: #CCCCCC;
            --gcontacts-text-color: #333333;
            --gcontacts-light-text-color: rgba(0,0,0,0.6);
            --gcontacts-icon-color: rgba(0,0,0,0.6);
        }
    }
}
if SystemTheme == "Light" {
    @media (prefers-color-scheme: light)  {
        :root{
            --gcontacts-background-color: gcontacts-background-color; /*#111111*/
            --gcontacts-background-color-2: #222222;
            --gcontacts-background-color-3: #333333;
            --gcontacts-border-color: #555555;
            --gcontacts-text-color: #333333;
            --gcontacts-text-color: gcontacts-text-color; /*#CCCCCC*/
            --gcontacts-light-text-color: gcontacts-light-text-color; /*#FFFFFF*/
            --gcontacts-icon-color: #FFFFFF;
        }
    }
    @media (prefers-color-scheme: dark)  {
        :root{
            --gcontacts-background-color: #FFFFFF;
            --gcontacts-background-color-2: #FFFFFF;
            --gcontacts-background-color-3: #EEEEEE;
            --gcontacts-border-color: #CCCCCC;
            --gcontacts-text-color: #333333;
            --gcontacts-light-text-color: rgba(0,0,0,0.6);
            --gcontacts-icon-color: rgba(0,0,0,0.6);
        }
    }
}
if SystemTheme == "Always" {
        :root{
            --gcontacts-background-color: gcontacts-background-color; /*#111111*/
            --gcontacts-background-color-2: #222222;
            --gcontacts-background-color-3: #333333;
            --gcontacts-border-color: #555555;
            --gcontacts-text-color: #333333;
            --gcontacts-text-color: gcontacts-text-color; /*#CCCCCC*/
            --gcontacts-light-text-color: gcontacts-light-text-color; /*#FFFFFF*/
            --gcontacts-icon-color: #FFFFFF;
        }
}
/*=======END Set the colors based on system theme option=======*/

/*Search Bar Background*/
.gb_Td{
    background: none !important;
    background: rgba(255,255,255,0.16) !important;
    border: none !important;
}

/*Logo Text Color*/
.gb_bd{
    color: var(--gcontacts-light-text-color) !important;
}

/*Coloring for svg icons in new Google Bar*/
.gb_Ia svg, .bJdxvf{
    fill: var(--gcontacts-icon-color) !important;
    color: var(--gcontacts-icon-color) !important;
}

/*=====================Google Contacts PREVIEW VERSION=====================*/
/*Google Bar Background Color*/
header#gb, .gb_if{
  background-color: var(--gcontacts-accent-color) !important;
  z-index: 3 !important;
}

/*Search Bar text color*/
.gb_rc svg, .Ax4B8, .yNVtPc{
  color: var(--gcontacts-light-text-color) !important;
}

/*Main Background Color*/
body{
  background: var(--gcontacts-background-color) !important;
}

/*General Text color*/
.jqJLq.jqJLq a{
  color: var(--gcontacts-text-color) !important;
}

/*Link Color*/
a, .W7Nbnf, .mUIrbf-vQzf8d, .lZOZW {
    color: var(--gcontacts-accent-color) !important;
}

/*"Undo" text color in popup*/
.x95qze{
  color: var(--gcontacts-accent-color) !important;
}

/*Drop shadow for Google Bar*/
.pGxpHc{
  box-shadow: 0 0 0px #444444 !important;
  -moz-box-shadow: 0 0 0px #444444 !important;
}

/*New contact button coloring*/
/*.VfPpkd-wbSZ0b{
  background-color: var(--gcontacts-accent-color) !important;
  color: blue !important;
}*/


/*=========================Navigation Panel on Left=========================*/
/*Background color for navigation panel*/
.ANsHhf, .k831u, .tuQOVc{
  background: var(--gcontacts-background-color) !important;
}
.esioQe{
    display: none !important;
}

/*Create Contact button*/
.bgpk6e, .VfPpkd-nBWOSb{
    background-color: var(--gcontacts-background-color-3) !important;
    color: var(--gcontacts-text-color) !important;
    border-radius: var(--gcontacts-corner-radius) !important;
}

/*Dividing Lines*/
.ANsHhf > hr{
  border-bottom: 1px solid var(--gcontacts-border-color) !important;
}
.ANsHhf{
  border-right: 1px solid var(--gcontacts-border-color) !important;
}

/*Selected navigation item background color*/
.ncJ6qe.jqJLq{
  background: var(--gcontacts-background-color-3) !important;
  border-radius: var(--gcontacts-corner-radius)
}
.UXNHp.jqJLq{
  background: none !important;
}

/*Selected navigation item icon color*/
.jqJLq.ncJ6qe.jqJLq a::before, .ncJ6qe .jlpDMe{
  color: var(--gcontacts-accent-color) !important;
}

/*Selected navigation item text color*/
.ANsHhf{
  color: #999999 !important;
}

/*Dropshadow when hovering over an item*/
.as7S4c{
  box-shadow: 0px 0px 0px 0px #222222 !important;
  -moz-box-shadow: 0px 0px 0px 0px #222222 !important;
}

/*Background color when hovering over item*/
.jqJLq:hover{
  background: var(--gcontacts-background-color-3) !important;
  border-radius: var(--gcontacts-corner-radius) !important;
}

/*Background behind edit and trash icons*/
.as7S4c{
  background: none !important;
}

/*Edit and Trash Icon color*/
.jaWtS{
  color: var(--gcontacts-text-color) !important;
}



/*=========================Contacts Panel=========================*/
/*Background color*/
.zYQnTe, .zQTmif, .dFPtBe{
  background: var(--gcontacts-background-color) !important;
  border-bottom: 1px solid var(--gcontacts-border-color) !important;
}

/*Name text color*/
body{
  color: var(--gcontacts-text-color) !important;
}

/*=====Change column order popup=====*/
/*Column Backgrounds*/
.jrhe5d{
    background: var(--gcontacts-background-color-3) !important;
}

/*Dropdown carrots*/
.e2CuFe{
    border-color: rgba(255,255,255,0.4) transparent !important;
}

/*Dividing Lines*/
.OdyOpe{
    border-bottom: 1px solid #666666 !important;
}

/*Grabs icons*/
.zvAEaf .NSy2Hd{
    fill: var(--gcontacts-accent-color) !important;
    color: var(--gcontacts-light-text-color) !important;
}

/*Dropdown hover*/
.ncFHed .MocG8c.KKjvXb{
    background-color: #222222 !important;
}
.BPX1ed.QIMKlc, .BPX1ed.QIMKlc .OdyOpe{
    background: var(--gcontacts-accent-color) !important;
}
/*=====END=====*/

/*Star Icon Color*/
.WbfHMb::after, .QriV0::after{
  color: var(--gcontacts-accent-color) !important;
}

/*Letter color*/
.yIoRze{
  color: var(--gcontacts-accent-color) !important;
}

/*Active row*/
.psZcEd{
  border-left-color: var(--gcontacts-accent-color) !important;
}

/*Selected contact check box*/
.XF89yf .v2jl3d::after{
  color: var(--gcontacts-accent-color) !important;
}

/*Letter Popup when scrolling*/
.wGD2Db{
    background: var(--gcontacts-background-color-3) !important;
    color: var(--gcontacts-accent-color) !important;
}

/*Recent Interactions Background*/
.Usd1Ac {
    background-color: var(--gcontacts-background-color-2) !important
}

/*Recent Interactions Text*/
.Ko4REb {
    color: var(--gcontacts-text-color) !important;
}
.qfAujf {
    color: var(--gcontacts-accent-color) !important;
}


/*=======Popup when adding new contact=======*/
/*Header Background Color*/
.PO4Br, .fbkutb, .FGgXHc{
    background-color: var(--gcontacts-background-color) !important;
}

/*Background*/
.e2txse, .PWsB5e{
    background-color: var(--gcontacts-background-color) !important;
}

/*Contact name text color*/
.y4sJgd, .qhML4e, .m8VNgd{
    color: #999999 !important;
}

/*Random Icons*/
.uQXbGe{
    background-color: var(--gcontacts-background-color) !important;
}

/*Contact Detials*/
.dlP5vf, .Yz8cvd{
    background-color: var(--gcontacts-background-color-2) !important;
}

/*Cancel, Save, and More text*/
.HQ8yf, .ksBjEc:not(:disabled){
  color: var(--gcontacts-accent-color) !important;
}
/*Cancel, Save, and More text disabled*/
.VfPpkd-LgbsSe:disabled{
    color: #999999 !important;
}

/*Underline color*/
.i9lrp, .z0oSpf{
  background: #444444 !important;
}

/*Underline color active*/
.OabDMe, .Bfurwb{
  background: var(--gcontacts-accent-color) !important;
}

/*Plus Symbol*/
.xCGRM::after{
  color: var(--gcontacts-accent-color) !important;
}

/*Input default labels*/
.ndJi5d, /*Name, Email, Phone, etc.*/
.AxOyFc, /*Phoenetic last, first, nickname, file as*/
.F1pOBe /*Address & Notes*/
{
color: #666666 !important;
}


/*=========================Bar at the top when selecting multiple contacts=========================*/
/*Background Color*/
.H1IxX{
  background: var(--gcontacts-background-color-3) !important;
  box-shadow: 0 0 0px #666666 !important;
  -moz-box-shadow: 0 0 0px #666666 !important;
}

/*Back text*/
.Lc2y0d{
  color: #999999 !important;
}

/*Check box*/
.Sc6s5c[aria-checked="true"]::after{
  color: var(--gcontacts-accent-color) !important;
  fill: var(--gcontacts-accent-color) !important;
}

/*Selected text color*/
.fmkX5d{
  color: var(--gcontacts-accent-color) !important;
}




/*=========================Contact Editor=========================*/
/*Popup background color*/
.ONOzI{
  background: var(--gcontacts-background-color-2) !important;
}

/*Popup Shape*/
.g3VIld.g3VIld{
    border-radius: var(--gcontacts-corner-radius) !important;
}

/*Drop shadow for Picture*/
.YpExIf, .HfynVe, .LrbNhc {
  /*box-shadow: 0 0 1px 1px #666666 !important;*/
  border-radius: var(--gcontacts-contact-radius) !important;
}

/*Drop shadow for Header*/
.KEUMte.qRW1Fc{
  box-shadow: 0 0 1px #666666 !important;
  -moz-box-shadow: 0 0 1px #666666 !important;
}

/*Star Icon Color*/
.OQ5Ifc::after{
  color: var(--gcontacts-accent-color) !important;
}

/*Labels background color*/
.SsJGwb{
  background: var(--gcontacts-accent-color) !important;
  color: var(--gcontacts-text-color) !important;
  border: 1px solid var(--gcontacts-text-color) !important;
  border-radius: var(--gcontacts-corner-radius) !important;
}
.GxALzd .VfPpkd-TfeOUb{
    color: var(--gcontacts-text-color) !important;
}

/*Background color for contact information*/
.aHij0b-WsjYwc {
    background-color: var(--gcontacts-background-color-2) !important;
}

/*Popup background color*/
.VOEIyf .jBmls{
  background: var(--gcontacts-background-color-3) !important;
}

/*Popup text color*/
.oKubKe, .VfPpkd-fmcmS-wGMbrd{
  color: #999999 !important;
}

/*Popup hover background color*/
.oKubKe[aria-selected="true"]{
  background: #444444 !important;
}

/*Fix for Drop down items in contact editor*/
.MocG8c{
    color: #666666 !important;
}
.Il8Mgb{
    background-color: #555555 !important;
}
.ncFHed{
    background: var(--gcontacts-background-color-3) !important;
}

/*Link text color*/
.uvYBpc:nth-child(n+1) > div:nth-child(n+1) > div:nth-child(2) > a:nth-child(1){
  color: var(--gcontacts-accent-color) !important;
}

/*Interactions background color*/
.rJ3fif.eejsDc{
  background: var(--gcontacts-background-color-2) !important;
  color: #999999 !important;
}

/*Interactions text color*/
/*.mks9mf, .qV7Uuf::after,*/ .zgXFde, .JrNrqb{
  color: #999999 !important;
}

/*Interactions hover background color*/
/*.qV7Uuf:hover,*/ .zgXFde:hover{
  background: #555555 !important;
}

/*3-Dot Popup Menu Background Color*/
.JPdR6b{
  background: var(--gcontacts-background-color-2) !important;
}

/*3-Dot Popup Menu Text Color*/
.z80M1{
  color: #999999 !important;
}

/*3-Dot Popup Menu Divider Color*/
.kCtYwe{
  border-top: 1px solid #666666 !important;
}

/*3-Dot Popup Menu Change labels Text Color*/
.Plw26d{
  color: #666666 !important;
}

/*3-Dot Popup Menu Hover*/
.z80M1.FwR7Pc{
  background: var(--gcontacts-background-color-3) !important;
}

/*3-Dot Popup Menu Check Marks*/
.z80M1.N2RpBe::before{
  border-right: 2px solid #999999 !important;
  border-bottom: 2px solid #999999 !important;
}

/*=================Edit Contact=================*/
/*Text Color*/
.zH791 .zHQkBf, .zH791 .ZAGvjd, .zH791 .tL9Q4c, .whsOnd{
  color: var(--gcontacts-text-color) !important;
}

/*Add a note text color*/
.fqp6hd{
    color: #666666 !important;
}

/*X Icon*/
.xnv7ld{
  color: #999999 !important;
}

/*Icons*/
.NSy2Hd{
    fill: var(--gcontacts-icon-color) !important;
}

/*Show More at the bottom*/
.JvO9cb {
    background-color: var(--gcontacts-background-color) !important;
}



/*=======Birthday Cards on the right=======*/
/*Background color*/
.Y2gHof, .qm87J {
    background-color: var(--gcontacts-background-color-2) !important;
}

/*Border*/
.a8pf4d {
    border: 1px solid var(--gcontacts-border-color) !important;
    border-radius: var(--gcontacts-corner-radius) !important;
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.23) !important;
}

/*Text Color*/
.VmVyed, .GryHKe, .WMnqtb {
    color: var(--gcontacts-text-color) !important;
}

/*Icon coloring*/
.jU7kdd {
    filter: hue-rotate(var(--gcontacts-accent-color-rotate)) !important;
    -webkit-filter: hue-rotate(var(--gcontacts-accent-color-rotate)) !important;
    -o-filter: hue-rotate(var(--gcontacts-accent-color-rotate)) !important;
    -ms-filter: hue-rotate(var(--gcontacts-accent-color-rotate)) !important;
}

/*=======Settings Popup=======*/
/*Background color*/
.R6Lfte, .PbnGhe, .XfpsVe{
  background: var(--gcontacts-background-color-3) !important;
}

/*Language change link*/
div.UloUpf:nth-child(1) > div:nth-child(2) > a:nth-child(1){
  color: var(--gcontacts-accent-color) !important;
}

/*Radio button color*/
.t5nRo, .wEIpqb.nQOrEb{
  border-color: var(--gcontacts-accent-color) !important;
}

/*Country dropdown background color*/
#YzgRqe{
  background: var(--gcontacts-background-color-3) !important;
  color: #999999 !important;
}

/*=================Import Contacts Popup=================*/
/*Import Icon Background Color*/
.XQKzUb{
  background: var(--gcontacts-accent-color) !important;
  border: 20px solid var(--gcontacts-accent-color) !important;
}

/*Primary Text*/
.DT1qW{
  color: #EEEEEE !important;
}

/*Secondary Text*/
.QhzM0e{
  color: #999999 !important;
}

/*Border between rows*/
.GAVekb{
  border-bottom: 1px solid #555555 !important;
}

/*Cancel text*/
.FIXCJb{
  color: var(--gcontacts-accent-color) !important;
}

/*Contacts Source Icon*/
.Iw6aOe, /*AOL*/
.ovXs9b, /*Other email provider*/
.hlboDc /*CSV or vCard file*/
{
  filter: invert(100%) !important;
  -webkit-filter: invert(100%) !important;
  -o-filter: invert(100%) !important;
  -ms-filter: invert(100%) !important;
}

/*Text Color on Merge & Fix page*/
.H0zpEd {
    color: var(--gcontacts-text-color) !important;
}

}