1.0.42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/domtools.classes.domtools.ts

@@ -5,6 +5,7 @@ import { TViewport } from './domtools.breakpoints';
 
 import { Scroller } from './domtools.classes.scroller';
 import { delayForRandom } from '@pushrocks/smartdelay';
+import { setupGlobalTheme } from './domtools.css.theme';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
@@ -22,6 +23,10 @@ export class DomTools {
     if (!globalThis.deesDomTools) {
       globalThis.deesDomTools = new DomTools();
       domToolsInstance = globalThis.deesDomTools;
+
+      // lets setup theming
+      setupGlobalTheme(domToolsInstance);
+
       // lets make sure the dom is ready
       const readyStateChangedFunc = () => {
         if (document.readyState === 'interactive' || document.readyState === 'complete') {

ts/domtools.css.theme.ts

@@ -0,0 +1,27 @@
+import { DomTools } from "./domtools.classes.domtools";
+
+export const setupGlobalTheme = (domToolsInstance: DomTools) => {
+  const styles = `
+    /* width */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: #111; 
+    }
+    
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: #666; 
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #777; 
+    }
+`;
+
+  domToolsInstance.setGlobalStyles(styles);
+};