leaflet.pub
a tool for shared writing and social publishing
fixing some color logic stuff
cozylittle.house
+11
-45
+1
-35
components/ThemeManager/PublicationThemeProvider.tsx
+1
-35
components/ThemeManager/PublicationThemeProvider.tsx
···
171
...localOverrides,
172
showPageBackground,
173
};
174
-
let newAccentContrast;
175
-
let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
176
-
return (
177
-
getColorDifference(
178
-
colorToString(b, "rgb"),
179
-
colorToString(
180
-
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
181
-
"rgb",
182
-
),
183
-
) -
184
-
getColorDifference(
185
-
colorToString(a, "rgb"),
186
-
colorToString(
187
-
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
188
-
"rgb",
189
-
),
190
-
)
191
-
);
192
-
});
193
-
if (
194
-
getColorDifference(
195
-
colorToString(sortedAccents[0], "rgb"),
196
-
colorToString(newTheme.primary, "rgb"),
197
-
) < 0.15 &&
198
-
getColorDifference(
199
-
colorToString(sortedAccents[1], "rgb"),
200
-
colorToString(
201
-
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
202
-
"rgb",
203
-
),
204
-
) > 0.08
205
-
) {
206
-
newAccentContrast = sortedAccents[1];
207
-
} else newAccentContrast = sortedAccents[0];
208
return {
209
...newTheme,
210
-
accentContrast: newAccentContrast,
211
};
212
}, [pubTheme, localOverrides, showPageBackground]);
213
return {
+10
-10
components/ThemeManager/ThemeProvider.tsx
+10
-10
components/ThemeManager/ThemeProvider.tsx
···
134
// pageBg should inherit from leafletBg
135
const bgPage =
136
!showPageBackground && !hasBackgroundImage ? bgLeaflet : bgPageProp;
137
-
// set accent contrast to the accent color that has the highest contrast with the page background
138
let accentContrast;
139
-
140
-
//sorting the accents by contrast on background
141
let sortedAccents = [accent1, accent2].sort((a, b) => {
142
return (
143
getColorDifference(
144
colorToString(b, "rgb"),
···
150
)
151
);
152
});
153
-
154
-
// if the contrast-y accent is too similar to the primary text color,
155
-
// and the not contrast-y option is different from the backgrond,
156
-
// then use the not contrasty option
157
-
158
if (
159
getColorDifference(
160
colorToString(sortedAccents[0], "rgb"),
161
colorToString(primary, "rgb"),
162
) < 0.15 &&
163
getColorDifference(
164
colorToString(sortedAccents[1], "rgb"),
165
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
166
-
) > 0.08
167
) {
168
accentContrast = sortedAccents[1];
169
-
} else accentContrast = sortedAccents[0];
170
171
useEffect(() => {
172
if (local) return;
···
134
// pageBg should inherit from leafletBg
135
const bgPage =
136
!showPageBackground && !hasBackgroundImage ? bgLeaflet : bgPageProp;
137
+
138
let accentContrast;
139
let sortedAccents = [accent1, accent2].sort((a, b) => {
140
+
// sort accents by contrast against the background
141
return (
142
getColorDifference(
143
colorToString(b, "rgb"),
···
149
)
150
);
151
});
152
if (
153
+
// if the contrast-y accent is too similar to text color
154
getColorDifference(
155
colorToString(sortedAccents[0], "rgb"),
156
colorToString(primary, "rgb"),
157
) < 0.15 &&
158
+
// and if the other accent is different enough from the background
159
getColorDifference(
160
colorToString(sortedAccents[1], "rgb"),
161
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
162
+
) > 0.31
163
) {
164
+
//then choose the less contrast-y accent
165
accentContrast = sortedAccents[1];
166
+
} else {
167
+
// otherwise, choose the more contrast-y option
168
+
accentContrast = sortedAccents[0];
169
+
}
170
171
useEffect(() => {
172
if (local) return;