diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/index.css | 10 | ||||
| -rw-r--r-- | src/lib.ts | 1 |
3 files changed, 12 insertions, 1 deletions
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 { @@ -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', |