diff --git a/src/js/orbit-label.js b/src/js/orbit-label.js
index e835dc3..9ef9f33 100644
--- a/src/js/orbit-label.js
+++ b/src/js/orbit-label.js
@@ -26,17 +26,15 @@ export class OrbitLabel extends HTMLElement {
         svg * {
           pointer-events: stroke;
         }
-        text {
-          font-size: inherit;
-        }
+        
         path {
           fill: transparent;
-          stroke: var(--color, transparent);
+          stroke: var(--o-label-color);
           transition: stroke 0.3s;
         }
        
         :host(:hover) path {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-label-color, var(--o-label-color));
           
         }
       
diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js
index b1414f2..70e0858 100644
--- a/src/js/orbit-progress.js
+++ b/src/js/orbit-progress.js
@@ -21,14 +21,14 @@ export class OrbitProgress extends HTMLElement {
         }
         .progress-bar {
           fill: transparent;
-          stroke: var(--color, var(--o-cyan-light));
+          stroke: var(--o-progress-color);
           transition: stroke 0.3s;
         }
         .progress-bg {
-          stroke: var(--bgcolor, transparent);
+          stroke: var(--o-bg-color, transparent);
         }
         :host(:hover) .progress-bar {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-progress-color, var(--o-progress-color));
           
         }
       </style>
@@ -122,7 +122,7 @@ export class OrbitProgress extends HTMLElement {
       0
     );
     const shape = this.getAttribute('shape') || 'none';
-    const progressBarColor = this.getAttribute('bar-color') || 'var(--o-cyan-light)';
+    const progressBarColor = this.getAttribute('bar-color');
     const progressBgColor = this.getAttribute('bgcolor')  || 'transparent';
     const strokeWidth = parseFloat(
       getComputedStyle(this).getPropertyValue('stroke-width') || 1
diff --git a/src/js/orbit-sector.js b/src/js/orbit-sector.js
index d578a99..3e3e493 100644
--- a/src/js/orbit-sector.js
+++ b/src/js/orbit-sector.js
@@ -14,12 +14,12 @@
           pointer-events: stroke;
         }
        .sector {
-          stroke: var(--color, var(--o-cyan-light));
+          stroke: var(--o-sector-color, var(--o-cyan-light));
           transition: stroke 0.3s;
         }
         
         :host(:hover) .sector {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-sector-color, var(--o-sector-color));
           
         }
    </style>
@@ -76,7 +76,7 @@
      const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue('r') || 0);
      const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0.001);
      const shape = this.getAttribute('shape') || 'none';
-     const sectorColor = this.getAttribute('sector-color') || '#00ff00';
+     const sectorColor = this.getAttribute('sector-color');
      const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
      const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue('stroke-width') || 1);
      const strokeWithPercentage = ((strokeWidth / 2) * 100) / orbitRadius / 2;
diff --git a/src/orbit.scss b/src/orbit.scss
index 4b842d9..71e6f18 100644
--- a/src/orbit.scss
+++ b/src/orbit.scss
@@ -23,11 +23,4 @@
     ORBIT THEME
 ===================*/
 @import './scss/_color-theme.scss';
-@import './scss/_orbit-zone_theme.scss';
-@import './scss/_orbit-class_theme.scss';
-@import './scss/_satellite_theme.scss';
-@import './scss/_sector_theme.scss';
-@import './scss/_progress_theme.scss';
-@import './scss/_spoke_theme.scss';
-@import './scss/_segment_theme.scss';
-@import './scss/_label_theme.scss';
\ No newline at end of file
+@import './scss/_themes.scss';
\ No newline at end of file
diff --git a/src/scss/_label_theme.scss b/src/scss/_label_theme.scss
deleted file mode 100644
index 145b746..0000000
--- a/src/scss/_label_theme.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use './variables' as *;
diff --git a/src/scss/_orbit-class_theme.scss b/src/scss/_orbit-class_theme.scss
deleted file mode 100644
index 309971d..0000000
--- a/src/scss/_orbit-class_theme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-.orbit, [class*='orbit-']:not(.orbit-zone) {
-  border: 1px solid transparent;
-}
diff --git a/src/scss/_orbit-zone.scss b/src/scss/_orbit-zone.scss
index 4730eff..2735d2b 100644
--- a/src/scss/_orbit-zone.scss
+++ b/src/scss/_orbit-zone.scss
@@ -19,9 +19,10 @@
   border: none; 
 }
 
+/* Disabled nested adjusment size. When nested orbit-zone takes its length from the diameter of satellite's orbit 
 .satellite > .orbit-zone {
-   /* Disabled nested adjusment size. When nested orbit-zone takes its length from the diameter of satellite's orbit 
   --o-length: var(--o-diameter);
   width: var(--o-length);
-  height: auto;*/
+  height: auto;
 }
