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
Size14 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
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Fastmail - custom colors
@version 20250306.12.07
@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 color baseColor "Base Theme Color" #151c24
==/UserStyle== */
adjustColor(color, percent)
isLight = lightness(color) > 50
if isLight
darken(color, percent)
else
lighten(color, percent)
@-moz-document domain("fastmail.com")
:root
/* --- General Colors --- */
--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 baseColor
accentColor = complement(baseColor)
isBaseColorLight = lightness(baseColor) > 50
:root
&.t-dark,
&.t-light
&,
&.t-outlinebtn
/* --- Theme Colors --- */
--theme-color-accent-60: adjustColor(accentColor, 40%)
--theme-color-accent-100: adjustColor(accentColor, 60%)
--ui-warning-color-bg: adjustColor(baseColor, 8%)
--ui-warning-color-fg: adjustColor(accentColor, 60%)
--ui-warning-color-border: adjustColor(baseColor, 20%)
--ui-informative-color-bg: adjustColor(baseColor, 8%)
--ui-informative-color-border: adjustColor(baseColor, 20%)
--ui-informative-color-fg: adjustColor(accentColor, 64%)
--ui-informative-color-fg-strong: adjustColor(baseColor, 80%)
/* --- Page Structure --- */
--ui-pageheader-color-bg: adjustColor(baseColor, 3%)
--ui-page-color-bg: adjustColor(baseColor, 5%)
--ui-page-color-bg-focused: adjustColor(baseColor, 10%)
--ui-page-color-border: adjustColor(baseColor, 10%)
--ui-page-color-bg-backdrop: var(--ui-sidebar-color-bg)
--ui-page-color-border-subtle: adjustColor(baseColor, 10%)
--ui-page-color-border-medium: adjustColor(baseColor, 10%)
--ui-page-color-fg: adjustColor(baseColor, 90%)
--ui-page-color-fg-subtle: adjustColor(baseColor, 70%)
--ui-page-color-fg-action: adjustColor(accentColor, 50%)
--ui-altsurface-color-bg: adjustColor(baseColor, 10%)
--ui-page-color-bg-fade80: rgba(adjustColor(baseColor, 8%), .8)
--ui-page-color-bg-fade90: adjustColor(baseColor, 8%)
--ui-page-shadow: 0 3px 12px adjustColor(baseColor, 4%)
/* --- Sidebar --- */
--ui-sidebar-color-bg: var(--ui-pageheader-color-bg)
--ui-sidebar-color-bg-selected: adjustColor(baseColor, 10%)
--ui-sidebar-color-fg: adjustColor(baseColor, 80%)
/* --- Inputs & Search --- */
--ui-pageheader-search-color-border: adjustColor(baseColor, 10%)
--ui-searchinput-color-bg: var(--ui-input-color-bg)
--ui-input-color-bg: adjustColor(baseColor, 5%)
--ui-input-color-border: adjustColor(baseColor, 25%)
--ui-input-disabled-color-bg: adjustColor(baseColor, 10%)
--ui-input-disabled-color-fg: adjustColor(baseColor, 40%)
--ui-input-disabled-color-border: adjustColor(baseColor, 10%)
--ui-input-activated-color-bg: adjustColor(accentColor, 50%)
--ui-input-activated-color-bg-hover: adjustColor(accentColor, 30%)
--ui-input-activated-color-fg: adjustColor(baseColor, 8%)
/* --- Buttons --- */
--ui-button-cta-color-bg: adjustColor(baseColor, 10%)
--ui-button-cta-color-bg-hover: adjustColor(baseColor, 24%)
--ui-button-cta-color-bg-disabled: rgba(baseColor, 30%)
--ui-button-cta-color-fg: adjustColor(baseColor, 80%)
--ui-button-cta-color-shadow: adjustColor(baseColor, 24%)
--ui-button-simple-color-bg: adjustColor(baseColor, 12%)
--ui-button-simple-color-bg-disabled: adjustColor(baseColor, 10%)
--ui-button-simple-color-bg-active: adjustColor(baseColor, 10%)
--ui-button-simple-color-border: adjustColor(baseColor, 15%)
--ui-button-simple-shadow: 0 1px 2px rgba(adjustColor(baseColor, 30%), .30)
--ui-button-simple-color-border-disabled: adjustColor(baseColor, 10%)
--ui-button-simple-color-fg: adjustColor(baseColor, 72%)
--ui-button-simple-color-fg-disabled: adjustColor(baseColor, 40%)
--ui-button-simple-color-bg-hover: adjustColor(baseColor, 24%)
--ui-button-danger-color-fg: adjustColor(accentColor, 80%)
--ui-button-subtle-color-fg: adjustColor(baseColor, 80%)
--ui-button-subtle-color-fg-hover: var(--ui-button-subtle-color-fg)
--ui-button-subtle-color-bg-hover: adjustColor(baseColor, 10%)
/* --- Other UI Elements --- */
--ui-critical-color-bg: adjustColor(baseColor, 8%)
--ui-critical-color-fg: adjustColor(accentColor, 60%)
--ui-critical-color-fg-strong: adjustColor(baseColor, 80%)
--ui-critical-color-border: adjustColor(baseColor, 10%)
--ui-page-color-bg-selected: adjustColor(baseColor, 10%)
--ui-kbfocus-color-fg: adjustColor(accentColor, 50%)
--ui-icon-unread-color-fill-isunread: adjustColor(accentColor, 40%)
--ui-icon-unread-color-fill-isread: adjustColor(baseColor, 40%)
--ui-icon-color-stroke: adjustColor(accentColor, 40%);
--ui-notification-color-bg: adjustColor(baseColor, 10%)
--ui-notification-color-fg: adjustColor(baseColor, 80%)
--ui-notification-action-color-bg: adjustColor(baseColor, 20%)
--ui-badge-color-bg: adjustColor(accentColor, 20%)
--ui-snooze-color-bg: adjustColor(baseColor, 4%)
--ui-snooze-color-fg: adjustColor(baseColor, 80%)
--ui-snooze-color-border: adjustColor(baseColor, 15%)
--ui-bottomtoolbar-color-bg: adjustColor(baseColor, 10%)
--ui-bottomtoolbar-color-fg: adjustColor(baseColor, 80%)
--ui-bottomtoolbar-icon-color-primary: adjustColor(baseColor, 48%)
--ui-bottomtoolbar-icon-color-secondary: adjustColor(baseColor, 24%)
--ui-card-color-border: adjustColor(baseColor, 10%)
--ui-card-shadow: 0 3px 8px rgba(baseColor, .5)
--ui-icon-pin-color-stroke: adjustColor(accentColor, 40%)
--ui-icon-pin-color-fill: adjustColor(accentColor, 50%)
/* --- Calendar --- */
--ui-today-color-fg: adjustColor(accentColor, 50%)
/* --- Quotes --- */
--ui-quote-color-bg-1: adjustColor(baseColor, 10%)
--ui-quote-color-fg-1: adjustColor(baseColor, 80%)
--ui-quote-color-bg-2: adjustColor(baseColor, 10%)
--ui-quote-color-fg-2: adjustColor(baseColor, 72%)
--ui-quote-color-bg-3: adjustColor(baseColor, 48%)
--ui-quote-color-fg-3: adjustColor(baseColor, 80%)
--ui-quote-color-bg-4: adjustColor(baseColor, 80%)
--ui-quote-color-fg-4: adjustColor(baseColor, 80%)
--ui-quote-color-bg-5: adjustColor(baseColor, 80%)
--ui-quote-color-fg-5: adjustColor(baseColor, 80%)
--ui-quote-color-bg-6: adjustColor(baseColor, 96%)
--ui-quote-color-fg-6: adjustColor(baseColor, 80%)
--ui-quote-color-bg-7: adjustColor(baseColor, 112%)
--ui-quote-color-fg-7: adjustColor(baseColor, 80%)
--ui-quote-color-bg-8: adjustColor(baseColor, 128%)
--ui-quote-color-fg-8: adjustColor(baseColor, 80%)
--ui-quote-color-bg-9: adjustColor(baseColor, 144%)
--ui-quote-color-fg-9: adjustColor(baseColor, 8%)
--ui-quote-color-bg-10: adjustColor(baseColor, 160%)
--ui-quote-color-fg-10: adjustColor(baseColor, 8%)
.v-ComposeAttachment-progress
background: adjustColor(baseColor, 10%)
if isBaseColorLight
background: adjustColor(baseColor, 5%)
...