diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
index 3fd0f52f8..08c9b2b18 100644
--- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
+++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
@@ -8,51 +8,51 @@ $light-gray: #999;
 $inactive-color: #826217;
 
 $dark-paginator: paginator-theme(
-  $text-color: $my-secondary,
-  $background-color: $my-primary,
-  $border-color: $my-secondary
+    $text-color: $my-secondary,
+    $background-color: $my-primary,
+    $border-color: $my-secondary,
 );
 
 $dark-button: flat-icon-button-theme(
-  $foreground: $my-secondary,
-  $hover-foreground: $dark-gray,
-  $hover-background: $my-secondary,
-  $focus-foreground: $dark-gray,
-  $focus-background: $my-secondary,
-  $border-color: $my-secondary,
-  $focus-border-color: $my-secondary,
-  $disabled-foreground: $inactive-color
+    $foreground: $my-secondary,
+    $hover-foreground: $dark-gray,
+    $hover-background: $my-secondary,
+    $focus-foreground: $dark-gray,
+    $focus-background: $my-secondary,
+    $border-color: $my-secondary,
+    $focus-border-color: $my-secondary,
+    $disabled-foreground: $inactive-color,
 );
 
 $dark-select: select-theme(
-  $toggle-button-background: $my-primary,
-  $toggle-button-foreground: $inactive-color,
-  $toggle-button-foreground-filled: $inactive-color,
-  $toggle-button-foreground-focus: $inactive-color,
-  $toggle-button-background-focus--border: $my-primary,
+    $toggle-button-background: $my-primary,
+    $toggle-button-foreground: $inactive-color,
+    $toggle-button-foreground-filled: $inactive-color,
+    $toggle-button-foreground-focus: $inactive-color,
+    $toggle-button-background-focus--border: $my-primary,
 );
 
 $dark-input-group: input-group-theme(
-  $filled-text-color: $my-secondary,
-  $idle-text-color: $my-secondary,
-  $filled-text-hover-color: $my-secondary,
-  $focused-text-color: $my-secondary,
-  $border-color: darken($inactive-color, 10%),
-  $focused-border-color: $my-secondary,
-  $input-suffix-color: $my-secondary,
+    $filled-text-color: $my-secondary,
+    $idle-text-color: $my-secondary,
+    $filled-text-hover-color: $my-secondary,
+    $focused-text-color: $my-secondary,
+    $border-color: darken($inactive-color, 10%),
+    $focused-border-color: $my-secondary,
+    $input-suffix-color: $my-secondary,
 );
 
 $dark-drop-down-theme: drop-down-theme(
-  $background-color: $my-primary,
-  $item-text-color: $my-secondary,
-  $selected-item-background: $my-secondary,
-  $selected-item-text-color: $dark-gray,
-  $focused-item-background: $my-secondary,
-  $focused-item-text-color: $dark-gray,
-  $selected-focus-item-background: $my-secondary,
-  $selected-focus-item-text-color: $dark-gray,
-  $selected-hover-item-background: $my-secondary,
-  $selected-hover-item-text-color: $dark-gray
+    $background-color: $my-primary,
+    $item-text-color: $my-secondary,
+    $selected-item-background: $my-secondary,
+    $selected-item-text-color: $dark-gray,
+    $focused-item-background: $my-secondary,
+    $focused-item-text-color: $dark-gray,
+    $selected-focus-item-background: $my-secondary,
+    $selected-focus-item-text-color: $dark-gray,
+    $selected-hover-item-background: $my-secondary,
+    $selected-hover-item-text-color: $dark-gray,
 );
 
 igx-grid {
diff --git a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
index f5ee64d53..a497ae343 100644
--- a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
+++ b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
@@ -1,60 +1,16 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow,
-  $excel-filtering-header-foreground: $black,
-  $excel-filtering-subheader-foreground: $black,
-  $excel-filtering-actions-foreground: #006400,
-  $excel-filtering-actions-hover-foreground: $yellow,
-  $excel-filtering-actions-disabled-foreground: var(--ig-gray-500)
+    $background: $background,
+    $foreground: $foreground,
+    $accent-color: $accent,
 );
 
