diff --git a/docs b/docs
index aa9a7dbb..4cb684c4 160000
--- a/docs
+++ b/docs
@@ -1 +1 @@
-Subproject commit aa9a7dbbf77e6aadce3149ab34b435acda023bcc
+Subproject commit 4cb684c450d1c8e076252d7dbcab70291eff7fe8
diff --git a/formats/select b/formats/select
index d3d5939d..0b36550a 160000
--- a/formats/select
+++ b/formats/select
@@ -1 +1 @@
-Subproject commit d3d5939d43d9b7fba4d020c726458e851aa329e5
+Subproject commit 0b36550a49378bb5352133628817db9163c1b308
diff --git a/packages/angular b/packages/angular
index 72b0b247..b32d5e64 160000
--- a/packages/angular
+++ b/packages/angular
@@ -1 +1 @@
-Subproject commit 72b0b24772fa23c3873d0d422f5a5aa65578cb6e
+Subproject commit b32d5e64e7fac3078a9c79fba320493a2d6b67d8
diff --git a/packages/react b/packages/react
index 8e70bc73..55e113a9 160000
--- a/packages/react
+++ b/packages/react
@@ -1 +1 @@
-Subproject commit 8e70bc73d8085b3c5755279d6883d16d720657c9
+Subproject commit 55e113a9805cb6de881d48f856c551090f6a71f5
diff --git a/packages/svelte b/packages/svelte
index a6d718c3..3eab2a65 160000
--- a/packages/svelte
+++ b/packages/svelte
@@ -1 +1 @@
-Subproject commit a6d718c393b5179bd50c96e043c5ad551ffd1834
+Subproject commit 3eab2a65b7ab9eb28f5ee8be1f09659c4f59215d
diff --git a/packages/vue2 b/packages/vue2
index ddb1ba6d..77886886 160000
--- a/packages/vue2
+++ b/packages/vue2
@@ -1 +1 @@
-Subproject commit ddb1ba6d93389932aeb74cfe5196ba449d1cab6b
+Subproject commit 77886886e20e7c8ee2ec0a6e99a20a5b36bbc58a
diff --git a/packages/vue3 b/packages/vue3
index d7367995..dd9b9554 160000
--- a/packages/vue3
+++ b/packages/vue3
@@ -1 +1 @@
-Subproject commit d73679955e4c21c45168526f131afc3bfde7f641
+Subproject commit dd9b95545e6dd30266810372fdc83363988365e4
diff --git a/src/components/revoGrid/styles/revo-grid.common.dark.scss b/src/components/revoGrid/styles/revo-grid.common.dark.scss
index af31729b..a6a58c6b 100644
--- a/src/components/revoGrid/styles/revo-grid.common.dark.scss
+++ b/src/components/revoGrid/styles/revo-grid.common.dark.scss
@@ -1,33 +1,27 @@
 @mixin revoGridDark() {
-  $font-color: #d8d8d8;
-  color: $font-color;
-
-  $cell-border-color: #404040;
-  $cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset;
-  $focused-header: rgba(#7394a0, 0.15);
-  $el-color: #28272b;
+  color: $font-color-dark;
 
   .rowHeaders {
-    background-color: rgba($el-color, 0.8);
+    background-color: rgba($el-color-dark, 0.8);
     revogr-data .rgCell {
-      color: rgba($font-color, 0.8);
+      color: rgba($font-color-dark, 0.8);
     }
   }
 
   revogr-edit {
-    background-color: $el-color;
+    background-color: $el-color-dark;
   }
 
   revogr-header {
     .header-rgRow {
       &.group {
-        $shadow-bottom: 0 -1px 0 0 $cell-border-color inset;
+        $shadow-bottom: 0 -1px 0 0 $cell-border-color-dark inset;
         box-shadow: $shadow-bottom;
       }
 
       &:not(.group) {
-        $shadow-bottom: 0 -1px 0 0 $cell-border-color inset;
-        $shadow-top: 0 -1px 0 0 $cell-border-color;
+        $shadow-bottom: 0 -1px 0 0 $cell-border-color-dark inset;
+        $shadow-top: 0 -1px 0 0 $cell-border-color-dark;
         box-shadow: $shadow-top, $shadow-bottom;
       }
     }
@@ -35,39 +29,39 @@
     .rgHeaderCell {
       &.sortable {
         &:hover {
-          background-color: rgba($cell-border-color, 0.5);
+          background-color: rgba($cell-border-color-dark, 0.5);
         }
       }
       &.focused-cell {
-        background: $focused-header;
+        background: $focused-header-dark;
       }
     }
   }
 
   .footer-wrapper revogr-data {
-    box-shadow: 0 -1px 0 $cell-border-color;
+    box-shadow: 0 -1px 0 $cell-border-color-dark;
   }
 
   revogr-data {
     .rgCell {
-      color: rgba($font-color, 0.9);
+      color: rgba($font-color-dark, 0.9);
     }
 
     .rgRow {
-      box-shadow: $cell-shadow-cell;
+      box-shadow: $cell-shadow-cell-dark;
       &.focused-rgRow {
-        background-color: $focused-header;
+        background-color: $focused-header-dark;
       }
     }
   }
 
   revogr-viewport-scroll {
     &.colPinStart {
-      box-shadow: -1px 0 0 $cell-border-color inset;
+      box-shadow: -1px 0 0 $cell-border-color-dark inset;
     }
 
     &.colPinEnd {
-      box-shadow: -1px 0 0 $cell-border-color;
+      box-shadow: -1px 0 0 $cell-border-color-dark;
     }
   }
 }
diff --git a/src/global/_buttons.scss b/src/global/_buttons.scss
index 83dcd624..77377c2e 100644
--- a/src/global/_buttons.scss
+++ b/src/global/_buttons.scss
@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: $h;
   line-height: $h;
   padding: 0 15px;
@@ -17,13 +17,11 @@
   &.green {
     $bg: #009037;
     background-color: $bg;
-    border: 1px solid darken($color: $bg, $amount: 5);
   }
 
   &.red {
     $bg: #E0662E;
     background-color: $bg;
-    border: 1px solid darken($color: $bg, $amount: 5);
   }
 
   &:disabled,
@@ -32,8 +30,8 @@
     filter: opacity(0.35) !important;
   }
 
