Forces Protonmail to follow your system dark mode using prefers-color-scheme media queries.
Protonmail - follow system dark mode by adamwrighter
Details
Authoradamwrighter
LicenseNo License
CategoryProtonmail
Created
Updated
Size6.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Forces Protonmail to follow your system dark mode using prefers-color-scheme media queries.
Uses the "Proton" theme in light mode and the "Carbon" theme in dark mode.
Protonmail just changes the local CSS variables used when you switch theme. This userstyle sets the same variables based on the prefers-color-scheme media query.
Source code
/* ==UserStyle==
@name Protonmail - follow system dark mode
@namespace adamw.uk
@version 1.0.0
@description Forces Protonmail to follow your system dark mode
@author Adam W
==/UserStyle== */
@-moz-document domain("mail.protonmail.com") {
@media (prefers-color-scheme: light) {
:root,
.ui-standard {
--primary: #657ee4;
--primary-contrast: white;
--signal-danger: #d42f34;
--signal-danger-hover: #c7262b;
--signal-danger-active: #ba1e23;
--signal-danger-contrast: white;
--signal-warning: #f5830a;
--signal-warning-hover: #f5730a;
--signal-warning-active: #f5640a;
--signal-warning-contrast: black;
--signal-success: #1b8561;
--signal-success-hover: #147857;
--signal-success-active: #0f6b4c;
--signal-success-contrast: white;
--signal-info: #1578cf;
--signal-info-hover: #0e6dc2;
--signal-info-active: #0764b5;
--signal-info-contrast: white;
--text-norm: #262a33;
--text-weak: #696f7d;
--text-hint: #a4a9b5;
--text-disabled: #babec7;
--text-invert: white;
--field-norm: #babec7;
--field-hover: #a4a9b5;
--field-disabled: #d0d3da;
--border-norm: #d0d3da;
--border-weak: #e7e9ec;
--background-norm: white;
--background-weak: #f3f4f6;
--background-strong: #e7e9ec;
--interaction-norm: #657ee4;
--interaction-norm-hover: #5064b6;
--interaction-norm-active: #3c4b88;
--interaction-norm-contrast: white;
--interaction-weak: #d0d3da;
--interaction-weak-hover: #babec7;
--interaction-weak-active: #a4a9b5;
--interaction-default: transparent;
--interaction-default-hover: rgba(186, 190, 199, 0.2);
--interaction-default-active: rgba(186, 190, 199, 0.3);
--shadow-norm-opacity: 0.1;
--shadow-lifted-opacity: 0.16;
--backdrop-norm: rgba(38, 42, 51, 0.48);
--optional-scrollbar-thumb-color: #d0d3da;
--optional-scrollbar-thumb-hover-color: #babec7;
--optional-main-border-color: transparent
}
.ui-prominent {
--signal-danger: #ed4c51;
--signal-danger-hover: #f7595e;
--signal-danger-active: #273136;
--signal-danger-contrast: white;
--signal-warning: #f5930a;
--signal-warning-hover: #f5a716;
--signal-warning-active: #f5b922;
--signal-warning-contrast: black;
--signal-success: #349172;
--signal-success-hover: #339c79;
--signal-success-active: #31a67f;
--signal-success-contrast: white;
--signal-info: #2c89db;
--signal-info-hover: #3491e3;
--signal-info-active: #273136;
--signal-info-contrast: white;
--text-norm: white;
--text-weak: #949bb9;
--text-hint: #565f84;
--text-disabled: #444e72;
--text-invert: #1c223d;
--field-norm: #565f84;
--field-hover: #949bb9;
--field-disabled: #353e60;
--border-norm: #353e60;
--border-weak: #2d3657;
--background-norm: #1c223d;
--background-weak: #272f4f;
--background-strong: #2d3657;
--interaction-norm: #657ee4;
--interaction-norm-hover: #7d92e8;
--interaction-norm-active: #98a9ee;
--interaction-norm-contrast: white;
--interaction-weak: #353e60;
--interaction-weak-hover: #444e72;
--interaction-weak-active: #565f84;
--interaction-default: transparent;
--interaction-default-hover: rgba(68, 78, 114, 0.3);
--interaction-default-active: rgba(68, 78, 114, 0.4);
--shadow-norm-opacity: 0.32;
--shadow-lifted-opacity: 0.4;
--backdrop-norm: rgba(0, 0, 0, 0.32);
--optional-scrollbar-thumb-color: #353e60;
--optional-scrollbar-thumb-hover-color: #444e72
}
}
@media (prefers-color-scheme: dark) {
:root,
.ui-standard {
--primary: #657ee4;
--primary-contrast: white;
--signal-danger: #ed4c51;
--signal-danger-hover: #f7595e;
--signal-danger-active: #ff666b;
--signal-danger-contrast: white;
--signal-warning: #f5930a;
--signal-warning-hover: #f5a716;
--signal-warning-active: #f5b922;
--signal-warning-contrast: black;
--signal-success: #349172;
--signal-success-hover: #339c79;
--signal-success-active: #31a67f;
--signal-success-contrast: white;
--signal-info: #2c89db;
--signal-info-hover: #3491e3;
--signal-info-active: #3d99eb;
--signal-info-contrast: white;
--text-norm: white;
--text-weak: #a4a9b5;
--text-hint: #696f7d;
--text-disabled: #575d6b;
--text-invert: #262a33;
--field-norm: #575d6b;
--field-hover: #696f7d;
--field-disabled: #464b58;
--border-norm: #464b58;
--border-weak: #363a46;
--background-norm: #262a33;
--background-weak: #2e323c;
--background-strong: #363a46;
--interaction-norm: #657ee4;
--interaction-norm-hover: #7d92e8;
--interaction-norm-active: #98a9ee;
--interaction-norm-contrast: white;
--interaction-weak: #464b58;
--interaction-weak-hover: #575d6b;
--interaction-weak-active: #696f7d;
--interaction-default: transparent;
--interaction-default-hover: rgba(87, 93, 107, 0.2);
--interaction-default-active: rgba(87, 93, 107, 0.3);
--shadow-norm-opacity: 0.32;
--shadow-lifted-opacity: 0.4;
--backdrop-norm: rgba(0, 0, 0, 0.32);
--optional-scrollbar-thumb-color: #464b58;
--optional-scrollbar-thumb-hover-color: #575d6b;
--optional-email-item-read-background-color: #1a1d24;
--optional-email-item-read-text-color: var(--text-weak)
}
.ui-prominent {
--background-norm: #1a1d24
}
}
}