a tool for shared writing and social publishing
more updates to accent contrast calc
+45
-17
+17
-1
components/ThemeManager/PublicationThemeProvider.tsx
+17
-1
components/ThemeManager/PublicationThemeProvider.tsx
···
148
148
...localOverrides,
149
149
showPageBackground,
150
150
};
151
+
let newAccentContrast;
151
152
let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
152
153
return (
153
154
getColorContrast(
···
166
167
)
167
168
);
168
169
});
170
+
if (
171
+
getColorContrast(
172
+
colorToString(sortedAccents[0], "rgb"),
173
+
colorToString(newTheme.primary, "rgb"),
174
+
) < 30 &&
175
+
getColorContrast(
176
+
colorToString(sortedAccents[1], "rgb"),
177
+
colorToString(
178
+
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
179
+
"rgb",
180
+
),
181
+
) > 12
182
+
) {
183
+
newAccentContrast = sortedAccents[1];
184
+
} else newAccentContrast = sortedAccents[0];
169
185
return {
170
186
...newTheme,
171
-
accentContrast: sortedAccents[0],
187
+
accentContrast: newAccentContrast,
172
188
};
173
189
}, [pubTheme, localOverrides, showPageBackground]);
174
190
return {
+28
-16
components/ThemeManager/ThemeProvider.tsx
+28
-16
components/ThemeManager/ThemeProvider.tsx
···
147
147
}) => {
148
148
// set accent contrast to the accent color that has the highest contrast with the page background
149
149
let accentContrast;
150
+
151
+
//sorting the accents by contrast on background
152
+
let sortedAccents = [accent1, accent2].sort((a, b) => {
153
+
return (
154
+
getColorContrast(
155
+
colorToString(b, "rgb"),
156
+
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
157
+
) -
158
+
getColorContrast(
159
+
colorToString(a, "rgb"),
160
+
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
161
+
)
162
+
);
163
+
});
164
+
165
+
// if the contrast-y accent is too similar to the primary text color,
166
+
// and the not contrast-y option is different from the backgrond,
167
+
// then use the not contrasty option
168
+
150
169
if (
151
170
getColorContrast(
152
-
colorToString(accent2, "rgb"),
171
+
colorToString(sortedAccents[0], "rgb"),
153
172
colorToString(primary, "rgb"),
154
-
) < 30
173
+
) < 30 &&
174
+
getColorContrast(
175
+
colorToString(sortedAccents[1], "rgb"),
176
+
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
177
+
) > 12
155
178
) {
156
-
accentContrast = accent1;
157
-
} else
158
-
accentContrast = [accent1, accent2].sort((a, b) => {
159
-
return (
160
-
getColorContrast(
161
-
colorToString(b, "rgb"),
162
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
163
-
) -
164
-
getColorContrast(
165
-
colorToString(a, "rgb"),
166
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
167
-
)
168
-
);
169
-
})[0];
179
+
accentContrast = sortedAccents[1];
180
+
} else accentContrast = sortedAccents[0];
181
+
170
182
useEffect(() => {
171
183
if (local) return;
172
184
let el = document.querySelector(":root") as HTMLElement;