diff --git a/interface/app/style.scss b/interface/app/style.scss index 58850ff80..fcb6412ad 100644 --- a/interface/app/style.scss +++ b/interface/app/style.scss @@ -69,7 +69,7 @@ body { @apply mt-[46px] rounded-[6px] bg-transparent; } &::-webkit-scrollbar-thumb { - @apply rounded-[6px] bg-app-box; + @apply rounded-[6px] bg-app-explorerScrollbar; } } diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss index 3fbbf21e6..a31e3c249 100644 --- a/packages/ui/style/colors.scss +++ b/packages/ui/style/colors.scss @@ -42,6 +42,7 @@ --color-app-shade: var(--dark-hue), 15%, 0%; --color-app-frame: var(--dark-hue), 15%, 25%; --color-app-slider: var(--dark-hue), 15%, 20%; + --color-app-explorer-scrollbar: var(--dark-hue), 20%, 25%; // menu --color-menu: var(--dark-hue), 25%, 5%; --color-menu-line: var(--dark-hue), 15%, 11%; @@ -94,6 +95,7 @@ --color-app-shade: var(--light-hue), 15%, 50%; --color-app-frame: 0, 0%, 100%; --color-app-slider: var(--light-hue), 5%, 95%; + --color-app-explorer-scrollbar: var(--light-hue), 5%, 75%; // menu --color-menu: var(--light-hue), 5%, 100%; --color-menu-line: var(--light-hue), 5%, 95%; diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js index 37a8fef68..96922ab15 100644 --- a/packages/ui/style/tailwind.js +++ b/packages/ui/style/tailwind.js @@ -59,7 +59,7 @@ module.exports = function (app, options) { divider: alpha('--color-sidebar-divider'), button: alpha('--color-sidebar-button'), selected: alpha('--color-sidebar-selected'), - shade: alpha('--color-sidebar-shade') + shade: alpha('--color-sidebar-shade'), }, app: { DEFAULT: alpha('--color-app'), @@ -78,7 +78,8 @@ module.exports = function (app, options) { active: alpha('--color-app-active'), shade: alpha('--color-app-shade'), frame: alpha('--color-app-frame'), - slider: alpha('--color-app-slider') + slider: alpha('--color-app-slider'), + explorerScrollbar: alpha('--color-app-explorer-scrollbar'), }, menu: { DEFAULT: alpha('--color-menu'),