-$custom-button: contained-button-theme(
-  $background: $black,
-  $foreground: $yellow,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$flat-custom-button: flat-button-theme(
-  $foreground: $black,
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: $yellow,
-  $idle-text-color: $black,
-  $focused-text-color: $black,
-  $filled-text-color: $black
-);
-
-$custom-list: list-theme(
-  $background: $yellow
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: $black,
-  $fill-color: $black,
-  $tick-color: $yellow,
-  $label-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: $yellow,
-  $item-text-color: $black,
-  $hover-item-background: $black,
-  $hover-item-text-color: $yellow
-);
-
-:host {
+:host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-    @include tokens($custom-input-group);
-    @include tokens($custom-checkbox);
-    @include tokens($custom-list);
-    @include tokens($custom-button);
-    @include tokens($flat-custom-button);
 }
diff --git a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss
index af1863b2d..d4e2f2635 100644
--- a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss
+++ b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss
@@ -7,28 +7,31 @@ $light-gray: #f8f8f8;
 $black: #222;
 
 $custom-theme: grid-theme(
-  $group-row-background: $gray,
-  $group-row-selected-background: #383838,
-  $group-label-column-name-text: $light-gray,
-  $group-label-icon: $yellow,
-  $group-label-text: $light-gray,
-  $group-count-background: $yellow,
-  $group-count-text-color: $black,
-  $expand-icon-color: $yellow,
-  $expand-icon-hover-color: rgb(223, 181, 13),
-  $cell-active-border-color: $yellow,
-  $row-selected-background: #fff6d3,
-  $row-selected-text-color: $black,
-  $drop-indicator-color: $yellow
+    $group-row-background: $gray,
+    $group-row-selected-background: #383838,
+    $group-label-column-name-text: $light-gray,
+    $group-label-icon: $yellow,
+    $group-label-text: $light-gray,
+    $group-count-background: $yellow,
+    $group-count-text-color: $black,
+    $expand-icon-color: $yellow,
+    $expand-icon-hover-color: rgb(223, 181, 13),
+    $cell-active-border-color: $yellow,
+    $row-selected-background: #fff6d3,
+    $row-selected-text-color: $black,
+    $drop-indicator-color: $yellow,
 );
 
 $custom-chips-theme: chip-theme(
-  $background: $gray,
-  $text-color: $light-gray,
-  $hover-text-color: #e7e7e7
+    $background: $gray,
+    $text-color: $light-gray,
+    $hover-text-color: #e7e7e7,
 );
 
-:host {
+:host ::ng-deep {
     @include tokens($custom-theme);
-    @include tokens($custom-chips-theme);
+
+    igx-chip {
+        @include tokens($custom-chips-theme);
+    }
 }
diff --git a/src/app/grid/grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component.scss b/src/app/grid/grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component.scss
index bde7ba94a..0ade0da84 100644
--- a/src/app/grid/grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component.scss
+++ b/src/app/grid/grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component.scss
@@ -16,8 +16,8 @@ $custom-theme: grid-summary-theme(
     ::ng-deep {
         igx-grid-summary-row {
             --summaries-patch-background: #{$summaries-background};
-        }
 
-        @include tokens($custom-theme);
+            @include tokens($custom-theme);
+        }
     }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component.scss
index fe0c8d4ad..f795053af 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component.scss
@@ -1,28 +1,44 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$background: #292826;
+$foreground: #ffcd0f;
+
 $custom-column-actions-theme: column-actions-theme(
-  $background-color: #292826,
-  $title-color: #ffcd0f
+    $background-color: $background,
+    $title-color: $foreground,
+);
+
+$custom-flat-button: flat-button-theme(
+    $foreground: $foreground,
 );
 
-$custom-button: flat-button-theme(
-  $foreground: #ffcd0f,
-  $disabled-foreground: #292826
+$custom-checkbox-theme: checkbox-theme(
+    $label-color: $foreground,
+    $empty-color: $foreground,
+    $fill-color: $foreground,
+    $tick-color: $background,
 );
 
-$dark-checkbox-theme: checkbox-theme(
-  $label-color: #ffcd0f,
-  $empty-color: #ffcd0f,
-  $fill-color: #ffcd0f,
-  $tick-color: #292826
+$input-group-theme: input-group-theme(
+    $box-background: $background,
+    $idle-bottom-line-color: $foreground,
 );
 
 :host ::ng-deep {
-  @include tokens($custom-column-actions-theme);
+    .igx-column-actions {
+        @include tokens($custom-column-actions-theme);
+
+        igx-input-group {
+            @include tokens($input-group-theme);
+        }
+
+        igx-checkbox {
+            @include tokens($custom-checkbox-theme);
+        }
 
-  .igx-column-actions {
-    @include tokens($custom-button);
-    @include tokens($dark-checkbox-theme);
-  }
+        .igx-button--flat {
+            @include tokens($custom-flat-button);
+        }
+    }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
index 4a24513bd..a497ae343 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
@@ -1,71 +1,16 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow
-);
-
-$custom-flat-button: flat-button-theme(
-  $background: $yellow,
-  $foreground: $black,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-contained-button: contained-button-theme(
-  $background: $black,
-  $foreground: $yellow,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $item-background: $yellow,
-  $item-text-color: $black,
-  $item-hover-background: $black,
-  $item-hover-text-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: $yellow,
-  $idle-text-color: $black,
-  $focused-text-color: $black,
-  $filled-text-color: $black
-);
-
-$custom-list: list-theme(
-  $background: $yellow
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: $black,
-  $fill-color: $black,
-  $tick-color: $yellow,
-  $label-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: $yellow,
-  $selected-item-background: lighten($black, 10%),
-  $selected-focus-item-background: lighten($black, 15%),
-  $item-text-color: $black,
-  $hover-item-background: $black,
-  $hover-item-text-color: $yellow
+    $background: $background,
+    $foreground: $foreground,
+    $accent-color: $accent,
 );
 
 :host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-    @include tokens($custom-input-group);
-    @include tokens($custom-checkbox);
-    @include tokens($custom-list);
-    @include tokens($custom-flat-button);
-    @include tokens($custom-button-group);
-
-    .igx-excel-filter__apply {
-      @include tokens($custom-contained-button);
-    }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
index 347680c32..857f46d41 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
@@ -8,61 +8,60 @@ $light-gray: #999;
 $inactive-color: #826217;
 
 $dark-paginator: paginator-theme(
-  $text-color: $my-secondary,
-  $background-color: $my-primary,
-  $border-color: $my-secondary
+    $text-color: $my-secondary,
+    $background-color: $my-primary,
+    $border-color: $my-secondary,
 );
 
 $dark-button: flat-icon-button-theme(
-  $foreground: $my-secondary,
-  $hover-foreground: $dark-gray,
-  $hover-background: $my-secondary,
-  $focus-foreground: $dark-gray,
-  $focus-background: $my-secondary,
-  $border-color: $my-secondary,
-  $focus-border-color: $my-secondary,
-  $disabled-foreground: $inactive-color
+    $foreground: $my-secondary,
+    $hover-foreground: $dark-gray,
+    $hover-background: $my-secondary,
+    $focus-foreground: $dark-gray,
+    $focus-background: $my-secondary,
+    $border-color: $my-secondary,
+    $focus-border-color: $my-secondary,
+    $disabled-foreground: $inactive-color,
 );
 
 $dark-select: select-theme(
-  $toggle-button-background: $my-primary,
-  $toggle-button-foreground: $inactive-color,
-  $toggle-button-foreground-filled: $inactive-color,
-  $toggle-button-foreground-focus: $inactive-color,
-  $toggle-button-background-focus--border: $my-primary,
+    $toggle-button-background: $my-primary,
+    $toggle-button-foreground: $inactive-color,
+    $toggle-button-foreground-filled: $inactive-color,
+    $toggle-button-foreground-focus: $inactive-color,
+    $toggle-button-background-focus--border: $my-primary,
 );
 
 $dark-input-group: input-group-theme(
-  $filled-text-color: $my-secondary,
-  $idle-text-color: $my-secondary,
-  $filled-text-hover-color: $my-secondary,
-  $focused-text-color: $my-secondary,
-  $border-color: darken($inactive-color, 10%),
-  $focused-border-color: $my-secondary,
-  $input-suffix-color: $my-secondary,
+    $filled-text-color: $my-secondary,
+    $idle-text-color: $my-secondary,
+    $filled-text-hover-color: $my-secondary,
+    $focused-text-color: $my-secondary,
+    $border-color: darken($inactive-color, 10%),
+    $focused-border-color: $my-secondary,
+    $input-suffix-color: $my-secondary,
 );
 
 $dark-drop-down-theme: drop-down-theme(
-  $background-color: $my-primary,
-  $item-text-color: $my-secondary,
-  $selected-item-background: $my-secondary,
-  $selected-item-text-color: $dark-gray,
-  $focused-item-background: $my-secondary,
-  $focused-item-text-color: $dark-gray,
-  $selected-focus-item-background: $my-secondary,
-  $selected-focus-item-text-color: $dark-gray,
-  $selected-hover-item-background: $my-secondary,
-  $selected-hover-item-text-color: $dark-gray
+    $background-color: $my-primary,
+    $item-text-color: $my-secondary,
+    $selected-item-background: $my-secondary,
+    $selected-item-text-color: $dark-gray,
+    $focused-item-background: $my-secondary,
+    $focused-item-text-color: $dark-gray,
+    $selected-focus-item-background: $my-secondary,
+    $selected-focus-item-text-color: $dark-gray,
+    $selected-hover-item-background: $my-secondary,
+    $selected-hover-item-text-color: $dark-gray,
 );
 
-
-:host {
-    @include tokens($dark-drop-down-theme);
+igx-hierarchical-grid {
     @include tokens($dark-paginator);
+    @include tokens($dark-drop-down-theme);
+}
 
-    igx-paginator {
-        @include tokens($dark-button);
-        @include tokens($dark-input-group);
-        @include tokens($dark-select);
-    }
+igx-paginator {
+    @include tokens($dark-button);
+    @include tokens($dark-input-group);
+    @include tokens($dark-select);
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss
index 73bc4552c..0ade0da84 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss
@@ -13,6 +13,11 @@ $custom-theme: grid-summary-theme(
 );
 
 :host {
-    --ig-grid-summaries-patch-background: #{$summaries-background};
-    @include tokens($custom-theme);
+    ::ng-deep {
+        igx-grid-summary-row {
+            --summaries-patch-background: #{$summaries-background};
+
+            @include tokens($custom-theme);
+        }
+    }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss
index abc527c86..9d43c27c6 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss
@@ -1,27 +1,25 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$background: #292826;
+$accent: #ffcd0f;
+
 $dark-button-theme: outlined-button-theme(
-  $background: #ffcd0f,
-  $foreground: #292826,
-  $hover-background: #404040,
-  $hover-foreground: #ffcd0f
+    $foreground: $accent,
+    $hover-background: $accent,
 );
 
 $dark-grid-toolbar-theme: grid-toolbar-theme(
-  $background-color: #292826,
-  $title-text-color: #ffcd0f
+    $background-color: $background,
+    $title-text-color: $accent,
 );
 
-:host {
-    @include tokens($dark-grid-toolbar-theme);
-
-    .igx-grid-toolbar__actions {
-        @include tokens($dark-button-theme);
+:host ::ng-deep {
+    igx-grid-toolbar {
+        @include tokens($dark-grid-toolbar-theme);
 
-        .igx-button--outlined {
-            margin-left: 0.5rem;
-            border: none;
+        [igxButton="outlined"] {
+            @include tokens($dark-button-theme);
         }
     }
 }
diff --git a/src/app/tree-grid/tree-grid-column-hiding-toolbar-style/tree-grid-column-hiding-toolbar-style.component.scss b/src/app/tree-grid/tree-grid-column-hiding-toolbar-style/tree-grid-column-hiding-toolbar-style.component.scss
index 927a109e4..f795053af 100644
--- a/src/app/tree-grid/tree-grid-column-hiding-toolbar-style/tree-grid-column-hiding-toolbar-style.component.scss
+++ b/src/app/tree-grid/tree-grid-column-hiding-toolbar-style/tree-grid-column-hiding-toolbar-style.component.scss
@@ -1,17 +1,44 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$background: #292826;
+$foreground: #ffcd0f;
+
 $custom-column-actions-theme: column-actions-theme(
-  $background-color: steelblue,
-  $title-color: gold
+    $background-color: $background,
+    $title-color: $foreground,
+);
+
+$custom-flat-button: flat-button-theme(
+    $foreground: $foreground,
+);
+
+$custom-checkbox-theme: checkbox-theme(
+    $label-color: $foreground,
+    $empty-color: $foreground,
+    $fill-color: $foreground,
+    $tick-color: $background,
 );
 
-$custom-button: flat-button-theme(
-  $foreground: gold,
-  $disabled-foreground: black
+$input-group-theme: input-group-theme(
+    $box-background: $background,
+    $idle-bottom-line-color: $foreground,
 );
 
-:host ::ng-deep{
-  @include tokens($custom-column-actions-theme);
-  @include tokens($custom-button);
+:host ::ng-deep {
+    .igx-column-actions {
+        @include tokens($custom-column-actions-theme);
+
+        igx-input-group {
+            @include tokens($input-group-theme);
+        }
+
+        igx-checkbox {
+            @include tokens($custom-checkbox-theme);
+        }
+
+        .igx-button--flat {
+            @include tokens($custom-flat-button);
+        }
+    }
 }
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
index dc7f73db5..a497ae343 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
@@ -1,73 +1,16 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow
+    $background: $background,
+    $foreground: $foreground,
+    $accent-color: $accent,
 );
 
-$custom-flat-button: flat-button-theme(
-  $background: $yellow,
-  $foreground: $black,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-contained-button: contained-button-theme(
-  $background: $black,
-  $foreground: $yellow,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $item-background: $yellow,
-  $item-text-color: $black,
-  $item-hover-background: $black,
-  $item-hover-text-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: $yellow,
-  $idle-text-color: $black,
-  $focused-text-color: $black,
-  $filled-text-color: $black
-);
-
-$custom-list: list-theme(
-  $background: $yellow
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: $black,
-  $fill-color: $black,
-  $tick-color: $yellow,
-  $label-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: $yellow,
-  $selected-item-background: lighten($black, 10%),
-  $selected-focus-item-background: lighten($black, 15%),
-  $item-text-color: $black,
-  $hover-item-background: $black,
-  $hover-item-text-color: $yellow
-);
-
-:host {
-  ::ng-deep {
+:host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-    @include tokens($custom-input-group);
-    @include tokens($custom-checkbox);
-    @include tokens($custom-list);
-    @include tokens($custom-flat-button);
-    @include tokens($custom-button-group);
-
-    .igx-excel-filter__apply {
-      @include tokens($custom-contained-button);
-    }
-  }
 }
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
index ea03a6e5a..c26894d7e 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
@@ -8,60 +8,60 @@ $light-gray: #999;
 $inactive-color: #826217;
 
 $dark-paginator: paginator-theme(
-  $text-color: $my-secondary,
-  $background-color: $my-primary,
-  $border-color: $my-secondary
+    $text-color: $my-secondary,
+    $background-color: $my-primary,
+    $border-color: $my-secondary,
 );
 
 $dark-button: flat-icon-button-theme(
-  $foreground: $my-secondary,
-  $hover-foreground: $dark-gray,
-  $hover-background: $my-secondary,
-  $focus-foreground: $dark-gray,
-  $focus-background: $my-secondary,
-  $border-color: $my-secondary,
-  $focus-border-color: $my-secondary,
-  $disabled-foreground: $inactive-color
+    $foreground: $my-secondary,
+    $hover-foreground: $dark-gray,
+    $hover-background: $my-secondary,
+    $focus-foreground: $dark-gray,
+    $focus-background: $my-secondary,
+    $border-color: $my-secondary,
+    $focus-border-color: $my-secondary,
+    $disabled-foreground: $inactive-color,
 );
 
 $dark-select: select-theme(
-  $toggle-button-background: $my-primary,
-  $toggle-button-foreground: $inactive-color,
-  $toggle-button-foreground-filled: $inactive-color,
-  $toggle-button-foreground-focus: $inactive-color,
-  $toggle-button-background-focus--border: $my-primary,
+    $toggle-button-background: $my-primary,
+    $toggle-button-foreground: $inactive-color,
+    $toggle-button-foreground-filled: $inactive-color,
+    $toggle-button-foreground-focus: $inactive-color,
+    $toggle-button-background-focus--border: $my-primary,
 );
 
 $dark-input-group: input-group-theme(
-  $filled-text-color: $my-secondary,
-  $idle-text-color: $my-secondary,
-  $filled-text-hover-color: $my-secondary,
-  $focused-text-color: $my-secondary,
-  $border-color: darken($inactive-color, 10%),
-  $focused-border-color: $my-secondary,
-  $input-suffix-color: $my-secondary,
+    $filled-text-color: $my-secondary,
+    $idle-text-color: $my-secondary,
+    $filled-text-hover-color: $my-secondary,
+    $focused-text-color: $my-secondary,
+    $border-color: darken($inactive-color, 10%),
+    $focused-border-color: $my-secondary,
+    $input-suffix-color: $my-secondary,
 );
 
 $dark-drop-down-theme: drop-down-theme(
-  $background-color: $my-primary,
-  $item-text-color: $my-secondary,
-  $selected-item-background: $my-secondary,
-  $selected-item-text-color: $dark-gray,
-  $focused-item-background: $my-secondary,
-  $focused-item-text-color: $dark-gray,
-  $selected-focus-item-background: $my-secondary,
-  $selected-focus-item-text-color: $dark-gray,
-  $selected-hover-item-background: $my-secondary,
-  $selected-hover-item-text-color: $dark-gray
+    $background-color: $my-primary,
+    $item-text-color: $my-secondary,
+    $selected-item-background: $my-secondary,
+    $selected-item-text-color: $dark-gray,
+    $focused-item-background: $my-secondary,
+    $focused-item-text-color: $dark-gray,
+    $selected-focus-item-background: $my-secondary,
+    $selected-focus-item-text-color: $dark-gray,
+    $selected-hover-item-background: $my-secondary,
+    $selected-hover-item-text-color: $dark-gray,
 );
 
-:host {
-  @include tokens($dark-paginator);
-  @include tokens($dark-drop-down-theme);
+igx-tree-grid {
+    @include tokens($dark-paginator);
+    @include tokens($dark-drop-down-theme);
+}
 
-  igx-paginator {
+igx-paginator {
     @include tokens($dark-button);
     @include tokens($dark-input-group);
     @include tokens($dark-select);
-  }
 }
diff --git a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss
index 0b761e488..0ade0da84 100644
--- a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss
+++ b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss
@@ -1,15 +1,23 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$summaries-background: #e0f3ff;
+
 $custom-theme: grid-summary-theme(
-  $background-color: #e0f3ff,
-  $label-color: #e41c77,
-  $result-color: black,
-  $pinned-border-width: 2px,
-  $pinned-border-style: dotted,
-  $pinned-border-color: #e41c77
+    $background-color: $summaries-background,
+    $label-color: #e41c77,
+    $result-color: black,
+    $pinned-border-width: 2px,
+    $pinned-border-style: dotted,
+    $pinned-border-color: #e41c77,
 );
 
 :host {
-    @include tokens($custom-theme);
+    ::ng-deep {
+        igx-grid-summary-row {
+            --summaries-patch-background: #{$summaries-background};
+
+            @include tokens($custom-theme);
+        }
+    }
 }
diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss
index 075a7a2df..9d43c27c6 100644
--- a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss
+++ b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss
@@ -1,29 +1,25 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$background: #292826;
+$accent: #ffcd0f;
+
 $dark-button-theme: outlined-button-theme(
-  $background: #ffcd0f,
-  $foreground: #292826,
-  $hover-background: #404040,
-  $hover-foreground: #ffcd0f
+    $foreground: $accent,
+    $hover-background: $accent,
 );
 
 $dark-grid-toolbar-theme: grid-toolbar-theme(
-  $background-color: #292826,
-  $title-text-color: #ffcd0f
+    $background-color: $background,
+    $title-text-color: $accent,
 );
 
+:host ::ng-deep {
+    igx-grid-toolbar {
+        @include tokens($dark-grid-toolbar-theme);
 
-:host {
-  @include tokens($dark-grid-toolbar-theme);
-
-  .igx-grid-toolbar__actions {
-    @include tokens($dark-button-theme);
-
-    .igx-button--outlined {
-      margin-left: 0.5rem;
-      border: none;
+        [igxButton="outlined"] {
+            @include tokens($dark-button-theme);
+        }
     }
-  }
 }
-