☰

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.6
  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    folders1st  "Folders 1st"                               1
  16. @var    checkbox    hidelabels  "Hide Labels"                               1
  17. @var    checkbox    hideleftnav "Hide Left Nav Icon"                        1
  18. @var    checkbox    hideless    "Hide Less Toggle"                          1
  19. @var    checkbox    hideoffer   "Hide Special Offer"                        1
  20. @var    checkbox    hidetips    "Hide Tips"                                 1
  21. @var    checkbox    hideview	"Hide View"                               	0
  22. @var    checkbox    nospace     "No space between all messages and folders" 1
  23. ==/UserStyle== */
  24.  
  25. /* === Credits ===
  26. Website        https://breat.fr
  27. facebook       https://www.facebook.com/breatfroff
  28. mastodon       https://mastodon.social/@breat_fr
  29. telegram       https://t.me/breatfr
  30. vk             https://vk.com/breatfroff
  31. X (twitter)    https://x.com/breatfroff
  32. === Credits === */
  33.  
  34. @-moz-document domain("account.proton.me"), domain("mail.proton.me") {
  35.     if meterbar {
  36.         .meter-bar-thumb--success {
  37.             --meter-bar-thumb-color-success: var(--signal-success);
  38.         }
  39.         .meter-bar-thumb--warning {
  40.             --meter-bar-thumb-color-warning: var(--signal-warning);
  41.         }
  42.         .meter-bar-thumb--danger {
  43.             --meter-bar-thumb-color-danger: var(--signal-danger);
  44.         }
  45.     }
  46.     
  47.     if fixtop {
  48.         .app-root {
  49.             margin-bottom: 0 !important;
  50.         }
  51.     }
  52.     
  53.     if hideleftnav {
  54.         .sidebar-collapse-button-container--above-scroll {
  55.             display: none;
  56.         }
  57.     }
  58.     
  59. 	/* Labels */
  60. 	ul.unstyled.navigation-list:last-child {
  61. 		padding-bottom: 0;
  62. 	}
  63.     if hidelabels {
  64.         ul.unstyled.navigation-list > li:has([data-shortcut-target="toggle-labels"]) {
  65.             display: none;
  66.         }
  67.     }
  68. 	li.navigation-item--label,
  69.  	ul.unstyled.navigation-list > div.py-2.ml-7.text-sm.color-weak {
  70. 		padding-left: 1.75em;
  71. 	}
  72.     
  73.     if hideless {
  74.         ul.unstyled.navigation-list > div:nth-of-type(5) {
  75.             display: none;
  76.         }
  77.     }
  78.     
  79.     if hideoffer {
  80.         [data-testid="cta:special-offer"] {
  81.             display: none;
  82.         }
  83.     }
  84.     
  85.     if hidetips {
  86.         .tip-box {
  87.             display: none;
  88.         }
  89.     }
  90. 	
  91. 	if folders1st {
  92. 		ul.unstyled.navigation-list {
  93. 			display: flex;
  94. 			flex-direction: column;
  95. 		}
  96. 		ul.unstyled.navigation-list > li:nth-of-type(2) {
  97. 			order: 0;
  98. 		}
  99. 		ul.unstyled.navigation-list > li:nth-of-type(1) {
  100. 			order: 1;
  101. 		}
  102. 		ul.unstyled.navigation-list > div:nth-of-type(10) {
  103. 			order: 2;
  104. 		}
  105. 	}
  106. 	
  107. 	/* View */
  108. 	ul.unstyled.navigation-list > div:nth-of-type(10) {
  109. 		padding-left: 1.75em;
  110. 	}
  111. 	if hideview {
  112. 		ul.unstyled.navigation-list > li:nth-of-type(1) {
  113. 			display: none;
  114. 		}
  115. 	}
  116.     
  117.     if nospace {
  118. 		ul.unstyled.navigation-list {
  119. 			padding-bottom: 0 !important;
  120. 		}
  121.         ul.unstyled.navigation-list > li:nth-of-type(1),
  122.  		ul.unstyled.navigation-list > li:nth-of-type(2),
  123.  		ul.unstyled.navigation-list > li:has([data-shortcut-target="toggle-labels"]) {
  124.             margin-top: 0;
  125.         }
  126.     }
  127.     
  128.     if carbontheme {
  129.         #proton-editor-container,
  130.         #proton-editor-toggle-container,
  131.         #proton-root,
  132.         #proton-root *,
  133.         #rooster-editor,
  134.         #rooster-editor div,
  135.         #rooster-editor p,
  136.         .composer-content--rich-edition,
  137.         .message-content,
  138.         .message-iframe *,
  139.         .protonmail_quote,
  140.         blockquote div,
  141.         blockquote *,
  142.         iframe {
  143.             background-color: var(--email-message-view-background-color) !important;
  144.             color: var(--text-norm) !important;
  145.         }
  146.  
  147.         blockquote {
  148.             border-bottom-color: #444444 !important;
  149.             border-left: 3px solid #444444 !important;
  150.             border-right-color: #444444 !important;
  151.             border-top-color: #444444 !important;
  152.         }
  153.  
  154.         #ellipsis > svg {
  155.             stroke: var(--text-norm) !important;
  156.         }
  157.  
  158.         /* Signature color */
  159.         .protonmail_signature_block-user,
  160.         .protonmail_signature_block-user table div,
  161.         .protonmail_signature_block-proton {
  162.             color: var(--text-norm) !important;
  163.         }
  164.  
  165.         /* Link color */
  166.         #rooster-editor a,
  167.         .protonmail_signature_block-user a,
  168.         .protonmail_signature_block-proton a {
  169.             color: #657ee4 !important;
  170.         }
  171.         
  172.         /* Message list */
  173.         .items-column-list-inner--mail {
  174.             background-color: var(--email-message-view-background-color) !important;
  175.         }
  176.         .item-container:hover {
  177.             box-shadow: var(--shadow-raised);
  178.         }
  179.         .item-container.read {
  180.             background-color: var(--email-message-view-background-color) !important;
  181.             color: var(--email-item-read-text-color) !important;
  182.         }
  183.         .item-container.unread {
  184.             background-color: var(--email-item-unread-background-color) !important;
  185.             color: var(--email-item-unread-text-color) !important;
  186.         }
  187.         .item-container.item-is-selected {
  188.             background-color: var(--email-item-selected-background-color) !important;
  189.             color: var(--email-item-selected-text-color) !important;
  190.         }
  191.         
  192.         /* Settings */
  193.         .quickSettings,
  194.         .quickSettings .footer,
  195.         .quickSettings .header--drawer {
  196.             background-color: var(--email-message-view-background-color) !important;
  197.         }
  198.     }
  199.     
  200.     /* Images in emails */
  201.     .rio-asin-container-image img {
  202.         mix-blend-mode: normal !important;
  203.     }
  204. }