self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-23 22:36:32 +02:00
Code Issues Releases Activity

Desktop: Accessibility: Improve scrollbar contrast (#11708)

Browse Source
This commit is contained in:
Henry Heino
2025-01-27 08:23:00 -08:00
committed by GitHub
parent 762daa5a68
commit 98540493e0
7 changed files with 70 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/lib/theme.ts
View File

@@ -97,7 +97,49 @@ const globalStyle = (() => {
};
})();
export function extraStyles(theme: Theme) {
export const withDerivedColors = (theme: Theme) => {
const backgroundColor5 = theme.backgroundColor5 ?? theme.color4;
const backgroundColor4 = theme.backgroundColor4;
// Colors need to be converted to string to work in some cases (in particular
// on mobile)
const rgbString = (color: typeof Color): string => color.rgb().string();
const hexString = (color: typeof Color): string => color.hex();
return {
...theme,
borderColor4: rgbString(Color(theme.color).alpha(0.3)),
iconColor: rgbString(Color(theme.color).alpha(0.8)),
focusOutlineColor: theme.colorWarn,
backgroundColor5,
backgroundColorHover5: hexString(Color(backgroundColor5).darken(0.2)),
backgroundColorActive5: hexString(Color(backgroundColor5).darken(0.4)),
colorFaded2: rgbString(Color(theme.color2).alpha(0.52)),
colorHover2: rgbString(Color(theme.color2).alpha(0.7)),
colorActive2: rgbString(Color(theme.color2).alpha(0.9)),
backgroundColorHoverDim3: rgbString(Color(theme.backgroundColorHover3).alpha(0.3)),
backgroundColorActive3: rgbString(Color(theme.backgroundColorHover3).alpha(0.5)),
backgroundColorHover2: rgbString(Color(theme.selectedColor2).alpha(0.4)),
backgroundColorHover4: rgbString(Color(theme.backgroundColorHover3).alpha(0.3)),
backgroundColorActive4: rgbString(Color(theme.backgroundColorHover3).alpha(0.8)),
scrollbarThumbColor: rgbString(Color(theme.color).alpha(0.54)),
scrollbarThumbColorHover: rgbString(Color(theme.color).alpha(0.63)),
scrollbarThumbColor2: rgbString(Color(theme.color2).alpha(0.46)),
scrollbarThumbColorHover2: rgbString(Color(theme.color2).alpha(0.63)),
selectedDividerColor: hexString(Color(theme.dividerColor).darken(0.2)),
color5: theme.color5 ?? backgroundColor4,
colorHover3: theme.color3,
};
};
type ThemeAndDerivedColors = ReturnType<typeof withDerivedColors>;
export function extraStyles(theme: ThemeAndDerivedColors) {
const zoomRatio = 1;
const baseFontSize = Math.round(12 * zoomRatio);
@@ -107,15 +149,6 @@ export function extraStyles(theme: Theme) {
noteViewerFontSize: Math.round(baseFontSize * 1.25),
};
const bgColor4 = theme.backgroundColor4;
const borderColor4: string = Color(theme.color).alpha(0.3);
const iconColor = Color(theme.color).alpha(0.8);
const focusOutlineColor = theme.colorWarn;
const backgroundColor5 = theme.backgroundColor5 ?? theme.color4;
const backgroundColorHover5 = Color(backgroundColor5).darken(0.2).hex();
const backgroundColorActive5 = Color(backgroundColor5).darken(0.4).hex();
const inputStyle = {
...globalStyle.inputStyle,
color: theme.color,
@@ -133,7 +166,7 @@ export function extraStyles(theme: Theme) {
...globalStyle.buttonStyle,
color: theme.color4,
backgroundColor: theme.backgroundColor4,
borderColor: borderColor4,
borderColor: theme.borderColor4,
userSelect: literal('none'),
// cursor: 'pointer',
@@ -213,25 +246,6 @@ export function extraStyles(theme: Theme) {
return {
zoomRatio,
...fontSizes,
selectedDividerColor: Color(theme.dividerColor).darken(0.2).hex(),
iconColor,
colorFaded2: Color(theme.color2).alpha(0.52).rgb(),
colorHover2: Color(theme.color2).alpha(0.7).rgb(),
colorActive2: Color(theme.color2).alpha(0.9).rgb(),
backgroundColorHoverDim3: Color(theme.backgroundColorHover3).alpha(0.3).rgb(),
backgroundColorActive3: Color(theme.backgroundColorHover3).alpha(0.5).rgb(),
backgroundColorHover2: Color(theme.selectedColor2).alpha(0.4).rgb(),
backgroundColorHover4: Color(theme.backgroundColorHover3).alpha(0.3).rgb(),
backgroundColorActive4: Color(theme.backgroundColorHover3).alpha(0.8).rgb(),
colorHover3: theme.color3,
borderColor4,
backgroundColor4: bgColor4,
color5: theme.color5 ?? bgColor4,
backgroundColor5,
backgroundColorHover5,
backgroundColorActive5,
focusOutlineColor,
icon: {
...globalStyle.icon,
@@ -306,7 +320,7 @@ export function extraStyles(theme: Theme) {
flexDirection: literal('column'),
},
buttonIconStyle: {
color: iconColor,
color: theme.iconColor,
marginRight: 6,
},
notificationBox: {
@@ -329,7 +343,7 @@ export function extraStyles(theme: Theme) {
type ExtraStyles = ReturnType<typeof extraStyles>;
type GlobalStyle = typeof globalStyle;
export type ThemeStyle = Theme & ExtraStyles & GlobalStyle & { cacheKey: number };
export type ThemeStyle = ThemeAndDerivedColors & ExtraStyles & GlobalStyle & { cacheKey: number };
const themeCache_: Record<string, ThemeStyle> = {};
@@ -339,14 +353,15 @@ export function themeStyle(themeId: number): ThemeStyle {
const cacheKey = themeId;
if (themeCache_[cacheKey]) return themeCache_[cacheKey];
const theme = withDerivedColors(themes[themeId]);
const output: ThemeStyle = {
cacheKey,
...globalStyle,
...themes[themeId],
...theme,
// All theme are based on the light style, and just override the
// relevant properties
...extraStyles(themes[themeId]),
...extraStyles(theme),
};
themeCache_[cacheKey] = output;