-  &.light {
-    $br-color: #cedefa;
+  &.outline {
+    $br-color: #dbdbdb;
     $color: #000;
     border: 1px solid $br-color;
     line-height: $h - 2;
@@ -41,7 +39,13 @@
     color: $color;
     box-shadow: none;
   }
-
-  
-  
 }
+
+revo-grid[theme^='dark'] {
+  .revo-button {
+    &.outline {
+      border: 1px solid $cell-border-color-dark;
+      color: $font-color-dark;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/global/_colors.dark.scss b/src/global/_colors.dark.scss
new file mode 100644
index 00000000..c517bace
--- /dev/null
+++ b/src/global/_colors.dark.scss
@@ -0,0 +1,5 @@
+$font-color-dark: #d8d8d8;
+$cell-border-color-dark: #404040;
+$cell-shadow-cell-dark: 0 -1px 0 0 $cell-border-color-dark inset;
+$focused-header-dark: rgba(#7394a0, 0.15);
+$el-color-dark: #28272b;
\ No newline at end of file
diff --git a/src/plugins/filter/filter.panel.tsx b/src/plugins/filter/filter.panel.tsx
index bc4b0083..bc4c6673 100644
--- a/src/plugins/filter/filter.panel.tsx
+++ b/src/plugins/filter/filter.panel.tsx
@@ -487,7 +487,7 @@ export class FilterPanel {
             <button
               id="revo-button-reset"
               aria-label="reset"
-              class="revo-button light"
+              class="revo-button outline"
               onClick={() => this.onReset()}
             >
               {capts.reset}
diff --git a/src/plugins/filter/filter.style.scss b/src/plugins/filter/filter.style.scss
index 3292170f..25c4388a 100644
--- a/src/plugins/filter/filter.style.scss
+++ b/src/plugins/filter/filter.style.scss
@@ -205,3 +205,18 @@ revogr-filter-panel {
   justify-content: space-between;
   align-items: center;
 }
+
+revo-grid[theme^='dark'] {
+  revogr-filter-panel {
+    background-color: $el-color-dark;
+
+    .add-filter-divider {
+      border-bottom-color: $el-color-dark;
+    }
+
+    input[type=text] {
+      background-color: $font-color-dark;
+      color: black;
+    }
+  }
+}
\ No newline at end of file
diff --git a/stencil.config.ts b/stencil.config.ts
index fd193da0..3a89577e 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -62,6 +62,7 @@ export const config: Config = {
     sass({
       injectGlobalPaths: [
         'src/global/_colors.scss',
+        'src/global/_colors.dark.scss',
         'src/global/_icons.scss',
         'src/global/_mixins.scss',
         'src/global/_buttons.scss',