Desktop: Improve scrollbar contrast

**Note**: Related to an issue mentioned in laurent22#11666
personalizedrefrigerator · Jan 21, 2025 · 071c448 · 071c448
1 parent 64d1da9
commit 071c448
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 26 deletions.
diff --git a/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx b/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx
@@ -20,11 +20,6 @@ interface Props {
 }
 
 export const StyledRoot = styled.div`
-	display: flex;
-	background-color: ${(props: StyleProps) => props.theme.backgroundColor2};
-	flex-direction: column;
-	overflow-x: hidden;
-	overflow-y: auto;
 `;
 
 export const StyledListItem = styled.a`
@@ -164,8 +159,8 @@ export default function Sidebar(props: Props) {
 	}
 
 	return (
-		<StyledRoot role='tablist'>
+		<div className='settings-sidebar _scrollbar2' role='tablist'>
 			{buttons}
-		</StyledRoot>
+		</div>
 	);
 }
diff --git a/packages/app-desktop/gui/ConfigScreen/styles/index.scss b/packages/app-desktop/gui/ConfigScreen/styles/index.scss
@@ -1,4 +1,4 @@
-
+@use "./settings-sidebar.scss";
 @use "./setting-description.scss";
 @use "./setting-label.scss";
 @use "./setting-header.scss";

diff --git a/packages/app-desktop/gui/ConfigScreen/styles/settings-sidebar.scss b/packages/app-desktop/gui/ConfigScreen/styles/settings-sidebar.scss
@@ -0,0 +1,8 @@
+
+.settings-sidebar {
+	display: flex;
+	background-color: var(--joplin-background-color2);
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
diff --git a/packages/app-desktop/gui/Sidebar/Sidebar.tsx b/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 } from './styles';
 import { ButtonLevel } from '../Button/Button';
 import CommandService from '@joplin/lib/services/CommandService';
 import Synchronizer from '@joplin/lib/Synchronizer';
@@ -74,13 +74,13 @@ const SidebarComponent = (props: Props) => {
 	);
 
 	return (
-		<StyledRoot className="sidebar" role='navigation' aria-label={_('Sidebar')}>
+		<div className='sidebar sidebar-wrapper _scrollbar2' role='navigation' aria-label={_('Sidebar')}>
 			<div style={{ flex: 1 }}><FolderAndTagList/></div>
 			<div style={{ flex: 0, padding: theme.mainPadding }}>
 				{syncReportComp}
 				{syncButton}
 			</div>
-		</StyledRoot>
+		</div>
 	);
 };
 

diff --git a/packages/app-desktop/gui/Sidebar/style.scss b/packages/app-desktop/gui/Sidebar/style.scss
@@ -1,3 +1,4 @@
+@use 'styles/sidebar-wrapper.scss';
 @use 'styles/folder-and-tag-list.scss';
 @use 'styles/list-item-wrapper.scss';
 @use 'styles/note-count-label.scss';

diff --git a/packages/app-desktop/gui/Sidebar/styles/index.ts b/packages/app-desktop/gui/Sidebar/styles/index.ts
@@ -6,16 +6,6 @@ const styled = require('styled-components').default;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 type StyleProps = any;
 
-export const StyledRoot = styled.div`
-	background-color: ${(props: StyleProps) => props.theme.backgroundColor2};
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: hidden;
-	display: inline-flex;
-	flex-direction: column;
-`;
-
 export const StyledHeader = styled.div`
 	//height: ${(props: StyleProps) => props.theme.topRowHeight}px;
 	//text-decoration: none;

diff --git a/packages/app-desktop/gui/Sidebar/styles/sidebar-wrapper.scss b/packages/app-desktop/gui/Sidebar/styles/sidebar-wrapper.scss
@@ -0,0 +1,10 @@
+
+.sidebar-wrapper {
+	background-color: var(--joplin-background-color2);
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: hidden;
+	display: inline-flex;
+	flex-direction: column;
+}
diff --git a/packages/app-desktop/main.scss b/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 {

diff --git a/packages/lib/theme.ts b/packages/lib/theme.ts
@@ -233,6 +233,11 @@ export function extraStyles(theme: Theme) {
 		backgroundColorActive5,
 		focusOutlineColor,
 
+		scrollbarThumbColor: Color(theme.color).alpha(0.3).rgb(),
+		scrollbarThumbColorHover: Color(theme.color).alpha(0.6).rgb(),
+		scrollbarThumbColor2: Color(theme.color2).alpha(0.2).rgb(),
+		scrollbarThumbColorHover2: Color(theme.color2).alpha(0.6).rgb(),
+
 		icon: {
 			...globalStyle.icon,
 			color: theme.color,

diff --git a/packages/renderer/noteStyle.ts b/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}