diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
index 60dd63c101..648a2bb564 100644
--- a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
+++ b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
@@ -343,17 +343,14 @@ igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ラ
  </DocsAside>
 
 ```scss
-$custom-theme: grid-theme(
-  $cell-active-border-color: #ffcd0f,
-  $cell-selected-background: #6f6f6f,
-  $row-hover-background: #f8e495,
-  $row-selected-background: #8d8d8d,
-  $header-background: #494949,
-  $header-text-color: #fff,
-  $expand-icon-color: #ffcd0f,
-  $expand-icon-hover-color: #e0b710,
-  $resize-line-color: #ffcd0f,
-  $row-highlight: #ffcd0f
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
 ```
 
@@ -367,7 +364,7 @@ $custom-theme: grid-theme(
 
 ```scss
 :host {
-  @include tokens($custom-theme);
+  @include tokens($custom-grid);
 }
 ```
 
diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
index cb1b1f1274..dc7e5ff916 100644
--- a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
@@ -303,17 +303,14 @@ Tree Grid は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass
 </DocsAside>
 
 ```scss
-$custom-theme: grid-theme(
-  $cell-active-border-color: #ffcd0f,
-  $cell-selected-background: #6f6f6f,
-  $row-hover-background: #f8e495,
-  $row-selected-background: #8d8d8d,
-  $header-background: #494949,
-  $header-text-color: #fff,
-  $expand-icon-color: #ffcd0f,
-  $expand-icon-hover-color: #e0b710,
-  $resize-line-color: #ffcd0f,
-  $row-highlight: #ffcd0f
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
 ```
 
@@ -325,7 +322,7 @@ $custom-theme: grid-theme(
 
 ```scss
 :host {
-  @include tokens($custom-theme);
+  @include tokens($custom-grid);
 }
 ```
 
diff --git a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
index 657aa20b23..995cb17022 100644
--- a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
@@ -245,11 +245,13 @@ ngAfterViewInit(): void {
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-高度なフィルタリング ダイアログは <ApiLink type="QueryBuilder" /> コンポーネントを使用するため、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を拡張するカスタム テーマを作成し、`$header-foreground` パラメーターを設定します。
+高度なフィルタリング ダイアログは <ApiLink type="QueryBuilder" /> コンポーネントを使用するため、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を使用してスタイルを設定できます。<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を拡張するカスタム テーマを作成し、`$background`、`$foreground`、`$accent-color` パラメーターを設定します。
 
 ```scss
 $custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8
+  $background: #1f2836,
+  $foreground: #f5f6e6,
+  $accent-color: #f5f6e6
 );
 ```
 
@@ -260,15 +262,6 @@ $custom-query-builder: query-builder-theme(
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
 
 ```scss
-$custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8,
-  $color-expression-group-and:  #eb0000,
-  $color-expression-group-or: #0000f3,
-  $subquery-header-background: var(--ig-gray-300),
-  $subquery-border-color: var(--ig-warn-500),
-  $subquery-border-radius: rem(4px)
-);
-
 igx-advanced-filtering-dialog {
   @include tokens($custom-query-builder);
 }
@@ -283,15 +276,6 @@ igx-advanced-filtering-dialog {
 </DocsAside>
 
 ```scss
-$custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8,
-  $color-expression-group-and:  #eb0000,
-  $color-expression-group-or: #0000f3,
-  $subquery-header-background: var(--ig-gray-300),
-  $subquery-border-color: var(--ig-warn-500),
-  $subquery-border-radius: rem(4px)
-);
-
 :host {
   ::ng-deep {
     igx-advanced-filtering-dialog {
diff --git a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
index 6ee74ad53a..bba9120512 100644
--- a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
@@ -574,22 +574,50 @@ $color-palette: palette(
 これで、パレットを使用してテーマを定義できます。セルは <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> によってスタイル設定されているため、それを使用して {ComponentName} のテーマを生成できます。
 
 ```scss
-$custom-grid-theme: grid-theme(
+$grid-theme: grid-theme(
   $cell-editing-background: $blue,
+  $cell-editing-foreground: $white,
+  $cell-active-border-color: $blue,
   $cell-edited-value-color: $white,
-  $cell-active-border-color: $white,
-  $edit-mode-color: color($color-palette, "secondary", 200)
+  $edit-mode-color: color($color: "secondary", $variant: 200)
 );
 ```
 
 ### テーマを適用
 
-テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
+最後の手順は、カスタム パレットとグリッド テーマを**含める**ことです。
+
+<ComponentBlock for="Grid">
+
+```scss
+igx-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
+```
+
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
 
 ```scss
-@include grid($custom-grid-theme);
+igx-tree-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
 ```
 
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+igx-hierarchical-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
+```
+
+</ComponentBlock>
+
 ### デモ
 
 上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group.md#スタイル設定)、[`datepicker`](/date-picker.md#スタイル設定) および [`checkbox`](/checkbox.md#スタイル設定))。
diff --git a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
index bef3b34fb4..30c27b0c3b 100644
--- a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
@@ -313,12 +313,34 @@ column.autosize();
 
 最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を拡張し、`$resize-line-color` パラメーター以外にも多くのパラメータを受け入れます。
 
+<ComponentBlock for="Grid">
+
 ``` scss
 $custom-grid-theme: grid-theme(
   $resize-line-color: #0288d1
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+``` scss
+$custom-grid-theme: grid-theme(
+  $resize-line-color: #dc38e8
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+``` scss
+$custom-grid-theme: grid-theme(
+  $resize-line-color: #07ea07
+);
+```
+
+</ComponentBlock>
+
 <DocsAside type="info" title="情報">
 上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
 </DocsAside>
diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
index f7b2420f64..43f1bb8d9e 100644
--- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
@@ -120,14 +120,22 @@ API 操作の詳細については、[`API リファレンス`](#api-references)
 <ComponentBlock for="TreeGrid">
 
 ```scss
-$custom-grid-theme: grid-theme(
-  $row-selected-background: #011627,
-  $row-selected-text-color: #ecaa53,
-  $row-selected-hover-background: #011627,
-  $header-selected-text-color: #ecaa53,
-  $header-selected-background: #011627,
-  $expand-icon-color: #ecaa53,
-  $expand-icon-hover-color: #b64b80
+$background: #0b0119;
+$foreground: #eeece1;
+$accent: #f6b560;
+
+$grid-theme: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
+  
+  $row-selected-background: #012724,
+  $row-selected-text-color: $accent,
+  $header-selected-text-color: $accent,
+  $header-selected-background: #012427,
+  
+  $row-selected-hover-background: hsl(from #012427 h s 10%),
+  $row-selected-hover-text-color: $accent,
 );
 ```
 
@@ -135,12 +143,16 @@ $custom-grid-theme: grid-theme(
 <ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">
 
 ```scss
+$background: #011627;
+$accent: #ecaa53;
+
 $custom-grid-theme: grid-theme(
-  $row-selected-background: #011627,
-  $row-selected-text-color: #ecaa53,
-  $row-selected-hover-background: #011627,
-  $header-selected-text-color: #ecaa53,
-  $header-selected-background: #011627
+  $row-selected-background: $background,
+  $row-selected-text-color: $accent,
+  $row-selected-hover-background: hsl(from $background h s 10%),
+  $row-selected-hover-text-color: $accent,
+  $header-selected-text-color: $accent,
+  $header-selected-background: $background,
 );
 ```
 
@@ -152,12 +164,13 @@ $custom-grid-theme: grid-theme(
 - **$row-selected-background**- 選択した部分の背景を設定します。
 - **$row-selected-text-color** - 選択した部分のテキスト色を設定します。
 - **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。
+- **$row-selected-hover-text-color** - ホバーされたセルまたは複数のセルのテキスト色を設定します。
 - **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。
 - **$header-selected-background** - 選択した列ヘッダーの背景色を設定します。
 
 ### CSS 変数の使用
 
-最後にカスタム `igx-grid` テーマを含めます。
+最後にカスタム グリッド テーマを**含めます**。
 
 ```scss
 :host {
diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
index ecc919457d..c10b1bceaa 100644
--- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
@@ -496,114 +496,49 @@ Excel スタイル フィルタリング コンポーネントを設定するに
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Excel スタイル フィルタリング ダイアログは、`filtering-row-background` パラメーターを使用して、グリッドのテーマから背景色を取得します。さらに、このダイアログ内の要素のテキスト色をカスタマイズするための専用の Excel スタイル フィルタリング パラメーターも用意されています。ダイアログ全体のスタイルを変更するには、カスタム テーマを作成する必要があります。
+Excel スタイル フィルタリング ダイアログのスタイルを設定する方法はいくつかあります。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を使用してスタイルを設定できます。Excel スタイル フィルタリング ダイアログは、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> で定義された `$background`、`$foreground`、および `$accent-color` 値を継承します。また、ダイアログのテキスト色をカスタマイズするための専用パラメーターも提供しています。
 
-```scss
-$custom-grid: grid-theme(
-  $filtering-row-background: #ffcd0f,
-  $excel-filtering-header-foreground: #292826,
-  $excel-filtering-subheader-foreground: #292826,
-  $excel-filtering-actions-foreground: #006400,
-  $excel-filtering-actions-hover-foreground: #ffcd0f,
-  $excel-filtering-actions-disabled-foreground: #9e9e9e
-);
-```
+または、専用の <ApiLink kind="sass" module="themes" type="function-excel-filtering-theme" label="excel-filtering-theme" code={true} /> を使用すると、Excel スタイル フィルタリング ダイアログのみを完全にスタイル設定できます。
 
-ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリング ダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。
+最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を使用することです。
 
 ```scss
-$custom-button: contained-button-theme(
-  $background: #ffcd0f,
-  $foreground: #292826,
-  $hover-background: #292826,
-  $hover-foreground: #ffcd0f
-);
-
-$flat-custom-button: flat-button-theme(
-  $foreground: #ffcd0f,
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: #292826,
-  $fill-color: #292826,
-  $tick-color: #ffcd0f,
-  $label-color: #292826
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: #ffcd0f,
-  $item-text-color: #292826,
-  $hover-item-background: #292826,
-  $hover-item-text-color: #ffcd0f
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: #ffcd0f,
-  $idle-text-color: #292826,
-  $focused-text-color: #292826,
-  $filled-text-color: #292826
-);
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
-$custom-list: list-theme(
-  $background: #ffcd0f
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
-
 ```
 
-<DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
-</DocsAside>
-
-この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、<ApiLink kind="sass" module="themes" type="function-button-theme" label="button-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-checkbox-theme" label="checkbox-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-list-theme" label="list-theme" code={true} /> テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
+Excel スタイル フィルタリング ダイアログの背景色と前景色はグリッド テーマから継承されます。さらに、ボタンやチェックボックスなどのすべてのネストされたコンポーネントは、グリッド テーマからアクセント カラーを継承します。
 
-最後にコンポーネントのカスタム テーマを**含めます**。また、入力のプレース ホルダーの色プロパティを設定します。
+その後、新しく作成されたグリッド テーマを含める準備が整います。Excel スタイル フィルタリング ダイアログに固有の追加のスタイル変更を加えたい場合は、直接ターゲットにすることができます。
 
 ```scss
 :host {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-
-    .igx-excel-filter, 
-    .igx-excel-filter__secondary {
-        @include tokens($custom-button);
-        @include tokens($custom-checkbox);
-        @include tokens($custom-input-group);
-        @include tokens($custom-list);
-
-        .igx-input-group__input::placeholder {
-            color: #ffcd0f;
-        }
+
+    igx-grid-excel-style-filtering {
+        --ig-excel-filtering-background: #444;
     }
 }
 ```
 
-<DocsAside type="info" title="情報">
-`.igx-excel-filter` と `.igx-excel-filter__secondary` 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。
-</DocsAside>
-
 <DocsAside type="info" title="情報">
 コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
-:host {
-  ::ng-deep {
+:host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-
-    .igx-excel-filter,
-    .igx-excel-filter__secondary {
-      @include tokens($custom-button);
-      @include tokens($flat-custom-button);
-      @include tokens($custom-checkbox);
-      @include tokens($custom-input-group);
-      @include tokens($custom-list);
-      
-      .igx-input-group__input::placeholder {
-        color: #ffcd0f;
-      }
+
+    igx-grid-excel-style-filtering {
+        --ig-excel-filtering-background: #444;
     }
-  }
 }
 ```
 
@@ -636,6 +571,7 @@ $custom-list: list-theme(
 - <ApiLink type="Column" />
 - <ApiLink type="{ComponentApiType}" />
 - <ApiLink kind="sass" module="themes" type="function-grid-theme" label="{ComponentName}Component スタイル" />
+- <ApiLink kind="sass" module="themes" type="function-excel-filtering-theme" label="Excel Filtering Theme"/>
 
 ## その他のリソース
 
diff --git a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
index 5b60e61938..4df95efd64 100644
--- a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
+++ b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
@@ -284,6 +284,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 最も単純なアプローチに従って、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} />  を拡張する新しいテーマを作成し、`$header-background`、`$header-text-color`、`$header-border-width`、`$header-border-style` および `$header-border-color` パラメーターを受け取ります。
 
+<ComponentBlock for="Grid">
+
 ```scss
 $custom-theme: grid-theme(
   $header-background: #e0f3ff,
@@ -294,6 +296,34 @@ $custom-theme: grid-theme(
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $header-background: #f1eaf6,
+  $header-text-color: #8c1bdd,
+  $header-border-width: 1px,
+  $header-border-style: solid,
+  $header-border-color: #d3b9e6,
+  $cell-active-border-color: #7409c1
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $header-background: #f8f8ed,
+  $header-text-color: #7a6551,
+  $header-border-style: dashed,
+  $header-border-color: rgba(0, 0, 0, 0.08)
+);
+```
+
+</ComponentBlock>
+
 <DocsAside type="info" title="情報">
 上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
 </DocsAside>
diff --git a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
index 40ef430373..55b079b690 100644
--- a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
+++ b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
@@ -150,6 +150,7 @@ igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`]
 $custom-theme: grid-theme(
   $cell-active-border-color: #ffcd0f,
   $cell-selected-background: #6f6f6f,
+  $cell-selected-text-color: #ffcd0f,
   $row-hover-background: #fde069,
   $row-selected-background: #8d8d8d,
   $header-background: #494949,
diff --git a/docs/angular/src/content/jp/grids_templates/paging.mdx b/docs/angular/src/content/jp/grids_templates/paging.mdx
index f1247f0cd6..e9907b4055 100644
--- a/docs/angular/src/content/jp/grids_templates/paging.mdx
+++ b/docs/angular/src/content/jp/grids_templates/paging.mdx
@@ -193,62 +193,22 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-最も簡単な方法で <ApiLink kind="sass" module="themes" type="function-paginator-theme" label="paginator-theme" code={true} /> を拡張し `$text-color`、`$background-color` および `$border-color` パラメータを受け入れる新しいテーマを作成します。
+最も簡単な方法で <ApiLink kind="sass" module="themes" type="function-paginator-theme" label="paginator-theme" code={true} /> を拡張し `$foreground`、`$background`、`$border-color` および `$accent-color` パラメータを受け入れる新しいテーマを作成します。
 
 ```scss
-$dark-paginator: paginator-theme(
-  $text-color: #d0ab23;,
-  $background-color: #231c2c,
-  $border-color: #d0ab23;
+$paginator-theme: paginator-theme(
+  $foreground: #ff570f,
+  $background: #130425FF,
+  $border-color: #ff570f,
+  $accent-color: #ff570f,
 );
 ```
 
-`paginator-theme` はページング コンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコン ボタン テーマを作成しましょう。
+新しく作成したテーマを**含める**ことができます。
 
 ```scss
-$dark-button: flat-icon-button-theme(
-  $foreground: #d0ab23,
-  $hover-foreground: #231c2c,
-  $hover-background: #d0ab23,
-  $focus-foreground: #231c2c,
-  $focus-background: #d0ab23,
-  $disabled-foreground: #9b7829
-);
-```
-
-<DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
-</DocsAside>
-
-最後にそれぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
-
-```scss
-:host {
-    @include tokens($dark-paginator);
-
-    .igx-grid-paginator__pager {
-        @include tokens($dark-button);
-    }
-}
-```
-
-<DocsAside type="info" title="情報">
-作成した **icon-button-theme** を `.igx-paginator__pager` 内に含めて、ページネーター ボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコン ボタンも影響を受けます。
-</DocsAside>
-
-<DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、ボタンのようにページング コンテナー内にあるコンポーネントのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
-</DocsAside>
-
-```scss
-:host {
-  @include tokens($dark-paginator);
-
-  igx-paginator {
-    ::ng-deep {
-      @include tokens($dark-button);
-    }
-  }
+igx-paginator {
+  @include tokens($paginator-theme);
 }
 ```
 
diff --git a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
index 048da1cc12..abcf859112 100644
--- a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
@@ -425,8 +425,10 @@ public onDropAllowed(args) {
 
 次に、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を拡張し、必要に応じて行のピン固定機能のカスタマイズに必要なパラメーターを受け入れる新しいテーマを作成します。
 
+<ComponentBlock for="Grid">
+
 ```scss
-$custom-grid-theme: grid-theme(
+$custom-theme: grid-theme(
   $pinned-border-width: 5px,
   $pinned-border-style: double,
   $pinned-border-color: #ffcd0f,
@@ -434,16 +436,59 @@ $custom-grid-theme: grid-theme(
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $pinned-border-width: 1px,
+  $pinned-border-style: dashed,
+  $pinned-border-color: #f325e9,
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
+  $pinned-border-color: $accent,
+);
+```
+
+</ComponentBlock>
+
 ### CSS 変数の使用
 
 最後にカスタム グリッド テーマを設定します。
 
+<ComponentBlock for="Grid, TreeGrid">
+
 ```scss
 :host {
-  @include tokens($custom-grid-theme);
+  @include tokens($custom-theme);
 }
 ```
 
+</ComponentBlock>
+
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+:host {
+  @include tokens($custom-grid);
+}
+```
+
+</ComponentBlock>
+
 ### デモ
 
 <ComponentBlock for="Grid">
diff --git a/docs/angular/src/content/jp/grids_templates/sorting.mdx b/docs/angular/src/content/jp/grids_templates/sorting.mdx
index a03d0610d6..8129a6f647 100644
--- a/docs/angular/src/content/jp/grids_templates/sorting.mdx
+++ b/docs/angular/src/content/jp/grids_templates/sorting.mdx
@@ -269,6 +269,8 @@ public ngOnInit(): void {
 
 最も単純なアプローチに従って、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を拡張し、`$sorted-header-icon-color` および `sortable-header-icon-hover-color` パラメーターを受け取ります。
 
+<ComponentBlock for="Grid, HierarchicalGrid">
+
 ```scss
 $custom-theme: grid-theme(
   $sorted-header-icon-color: #ffb06a,
@@ -276,6 +278,19 @@ $custom-theme: grid-theme(
 );
 ```
 
+</ComponentBlock>
+
+<ComponentBlock for="TreeGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $sorted-header-icon-color: #dc38e8,
+  $sortable-header-icon-hover-color: #5d1461
+);
+```
+
+</ComponentBlock>
+
 <DocsAside type="info" title="情報">
 上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
 </DocsAside>
diff --git a/docs/angular/src/content/jp/grids_templates/summaries.mdx b/docs/angular/src/content/jp/grids_templates/summaries.mdx
index f26d4ec192..822129c828 100644
--- a/docs/angular/src/content/jp/grids_templates/summaries.mdx
+++ b/docs/angular/src/content/jp/grids_templates/summaries.mdx
@@ -712,18 +712,54 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp
 
 最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-summary-theme" label="grid-summary-theme" code={true} /> を拡張する新しいテーマを作成し、`$background-color`、`$focus-background-color`、`$label-color`、`$result-color`、`$pinned-border-width`、`$pinned-border-style`、および `$pinned-border-color` パラメーターを受け取る方法です。
 
+
+
+<ComponentBlock for="Grid">
+
 ```scss
+$summaries-background: #e0f3ff;
+
 $custom-theme: grid-summary-theme(
-  $background-color: #e0f3ff,
-  $focus-background-color: rgba(#94d1f7, .3),
+  $background-color: $summaries-background,
   $label-color: #e41c77,
   $result-color: black,
   $pinned-border-width: 2px,
   $pinned-border-style: dotted,
-  $pinned-border-color: #e41c77
+  $pinned-border-color: #e41c77,
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+```scss
+$summaries-background: #eef4e5;
+
+$custom-theme: grid-summary-theme(
+  $background-color: $summaries-background,
+  $label-color: #486821,
+  $result-color: #172505,
+  $pinned-border-width: 2px,
+  $pinned-border-style: dotted,
+  $pinned-border-color: #172505,
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+$summaries-background: #e0f3ff;
+
+$custom-theme: grid-summary-theme(
+  $background-color: $summaries-background,
+  $label-color: #e41c77,
+  $result-color: black,
+);
+```
+
+</ComponentBlock>
+
 <DocsAside type="info" title="情報">
 上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
 </DocsAside>
diff --git a/docs/angular/src/content/jp/grids_templates/toolbar.mdx b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
index e2755f451b..166d48a834 100644
--- a/docs/angular/src/content/jp/grids_templates/toolbar.mdx
+++ b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
@@ -523,49 +523,16 @@ configureExport(args: IGridToolbarExportEventArgs) {
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-まず、新しいパレットを作成します。
+まず、<ApiLink kind="sass" module="themes" type="function-grid-toolbar-theme" label="grid-toolbar-theme" code={true} /> を拡張する新しいテーマを作成します。
 
 ```scss
-$my-dark-palette: palette(
-  $primary: #2466ff,
-  $secondary: #ffcd0f,
-  $surface: #2a2b2f,
-  $grays: #fff,
-);
-
-$my-dark-color: color($my-dark-palette, 'surface');
-```
-
-<ApiLink kind="sass" module="themes" type="function-grid-toolbar-theme" label="grid-toolbar-theme" code={true} /> を拡張する新しいテーマを作成し、`$background-color` と `$title-text-color` パラメーターを変更します。
-
-```scss
-$dark-grid-toolbar-theme: grid-toolbar-theme(
-  $background-color: $my-dark-color,
-  $title-text-color: color($my-dark-palette, 'secondary'),
-  $dropdown-background: $my-dark-color,
-);
-```
-
-ツールバーの列操作メニューにテーマを設定するには、<ApiLink kind="sass" module="themes" type="function-column-actions-theme" label="column-actions-theme" code={true} /> コンポーネントのテーマを変更する必要があります。
-
-```scss
-$dark-column-actions-theme: column-actions-theme(
-  $title-color: color($my-dark-palette, 'secondary'),
-  $background-color: color($my-dark-palette, 'surface')
-);
-```
-
-列操作は他のコンポーネント (`igx-button`、`igx-checkbox`) を使用しているため、新しいツールバー テーマに一致するようにテーマを変更する必要があります。
-
-```scss
-$dark-button-theme: button-theme(
-  $outlined-background: color($my-dark-palette, 'secondary'),
-  $outlined-hover-background: color($my-dark-palette, 'grays', 100),
-  $outlined-hover-text-color: color($my-dark-palette, 'secondary')
-);
+$accent: #ffcd0f;
 
-$dark-checkbox-theme: checkbox-theme(
-  $tick-color: $my-dark-color,
+$grid-toolbar-theme: grid-toolbar-theme(
+  $background: #170237,
+  $border-color: $accent,
+  $title-text-color: #f6d8d8,
+  $item-hover-background: rgb(246 216 216 / 0.3),
 );
 ```
 
@@ -573,10 +540,9 @@ $dark-checkbox-theme: checkbox-theme(
 
 ```scss
 :host {
-    @include tokens($dark-grid-toolbar-theme);
-    @include tokens($dark-column-actions-theme);
-    @include tokens($dark-checkbox-theme);
-    @include tokens($dark-button-theme);
+  igx-grid-toolbar {
+    @include tokens($grid-toolbar-theme);
+  }
 }
 ```
 
@@ -585,13 +551,9 @@ $dark-checkbox-theme: checkbox-theme(
 </DocsAside>
 
 ```scss
-@include tokens($dark-grid-toolbar-theme);
-
-:host {
-  ::ng-deep {
-    @include tokens($dark-column-actions-theme);
-    @include tokens($dark-checkbox-theme);
-    @include tokens($dark-button-theme);
+:host ::ng-deep {
+  igx-grid-toolbar {
+    @include tokens($grid-toolbar-theme);
   }
 }
 ```