Google Accounts Tokyo Night (tokyonight) by JoshuaMarkle

/* ==UserStyle==
@name           Google Accounts Tokyo Night (tokyonight)
@namespace      github.com/openstyles/stylus
@version        2.0
@description    Tokyo Night for Google Accounts
@author         JoshuaMarkle
==/UserStyle== */

@-moz-document domain("accounts.google.com") {
    :root {
        --bg-dark: #16161E;
        --bg-code: #12121a;
        --bg: #1A1B26;
        --bg-2: #282B3C;
        --bg-3: #3F4256;
        --bg-4: #444B6A;
        --highlight-1: #1E202E;
        --highlight-2: #2E3448;
        --blue-accent: #89ddff;
        --text: #c0caf5;
        --text-dark: #565f89;
        --cyan: #7dcfff;
        --blue: #7aa2f7;
        --blue-dark: #5C88E6;
        --orange: #ff9e64;
        --orange-dark: #e3a144;
        --red: #f7768e;
        --red-dark: #db4b4b;
        --green: #9ece6a;
        --green-dark: #1abc9c;
        --purple: #bb9af7;
        
        --gm3-sys-color-background: var(--bg);
        --gm3-sys-color-surface-container: var(--bg-dark);
        --gm3-sys-color-on-surface: var(--text);
        --gm3-sys-color-on-surface-variant: var(--text-dark);
        --gm3-sys-color-primary: var(--blue);
        --gm3-sys-color-outline-variant: var(--bg-2);
        
        --mdc-theme-surface: var(--bg);
        --mdc-elevation-overlay-color: var(--bg);
    }   
    
    * { border-color: var(--bg-2) !important; }
    
    /* Google Popup Accounts */
    #container > div > div,
    html, #container { background: var(--bg-dark); }
    #container > div > div > div { background: var(--bg); }
    p { color: var(--text-dark) !important; }
    #dialog_banner,
    #dialog_heading,
    #credentials-picker > div > div > div > div:first-child { color: var(--text); }
    #credentials-picker > div > div > div > div { color: var(--text-dark); }
    #credentials-picker > div:hover,
    #credentials-picker > div:focus,
    #credentials-picker > div:active { background: var(--bg-2); }
    a { color: var(--blue) !important; }
}