From b56e50c5a76a9c268fbb79e43bafe798815a6227 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 10 Jul 2022 15:39:50 +1000
Subject: Add scrollbar colors

---
 src/App.vue   |  2 +-
 src/index.css | 10 ++++++++++
 src/lib.ts    |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 30a7c02..f26e1fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col"
-	:style="{backgroundColor: uiOpts.bgColor}">
+	:style="{backgroundColor: uiOpts.bgColor, scrollbarColor: uiOpts.altColorDark + ' ' + uiOpts.bgColorDark}">
 	<!-- Title bar -->
 	<div class="flex shadow gap-2 p-2" :style="{backgroundColor: uiOpts.bgColorDark2, color: uiOpts.altColor}">
 		<h1 class="my-auto ml-2 text-4xl hover:cursor-pointer" @click="collapseTree">Tilo</h1>
diff --git a/src/index.css b/src/index.css
index 7c01490..3330a37 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,16 @@ body {
 a {
 	@apply hover:underline hover:cursor-pointer;
 }
+::-webkit-scrollbar {
+	background-color: #1c1917;
+	width: 12px;
+	height: 12px;
+}
+::-webkit-scrollbar-thumb {
+	background: #65a30d;
+	border-radius: 5px;
+	border: 3px solid #1c1917;
+}
 
 /* For transitions/animations */
 .fade-enter-from, .fade-leave-to {
diff --git a/src/lib.ts b/src/lib.ts
index 9afe199..7ff0b73 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -134,6 +134,7 @@ export function getDefaultLytOpts(): LayoutOptions {
 export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 	let screenSz = getBreakpoint();
 	// Reused option values
+		// Note: For scrollbar colors on chrome, edit ./index.css
 	let textColor = '#fafaf9', textColorAlt = '#1c1917';
 	let bgColor = '#292524',
 		bgColorLight = '#44403c', bgColorDark = '#1c1917',
-- 
cgit v1.2.3