I don't like Fastmail dark theme, so here are my fixes.
Work in Progress:
Create color scheme based on primary and accent colors.
Fastmail - custom colors by tidy-easy-stockade
Details
Authortidy-easy-stockade
LicenseCopyleft
CategoryFastmail
Created
Updated
Size8.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Currently:
— changed colors for .v-AutoDeleteWarning (message about auto-purge)
— changed colors for .v-Message-banner (message about loading email images)
Done mainly for me, but you are welcome to suggest changes: wise.tree8232@fastmail.com
Source code
/* ==UserStyle==
@name Fastmail - custom colors
@version 20250128.15.57
@namespace userstyles.world/user/tidy-easy-stockade
@description I don't like Fastmail dark theme, so here are my fixes.
@author tidy-easy-stockade
@license Copyleft
@preprocessor stylus
@var checkbox enableTheming "Enable Custom Colors (Work in Progress)" 0
@var color baseColor "Base Theme Color" #151c24
==/UserStyle== */
/*@var color accentColor "Accent Theme Color" #1c6db7*/
variableTest = '';
prepareColor(color, percentage)
if dark(color)
newColor = lighten(color, percentage)
else
newColor = darken(color, percentage)
newColor;
@-moz-document domain("fastmail.com") {
:root {
--ui-critical-color-bg: hsl(204, 8.5%, 8.6%);
--ui-critical-color-fg-strong: hsl(204, 8.5%, 38.6%);
--ui-warning-color-bg: var(--ui-critical-color-bg);
--ui-warning-color-border: var(--ui-critical-color-fg-strong);
--ui-snooze-color-bg: hsl(204, 8.5%, 12%);
--ui-snooze-color-fg: hsl(204, 8.5%, 70%);
}
.v-ListBanner {
font-size: .9em;
font-weight: 400;
text-align: center;
p {
font-weight: inherit;
}
}
.v-Message-banner {
color: hsl(204, 8.5%, 58.6%);
}
if(enableTheming && baseColor) {
accentColor = complement(baseColor);
:root {
&.t-dark,
&.t-light {
&,
&.t-outlinebtn {
--theme-color-accent-60: prepareColor(accentColor, 40%);
--theme-color-accent-100: prepareColor(accentColor, 60%);
--ui-critical-color-fg: prepareColor(accentColor, 60%);
--ui-pageheader-color-bg: baseColor;
--ui-page-color-bg: prepareColor(baseColor, 5%);
--ui-page-color-bg-focused: prepareColor(baseColor, 10%);
--ui-page-color-border: prepareColor(baseColor, 20%);
--ui-page-color-bg-backdrop: var(--ui-sidebar-color-bg);
--ui-page-color-border-subtle: prepareColor(baseColor, 10%);
--ui-page-color-border-medium: prepareColor(baseColor, 20%);
--ui-page-color-fg: prepareColor(baseColor, 80%);
--ui-page-color-fg-subtle: prepareColor(baseColor, 70%);
--ui-altsurface-color-bg: prepareColor(baseColor, 10%);
--ui-page-color-bg-fade90: prepareColor(baseColor, 5%);
--ui-pageheader-search-color-border: prepareColor(baseColor, 10%);
--ui-input-color-bg: prepareColor(baseColor, 10%);
--ui-searchinput-color-bg: var(--ui-input-color-bg);
--ui-input-disabled-color-bg: prepareColor(baseColor, 10%);
--ui-input-disabled-color-fg: prepareColor(baseColor, 50%);
--ui-input-disabled-color-border: prepareColor(baseColor, 20%);
--ui-input-activated-color-bg-hover: prepareColor(accentColor, 5%);
--ui-input-activated-color-bg: prepareColor(accentColor, 30%);
--ui-input-activated-color-fg: prepareColor(baseColor, 5%);
--ui-input-color-border: prepareColor(baseColor, 20%);
--ui-page-color-bg-selected: prepareColor(baseColor, 10%);
--ui-page-shadow: 0 3px 12px prepareColor(baseColor, 3%);
--ui-page-color-bg-fade80: rgba(prepareColor(baseColor, 5%), .8);
--ui-sidebar-color-bg: prepareColor(baseColor, 4%);
--ui-sidebar-color-bg-selected: prepareColor(baseColor, 10%);
--ui-sidebar-color-fg: prepareColor(baseColor, 80%);
.app-source.is-selected {
color: prepareColor(accentColor, 70%);
}
--ui-kbfocus-color-fg: prepareColor(accentColor, 50%);
--ui-button-cta-color-bg: prepareColor(baseColor, 10%);
--ui-button-cta-color-bg-hover: prepareColor(baseColor, 15%);
--ui-button-cta-color-bg-disabled: rgba(baseColor, 30%);
--ui-button-cta-color-fg: prepareColor(baseColor, 80%);
--ui-button-cta-color-shadow: prepareColor(baseColor, 15%);
--ui-icon-unread-color-fill-isunread: prepareColor(accentColor, 60%);
--ui-icon-unread-color-fill-isread: prepareColor(baseColor, 50%);
--ui-notification-color-bg: prepareColor(baseColor, 10%);
--ui-notification-color-fg: prepareColor(baseColor, 80%);
--ui-notification-action-color-bg: prepareColor(baseColor, 20%);
--ui-informative-color-bg: prepareColor(baseColor, 10%);
--ui-informative-color-border: prepareColor(baseColor, 20%);
--ui-informative-color-fg-strong: prepareColor(baseColor, 80%);
--ui-badge-color-bg: prepareColor(baseColor, 10%);
--ui-button-simple-color-bg: prepareColor(baseColor, 10%);
--ui-button-simple-color-bg-disabled: prepareColor(baseColor, 5%);
--ui-button-simple-color-bg-active: prepareColor(baseColor, 20%);
--ui-button-simple-color-border: prepareColor(baseColor, 20%);
--ui-button-simple-color-border-disabled: prepareColor(baseColor, 10%);
--ui-button-simple-color-fg: prepareColor(baseColor, 90%);
--ui-button-simple-color-fg-disabled: prepareColor(baseColor, 50%);
--ui-button-simple-color-bg-hover: prepareColor(baseColor, 15%);
--ui-button-danger-color-fg: prepareColor(accentColor, 80%);
--ui-button-subtle-color-bg-hover: prepareColor(accentColor, 40%);
--ui-button-subtle-color-fg-hover: prepareColor(accentColor, 30%);
--ui-critical-color-bg: prepareColor(baseColor, 8%);
--ui-critical-color-fg-strong: prepareColor(baseColor, 80%);
--ui-critical-color-border: prepareColor(baseColor, 20%);
--ui-warning-color-bg: prepareColor(baseColor, 5%);
--ui-warning-color-fg: prepareColor(accentColor, 60%);
--ui-warning-color-border: prepareColor(baseColor, 5%);
--ui-snooze-color-bg: hsl(204, 8.5%, 12%);
--ui-snooze-color-fg: hsl(204, 8.5%, 70%);
--ui-bottomtoolbar-color-bg: prepareColor(baseColor, 10%);
--ui-bottomtoolbar-color-fg: prepareColor(baseColor, 80%);
--ui-bottomtoolbar-icon-color-primary: prepareColor(baseColor, 60%);
--ui-bottomtoolbar-icon-color-secondary: prepareColor(baseColor, 30%);
--ui-page-color-fg-action: prepareColor(accentColor, 100%);
--ui-card-color-border: prepareColor(baseColor, 10%);
--ui-card-shadow: 0 3px 8px rgba(baseColor, .5);
--ui-icon-pin-color-stroke: prepareColor(accentColor, 40%);
--ui-icon-pin-color-fill: prepareColor(accentColor, 50%);
--ui-quote-color-bg-1: prepareColor(baseColor, 10%);
--ui-quote-color-fg-1: prepareColor(baseColor, 80%);
--ui-quote-color-bg-2: prepareColor(baseColor, 20%);
--ui-quote-color-fg-2: prepareColor(baseColor, 90%);
--ui-quote-color-bg-3: prepareColor(baseColor, 30%);
--ui-quote-color-fg-3: prepareColor(baseColor, 100%);
--ui-quote-color-bg-4: prepareColor(baseColor, 40%);
--ui-quote-color-fg-4: prepareColor(baseColor, 100%);
--ui-quote-color-bg-5: prepareColor(baseColor, 50%);
--ui-quote-color-fg-5: prepareColor(baseColor, 100%);
--ui-quote-color-bg-6: prepareColor(baseColor, 60%);
--ui-quote-color-fg-6: prepareColor(baseColor, 100%);
--ui-quote-color-bg-7: prepareColor(baseColor, 70%);
--ui-quote-color-fg-7: prepareColor(baseColor, 100%);
--ui-quote-color-bg-8: prepareColor(baseColor, 80%);
--ui-quote-color-fg-8: prepareColor(baseColor, 100%);
--ui-quote-color-bg-9: prepareColor(baseColor, 90%);
--ui-quote-color-fg-9: prepareColor(baseColor, 5%);
--ui-quote-color-bg-10: prepareColor(baseColor, 100%);
--ui-quote-color-fg-10: prepareColor(baseColor, 5%);
}
.v-ComposeAttachment-progress {
background: prepareColor(baseColor, 10%);
}
}
}
.t-dark {
.u-article {
&,
center,
center > div > table,
> table {
background-color: var(--ui-page-color-bg) !important;
}
}
}
.v-HierarchyPane {
box-shadow: var(--ui-page-shadow);
}
.v-Button {
&--cta {
border-color: var(--ui-button-simple-color-border);
}
}
:not(.v-MenuOption) > .v-Button--cta.v-Button--mergeLeft {
border-left-color: var(--ui-button-simple-color-border);
}
.v-PopOver {
background-color: rgba(prepareColor(baseColor, 7%), .90);
backdrop-filter: blur(10px);
}
.v-Quota {
padding: .4em;
}
.u-list {
&-body {
--ui-page-color-border-subtle: prepareColor(baseColor, 20%);
}
}
}
}