feat(UI): standardardized themed scrollbar

frappe/public/scss/common/css_variables.scss

@@ -169,6 +169,9 @@
 	// Other Colors
 	--sidebar-select-color: var(--gray-200);
 
+	--scrollbar-thumb-color: var(--gray-400);
+	--scrollbar-track-color: var(--gray-200);
+
 	--shadow-inset: inset 0px -1px 0px var(--gray-300);
 	--border-color: var(--gray-100);
 	--dark-border-color: var(--gray-300);

frappe/public/scss/desk/dark.scss

@@ -65,6 +65,9 @@
 
 	--sidebar-select-color: var(--gray-800);
 
+	--scrollbar-thumb-color: var(--gray-600);
+	--scrollbar-track-color: var(--gray-700);
+
 	--shadow-inset: var(--fg-color);
 	--border-color: var(--gray-700);
 	--dark-border-color: var(--gray-600);
@@ -75,6 +78,8 @@
 	// input
 	--input-disabled-bg: none;
 
+	color-scheme: dark;
+
 	.frappe-card {
 		.btn-default {
 			background-color: var(--bg-color);

frappe/public/scss/desk/desktop.scss

@@ -754,7 +754,28 @@ body {
 			.layout-side-section, .layout-main-section-wrapper {
 				height: 100%;
 				overflow-y: auto;
+				padding-right: 25px;
+				scrollbar-color: var(--gray-200) transparent;
+				[data-theme="dark"] & {
+					scrollbar-color: var(--gray-800) transparent;
+				}
+
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				&::-webkit-scrollbar-thumb {
+					background: var(--gray-200);
+					[data-theme="dark"] & {
+						background: var(--gray-800);
+					}
+				}
 			}
+
+			.layout-side-section {
+				margin-right: 20px;
+			}
+
 			.desk-sidebar {
 				margin-bottom: var(--margin-2xl);
 			}

frappe/public/scss/desk/index.scss

@@ -10,6 +10,7 @@
 @import "mobile";
 @import "form";
 @import "print_preview";
+@import "scrollbar";
 @import "navbar";
 @import "../common/modal";
 @import "slides";

frappe/public/scss/desk/scrollbar.scss

@@ -0,0 +1,29 @@
+/* Works on Firefox */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+html {
+	scrollbar-width: auto;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-thumb-color);
+}
+
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-corner {
+	background: var(--scrollbar-track-color);
+}
+
+body::-webkit-scrollbar {
+	width: unset;
+	height: unset;
+}