a tool for shared writing and social publishing
add case to compare text colors for accent-contrast
+25
-30
-14
components/ThemeManager/PublicationThemeProvider.tsx
-14
components/ThemeManager/PublicationThemeProvider.tsx
···
122
122
let highlight2 = useColorAttribute(null, "theme/highlight-2");
123
123
let highlight3 = useColorAttribute(null, "theme/highlight-3");
124
124
125
-
// set accent contrast to the accent color that has the highest contrast with the page background
126
-
let accentContrast = [accent1, accent2].sort((a, b) => {
127
-
return (
128
-
getColorContrast(
129
-
colorToString(b, "rgb"),
130
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
131
-
) -
132
-
getColorContrast(
133
-
colorToString(a, "rgb"),
134
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
135
-
)
136
-
);
137
-
})[0];
138
125
return {
139
126
bgLeaflet,
140
127
bgPage,
···
144
131
highlight1,
145
132
highlight2,
146
133
highlight3,
147
-
accentContrast,
148
134
showPageBackground,
149
135
};
150
136
};
+25
-16
components/ThemeManager/ThemeProvider.tsx
+25
-16
components/ThemeManager/ThemeProvider.tsx
···
100
100
101
101
let accent1 = useColorAttribute(props.entityID, "theme/accent-background");
102
102
let accent2 = useColorAttribute(props.entityID, "theme/accent-text");
103
-
// set accent contrast to the accent color that has the highest contrast with the page background
104
-
let accentContrast = [accent1, accent2].sort((a, b) => {
105
-
return (
106
-
getColorContrast(
107
-
colorToString(b, "rgb"),
108
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
109
-
) -
110
-
getColorContrast(
111
-
colorToString(a, "rgb"),
112
-
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
113
-
)
114
-
);
115
-
})[0];
116
103
117
104
return (
118
105
<BaseThemeProvider
···
125
112
highlight1={highlight1?.data.value}
126
113
accent1={accent1}
127
114
accent2={accent2}
128
-
accentContrast={accentContrast}
115
+
showPageBackground={showPageBackground}
129
116
>
130
117
{props.children}
131
118
</BaseThemeProvider>
···
140
127
primary,
141
128
accent1,
142
129
accent2,
143
-
accentContrast,
144
130
highlight1,
145
131
highlight2,
146
132
highlight3,
133
+
showPageBackground,
147
134
children,
148
135
}: {
149
136
local?: boolean;
137
+
showPageBackground?: boolean;
150
138
bgLeaflet: AriaColor;
151
139
bgPage: AriaColor;
152
140
primary: AriaColor;
153
141
accent1: AriaColor;
154
142
accent2: AriaColor;
155
-
accentContrast: AriaColor;
156
143
highlight1?: string;
157
144
highlight2: AriaColor;
158
145
highlight3: AriaColor;
159
146
children: React.ReactNode;
160
147
}) => {
148
+
// set accent contrast to the accent color that has the highest contrast with the page background
149
+
let accentContrast;
150
+
if (
151
+
getColorContrast(
152
+
colorToString(accent2, "rgb"),
153
+
colorToString(primary, "rgb"),
154
+
)
155
+
) {
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];
161
170
useEffect(() => {
162
171
if (local) return;
163
172
let el = document.querySelector(":root") as HTMLElement;