two themes

apps/common/main/resources/less/scroller.less

@@ -153,18 +153,7 @@
     }
 }
 
-textarea,.brouse-scroll {
-    @background-svg-fill: #999;
-    @background-svg-fill-hover: #404040;
-    overflow-y: auto;
 
-    scrollbar-color: @background-toolbar @canvas-background;  //mozila
-    /*explorer*/
-    scrollbar-track-color:  @canvas-background;
-    scrollbar-face-color: @background-toolbar-ie;
-    scrollbar-arrow-color:  @canvas-scroll-thumb-hover-ie;
-    scrollbar-base-color: @border-toolbar-ie;
-    /*------------------------------------*/
 
 .inline-svg-code( @code ) {
     @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
@@ -196,6 +185,19 @@ textarea,.brouse-scroll {
     background-image: @-inline-svg-url;
 }
 
+textarea,.brouse-scroll {
+    @background-svg-fill: #adadad;
+    @background-svg-fill-hover: #f7f7f7;
+    overflow: auto;
+
+    scrollbar-color: @background-toolbar @canvas-background;  //mozila
+    /*explorer*/
+    scrollbar-track-color:  @canvas-background;
+    scrollbar-face-color: @background-toolbar-ie;
+    scrollbar-arrow-color:  @canvas-scroll-thumb-hover-ie;
+    scrollbar-base-color: @border-toolbar-ie;
+    /*------------------------------------*/
+
     cursor: auto;
 
     &::-webkit-scrollbar {
@@ -217,25 +219,17 @@ textarea,.brouse-scroll {
         box-shadow: inset 0px 0px 0px 1px @border-toolbar;
         border-right: @scaled-one-px-value solid @canvas-background;
         -webkit-border-radius: 0.2ex;
-        background-position: center;
-        background-repeat: no-repeat;
         background-color: @background-toolbar;
-        -o-transition: background-color .2s linear;
-        -webkit-transition: background-color .2s linear;
-        -moz-transition: background-color .2s linear;
-        transition: background-color .2s linear;
         background-position: center;
         background-repeat: no-repeat;
 
         &:hover {
             background-color: @canvas-scroll-thumb-hover;
             box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
-
         }
 
         &:active {
             background-color: var(--canvas-scroll-thumb-pressed);
-            //box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
         }
     }
     &::-webkit-scrollbar-thumb {
@@ -245,27 +239,93 @@ textarea,.brouse-scroll {
                 .img-scroll-y(@background-svg-fill-hover, 5);
             }
         }
+        &:horizontal {
+            .img-scroll-x(@background-svg-fill,5);
+            &:hover {
+                .img-scroll-x(@background-svg-fill-hover, 5);
+            }
+        }
     }
 
     &::-webkit-scrollbar-button {
         height: 14px;
         width: 14px;
         border: @scaled-one-px-value solid @canvas-background;
-        border-width: 1px 1px 1px 0;
+        &:vertical {
-
+            border-left-width: 0;
-        &:vertical:decrement {
+            height: 15px;
+            &:decrement {
                 .arrow-top(@background-svg-fill);
                 &:hover {
                     .arrow-top(@background-svg-fill-hover);
                 }
             }
-        &:vertical:increment {
+            &:increment {
                 .arrow-down(@background-svg-fill);
                 &:hover {
                     .arrow-down(@background-svg-fill-hover);
                 }
             }
-        &:horizontal:decrement{
+        }
+        &:horizontal {
+            border-top-width: 0;
+            width: 15px;
+            &:decrement {
+                .arrow-left(@background-svg-fill);
+
+                &:hover {
+                    .arrow-left(@background-svg-fill-hover);
+                }
+            }
+            &:increment {
+                .arrow-right(@background-svg-fill);
+
+                &:hover {
+                    .arrow-right(@background-svg-fill-hover);
+                }
+            }
+        }
+    }
+}
+.theme-dark{
+    textarea,.brouse-scroll
+    {
+        @background-svg-fill: #999;
+        @background-svg-fill-hover: #404040;
+
+        &::-webkit-scrollbar-thumb {
+            &:vertical {
+                .img-scroll-y(@background-svg-fill,5);
+                &:hover {
+                    .img-scroll-y(@background-svg-fill-hover, 5);
+                }
+            }
+            &:horizontal {
+                .img-scroll-x(@background-svg-fill,5);
+                &:hover {
+                    .img-scroll-x(@background-svg-fill-hover, 5);
+                }
+            }
+        }
+
+        &::-webkit-scrollbar-button {
+            &:vertical {
+                &:decrement {
+                    .arrow-top(@background-svg-fill);
+                    &:hover {
+                        .arrow-top(@background-svg-fill-hover);
+                    }
+                }
+                &:increment {
+                    .arrow-down(@background-svg-fill);
+                    &:hover {
+                        .arrow-down(@background-svg-fill-hover);
+                    }
+                }
+            }
+
+            &:horizontal {
+                &:decrement {
                     .arrow-left(@background-svg-fill);
                     &:hover {
                         .arrow-left(@background-svg-fill-hover);
@@ -273,10 +333,14 @@ textarea,.brouse-scroll {
                 }
                 &:horizontal:increment {
                     .arrow-right(@background-svg-fill);
+
                     &:hover {
                         .arrow-right(@background-svg-fill-hover);
                     }
                 }
             }
         }
+    }
+
+}