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.3
  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. if fixtop {
  45. .app-root {
  46. margin-bottom: 0 !important;
  47. }
  48. }
  49. if hideleftnav {
  50. .sidebar-collapse-button-container--above-scroll {
  51. display: none;
  52. }
  53. }
  54. if hidelabels {
  55. ul.unstyled.navigation-list > li:last-child {
  56. display: none;
  57. }
  58. ul.unstyled.navigation-list:last-child {
  59. padding-bottom: 0;
  60. }
  61. }
  62. if hideless {
  63. ul.unstyled.navigation-list > div:nth-of-type(5) {
  64. display: none;
  65. }
  66. }
  67. if hideoffer {
  68. [data-testid="cta:special-offer"] {
  69. display: none;
  70. }
  71. }
  72. if hidetips {
  73. .tip-box {
  74. display: none;
  75. }
  76. }
  77. if nospace {
  78. ul.unstyled.navigation-list > li:nth-of-type(1) {
  79. margin-top: 0;
  80. }
  81. }
  82. if carbontheme {
  83. #proton-editor-container,
  84. #proton-editor-toggle-container,
  85. #proton-root,
  86. #proton-root *,
  87. #rooster-editor,
  88. #rooster-editor div,
  89. #rooster-editor p,
  90. .composer-content--rich-edition,
  91. .message-content,
  92. .message-iframe *,
  93. .protonmail_quote,
  94. blockquote div,
  95. blockquote *,
  96. iframe {
  97. background-color: var(--email-message-view-background-color) !important;
  98. color: var(--text-norm) !important;
  99. }
  100.  
  101. blockquote {
  102. border-bottom-color: #444444 !important;
  103. border-left: 3px solid #444444 !important;
  104. border-right-color: #444444 !important;
  105. border-top-color: #444444 !important;
  106. }
  107.  
  108. #ellipsis > svg {
  109. stroke: var(--text-norm) !important;
  110. }
  111.  
  112. /* Signature color */
  113. .protonmail_signature_block-user,
  114. .protonmail_signature_block-user table div,
  115. .protonmail_signature_block-proton {
  116. color: var(--text-norm) !important;
  117. }
  118.  
  119. /* Link color */
  120. #rooster-editor a,
  121. .protonmail_signature_block-user a,
  122. .protonmail_signature_block-proton a {
  123. color: #657ee4 !important;
  124. }
  125. /* Message list */
  126. .items-column-list-inner--mail {
  127. background-color: var(--email-message-view-background-color) !important;
  128. }
  129. .item-container:hover {
  130. box-shadow: var(--shadow-raised);
  131. }
  132. .item-container.read {
  133. background-color: var(--email-message-view-background-color) !important;
  134. color: var(--email-item-read-text-color) !important;
  135. }
  136. .item-container.unread {
  137. background-color: var(--email-item-unread-background-color) !important;
  138. color: var(--email-item-unread-text-color) !important;
  139. }
  140. .item-container.item-is-selected {
  141. background-color: var(--email-item-selected-background-color) !important;
  142. color: var(--email-item-selected-text-color) !important;
  143. }
  144. /* Settings */
  145. .quickSettings,
  146. .quickSettings .footer,
  147. .quickSettings .header--drawer {
  148. background-color: var(--email-message-view-background-color) !important;
  149. }
  150. }
  151. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址