Tuta Mail custom color scheme

tuta.user.css

/* ==UserStyle==
@name           Tuta Mail custom color scheme
@namespace      gist.github.com/w3teal/b52caa53e5e1b583a68821edf34fdfc2
@homepageURL 	https://gist.github.com/w3teal/b52caa53e5e1b583a68821edf34fdfc2
@version        0.0.1
@description    Use your own favorite color in Tutanota
@author         W3Teal
@updateURL      https://gist.github.com/w3teal/b52caa53e5e1b583a68821edf34fdfc2/raw/f865441bd57f1a6e8ffc03effd1d3b9d434ff897/tuta.user.css
@license		MIT
==/UserStyle== */

@-moz-document url-prefix("https://app.tuta.com") {

    /**
    
    ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
    
    YOU SHOULD USING THE "Dark" COLOR THEME
    TO PROPERLY USE THIS STYLE. (Settings > Appearance)
    LIGHT/LIGHT BLUE/DARK BLUE ARE NOT SUPPORTED.
    
    You can change the colors by change the --main-hue value.
    
    **/
    
    :root {
        --main-hue: 80;

        --color-1: hsl(var(--main-hue), 50%, 29%);
        --color-2: hsl(var(--main-hue), 100%, 84%);
        --color-3: hsl(var(--main-hue), 74%, 21%);
        --color-4: hsl(var(--main-hue), 100%, 92%);
        --color-5: hsl(var(--main-hue), 100%, 85%);
        --bg: hsl(var(--main-hue), 30%, 12%);
        --bg-2: hsl(var(--main-hue), 27%, 11%);
        --bg-3: hsl(var(--main-hue), 27%, 8%);
        --border: hsl(var(--main-hue), 50%, 18%);
        --border-2: hsl(var(--main-hue), 50%, 29%);

        --nav-btn: rgb(255, 255, 255);
        --hover-1: rgba(103, 103, 103, .467);
        --hover-2: rgba(103, 103, 103, .25);

        --compose-bg: var(--bg-2);
        --chip-bg: var(--color-2);
        --chip-txt: var(--color-3);
        --btn-bg: var(--color-1);
        --btn-txt: var(--color-4);
        --icon-active: var(--color-5);
    }

    .teamLabel,
    .time-badge,
    .time-indicator,
    .calendar-current-day-circle,
    .tutaui-toggle-pill.checked {
        background-color: var(--chip-bg) !important;
    }

    .tutaui-text-field,
    .child-text-editor [role="textbox"] {
        caret-color: var(--color-2) !important;
    }

    .tutaui-text-field:focus,
    .child-text-editor [role="textbox"]:focus {
        background-color: #282e2f;
    }

    .tutaui-toggle-pill.checked {
        border-color: var(--chip-bg) !important;
    }

    .tutaui-toggle-pill.checked::after {
        background-color: var(--btn-bg) !important;
    }

    .teamLabel,
    .time-badge,
    .calendar-current-day-text {
        color: var(--chip-txt);
    }

    .elevated-bg {
        background-color: var(--compose-bg);
    }

    .checkbox:checked {
        border-color: var(--chip-bg) !important;
    }

    [style*="rgb(78, 69, 69);"],
    .table-header-border tr:first-child,
    .dialog-header,
    .dialog-buttons,
    button,
    [class*="border"] {
        border-color: var(--border) !important;
    }

    [style*="rgb(255, 179, 181);"] {
        border-color: var(--border-2) !important;
    }

    [style*="height: 1px;"] {
        background-color: var(--border) !important;
        color: var(--border) !important;
    }

    [style*="rgb(115, 51, 55);"],
    .accent-bg {
        background-color: var(--btn-bg) !important;
        color: var(--btn-txt) !important;
    }

    .accent-bg {
        background-color: var(--btn-txt) !important;
        color: var(--btn-bg) !important;
    }

    [style*="rgb(255, 179, 181);"],
    .content-accent-fg {
        fill: var(--icon-active) !important;
        color: var(--icon-active) !important;
    }

    .header-nav,
    .nav-bg,
    [style*="rgb(36, 30, 30);"] {
        background-color: var(--bg) !important;
    }

    drawer-menu,
    .list-bg,
    .search-bar:not(:hover),
    .content-bg,
    .tutaui-card-container,
    [style*="rgb(16, 20, 24);"],
    [style*="background-color: rgb(24, 18, 18);"] {
        background-color: var(--bg-3) !important;
    }

    [style*="rgba(82, 67, 67, 0.467);"],
    [style*="rgba(82, 67, 67, 0.667);"],
    [style*="#9F8C8CAA;"],
    .checkbox:hover::before {
        background: var(--hover-1) !important;
        fill: var(--hover-1) !important;
    }


    :where(.mouse-nav) .state-bg:hover,
    :where(.keyboard-nav) .state-bg:hover,
    .interactable-cell:hover,
    .calendar-day:hover {
        background: var(--hover-2) !important;
    }

    [style*="rgb(243, 236, 236);"],
    [style*="rgb(208, 196, 196);"] {
        fill: var(--nav-btn) !important;
        color: var(--nav-btn) !important;
    }
}

How to install

1. Install Stylus extension to your browser.
2. Install my tuta.user.css < by clicking this.

---

Available in userstyles.world > https://userstyles.world/style/25727/tuta-mail-custom-color-scheme