From aed2c0a2cc6f443c51e8404641140cda8291b5b1 Mon Sep 17 00:00:00 2001
From: Elliot Hopkins <did:plc:6kqpljoz4r7ttyhofw6sg2km>
Date: Tue, 28 Apr 2026 01:11:24 -0700
Subject: [PATCH] update: refine theme contrast scale

Includes:
- update: adjust default theme contrast colors for softer borders/hovers
- update: soften light grays and add warmth to dark mode backgrounds
- fix: restore visible hover states for Blacksky and Red Dwarf light mode themes
- feat: add cyan base color theme
- update: tone down dark mode warmth from overly brown to neutral-warm grey
- update: refine dark mode contrast scale to warm burgundy-charcoal (patch)
---
 src/alf/index.tsx                             |   4 +
 src/alf/themes.ts                             | 206 +++++++++++++++---
 .../Settings/AppearanceSettings/shared.tsx    |   7 +
 src/state/persisted/schema.ts                 |   1 +
 4 files changed, 188 insertions(+), 30 deletions(-)

diff --git a/src/alf/index.tsx b/src/alf/index.tsx
index 7afa0b37f..e3ca894e1 100644
--- a/src/alf/index.tsx
+++ b/src/alf/index.tsx
@@ -14,6 +14,7 @@ import {
   blackskyscheme,
   blueskyscheme,
   catppuccinscheme,
+  cyanscheme,
   deerscheme,
   evergardenscheme,
   kittyscheme,
@@ -189,6 +190,9 @@ export function useScheme(): SchemeType {
       case 'evergarden':
         currentScheme = evergardenscheme
         break
+      case 'cyan base':
+        currentScheme = cyanscheme
+        break
       case 'material3':
         currentScheme = getMaterial3Colors(palette).scheme
         break
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index 70011a7d5..70e81f621 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -106,20 +106,20 @@ export const DEFAULT_PALETTE: Palette = {
   yellow: STATIC_VALUES.yellow,
 
   contrast_0: '#FEFBFB',
-  contrast_25: '#ECE9E9',
-  contrast_50: '#DBD8D8',
-  contrast_100: '#C9C7C7',
-  contrast_200: '#B8B6B6',
-  contrast_300: '#A8A5A5',
-  contrast_400: '#979595',
-  contrast_500: '#878585',
-  contrast_600: '#787575',
-  contrast_700: '#686666',
-  contrast_800: '#595757',
-  contrast_900: '#4B4848',
-  contrast_950: '#3D3A3A',
-  contrast_975: '#1b1a1aff',
-  contrast_1000: '#000000ff',
+  contrast_25: '#F5F2F1',
+  contrast_50: '#EDE9E8',
+  contrast_100: '#E0DBD9',
+  contrast_200: '#D0CBC9',
+  contrast_300: '#C0BBB9',
+  contrast_400: '#B0ABA9',
+  contrast_500: '#A09B99',
+  contrast_600: '#88736c',
+  contrast_700: '#755f57',
+  contrast_800: '#624c43',
+  contrast_900: '#4f3a31',
+  contrast_950: '#3e2b21',
+  contrast_975: '#2a1a15',
+  contrast_1000: '#150b08',
 
   primary_25: `hsl(5, 30%, 97%)`,
   primary_50: `hsl(5, 30%, 95%)`,
@@ -172,20 +172,20 @@ export const DEFAULT_SUBDUED_PALETTE: Palette = {
   yellow: STATIC_VALUES.yellow,
 
   contrast_0: '#FEFBFB',
-  contrast_25: '#ECE9E9',
-  contrast_50: '#DBD8D8',
-  contrast_100: '#C9C7C7',
-  contrast_200: '#B8B6B6',
-  contrast_300: '#A8A5A5',
-  contrast_400: '#979595',
-  contrast_500: '#878585',
-  contrast_600: '#787575',
-  contrast_700: '#686666',
-  contrast_800: '#595757',
-  contrast_900: '#4B4848',
-  contrast_950: '#3D3A3A',
-  contrast_975: '#2F2D2D',
-  contrast_1000: '#222020',
+  contrast_25: '#F5F2F1',
+  contrast_50: '#EDE9E8',
+  contrast_100: '#E0DBD9',
+  contrast_200: '#D0CBC9',
+  contrast_300: '#C0BBB9',
+  contrast_400: '#B0ABA9',
+  contrast_500: '#A09B99',
+  contrast_600: '#88736c',
+  contrast_700: '#755f57',
+  contrast_800: '#624c43',
+  contrast_900: '#4f3a31',
+  contrast_950: '#3e2b21',
+  contrast_975: '#2f201f',
+  contrast_1000: '#281c1c',
 
   primary_25: `hsl(5, 30%, 97%)`,
   primary_50: `hsl(5, 30%, 95%)`,
@@ -346,7 +346,7 @@ export const BLACKSKY_PALETTE: Palette = {
 
   // neutrals
   contrast_0: BLACKSKY_BRAND.white,
-  contrast_25: BLACKSKY_BRAND.white, // Very Light
+  contrast_25: '#F4F6F5', // Very Light
   contrast_50: '#F0F2F2',
   contrast_100: '#E6E8E8',
   contrast_200: '#D1D3D3',
@@ -643,6 +643,152 @@ export const blueskyscheme = {
   dim: BLUESKY_THEMES.dim,
 }
 
+export const CYAN_PALETTE: Palette = {
+  white: STATIC_VALUES.white,
+  black: STATIC_VALUES.black,
+  pink: STATIC_VALUES.pink,
+  yellow: STATIC_VALUES.yellow,
+  like: STATIC_VALUES.pink,
+
+  contrast_0: '#FFFFFF',
+  contrast_25: '#F9FAFB',
+  contrast_50: '#EFF2F6',
+  contrast_100: '#DCE2EA',
+  contrast_200: '#C0CAD8',
+  contrast_300: '#A5B2C5',
+  contrast_400: '#8798B0',
+  contrast_500: '#667B99',
+  contrast_600: '#526580',
+  contrast_700: '#405168',
+  contrast_800: '#313F54',
+  contrast_900: '#232E3E',
+  contrast_950: '#19222E',
+  contrast_975: '#111822',
+  contrast_1000: '#000000',
+
+  primary_25: `hsl(174, 55%, 97%)`,
+  primary_50: `hsl(174, 55%, 95%)`,
+  primary_100: `hsl(174, 55%, 90%)`,
+  primary_200: `hsl(174, 55%, 80%)`,
+  primary_300: `hsl(174, 60%, 70%)`,
+  primary_400: `hsl(174, 72%, 58%)`,
+  primary_500: `hsl(174, 83%, 38%)`,
+  primary_600: `hsl(174, 78%, 32%)`,
+  primary_700: `hsl(174, 72%, 26%)`,
+  primary_800: `hsl(174, 66%, 20%)`,
+  primary_900: `hsl(174, 60%, 15%)`,
+  primary_950: `hsl(174, 55%, 10%)`,
+  primary_975: `hsl(174, 55%, 6%)`,
+
+  positive_25: '#ECFEF5',
+  positive_50: '#D3FDE8',
+  positive_100: '#A3FACF',
+  positive_200: '#6AF6B0',
+  positive_300: '#2CF28F',
+  positive_400: '#0DD370',
+  positive_500: '#09B35E',
+  positive_600: '#04904A',
+  positive_700: '#036D38',
+  positive_800: '#04522B',
+  positive_900: '#033F21',
+  positive_950: '#032A17',
+  positive_975: '#021D0F',
+
+  negative_25: '#FFF5F7',
+  negative_50: '#FEE7EC',
+  negative_100: '#FDD3DD',
+  negative_200: '#FBBBCA',
+  negative_300: '#F891A9',
+  negative_400: '#F65A7F',
+  negative_500: '#E91646',
+  negative_600: '#CA123D',
+  negative_700: '#A71134',
+  negative_800: '#7F0B26',
+  negative_900: '#5F071C',
+  negative_950: '#430413',
+  negative_975: '#30030D',
+}
+
+export const CYAN_SUBDUED_PALETTE: Palette = {
+  white: STATIC_VALUES.white,
+  black: STATIC_VALUES.black,
+  pink: STATIC_VALUES.pink,
+  yellow: STATIC_VALUES.yellow,
+  like: STATIC_VALUES.pink,
+
+  contrast_0: '#FFFFFF',
+  contrast_25: '#F9FAFB',
+  contrast_50: '#F2F4F8',
+  contrast_100: '#E2E7EE',
+  contrast_200: '#C3CDDA',
+  contrast_300: '#ABB8C9',
+  contrast_400: '#8D9DB4',
+  contrast_500: '#6F839F',
+  contrast_600: '#586C89',
+  contrast_700: '#485B75',
+  contrast_800: '#394A58',
+  contrast_900: '#2C3D4C',
+  contrast_950: '#22323D',
+  contrast_975: '#1C2B35',
+  contrast_1000: '#15232C',
+
+  primary_25: `hsl(174, 35%, 97%)`,
+  primary_50: `hsl(174, 35%, 95%)`,
+  primary_100: `hsl(174, 35%, 90%)`,
+  primary_200: `hsl(174, 35%, 80%)`,
+  primary_300: `hsl(174, 40%, 70%)`,
+  primary_400: `hsl(174, 50%, 58%)`,
+  primary_500: `hsl(174, 58%, 38%)`,
+  primary_600: `hsl(174, 54%, 32%)`,
+  primary_700: `hsl(174, 50%, 26%)`,
+  primary_800: `hsl(174, 46%, 20%)`,
+  primary_900: `hsl(174, 42%, 15%)`,
+  primary_950: `hsl(174, 40%, 10%)`,
+  primary_975: `hsl(174, 40%, 6%)`,
+
+  positive_25: '#ECFEF5',
+  positive_50: '#D8FDEB',
+  positive_100: '#A8FAD1',
+  positive_200: '#6FF6B3',
+  positive_300: '#31F291',
+  positive_400: '#0EDD75',
+  positive_500: '#0AC266',
+  positive_600: '#049F52',
+  positive_700: '#038142',
+  positive_800: '#056636',
+  positive_900: '#04522B',
+  positive_950: '#053D21',
+  positive_975: '#052917',
+
+  negative_25: '#FFF5F7',
+  negative_50: '#FEEBEF',
+  negative_100: '#FDD8E1',
+  negative_200: '#FCC0CE',
+  negative_300: '#F99AB0',
+  negative_400: '#F76486',
+  negative_500: '#EB2452',
+  negative_600: '#D81341',
+  negative_700: '#BA1239',
+  negative_800: '#910D2C',
+  negative_900: '#6F0B22',
+  negative_950: '#500B1C',
+  negative_975: '#3E0915',
+}
+
+const CYAN_THEMES = createThemes({
+  defaultPalette: CYAN_PALETTE,
+  subduedPalette: CYAN_SUBDUED_PALETTE,
+})
+
+export const cyanscheme = {
+  lightPalette: CYAN_THEMES.light.palette,
+  darkPalette: CYAN_THEMES.dark.palette,
+  dimPalette: CYAN_THEMES.dim.palette,
+  light: CYAN_THEMES.light,
+  dark: CYAN_THEMES.dark,
+  dim: CYAN_THEMES.dim,
+}
+
 export const DEER_PALETTE: Palette = {
   white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`,
   black: STATIC_VALUES.black,
@@ -1032,7 +1178,7 @@ export const REDDWARF_SUBDUED_PALETTE: Palette = {
   yellow: STATIC_VALUES.yellow,
 
   contrast_0: REDDWARF_TAILWIND_ATOMS.color_gray_50,
-  contrast_25: REDDWARF_TAILWIND_ATOMS.color_gray_50,
+  contrast_25: '#FFF5F2',
   contrast_50: REDDWARF_TAILWIND_ATOMS.color_gray_100,
   contrast_100: REDDWARF_TAILWIND_ATOMS.color_gray_200,
   contrast_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
diff --git a/src/screens/Settings/AppearanceSettings/shared.tsx b/src/screens/Settings/AppearanceSettings/shared.tsx
index 0ac8cebaf..03dcd0c01 100644
--- a/src/screens/Settings/AppearanceSettings/shared.tsx
+++ b/src/screens/Settings/AppearanceSettings/shared.tsx
@@ -9,6 +9,7 @@ import {
   BLACKSKY_PALETTE,
   BLUESKY_PALETTE,
   CATPPUCIN_PALETTE,
+  CYAN_PALETTE,
   DEER_PALETTE,
   DEFAULT_PALETTE,
   EVERGARDEN_PALETTE,
@@ -34,6 +35,7 @@ export type ColorSchemeName =
   | 'reddwarf'
   | 'catppuccin'
   | 'evergarden'
+  | 'cyan base'
   | 'material3'
 
 export type ColorSchemeOption = {
@@ -97,6 +99,11 @@ export function useColorSchemes() {
         label: _(msg`Evergarden`),
         primary: EVERGARDEN_PALETTE.primary_500,
       },
+      {
+        name: 'cyan base',
+        label: _(msg`Cyan Base`),
+        primary: CYAN_PALETTE.primary_500,
+      },
       {
         name: 'material3',
         label: _(msg`Material You`),
diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts
index 29c407045..62645fe55 100644
--- a/src/state/persisted/schema.ts
+++ b/src/state/persisted/schema.ts
@@ -63,6 +63,7 @@ const schema = z.object({
     'reddwarf',
     'catppuccin',
     'evergarden',
+    'cyan base',
     'material3',
   ]),
   hue: z.number(),
-- 
2.51.2