Skip to content

Proton Mail Carbon Editor Theme + customizations by breat

Mirrored from https://gitlab.com/breatfr/proton-mail/-/raw/main/css/proton-mail-carbon-editor-theme-customizations.user.css

Screenshot of Proton Mail Carbon Editor Theme + customizations

Details

Authorbreat

LicenseAGPL-3.0-or-later; http://www.gnu.org/licenses/agpl-3.0.txt

Categorymail.proton.me

Created

Updated

Size5.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Carbon theme in Proton Mail is beautiful but not complete, so i fix this.

Notes

Support me on:

List of customizations avalaible

  • fix carbon theme
  • fix meter bar colors
  • fix space on top
  • hide labels
  • hide left nav icon
  • hide less toggle
  • hide special offer
  • hide tips
  • no space between all messages and folders

How to use in few steps

  1. Install Stylus browser extension

  2. Install the UserStyle.

  3. To update the theme, open the Stylus Management window and click on Check for update and follow the instructions or just wait 24h to automatic update.

  4. Enjoy :)

Source code

/* ==UserStyle==
@name           Proton Mail Carbon Editor Theme + customizations
@description    Carbon theme in Proton Mail is beautiful but not complete, so i fix this.
@version        2.0.3
@author         BreatFR
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/proton-mail
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    carbontheme "Fix Carbon Theme"                          1
@var    checkbox    meterbar    "Fix Meter bar colors"                      1
@var    checkbox    fixtop      "Fix Space Top"                             1
@var    checkbox    hidelabels  "Hide Labels"                               1
@var    checkbox    hideleftnav "Hide Left Nav Icon"                        1
@var    checkbox    hideless    "Hide Less Toggle"                          1
@var    checkbox    hideoffer   "Hide Special Offer"                        1
@var    checkbox    hidetips    "Hide Tips"                                 1
@var    checkbox    nospace     "No space between all messages and folders" 1
==/UserStyle== */

/* === Credits ===
Website        https://breat.fr
facebook       https://www.facebook.com/breatfroff
mastodon       https://mastodon.social/@breat_fr
telegram       https://t.me/breatfr
vk             https://vk.com/breatfroff
X (twitter)    https://x.com/breatfroff
=== Credits === */

@-moz-document domain("account.proton.me"), domain("mail.proton.me") {
    if meterbar {
        .meter-bar-thumb--success {
            --meter-bar-thumb-color-success: var(--signal-success);
        }
        .meter-bar-thumb--warning {
            --meter-bar-thumb-color-warning: var(--signal-warning);
        }
        .meter-bar-thumb--danger {
            --meter-bar-thumb-color-danger: var(--signal-danger);
        }
    }
    
    if fixtop {
        .app-root {
            margin-bottom: 0 !important;
        }
    }
    
    if hideleftnav {
        .sidebar-collapse-button-container--above-scroll {
            display: none;
        }
    }
    
    if hidelabels {
        ul.unstyled.navigation-list > li:last-child {
            display: none;
        }
        ul.unstyled.navigation-list:last-child {
            padding-bottom: 0;
        }
    }
    
    if hideless {
        ul.unstyled.navigation-list > div:nth-of-type(5) {
            display: none;
        }
    }
    
    if hideoffer {
        [data-testid="cta:special-offer"] {
            display: none;
        }
    }
    
    if hidetips {
        .tip-box {
            display: none;
        }
    }
    
    if nospace {
        ul.unstyled.navigation-list > li:nth-of-type(1) {
            margin-top: 0;
        }
    }
    
    if carbontheme {
        #proton-editor-container,
        #proton-editor-toggle-container,
        #proton-root,
        #proton-root *,
        #rooster-editor,
        #rooster-editor div,
        #rooster-editor p,
        .composer-content--rich-edition,
        .message-content,
        .message-iframe *,
        .protonmail_quote,
        blockquote div,
        blockquote *,
        iframe {
            background-color: var(--email-message-view-background-color) !important;
            color: var(--text-norm) !important;
        }

        blockquote {
            border-bottom-color: #444444 !important;
            border-left: 3px solid #444444 !important;
            border-right-color: #444444 !important;
            border-top-color: #444444 !important;
        }

        #ellipsis > svg {
            stroke: var(--text-norm) !important;
        }

        /* Signature color */
        .protonmail_signature_block-user,
        .protonmail_signature_block-user table div,
        .protonmail_signature_block-proton {
            color: var(--text-norm) !important;
        }

        /* Link color */
        #rooster-editor a,
        .protonmail_signature_block-user a,
        .protonmail_signature_block-proton a {
            color: #657ee4 !important;
        }
        
        /* Message list */
        .items-column-list-inner--mail {
            background-color: var(--email-message-view-background-color) !important;
        }
        .item-container:hover {
            box-shadow: var(--shadow-raised);
        }
        .item-container.read {
            background-color: var(--email-message-view-background-color) !important;
            color: var(--email-item-read-text-color) !important;
        }
        .item-container.unread {
            background-color: var(--email-item-unread-background-color) !important;
            color: var(--email-item-unread-text-color) !important;
        }
        .item-container.item-is-selected {
            background-color: var(--email-item-selected-background-color) !important;
            color: var(--email-item-selected-text-color) !important;
        }
        
        /* Settings */
        .quickSettings,
        .quickSettings .footer,
        .quickSettings .header--drawer {
            background-color: var(--email-message-view-background-color) !important;
        }
    }
}

Reviews

No reviews yet.