+*/
\ No newline at end of file
diff --git a/src/scss/_orbit-zone_theme.scss b/src/scss/_orbit-zone_theme.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/scss/_progress_theme.scss b/src/scss/_progress_theme.scss
deleted file mode 100644
index 8b13789..0000000
--- a/src/scss/_progress_theme.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/scss/_satellite_theme.scss b/src/scss/_satellite_theme.scss
deleted file mode 100644
index 0ec9417..0000000
--- a/src/scss/_satellite_theme.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-.satellite {
-  background-color: var(--o-color-white);
-  border: 1px solid var(--o-gray);
-}
-
diff --git a/src/scss/_sector_theme.scss b/src/scss/_sector_theme.scss
deleted file mode 100644
index 139597f..0000000
--- a/src/scss/_sector_theme.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/src/scss/_segment_theme.scss b/src/scss/_segment_theme.scss
deleted file mode 100644
index 8b1550a..0000000
--- a/src/scss/_segment_theme.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.segment {
-  border: none;
-  background: var(--o-gray-light);
-}
diff --git a/src/scss/_spoke_theme.scss b/src/scss/_spoke_theme.scss
deleted file mode 100644
index 5668d76..0000000
--- a/src/scss/_spoke_theme.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.spoke {
-  border: none;
-  background: var(--o-gray-light);
-}
diff --git a/src/scss/_support.scss b/src/scss/_support.scss
index 13be9c5..b83cdfc 100644
--- a/src/scss/_support.scss
+++ b/src/scss/_support.scss
@@ -48,7 +48,7 @@
 
 /* orbit-zone checks */
 .orbit-zone:has(>*:not(.orbit, [class*='orbit-'])) {
-  border: 3px dotted red!important;
+  border: 2px dotted red!important;
 }
 .orbit-zone:has(>*:not(.orbit, [class*='orbit-'])) > * {
   filter:grayscale(1) opacity(0.2)
diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
new file mode 100644
index 0000000..112e2b0
--- /dev/null
+++ b/src/scss/_themes.scss
@@ -0,0 +1,141 @@
+/* default theme */
+
+.orbit-zone {
+  background: none;
+  border: none; 
+}
+
+.orbit, [class*='orbit-']:not(.orbit-zone) {
+  border: 1px solid transparent;
+}
+
+.satellite {
+  background-color: transparent;
+  border: 1px solid currentcolor;
+}
+
+.spoke {
+  border: none;
+  background: currentcolor;
+}
+
+.segment {
+  border: none;
+  background: currentcolor;
+}
+
+o-progress {
+  --o-progress-color: currentcolor;
+  --o-hover-progress-color: currentcolor;
+  --o-bg-color: transparent;
+}
+
+o-sector {
+  --o-sector-color: currentcolor;
+  --o-hover-sector-color: currentcolor;
+}
+
+o-label {
+  --o-label-color: transparent;
+  --o-hover-label-color: transparent;
+  color: currentColor;
+}
+
+/* Dev theme based on default*/
+.dev-orbit.orbit-zone {
+    background: none;
+    border: 0.2px dashed var(--o-red-light); 
+  }
+  
+.dev-orbit {
+  .orbit-zone {
+    background: none;
+    border: 0.2px dashed var(--o-red-light); 
+  }
+  
+  .orbit, [class*='orbit-']:not(.orbit-zone) {
+    border: 0.2px solid var(--o-red-light);
+  }
+  
+  .satellite {
+    background-color: transparent;
+    border: 1px solid currentColor;
+  }
+  
+  .spoke {
+    border: none;
+    background: currentColor;
+  }
+  
+  .segment {
+    border: none;
+    background: currentColor;
+  }
+  
+  o-progress {
+    --o-progress-color: currentColor;
+    --o-hover-progress-color: currentColor;
+    --o-bg-color: transparent;
+  }
+  
+  o-sector {
+    --o-sector-color: currentColor;
+    --o-hover-sector-color: currentColor;
+  }
+  
+  o-label {
+    --o-label-color: transparent;
+    --o-hover-label-color: transparent;
+    color: currentcolor;
+  }
+}
+
+/* cyan theme based on default*/
+
+.theme-cyan {
+.orbit-zone {
+  background: none;
+  border: none; 
+}
+
+.orbit, [class*='orbit-']:not(.orbit-zone) {
+  border: 1px solid transparent;
+}
+
+.satellite {
+  background-color: transparent;
+  border: 1px solid var(--o-cyan);
+}
+
+.spoke {
+  border: none;
+  background: var(--o-cyan);
+}
+
+.segment {
+  border: none;
+  background: var(--o-cyan);
+}
+
+o-progress {
+  --o-progress-color: var(--o-cyan);
+  --o-hover-progress-color: var(--o-cyan);
+  --o-bg-color: transparent;
+}
+
+o-sector {
+  --o-sector-color: var(--o-cyan);
+  --o-hover-sector-color: var(--o-cyan);
+}
+
+o-label {
+  --o-label-color: transparent;
+  --o-hover-label-color: transparent;
+  color: var(--o-cyan);
+}
+}
+
+
+
+
+
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 84092fa..1ac1951 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -218,7 +218,3 @@ o-progress.rounded,o-label.rounded {
   </filter>\
   </svg>#fancy-goo');
 }
-
-.dev-orbit * {
-  border: 0.2px solid var(--o-cyan) !important;
-}