diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index 7d8ca2415c6..ecfeda1727a 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -14,6 +14,9 @@
     }
     igc-grid, igc-tree-grid {
         max-height: 550px;
+        --ig-grid-grouparea-background: #ff000012;
+        --ig-grid-drop-area-background: #ff004c12;
+        --ig-paginator-border-color:#d0ab23;
     }
     .range-wrapper {
         width: 100%;
diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
new file mode 100644
index 00000000000..402f710851c
--- /dev/null
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -0,0 +1,101 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+@use '../../../igniteui-angular/src/lib/core/styles/themes' as igx;
+@use './variables' as vars;
+
+/// Prefix used for 'global' component CSS vars
+$elements-var-prefix: 'ig';
+
+/// Prefix used in place of `igx-` in component selectors
+$elements-selector-prefix: 'igc';
+
+/// Filter out included items to get exclude list
+/// @access private
+/// @param {Map} $items - The items to include
+/// @param {Map} $register - The full components list `igx.$components`
+/// @return {Map} - The resulting difference of items for excluding
+@function include($items, $register) {
+    // @debug map.keys(igx.$components);
+    @return map.keys(map.remove($register, $items...));
+}
+
+/// Callback to update component's name (for var prefix) and selectors for Elements
+/// @access private
+/// @param {Map} $theme_schema - The component's theme schema
+/// @return {Map} - Updated component theme schema
+@function updateElementName($theme_schema) {
+    $prefix: 'ig';
+    $result: $theme_schema;
+
+    @if map.has-key($theme_schema, "name") {
+        $name: map.get($theme_schema, "name");
+        $selector: map.get($theme_schema, "selector") or $name;
+
+        // @debug "name: #{$name}";
+
+        @if string.index($name, 'igx-') {
+            $name: list.nth(string.split($name, 'igx-'), -1);
+            $name: '#{$elements-var-prefix}-#{$name}';
+            // @debug "name after: #{$name}";
+        }
+
+        // For exposed components also modify selector with updated element prefix:
+        @if list.index(vars.$allowed, map.get($theme_schema, "name")) {
+            // @debug "selector before: #{$selector}";
+            $selector: updateSelectors($selector);
+            // @debug "selector after: #{$selector}";;
+        }
+
+        $result: map.merge($result, (name: $name, selector: $selector));
+    }
+    @return $result;
+}
+
+/// Break down the selector and update `igx-` element selectors with matching `igc-` for exposed Elements
+/// @access private
+/// @param {String} $selector - The selector(s) to update
+/// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
+@function updateSelectors($selector) {
+    $result: ();
+    $selectors: string.split($selector, ", ");
+
+    @each $sel in $selectors {
+        $result: list.append($result, $sel, comma);
+
+        @if string.index($sel, 'igx-') == 1 {
+            $igc-sel: list.nth(string.split($sel, 'igx-'), -1);
+            $igc-sel: '#{$elements-selector-prefix}-#{$igc-sel}';
+            $result: list.append($result, $igc-sel, comma);
+        }
+    }
+
+    @return "#{$result}";
+}
+
+/// Generates an Ignite UI for Angular Elements global theme.
+/// @param {Map} $palette - An palette to be used by the global theme.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
+/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
+/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
+/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
+/// @param {Map} $elevations [$elevations] - The elevation map to be used by all component themes.
+/// @requires $light-material-schema
+/// @requires {function} is-component
+/// @requires {function} is-used
+@mixin elements-theme(
+    $palette,
+    $schema,
+    $exclude,
+    // $roundness,
+    // $elevation,
+    // $elevations,
+) {
+    @include igx.theme-internal(
+        $palette: $palette,
+        $exclude: $exclude,
+        $schema: $schema,
+        $theme-handler: meta.get-function("updateElementName")
+    );
+}
diff --git a/projects/igniteui-angular-elements/src/themes/_variables.scss b/projects/igniteui-angular-elements/src/themes/_variables.scss
index 1e9307c248f..9cb2c764d5f 100644
--- a/projects/igniteui-angular-elements/src/themes/_variables.scss
+++ b/projects/igniteui-angular-elements/src/themes/_variables.scss
@@ -30,3 +30,11 @@ $unused-themes: (
     igx-tabs,
     igx-toast
 );
+
+$allowed: (
+    igx-grid,
+    igx-paginator,
+    igx-action-strip,
+    igx-grid-toolbar,
+    igx-pivot-data-selector
+);
diff --git a/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
index 84ef4693bbf..b90ef4b7996 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-bootstrap-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
-@include igx.bootstrap-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-bootstrap-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/dark/fluent.scss b/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
index 2b0c2da170c..ecbba661bd5 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-fluent-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$fluent-typeface, $type-scale: igx.$fluent-type-scale);
-@include igx.fluent-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-fluent-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/dark/indigo.scss b/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
index a8b0eb25e40..0c17eeb4c1b 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-indigo-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$indigo-typeface, $type-scale: igx.$indigo-type-scale);
-@include igx.indigo-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-indigo-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/dark/material.scss b/projects/igniteui-angular-elements/src/themes/dark/material.scss
index fc23a6953b5..f49bc2f439b 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/material.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/material.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-material-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$material-typeface, $type-scale: igx.$material-type-scale);
-@include igx.dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-material-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
index 2d9a001feeb..0ff1148fe00 100644
--- a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
@@ -1,10 +1,17 @@
-/* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-bootstrap-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
-@include igx.bootstrap-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-bootstrap-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/fluent.scss b/projects/igniteui-angular-elements/src/themes/light/fluent.scss
index c7bc78c3c36..4fae9c4b235 100644
--- a/projects/igniteui-angular-elements/src/themes/light/fluent.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/fluent.scss
@@ -1,6 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-fluent-palette;
@@ -8,3 +8,11 @@ $palette: igx.$light-fluent-palette;
 @include igx.core();
 @include igx.typography($font-family: igx.$fluent-typeface, $type-scale: igx.$fluent-type-scale);
 @include igx.fluent-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-fluent-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/indigo.scss b/projects/igniteui-angular-elements/src/themes/light/indigo.scss
index 0c8ecebed4b..f8041cf1008 100644
--- a/projects/igniteui-angular-elements/src/themes/light/indigo.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/indigo.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-indigo-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$indigo-typeface, $type-scale: igx.$indigo-type-scale);
-@include igx.indigo-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-indigo-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/light/material.scss b/projects/igniteui-angular-elements/src/themes/light/material.scss
index dc98881befc..301573a037b 100644
--- a/projects/igniteui-angular-elements/src/themes/light/material.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/material.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-material-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$material-typeface, $type-scale: igx.$material-type-scale);
-@include igx.light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-material-schema,
+);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
index 1f171d8d394..3958b37c606 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -32,7 +32,6 @@
     $actions-border-radius: null,
 ) {
     $name: 'igx-action-strip';
-    $selector: 'igx-action-strip, igc-action-strip';
     $action-strip-schema: ();
 
     @if map.has-key($schema, 'action-strip') {
@@ -54,7 +53,6 @@
 
     @return extend($theme, (
         name: $name,
-        selector: $selector,
         background: $background,
         actions-background: $actions-background,
         icon-color: $icon-color,
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index b42da3e401a..984449ab592 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -41,7 +41,7 @@
     $item-focus-text-color: null
 ) {
     $name: 'igx-grid-toolbar';
-    $selector: 'igx-grid-toolbar, igc-grid-toolbar, .igx-grid-toolbar__dd-list';
+    $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';
     $grid-toolbar-schema: ();
 
     @if map.has-key($schema, 'grid-toolbar') {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index d7a1c248db7..5af656b46ec 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -213,7 +213,7 @@
     $cell-selected-within-text-color: null,
 ) {
     $name: 'igx-grid';
-    $selector: 'igx-grid, igc-grid, igx-hierarchical-grid, igc-hierarchical-grid, igx-pivot-grid, igc-pivot-grid, igx-tree-grid, igc-tree-grid, igx-advanced-filtering-dialog, igc-advanced-filtering-dialog, igx-grid-excel-style-filtering, igc-grid-excel-style-filtering, .igx-excel-filter__secondary';
+    $selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';
     $grid-schema: ();
 
     @if map.has-key($schema, 'grid') {