☰

Change Standard Scrollbar

Changes default scrollbar to more simple one

  1. // ==UserScript==
  2. // @name         Change Standard Scrollbar
  3. // @namespace    https://github.com/RedCommander735
  4. // @version      1.1
  5. // @description  Changes default scrollbar to more simple one
  6. // @author       RedCommander735
  7. // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  8. // @grant        none
  9. // @match        *://*/*
  10. // @license      WTFPL
  11. // @grant GM_addStyle
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.  
  16.     var c = window.getComputedStyle( document.body ,null).getPropertyValue('background-color');
  17.  
  18.     var rgb = c.match(/\d+/g);
  19.     var color = 0;
  20.  
  21.     var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000);
  22.     console.log(o);
  23.     if(o > 125) {
  24.         color = 0;
  25.     }else{
  26.         color = 255;
  27.     }
  28.  
  29.         var css = (`
  30. ::-webkit-scrollbar {
  31.   width: 10px;
  32. }
  33. ::-webkit-scrollbar-track {
  34.   background: rgb(${color}, ${color}, ${color}, .3);
  35.   filter: brightness(.1);
  36. }
  37. /* Handle */
  38. ::-webkit-scrollbar-thumb {
  39.   background: rgb(${color}, ${color}, ${color}, .45);
  40.   filter: brightness(.25);
  41. }
  42. /* Handle on hover */
  43. ::-webkit-scrollbar-thumb:hover {
  44.   background: rgb(${color}, ${color}, ${color}, .65);
  45.   filter: brightness(.5);
  46. }
  47. `);
  48.  
  49.         if (typeof GM_addStyle !== "undefined") {
  50.             GM_addStyle(css);
  51.         } else {
  52.             var styleNode = document.createElement("style");
  53.             styleNode.appendChild(document.createTextNode(css));
  54.             (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  55.         }
  56. })();