diff --git a/ts/domtools.css.theme.ts b/ts/domtools.css.theme.ts
index 0c9d513..07b3e36 100644
--- a/ts/domtools.css.theme.ts
+++ b/ts/domtools.css.theme.ts
@@ -1,26 +1,30 @@
 import { DomTools } from './domtools.classes.domtools';
 
+export const scrollBarStyles = `
+  /* 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; 
+  }
+`;
+
 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; 
-    }
+    ${scrollBarStyles}
 `;
 
   domToolsInstance.setGlobalStyles(styles);
diff --git a/ts/domtools.elementbasic.ts b/ts/domtools.elementbasic.ts
index 2ddf092..b72f667 100644
--- a/ts/domtools.elementbasic.ts
+++ b/ts/domtools.elementbasic.ts
@@ -1,13 +1,20 @@
 import * as plugins from './domtools.plugins';
 import { DomTools } from './domtools.classes.domtools';
+import { scrollBarStyles } from './domtools.css.theme';
 
 import { html } from 'lit-element';
-export const styles = html`
+
+/**
+ * styles to be included in every webcomponent
+ */
+export const styles = html`;
   <style>
     * {
       font-family: 'Roboto', sans-serif;
       box-sizing: border-box;
     }
+
+    ${scrollBarStyles}
   </style>
 `;