Desktop: Accessibility: Improve scrollbar contrast (#11708)

packages/app-desktop/gui/ConfigScreen/Sidebar.tsx

@@ -164,7 +164,7 @@ export default function Sidebar(props: Props) {
 	}
 
 	return (
-		<StyledRoot role='tablist'>
+		<StyledRoot className='settings-sidebar _scrollbar2' role='tablist'>
 			{buttons}
 		</StyledRoot>
 	);

packages/app-desktop/gui/ConfigScreen/styles/index.scss

@@ -1,4 +1,3 @@
-
 @use "./setting-description.scss";
 @use "./setting-label.scss";
 @use "./setting-header.scss";

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyledRoot, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
+import { StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton, StyledRoot } from './styles';
 import { ButtonLevel } from '../Button/Button';
 import CommandService from '@joplin/lib/services/CommandService';
 import Synchronizer from '@joplin/lib/Synchronizer';
@@ -74,7 +74,7 @@ const SidebarComponent = (props: Props) => {
 	);
 
 	return (
-		<StyledRoot className="sidebar" role='navigation' aria-label={_('Sidebar')}>
+		<StyledRoot className='sidebar _scrollbar2' role='navigation' aria-label={_('Sidebar')}>
 			<div style={{ flex: 1 }}><FolderAndTagList/></div>
 			<div style={{ flex: 0, padding: theme.mainPadding }}>
 				{syncReportComp}

packages/app-desktop/main.scss

@@ -44,7 +44,7 @@ a {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: rgba(100, 100, 100, 0.3);
+	background: var(--scrollbar-thumb-color);
 	border-radius: calc(var(--scrollbar-size, 7px) * 0.7);
 }
 
@@ -53,7 +53,19 @@ a {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: rgba(100, 100, 100, 0.7);
+	background: var(--scrollbar-thumb-color-hover);
+}
+
+:root {
+	--scrollbar-thumb-color: var(--joplin-scrollbar-thumb-color);
+	--scrollbar-thumb-color-hover: var(--joplin-scrollbar-thumb-color-hover);
+}
+
+// Uses a scrollbar with secondary colors. Should be used for content with
+// background matching joplin-background-color2.
+._scrollbar2 {
+	--scrollbar-thumb-color: var(--joplin-scrollbar-thumb-color2);
+	--scrollbar-thumb-color-hover: var(--joplin-scrollbar-thumb-color-hover2);
 }
 
 .fade_out {

packages/app-mobile/components/global-style.ts

@@ -1,6 +1,6 @@
 import Setting from '@joplin/lib/models/Setting';
 import { Platform, TextStyle, ViewStyle } from 'react-native';
-import { themeById } from '@joplin/lib/theme';
+import { withDerivedColors, themeById } from '@joplin/lib/theme';
 import { Theme as BaseTheme } from '@joplin/lib/themes/type';
 
 const Color = require('color');
@@ -154,6 +154,7 @@ function themeStyle(theme: number) {
 	const output: ThemeStyle = {
 		...baseStyle,
 		...baseTheme,
+		...withDerivedColors(baseTheme),
 		...extraStyles(baseTheme),
 	};
 	themeCache_[cacheKey] = output;

packages/lib/theme.ts

@@ -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;

packages/renderer/noteStyle.ts

@@ -137,14 +137,13 @@ export default function(theme: any, options: Options = null) {
 			border: none;
 		}
 		::-webkit-scrollbar-thumb {
-			background: rgba(100, 100, 100, 0.3); 
-			border-radius: 5px;
+			background: ${theme.scrollbarThumbColor}; 
 		}
 		::-webkit-scrollbar-track:hover {
 			background: rgba(0, 0, 0, 0.1); 
 		}
 		::-webkit-scrollbar-thumb:hover {
-			background: rgba(100, 100, 100, 0.7); 
+			background: ${theme.scrollbarThumbColorHover}; 
 		}
 
 		${maxWidthCss}