☰

Proton Mail Carbon Editor Theme + customizations

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

  1. /* ==UserStyle==
  2. @name           Proton Mail Carbon Editor Theme + customizations
  3. @description    Carbon theme in Proton Mail is beautiful but not complete, so i fix this.
  4. @version        2.0.4
  5. @author         BreatFR
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/proton-mail
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    carbontheme "Fix Carbon Theme"                          1
  13. @var    checkbox    meterbar    "Fix Meter bar colors"                      1
  14. @var    checkbox    fixtop      "Fix Space Top"                             1
  15. @var    checkbox    hidelabels  "Hide Labels"                               1
  16. @var    checkbox    hideleftnav "Hide Left Nav Icon"                        1
  17. @var    checkbox    hideless    "Hide Less Toggle"                          1
  18. @var    checkbox    hideoffer   "Hide Special Offer"                        1
  19. @var    checkbox    hidetips    "Hide Tips"                                 1
  20. @var    checkbox    nospace     "No space between all messages and folders" 1
  21. ==/UserStyle== */
  22.  
  23. /* === Credits ===
  24. Website        https://breat.fr
  25. facebook       https://www.facebook.com/breatfroff
  26. mastodon       https://mastodon.social/@breat_fr
  27. telegram       https://t.me/breatfr
  28. vk             https://vk.com/breatfroff
  29. X (twitter)    https://x.com/breatfroff
  30. === Credits === */
  31.  
  32. @-moz-document domain("account.proton.me"), domain("mail.proton.me") {
  33.     if meterbar {
  34.         .meter-bar-thumb--success {
  35.             --meter-bar-thumb-color-success: var(--signal-success);
  36.         }
  37.         .meter-bar-thumb--warning {
  38.             --meter-bar-thumb-color-warning: var(--signal-warning);
  39.         }
  40.         .meter-bar-thumb--danger {
  41.             --meter-bar-thumb-color-danger: var(--signal-danger);
  42.         }
  43.     }
  44.     
  45.     if fixtop {
  46.         .app-root {
  47.             margin-bottom: 0 !important;
  48.         }
  49.     }
  50.     
  51.     if hideleftnav {
  52.         .sidebar-collapse-button-container--above-scroll {
  53.             display: none;
  54.         }
  55.     }
  56.     
  57.     if hidelabels {
  58.         ul.unstyled.navigation-list > li:has([data-shortcut-target="toggle-labels"]) {
  59.             display: none;
  60.         }
  61.         ul.unstyled.navigation-list:last-child {
  62.             padding-bottom: 0;
  63.         }
  64.     }
  65.     
  66.     if hideless {
  67.         ul.unstyled.navigation-list > div:nth-of-type(5) {
  68.             display: none;
  69.         }
  70.     }
  71.     
  72.     if hideoffer {
  73.         [data-testid="cta:special-offer"] {
  74.             display: none;
  75.         }
  76.     }
  77.     
  78.     if hidetips {
  79.         .tip-box {
  80.             display: none;
  81.         }
  82.     }
  83.     
  84.     if nospace {
  85.         ul.unstyled.navigation-list > li:nth-of-type(1) {
  86.             margin-top: 0;
  87.         }
  88.     }
  89.     
  90.     if carbontheme {
  91.         #proton-editor-container,
  92.         #proton-editor-toggle-container,
  93.         #proton-root,
  94.         #proton-root *,
  95.         #rooster-editor,
  96.         #rooster-editor div,
  97.         #rooster-editor p,
  98.         .composer-content--rich-edition,
  99.         .message-content,
  100.         .message-iframe *,
  101.         .protonmail_quote,
  102.         blockquote div,
  103.         blockquote *,
  104.         iframe {
  105.             background-color: var(--email-message-view-background-color) !important;
  106.             color: var(--text-norm) !important;
  107.         }
  108.  
  109.         blockquote {
  110.             border-bottom-color: #444444 !important;
  111.             border-left: 3px solid #444444 !important;
  112.             border-right-color: #444444 !important;
  113.             border-top-color: #444444 !important;
  114.         }
  115.  
  116.         #ellipsis > svg {
  117.             stroke: var(--text-norm) !important;
  118.         }
  119.  
  120.         /* Signature color */
  121.         .protonmail_signature_block-user,
  122.         .protonmail_signature_block-user table div,
  123.         .protonmail_signature_block-proton {
  124.             color: var(--text-norm) !important;
  125.         }
  126.  
  127.         /* Link color */
  128.         #rooster-editor a,
  129.         .protonmail_signature_block-user a,
  130.         .protonmail_signature_block-proton a {
  131.             color: #657ee4 !important;
  132.         }
  133.         
  134.         /* Message list */
  135.         .items-column-list-inner--mail {
  136.             background-color: var(--email-message-view-background-color) !important;
  137.         }
  138.         .item-container:hover {
  139.             box-shadow: var(--shadow-raised);
  140.         }
  141.         .item-container.read {
  142.             background-color: var(--email-message-view-background-color) !important;
  143.             color: var(--email-item-read-text-color) !important;
  144.         }
  145.         .item-container.unread {
  146.             background-color: var(--email-item-unread-background-color) !important;
  147.             color: var(--email-item-unread-text-color) !important;
  148.         }
  149.         .item-container.item-is-selected {
  150.             background-color: var(--email-item-selected-background-color) !important;
  151.             color: var(--email-item-selected-text-color) !important;
  152.         }
  153.         
  154.         /* Settings */
  155.         .quickSettings,
  156.         .quickSettings .footer,
  157.         .quickSettings .header--drawer {
  158.             background-color: var(--email-message-view-background-color) !important;
  159.         }
  160.     }
  161. }