From 2beaa0d73046a1b02fcf2f6ad1989de421eacc00 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Thu, 08 Jan 2026 19:40:55 +0000
Subject: [PATCH] update color logic when selecting accent contrast color to use the most

---
 components/ThemeManager/PublicationThemeProvider.tsx | 14 +++++++-------
 components/ThemeManager/ThemeProvider.tsx | 18 +++++++++---------
 components/ThemeManager/themeUtils.ts | 7 ++++---
 3 file(s) changed, 20 insertion(s)(+), 19 deletion(s)(-)

diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx
--- a/components/ThemeManager/PublicationThemeProvider.tsx
+++ b/components/ThemeManager/PublicationThemeProvider.tsx
@@ -2,7 +2,7 @@
 import { useMemo, useState } from "react";
 import { parseColor } from "react-aria-components";
 import { useEntity } from "src/replicache";
-import { getColorContrast } from "./themeUtils";
+import { getColorDifference } from "./themeUtils";
 import { useColorAttribute, colorToString } from "./useColorAttribute";
 import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
@@ -174,14 +174,14 @@
     let newAccentContrast;
     let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
       return (
-        getColorContrast(
+        getColorDifference(
           colorToString(b, "rgb"),
           colorToString(
             showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
             "rgb",
           ),
         ) -
-        getColorContrast(
+        getColorDifference(
           colorToString(a, "rgb"),
           colorToString(
             showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
@@ -191,17 +191,17 @@
       );
     });
     if (
-      getColorContrast(
+      getColorDifference(
         colorToString(sortedAccents[0], "rgb"),
         colorToString(newTheme.primary, "rgb"),
-      ) < 30 &&
-      getColorContrast(
+      ) < 0.15 &&
+      getColorDifference(
         colorToString(sortedAccents[1], "rgb"),
         colorToString(
           showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
           "rgb",
         ),
-      ) > 12
+      ) > 0.08
     ) {
       newAccentContrast = sortedAccents[1];
     } else newAccentContrast = sortedAccents[0];
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -22,7 +22,7 @@
   PublicationThemeProvider,
 } from "./PublicationThemeProvider";
 import { PubLeafletPublication } from "lexicons/api";
-import { getColorContrast } from "./themeUtils";
+import { getColorDifference } from "./themeUtils";
 
 // define a function to set an Aria Color to a CSS Variable in RGB
 function setCSSVariableToColor(
@@ -140,11 +140,11 @@
   //sorting the accents by contrast on background
   let sortedAccents = [accent1, accent2].sort((a, b) => {
     return (
-      getColorContrast(
+      getColorDifference(
         colorToString(b, "rgb"),
         colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
       ) -
-      getColorContrast(
+      getColorDifference(
         colorToString(a, "rgb"),
         colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
       )
@@ -156,14 +156,14 @@
   // then use the not contrasty option
 
   if (
-    getColorContrast(
+    getColorDifference(
       colorToString(sortedAccents[0], "rgb"),
       colorToString(primary, "rgb"),
-    ) < 30 &&
-    getColorContrast(
+    ) < 0.15 &&
+    getColorDifference(
       colorToString(sortedAccents[1], "rgb"),
       colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
-    ) > 12
+    ) > 0.08
   ) {
     accentContrast = sortedAccents[1];
   } else accentContrast = sortedAccents[0];
@@ -286,11 +286,11 @@
     bgPage && accent1 && accent2
       ? [accent1, accent2].sort((a, b) => {
           return (
-            getColorContrast(
+            getColorDifference(
               colorToString(b, "rgb"),
               colorToString(bgPage, "rgb"),
             ) -
-            getColorContrast(
+            getColorDifference(
               colorToString(a, "rgb"),
               colorToString(bgPage, "rgb"),
             )
diff --git a/components/ThemeManager/themeUtils.ts b/components/ThemeManager/themeUtils.ts
--- a/components/ThemeManager/themeUtils.ts
+++ b/components/ThemeManager/themeUtils.ts
@@ -1,4 +1,4 @@
-import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn";
+import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn";
 
 // define the color defaults for everything
 export const ThemeDefaults = {
@@ -17,11 +17,12 @@
 };
 
 // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast
-export function getColorContrast(color1: string, color2: string) {
+export function getColorDifference(color1: string, color2: string) {
   ColorSpace.register(sRGB);
+  ColorSpace.register(OKLab);
 
   let parsedColor1 = parse(`rgb(${color1})`);
   let parsedColor2 = parse(`rgb(${color2})`);
 
-  return contrastLstar(parsedColor1, parsedColor2);
+  return distance(parsedColor1, parsedColor2, "oklab");
 }

--
tangled.sh