diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less
index 2cc12151a..af315d3db 100644
--- a/apps/common/main/resources/less/scroller.less
+++ b/apps/common/main/resources/less/scroller.less
@@ -153,10 +153,42 @@
     }
 }
 
+
+
+.inline-svg-code( @code ) {
+    @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
+    @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
+    @-inline-svg-url: ~"url('@{-inline-svg-code}')";
+}
+.img-scroll-y(@color,@width) {
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{width}px"><rect width = "@{width}"  height = "1" x="0" y="0"/><rect width = "@{width}"  height = "1" x="0" y="2"/><rect width = "@{width}"  height = "1" x="0" y="4"/><rect width = "@{width}"  height = "1" x="0" y="6"/><rect width = "@{width}"  height = "1" x="0" y="8"/><rect width = "@{width}"  height = "1" x="0" y="10"/><rect width = "@{width}"  height = "1" x="0" y="12"/></svg>');
+    background-image: @-inline-svg-url;
+}
+.img-scroll-x(@color,@height) {
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{height}px"><rect width = "@{height}"  height = "1" y="0" x="0"/><rect width = "@{height}"  height = "1" y="0" x="2"/><rect width = "@{height}"  height = "1" y="0" x="4"/><rect width = "@{height}"  height = "1" y="0" x="6"/><rect width = "@{height}"  height = "1" y="0" x="8"/><rect width = "@{height}"  height = "1" y="0" x="10"/><rect width = "@{height}"  height = "1" y="0" x="12"/></svg>');
+    background-image: @-inline-svg-url;
+}
+.arrow-top(@color){
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,0 0,4 8,4"/></svg>');
+    background-image: @-inline-svg-url;
+}
+.arrow-down(@color){
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,4 0,0 8,0"/></svg>');
+    background-image: @-inline-svg-url;
+}
+.arrow-right(@color){
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,0 0,8 4,4"/></svg>');
+    background-image: @-inline-svg-url;
+}
+.arrow-left(@color){
+    .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,4 4,8 4,0"/></svg>');
+    background-image: @-inline-svg-url;
+}
+
 textarea,.brouse-scroll {
-    @background-svg-fill: #999;
-    @background-svg-fill-hover: #404040;
-    overflow-y: auto;
+    @background-svg-fill: #adadad;
+    @background-svg-fill-hover: #f7f7f7;
+    overflow: auto;
 
     scrollbar-color: @background-toolbar @canvas-background;  //mozila
     /*explorer*/
@@ -166,36 +198,6 @@ textarea,.brouse-scroll {
     scrollbar-base-color: @border-toolbar-ie;
     /*------------------------------------*/
 
-    .inline-svg-code( @code ) {
-        @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
-        @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
-        @-inline-svg-url: ~"url('@{-inline-svg-code}')";
-    }
-    .img-scroll-y(@color,@width) {
-       .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{width}px"><rect width = "@{width}"  height = "1" x="0" y="0"/><rect width = "@{width}"  height = "1" x="0" y="2"/><rect width = "@{width}"  height = "1" x="0" y="4"/><rect width = "@{width}"  height = "1" x="0" y="6"/><rect width = "@{width}"  height = "1" x="0" y="8"/><rect width = "@{width}"  height = "1" x="0" y="10"/><rect width = "@{width}"  height = "1" x="0" y="12"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-    .img-scroll-x(@color,@height) {
-        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{height}px"><rect width = "@{height}"  height = "1" y="0" x="0"/><rect width = "@{height}"  height = "1" y="0" x="2"/><rect width = "@{height}"  height = "1" y="0" x="4"/><rect width = "@{height}"  height = "1" y="0" x="6"/><rect width = "@{height}"  height = "1" y="0" x="8"/><rect width = "@{height}"  height = "1" y="0" x="10"/><rect width = "@{height}"  height = "1" y="0" x="12"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-    .arrow-top(@color){
-        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,0 0,4 8,4"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-    .arrow-down(@color){
-        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,4 0,0 8,0"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-    .arrow-right(@color){
-        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,0 0,8 4,4"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-    .arrow-left(@color){
-        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,4 4,8 4,0"/></svg>');
-        background-image: @-inline-svg-url;
-    }
-
     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,38 +239,108 @@ 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;
+            height: 15px;
+            &: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 {
+            border-top-width: 0;
+            width: 15px;
+            &:decrement {
+                .arrow-left(@background-svg-fill);
 
-        &:vertical:decrement {
-            .arrow-top(@background-svg-fill);
-            &:hover {
-                .arrow-top(@background-svg-fill-hover);
+                &:hover {
+                    .arrow-left(@background-svg-fill-hover);
+                }
             }
-        }
-        &:vertical: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);
-            }
-        }
-        &:horizontal:increment{
-            .arrow-right(@background-svg-fill);
-            &:hover {
-                .arrow-right(@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);
+                    }
+                }
+                &:horizontal:increment {
+                    .arrow-right(@background-svg-fill);
+
+                    &:hover {
+                        .arrow-right(@background-svg-fill-hover);
+                    }
+                }
+            }
+        }
+    }
+
+}