diff --git a/src/scss/base.scss b/src/scss/base.scss index f420a98a034..160017d44a3 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -88,11 +88,16 @@ div:not(.modal)::-webkit-scrollbar-track { } div:not(.modal)::-webkit-scrollbar-thumb { - background-color: rgba(100,100,100,.2); border-radius: 10px; margin-right: 1px; + @include themify($themes) { + background-color: themed('scrollbarColor'); + } + &:hover { - background-color: rgba(100,100,100,.4); + @include themify($themes) { + background-color: themed('scrollbarHoverColor'); + } } } diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 5c185afe2ff..c3b0aabf2a2 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -44,6 +44,11 @@ $themes: ( backgroundColor: $background-color, backgroundColorAlt: $background-color-alt, backgroundColorAlt2: $background-color-alt2, + scrollbarColor: rgba(100,100,100,.2), + scrollbarHoverColor: rgba(100,100,100,.4), + boxBackgroundColor: $box-background-color, + boxBackgroundHoverColor: $box-background-hover-color, + boxBorderColor: $box-border-color, headerBackgroundColor: $brand-primary, headerBorderColor: darken($brand-primary, 7%), headerInputBackgroundColor: darken($brand-primary, 8%), @@ -52,9 +57,6 @@ $themes: ( headerInputPlaceholderColor: lighten($brand-primary, 35%), listItemBackgroundColor: $background-color, listItemBackgroundHoverColor: $list-item-hover, - boxBackgroundColor: $box-background-color, - boxBackgroundHoverColor: $box-background-hover-color, - boxBorderColor: $box-border-color, groupingsActiveColor: darken($background-color-alt, 5%), disabledIconColor: $list-icon-color, headingColor: $gray-light, @@ -88,6 +90,8 @@ $themes: ( backgroundColor: #363636, backgroundColorAlt: #3d3d3d, backgroundColorAlt2: #222222, + scrollbarColor: #4d4d4d, + scrollbarHoverColor: #5f5f5f, boxBackgroundColor: #363636, boxBackgroundHoverColor: #3f3f3f, boxBorderColor: #2f2f2f,