From 1000d1964a507ceb43a5e2ef432511f1881846d2 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Wed, 10 Apr 2024 21:06:07 +0800
Subject: [PATCH] refactor(core)!: drop `Mode` directive (#7191)

Co-authored-by: Vladimir Potekhin <vladimir.potekh@gmail.com>
---
 .../components/axes/axes.component.ts         |  15 +--
 .../components/axes/axes.style.less           |  32 -----
 .../pie-chart/pie-chart.component.ts          |   4 +-
 .../input-card-grouped.component.ts           |   5 -
 .../input-card-grouped.style.less             |  11 +-
 .../components/demo/demo.component.ts         |  33 ++---
 .../addon-doc/components/demo/demo.module.ts  |   6 +-
 .../addon-doc/components/demo/demo.style.less |  33 ++---
 .../components/demo/demo.template.html        | 104 ++--------------
 .../documentation/documentation.module.ts     |   2 -
 .../components/main/main.component.ts         |  33 +----
 .../addon-doc/components/main/main.module.ts  |   4 -
 .../addon-doc/components/main/main.style.less |  21 ++--
 .../components/main/main.template.html        |   7 +-
 .../navigation/navigation.component.ts        |  12 +-
 .../navigation/navigation.module.ts           |   2 -
 .../navigation/navigation.template.html       |   5 +-
 projects/addon-doc/interfaces/demo-params.ts  |   2 +-
 projects/addon-doc/services/index.ts          |   4 +-
 .../addon-doc/services/theme-dark.options.ts  |   5 +
 .../addon-doc/services/theme-dark.service.ts  |  34 +++++
 .../addon-doc/services/theme-night.options.ts |   7 --
 .../addon-doc/services/theme-night.service.ts |  45 -------
 projects/addon-doc/tokens/doc-icons.ts        |   8 +-
 projects/addon-doc/tokens/i18n.ts             |   3 +-
 .../components/preview/preview.template.html  |   2 +-
 .../preview/zoom/preview-zoom.template.html   |   4 +-
 .../table/directives/table.directive.ts       |   3 -
 .../table/providers/table.providers.ts        |   2 -
 .../components/table/td/td.style.less         |   2 +-
 .../components/table/th/th.style.less         |   6 +-
 .../table-bars-host/table-bars-host.module.ts |   4 +-
 .../table-bars-host.template.html             |   3 +-
 projects/cdk/abstract/interactive.ts          |   3 +-
 projects/cdk/abstract/theme-switcher.ts       |   2 +
 .../cdk/tokens/focusable-item-accessor.ts     |   6 +
 .../core/components/error/error.component.ts  |  11 +-
 .../core/components/error/error.style.less    |   4 -
 .../core/components/error/error.template.html |   1 -
 projects/core/components/index.ts             |   1 -
 .../core/components/label/label.component.ts  |  11 --
 .../core/components/label/label.style.less    |   4 -
 .../value-decoration.style.less               |   8 --
 projects/core/components/root/root.style.less |  14 ++-
 projects/core/components/theme-night/index.ts |   2 -
 .../components/theme-night/ng-package.json    |   5 -
 .../theme-night/theme-night.component.ts      |  11 --
 .../theme-night/theme-night.module.ts         |   9 --
 .../theme-night/theme-night.style.less        |  58 ---------
 .../components/tooltip/tooltip.component.ts   |  19 +--
 .../directives/dropdown/dropdown.component.ts |  12 +-
 .../directives/dropdown/dropdown.style.less   |   8 --
 .../core/directives/hint/hint.component.ts    |   6 +-
 .../core/directives/hint/hint.directive.ts    |   2 +-
 projects/core/directives/hint/hint.style.less |   6 +-
 projects/core/directives/index.ts             |   1 -
 projects/core/directives/mode/index.ts        |   2 -
 .../core/directives/mode/mode.directive.ts    |  11 --
 projects/core/directives/mode/mode.module.ts  |   9 --
 projects/core/directives/mode/ng-package.json |   5 -
 projects/core/directives/wrapper/README.md    |   2 -
 .../directives/wrapper/wrapper.directive.ts   |  12 +-
 projects/core/providers/index.ts              |   1 -
 projects/core/providers/mode.provider.ts      |  27 ----
 ...theme.service.ts => dark-theme.service.ts} |   6 +-
 projects/core/services/index.ts               |   2 +-
 ...ice.spec.ts => dark-theme.service.spec.ts} |   8 +-
 projects/core/styles/mixins/textfield.less    |  31 +----
 projects/core/styles/mixins/textfield.scss    |  30 -----
 .../core/styles/theme/appearance/glass.less   |   2 +-
 .../styles/theme/appearance/opposite.less     |   2 +-
 projects/core/styles/theme/variables.less     |   5 +-
 projects/core/styles/theme/wrapper/glass.less |   3 +-
 projects/core/styles/theme/wrapper/icon.less  |   3 +-
 projects/core/styles/theme/wrapper/mono.less  |   3 +-
 .../core/styles/theme/wrapper/opposite.less   |   3 +-
 .../core/styles/theme/wrapper/outline.less    |  27 +---
 .../theme/wrapper/secondary-destructive.less  |  13 --
 .../core/styles/theme/wrapper/secondary.less  |  48 -------
 projects/core/styles/theme/wrapper/table.less |   6 -
 .../core/styles/theme/wrapper/textfield.less  |  25 +---
 projects/core/tokens/index.ts                 |   1 -
 projects/core/tokens/mode.ts                  |   9 --
 projects/core/types/brightness.ts             |   4 +
 .../utils/miscellaneous/is-editing-key.ts     |   2 +-
 .../tests/addon-doc/navigation.spec.ts        |   4 +-
 .../tests/core/button/button.spec.ts          |   6 +-
 .../tests/core/calendars/calendars.spec.ts    |  10 +-
 .../tests/core/hint/hint.spec.ts              |   6 +-
 .../tests/demo/get-demo-paths.ts              |   1 -
 .../tests/kit/tabs/tabs.spec.ts               |   5 +-
 .../demo/src/modules/app/app.component.ts     |   7 +-
 projects/demo/src/modules/app/app.routes.ts   |  31 +----
 .../customization/customization.component.ts  | 117 ------------------
 .../app/customization/customization.module.ts |  22 ----
 .../customization/customization.providers.ts  |  37 ------
 .../customization/customization.style.less    |   3 -
 .../customization/customization.template.html |  68 ----------
 projects/demo/src/modules/app/demo-routes.ts  |   4 +-
 projects/demo/src/modules/app/pages.ts        |  18 +--
 .../charts/bar-chart/examples/2/index.ts      |   4 +-
 .../modules/components/abstract/control.ts    |   2 +-
 .../src/modules/components/abstract/hint.ts   |   2 +-
 .../inherited-documentation.component.ts      |   2 +-
 .../components/alert/examples/2/index.html    |  12 +-
 .../alert-example/alert-example.component.ts  |   4 +-
 .../alert-example/alert-example.template.html |  40 +++---
 .../alert-example-with-data.component.ts      |  15 +--
 .../alert-example-with-data.template.html     |   8 +-
 .../components/carousel/carousel.module.ts    |   2 -
 .../components/carousel/examples/4/index.html |   6 +-
 .../modules/components/group/group.module.ts  |   2 -
 .../input-card-grouped.template.html          |   5 +-
 .../input-password/examples/2/index.html      |   2 +-
 .../components/input/examples/5/index.html    |  18 +--
 .../components/input/examples/5/index.less    |   4 -
 .../components/input/input.component.ts       |   3 -
 .../modules/components/input/input.module.ts  |   2 -
 .../components/input/input.template.html      |  10 --
 .../components/link/examples/3/index.html     |   2 +-
 .../notification/examples/1/index.html        |   2 +-
 .../notification/examples/3/index.html        |  30 +----
 .../notification/notification.module.ts       |   2 -
 .../primitive-textfield.component.ts          |   2 +-
 .../primitive-textfield.module.ts             |   4 -
 .../scrollbar/examples/5/style.less           |   2 +-
 .../scrollbar/examples/5/template.html        |   2 +-
 .../components/scrollbar/scrollbar.module.ts  |   2 -
 .../components/slider/examples/6/index.html   |   6 +-
 .../components/slider/slider.module.ts        |   2 -
 .../swipe-action/examples/2/index.html        |   1 -
 .../components/tabs/examples/3/index.html     |   3 +-
 .../modules/components/tabs/tabs.module.ts    |   2 -
 .../components/tag/examples/2/index.html      |  10 +-
 .../src/modules/components/tag/tag.module.ts  |   3 +-
 .../examples/import/import-module.md          |  15 ---
 .../examples/import/insert-component.md       |  12 --
 .../examples/import/insert-template.md        |   7 --
 .../theme-night/theme-night.component.ts      |  19 ---
 .../theme-night/theme-night.module.ts         |  17 ---
 .../theme-night/theme-night.template.html     |  61 ---------
 .../theme-switcher/examples/1/index.html      |  19 ---
 .../theme-switcher/examples/1/index.ts        |  13 --
 .../examples/elderly/elderly.component.ts     |  12 --
 .../examples/elderly/elderly.style.less       |  14 ---
 .../theme-switcher.component.ts               |  17 ---
 .../theme-switcher/theme-switcher.module.ts   |  31 -----
 .../theme-switcher/theme-switcher.style.less  |  33 -----
 .../theme-switcher.template.html              |  34 -----
 .../components/tooltip/examples/2/index.html  |   3 +-
 .../components/tooltip/tooltip.module.ts      |   2 -
 .../customization/variables/index.html        |  18 ---
 .../modules/customization/wrapper/index.html  |  13 --
 .../modules/customization/wrapper/index.ts    |   3 -
 .../hint-manual/examples/1/index.html         |  20 +--
 .../hint-manual/hint-manual.module.ts         |   8 +-
 .../hint-pointer/hint-pointer.module.ts       |   3 +-
 .../directives/hint/examples/1/index.html     |   2 +-
 .../directives/media/examples/2/index.html    |   8 +-
 .../modules/directives/media/media.module.ts  |   3 +-
 .../mode/examples/import/import-module.md     |  14 ---
 .../mode/examples/import/insert-template.md   |   3 -
 .../modules/directives/mode/mode.component.ts |  19 ---
 .../modules/directives/mode/mode.module.ts    |  26 ----
 .../directives/mode/mode.template.html        |  66 ----------
 .../{mode => theme}/examples/1/index.html     |   4 +-
 .../{mode => theme}/examples/1/index.less     |   1 +
 .../{mode => theme}/examples/1/index.ts       |   9 +-
 .../src/modules/directives/theme/index.html   |  20 +++
 .../src/modules/directives/theme/index.ts     |  11 ++
 .../card-large/examples/11/index.html         |   7 +-
 .../experimental/cell/examples/6/index.html   |   2 +-
 .../surface/examples/7/index.html             |  16 +--
 .../surface/examples/7/index.less             |   3 +
 .../experimental/surface/surface.module.ts    |   2 -
 .../experimental/tooltip/tooltip.module.ts    |   2 -
 .../demo/src/modules/icons/icons.component.ts |  10 --
 .../themes/bootstrap/bootstrap.component.ts   |  12 --
 .../themes/bootstrap/bootstrap.style.less     | 102 ---------------
 .../themes/material/material.component.ts     |  12 --
 .../themes/material/material.style.less       | 104 ----------------
 .../demo/src/modules/themes/themes.module.ts  |  10 --
 .../components/navigation/aside.component.ts  |   2 +-
 .../components/navigation/header.component.ts |   2 +-
 .../components/tooltip/tooltip.component.ts   |  19 +--
 .../accordion-item.component.ts               |   7 +-
 .../accordion-item/accordion-item.style.less  |  59 +--------
 .../breadcrumbs/breadcrumbs.component.ts      |   4 +-
 .../kit/components/filter/filter.module.ts    |   2 -
 .../components/filter/filter.template.html    |   1 -
 .../input-password.component.ts               |  17 +--
 .../input-tag/input-tag.component.ts          |  15 +--
 .../components/input-tag/input-tag.options.ts |   2 +-
 .../components/input-tag/input-tag.style.less |   2 +-
 .../input-tag/input-tag.template.html         |   2 +-
 .../test/input-tag-no-mode.component.spec.ts  |  58 ---------
 .../pagination/pagination.component.ts        |   8 +-
 .../progress-bar/progress-bar.component.less  |   4 -
 .../progress-bar/progress-bar.component.ts    |  15 +--
 .../progress-circle.component.ts              |  15 +--
 .../progress-circle.style.less                |   4 -
 projects/kit/components/push/index.ts         |   1 -
 .../kit/components/push/push.component.ts     |   3 +-
 .../kit/components/push/push.directive.ts     |  29 -----
 projects/kit/components/push/push.module.ts   |  15 +--
 projects/kit/components/tag/tag.component.ts  |  13 +-
 projects/kit/components/tag/tag.style.less    |  33 ++---
 .../components/textarea/textarea.component.ts |   5 -
 .../components/textarea/textarea.style.less   |  16 ---
 .../directives/skeleton/skeleton.style.less   |   2 +-
 210 files changed, 373 insertions(+), 2350 deletions(-)
 create mode 100644 projects/addon-doc/services/theme-dark.options.ts
 create mode 100644 projects/addon-doc/services/theme-dark.service.ts
 delete mode 100644 projects/addon-doc/services/theme-night.options.ts
 delete mode 100644 projects/addon-doc/services/theme-night.service.ts
 delete mode 100644 projects/core/components/theme-night/index.ts
 delete mode 100644 projects/core/components/theme-night/ng-package.json
 delete mode 100644 projects/core/components/theme-night/theme-night.component.ts
 delete mode 100644 projects/core/components/theme-night/theme-night.module.ts
 delete mode 100644 projects/core/components/theme-night/theme-night.style.less
 delete mode 100644 projects/core/directives/mode/index.ts
 delete mode 100644 projects/core/directives/mode/mode.directive.ts
 delete mode 100644 projects/core/directives/mode/mode.module.ts
 delete mode 100644 projects/core/directives/mode/ng-package.json
 delete mode 100644 projects/core/providers/mode.provider.ts
 rename projects/core/services/{night-theme.service.ts => dark-theme.service.ts} (69%)
 rename projects/core/services/test/{night-theme.service.spec.ts => dark-theme.service.spec.ts} (84%)
 delete mode 100644 projects/core/tokens/mode.ts
 delete mode 100644 projects/demo/src/modules/app/customization/customization.component.ts
 delete mode 100644 projects/demo/src/modules/app/customization/customization.module.ts
 delete mode 100644 projects/demo/src/modules/app/customization/customization.providers.ts
 delete mode 100644 projects/demo/src/modules/app/customization/customization.style.less
 delete mode 100644 projects/demo/src/modules/app/customization/customization.template.html
 delete mode 100644 projects/demo/src/modules/components/theme-night/examples/import/import-module.md
 delete mode 100644 projects/demo/src/modules/components/theme-night/examples/import/insert-component.md
 delete mode 100644 projects/demo/src/modules/components/theme-night/examples/import/insert-template.md
 delete mode 100644 projects/demo/src/modules/components/theme-night/theme-night.component.ts
 delete mode 100644 projects/demo/src/modules/components/theme-night/theme-night.module.ts
 delete mode 100644 projects/demo/src/modules/components/theme-night/theme-night.template.html
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/examples/1/index.html
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/examples/1/index.ts
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.component.ts
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.style.less
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/theme-switcher.module.ts
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/theme-switcher.style.less
 delete mode 100644 projects/demo/src/modules/components/theme-switcher/theme-switcher.template.html
 delete mode 100644 projects/demo/src/modules/directives/mode/examples/import/import-module.md
 delete mode 100644 projects/demo/src/modules/directives/mode/examples/import/insert-template.md
 delete mode 100644 projects/demo/src/modules/directives/mode/mode.component.ts
 delete mode 100644 projects/demo/src/modules/directives/mode/mode.module.ts
 delete mode 100644 projects/demo/src/modules/directives/mode/mode.template.html
 rename projects/demo/src/modules/directives/{mode => theme}/examples/1/index.html (93%)
 rename projects/demo/src/modules/directives/{mode => theme}/examples/1/index.less (88%)
 rename projects/demo/src/modules/directives/{mode => theme}/examples/1/index.ts (56%)
 create mode 100644 projects/demo/src/modules/directives/theme/index.html
 create mode 100644 projects/demo/src/modules/directives/theme/index.ts
 delete mode 100644 projects/demo/src/modules/themes/bootstrap/bootstrap.component.ts
 delete mode 100644 projects/demo/src/modules/themes/bootstrap/bootstrap.style.less
 delete mode 100644 projects/demo/src/modules/themes/material/material.component.ts
 delete mode 100644 projects/demo/src/modules/themes/material/material.style.less
 delete mode 100644 projects/demo/src/modules/themes/themes.module.ts
 delete mode 100644 projects/kit/components/input-tag/test/input-tag-no-mode.component.spec.ts
 delete mode 100644 projects/kit/components/push/push.directive.ts

diff --git a/projects/addon-charts/components/axes/axes.component.ts b/projects/addon-charts/components/axes/axes.component.ts
index 41e1a44d6448..e9692ea8a899 100644
--- a/projects/addon-charts/components/axes/axes.component.ts
+++ b/projects/addon-charts/components/axes/axes.component.ts
@@ -1,24 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    inject,
-    Input,
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import {TUI_ALWAYS_DASHED, TUI_ALWAYS_SOLID} from '@taiga-ui/addon-charts/constants';
 import type {TuiLineHandler, TuiLineType} from '@taiga-ui/addon-charts/types';
 import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
-import {MODE_PROVIDER, TUI_MODE} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-axes',
     templateUrl: './axes.template.html',
     styleUrls: ['./axes.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiAxesComponent {
     @Input()
@@ -60,8 +49,6 @@ export class TuiAxesComponent {
     @Input()
     public verticalLinesHandler: TuiLineHandler = TUI_ALWAYS_DASHED;
 
-    protected readonly mode$ = inject(TUI_MODE);
-
     public get hasXLabels(): boolean {
         return !!this.axisXLabels.length;
     }
diff --git a/projects/addon-charts/components/axes/axes.style.less b/projects/addon-charts/components/axes/axes.style.less
index 42d4f89e5489..2dd4b2f3950d 100644
--- a/projects/addon-charts/components/axes/axes.style.less
+++ b/projects/addon-charts/components/axes/axes.style.less
@@ -20,14 +20,6 @@
     border-width: 1px;
     border-color: var(--tui-base-03);
     isolation: isolate;
-
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
 }
 
 .t-horizontal {
@@ -55,14 +47,6 @@
     border-width: 1px;
     border-color: var(--tui-base-03);
 
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
-
     &_vertical {
         :host._centered &:first-child {
             flex: 1 0 1px;
@@ -90,10 +74,6 @@
     &_primary {
         transform: rotate(180deg);
     }
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
 }
 
 .t-labels-y {
@@ -103,10 +83,6 @@
     justify-content: space-between;
     color: var(--tui-text-02);
 
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
-
     &_primary {
         text-align: right;
         padding-right: 0.75rem;
@@ -148,14 +124,6 @@
     flex: 1;
     margin-bottom: 1.5625rem;
 
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
-
     &:before {
         content: '';
         display: block;
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.component.ts b/projects/addon-charts/components/pie-chart/pie-chart.component.ts
index 6cc1d5df1c1c..8dfdbcb73d04 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.component.ts
+++ b/projects/addon-charts/components/pie-chart/pie-chart.component.ts
@@ -34,9 +34,7 @@ const TRANSFORM = {
     templateUrl: './pie-chart.template.html',
     styleUrls: ['./pie-chart.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    viewProviders: [
-        tuiHintOptionsProvider({direction: 'top-right', appearance: 'onDark'}),
-    ],
+    viewProviders: [tuiHintOptionsProvider({direction: 'top-right', appearance: 'dark'})],
 })
 export class TuiPieChartComponent {
     private readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
index ae7b209cd1a6..8974d42b1962 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
@@ -30,11 +30,9 @@ import {
 } from '@taiga-ui/cdk';
 import type {TuiDataListHost} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
     TEXTFIELD_CONTROLLER_PROVIDER,
     TUI_COMMON_ICONS,
     TUI_DIGIT_REGEXP,
-    TUI_MODE,
     TUI_NON_DIGIT_REGEXP,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
     tuiAsDataListHost,
@@ -59,11 +57,9 @@ const EXPIRE_COMPLETE_LENGTH = 5; // MM/YY
         tuiAsFocusableItemAccessor(TuiInputCardGroupedComponent),
         tuiAsControl(TuiInputCardGroupedComponent),
         tuiAsDataListHost(TuiInputCardGroupedComponent),
-        MODE_PROVIDER,
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
-        '($.data-mode.attr)': 'mode$',
         'data-size': 'l',
     },
 })
@@ -126,7 +122,6 @@ export class TuiInputCardGroupedComponent
         separator: '/',
     });
 
-    protected readonly mode$ = inject(TUI_MODE);
     protected readonly cardGroupedTexts$ = inject(TUI_INPUT_CARD_GROUPED_TEXTS);
     protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
     protected readonly icons = inject(TUI_COMMON_ICONS);
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
index f3e888792f2c..ed3992cadbf5 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -13,10 +13,6 @@
     width: @width-full;
     border-radius: var(--tui-radius-m);
 
-    &[data-mode='onDark'] {
-        --tui-autofill: var(--tui-autofill-night);
-    }
-
     :host-context(tui-root._mobile) {
         width: @width-mobile;
     }
@@ -119,12 +115,7 @@
         opacity: 1;
     }
 
-    :host[data-mode='onDark'] &::placeholder {
-        color: var(--tui-text-03-night);
-    }
-
-    &&&_card,
-    :host[data-mode='onDark'] &&&_card {
+    &&&_card {
         // @note: (&&&_) it's increasing css cascade priority
         &:not(.t-input_hidden),
         &:not(.t-input_hidden)::placeholder,
diff --git a/projects/addon-doc/components/demo/demo.component.ts b/projects/addon-doc/components/demo/demo.component.ts
index 1d4c8bd7ed67..3fa7311573ae 100644
--- a/projects/addon-doc/components/demo/demo.component.ts
+++ b/projects/addon-doc/components/demo/demo.component.ts
@@ -5,7 +5,6 @@ import {
     Component,
     ContentChild,
     ElementRef,
-    forwardRef,
     HostBinding,
     HostListener,
     inject,
@@ -18,21 +17,17 @@ import {FormGroup} from '@angular/forms';
 import type {Params, UrlTree} from '@angular/router';
 import {UrlSerializer} from '@angular/router';
 import type {TuiDemoParams} from '@taiga-ui/addon-doc/interfaces';
+import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import {tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
 import {
-    TUI_IS_MOBILE,
     tuiClamp,
     tuiCleanObject,
-    TuiDestroyService,
     tuiPure,
     tuiPx,
     TuiResizeableDirective,
     tuiToInteger,
 } from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {TuiModeDirective} from '@taiga-ui/core';
-import {Subject} from 'rxjs';
 
 const MIN_WIDTH = 160;
 
@@ -41,13 +36,6 @@ const MIN_WIDTH = 160;
     templateUrl: './demo.template.html',
     styleUrls: ['./demo.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        TuiDestroyService,
-        {
-            provide: TuiModeDirective,
-            useExisting: forwardRef(() => TuiDocDemoComponent),
-        },
-    ],
 })
 export class TuiDocDemoComponent implements OnInit {
     @ViewChild(TuiResizeableDirective, {static: true})
@@ -71,12 +59,13 @@ export class TuiDocDemoComponent implements OnInit {
     @HostBinding('class._sticky')
     public sticky = true;
 
-    public mode: TuiBrightness | null = this.params.tuiMode || null;
-    public readonly change$ = new Subject<void>();
-
     @ContentChild(TemplateRef)
     protected readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
+    protected dark = tuiCoerceValueIsTrue(
+        this.params.darkMode ?? inject(TuiThemeDarkService).value,
+    );
+
     protected testForm?: FormGroup;
 
     protected readonly updateOnVariants = ['change', 'blur', 'submit'] as const;
@@ -87,8 +76,6 @@ export class TuiDocDemoComponent implements OnInit {
     protected opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
     protected expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
     protected sandboxWidth = tuiToInteger(this.params.sandboxWidth);
-    protected readonly items: readonly TuiBrightness[] = ['onLight', 'onDark'];
-    protected readonly isMobile = inject(TUI_IS_MOBILE);
     protected readonly texts = inject(TUI_DOC_DEMO_TEXTS);
 
     public ngOnInit(): void {
@@ -107,10 +94,9 @@ export class TuiDocDemoComponent implements OnInit {
         this.updateUrl({sandboxWidth: this.sandboxWidth});
     }
 
-    protected onModeChange(mode: TuiBrightness | null): void {
-        this.mode = mode;
-        this.updateUrl({sandboxWidth: this.sandboxWidth});
-        this.change$.next();
+    protected onModeChange(dark: boolean): void {
+        this.dark = dark;
+        this.updateUrl({sandboxWidth: this.sandboxWidth, darkMode: this.dark});
     }
 
     protected toggleDetails(): void {
@@ -161,11 +147,10 @@ export class TuiDocDemoComponent implements OnInit {
         const {queryParams} = tree;
 
         delete queryParams.sandboxWidth;
-        delete queryParams.tuiMode;
 
         tree.queryParams = {
             ...queryParams,
-            ...tuiCleanObject({tuiMode: this.mode, ...params}),
+            ...tuiCleanObject({...params}),
         };
 
         this.locationRef.go(this.urlStateHandler(tree));
diff --git a/projects/addon-doc/components/demo/demo.module.ts b/projects/addon-doc/components/demo/demo.module.ts
index 1f4a84f5d29c..1a49a75cf0c3 100644
--- a/projects/addon-doc/components/demo/demo.module.ts
+++ b/projects/addon-doc/components/demo/demo.module.ts
@@ -1,7 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
 import {TuiResizerModule} from '@taiga-ui/cdk';
 import {
     TuiButtonDirective,
@@ -10,7 +9,6 @@ import {
     TuiGroupDirective,
     TuiHintModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiSvgModule,
     TuiTextfieldControllerModule,
     TuiTooltipModule,
@@ -21,6 +19,7 @@ import {
     TuiChevronDirective,
     TuiDataListWrapperModule,
     TuiSelectModule,
+    TuiSwitchComponent,
 } from '@taiga-ui/kit';
 
 import {TuiDocDemoComponent} from './demo.component';
@@ -30,14 +29,12 @@ import {TuiDocDemoComponent} from './demo.component';
         CommonModule,
         ReactiveFormsModule,
         FormsModule,
-        RouterModule,
         TuiLinkDirective,
         TuiButtonDirective,
         TuiSelectModule,
         TuiExpandModule,
         TuiGroupDirective,
         TuiTooltipModule,
-        TuiModeModule,
         TuiCheckboxComponent,
         TuiSvgModule,
         TuiDataListWrapperModule,
@@ -47,6 +44,7 @@ import {TuiDocDemoComponent} from './demo.component';
         TuiResizerModule,
         TuiBlockDirective,
         TuiChevronDirective,
+        TuiSwitchComponent,
     ],
     declarations: [TuiDocDemoComponent],
     exports: [TuiDocDemoComponent],
diff --git a/projects/addon-doc/components/demo/demo.style.less b/projects/addon-doc/components/demo/demo.style.less
index f45c7033b5b5..0bd2c72704b2 100644
--- a/projects/addon-doc/components/demo/demo.style.less
+++ b/projects/addon-doc/components/demo/demo.style.less
@@ -12,10 +12,11 @@
     pointer-events: none;
 }
 
-.t-bg-toggle {
+.t-settings {
     position: absolute;
     bottom: ~'calc(100% + 0.75rem)';
     display: flex;
+    gap: 2rem;
     align-items: center;
     justify-content: flex-end;
     pointer-events: none;
@@ -26,6 +27,12 @@
     }
 }
 
+.t-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
 .t-wrapper {
     box-shadow: var(--tui-shadow-dropdown);
     display: flex;
@@ -35,6 +42,7 @@
     min-height: 6rem;
     width: 100%;
     min-width: 10rem;
+    color: var(--tui-text-01);
     background-color: var(--tui-base-01);
     overflow: hidden;
     pointer-events: auto;
@@ -52,29 +60,6 @@
             -0.625rem 0;
     }
 
-    &.t-wrapper_dark {
-        background-color: @color-dark;
-        color: var(--tui-base-01);
-    }
-
-    &.t-wrapper_gray {
-        background-color: @color-gray;
-    }
-
-    &.t-wrapper_dark.t-wrapper_transparent {
-        background-image: linear-gradient(45deg, var(--tui-focus) 25%, transparent 25%),
-            linear-gradient(-45deg, var(--tui-focus) 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, var(--tui-focus) 75%),
-            linear-gradient(-45deg, transparent 75%, var(--tui-focus) 75%);
-    }
-
-    &.t-wrapper_gray.t-wrapper_transparent {
-        background-image: linear-gradient(45deg, var(--tui-base-05) 25%, transparent 25%),
-            linear-gradient(-45deg, var(--tui-base-05) 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, var(--tui-base-05) 75%),
-            linear-gradient(-45deg, transparent 75%, var(--tui-base-05) 75%);
-    }
-
     :host-context(tui-root._mobile) & {
         min-height: auto;
     }
diff --git a/projects/addon-doc/components/demo/demo.template.html b/projects/addon-doc/components/demo/demo.template.html
index 7f877fdcec17..b4c32b93961e 100644
--- a/projects/addon-doc/components/demo/demo.template.html
+++ b/projects/addon-doc/components/demo/demo.template.html
@@ -1,96 +1,18 @@
-<div
-    class="t-bg-toggle"
-    [tuiMode]="null"
->
-    <ng-template #tooltip>
-        {{ texts[0] }}
-        <!-- TODO: @taiga-ui/addon-doc should not include relative link of Taiga UI demo application -->
-        <a
-            routerLink="/directives/mode"
-            tuiLink
-            tuiMode="onDark"
-        >
-            <code>tuiMode</code>
-        </a>
-    </ng-template>
-    <ng-container *ngIf="isMobile; else desktop">
-        <tui-select
-            tuiTextfieldSize="s"
-            class="t-mode"
-            [ngModel]="mode"
-            [tuiHintContent]="tooltip"
-            [tuiTextfieldCleaner]="true"
+<div class="t-settings">
+    <label class="t-label">
+        <input
+            size="s"
+            tuiSwitch
+            type="checkbox"
+            [ngModel]="dark"
             (ngModelChange)="onModeChange($event)"
-        >
-            tuiMode
-            <tui-data-list-wrapper
-                *tuiDataList
-                [items]="items"
-            />
-        </tui-select>
-    </ng-container>
-    <ng-template #desktop>
-        tuiMode:
-        <tui-tooltip
-            describeId="form"
-            [content]="tooltip"
         />
-        <div
-            tuiGroup
-            class="t-group"
-            [collapsed]="true"
-        >
-            <label
-                appearance=""
-                tuiBlock="s"
-                class="tui-group__auto-width-item"
-            >
-                null
-                <input
-                    tuiBlock
-                    type="radio"
-                    [ngModel]="mode"
-                    [value]="null"
-                    (ngModelChange)="onModeChange($event)"
-                />
-            </label>
-            <label
-                appearance=""
-                tuiBlock="s"
-                class="tui-group__auto-width-item"
-            >
-                onDark
-                <input
-                    tuiBlock
-                    type="radio"
-                    value="onDark"
-                    [ngModel]="mode"
-                    (ngModelChange)="onModeChange($event)"
-                />
-            </label>
-            <label
-                appearance=""
-                tuiBlock="s"
-                class="tui-group__auto-width-item"
-            >
-                onLight
-                <input
-                    tuiBlock
-                    type="radio"
-                    value="onLight"
-                    [ngModel]="mode"
-                    (ngModelChange)="onModeChange($event)"
-                />
-            </label>
-        </div>
-    </ng-template>
-    <label
-        class="t-checkbox"
-        [style.gap.rem]="0.5"
-    >
+        {{ texts[0] }}
+    </label>
+    <label class="t-label">
         <input
             size="s"
-            tuiCheckbox
+            tuiSwitch
             type="checkbox"
             [ngModel]="opaque"
             (ngModelChange)="changeOpaque($event)"
@@ -101,15 +23,13 @@
 <div
     tuiResizeable
     class="t-wrapper"
-    [class.t-wrapper_dark]="mode === 'onDark'"
-    [class.t-wrapper_gray]="mode === 'onLight'"
+    [attr.tuiTheme]="dark ? 'dark' : 'light'"
     [class.t-wrapper_transparent]="!opaque"
 >
     <div class="t-content">
         <div
             #content
             id="demo-content"
-            [attr.tuiTheme]="mode === 'onDark' ? 'night' : null"
         >
             <form
                 *ngIf="testForm"
diff --git a/projects/addon-doc/components/documentation/documentation.module.ts b/projects/addon-doc/components/documentation/documentation.module.ts
index c2c98345f73e..0f0273643eb3 100644
--- a/projects/addon-doc/components/documentation/documentation.module.ts
+++ b/projects/addon-doc/components/documentation/documentation.module.ts
@@ -8,7 +8,6 @@ import {
     TuiDropdownModule,
     TuiGroupDirective,
     TuiLinkDirective,
-    TuiModeModule,
     TuiNotificationModule,
     TuiPrimitiveTextfieldModule,
     TuiTextfieldControllerModule,
@@ -43,7 +42,6 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
         TuiSwitchComponent,
         TuiLinkDirective,
         TuiInputNumberModule,
-        TuiModeModule,
         TuiGroupDirective,
         TuiInputOpacityModule,
         TuiPrimitiveTextfieldModule,
diff --git a/projects/addon-doc/components/main/main.component.ts b/projects/addon-doc/components/main/main.component.ts
index e54ae28f9d6f..e17748a28d06 100644
--- a/projects/addon-doc/components/main/main.component.ts
+++ b/projects/addon-doc/components/main/main.component.ts
@@ -1,17 +1,12 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    forwardRef,
-    HostBinding,
     inject,
     ViewEncapsulation,
 } from '@angular/core';
-import {TuiThemeNightService, TuiThemeService} from '@taiga-ui/addon-doc/services';
+import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_ICONS} from '@taiga-ui/addon-doc/tokens';
 import {TuiSwipeService} from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {TuiModeDirective} from '@taiga-ui/core';
-import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs';
 
 @Component({
     selector: 'tui-doc-main',
@@ -21,34 +16,14 @@ import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs';
     // @note: This one was default on purpose so we can test demo in default mode.
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
-    providers: [
-        {
-            provide: TuiModeDirective,
-            useExisting: forwardRef(() => TuiDocMainComponent),
-        },
-        TuiSwipeService,
-    ],
+    providers: [TuiSwipeService],
 })
 export class TuiDocMainComponent {
     private readonly icons = inject(TUI_DOC_ICONS);
 
-    public readonly night = inject(TuiThemeNightService);
-    public readonly change$ = this.night;
-    public readonly night$ = this.change$.pipe(
-        startWith(null),
-        map(() => this.night.value),
-        distinctUntilChanged(),
-        shareReplay({bufferSize: 1, refCount: true}),
-    );
-
-    protected readonly theme = inject(TuiThemeService);
-
-    @HostBinding('attr.data-mode')
-    protected get mode(): TuiBrightness | null {
-        return this.night.value ? 'onDark' : null;
-    }
+    protected readonly dark$ = inject(TuiThemeDarkService);
 
     protected get icon(): string {
-        return this.night.value ? this.icons.day : this.icons.night;
+        return this.dark$.value ? this.icons.light : this.icons.dark;
     }
 }
diff --git a/projects/addon-doc/components/main/main.module.ts b/projects/addon-doc/components/main/main.module.ts
index 9f6d694313e1..b6fa5b76fd20 100644
--- a/projects/addon-doc/components/main/main.module.ts
+++ b/projects/addon-doc/components/main/main.module.ts
@@ -5,9 +5,7 @@ import {
     TuiAlertModule,
     TuiButtonDirective,
     TuiDialogModule,
-    TuiModeModule,
     TuiRootModule,
-    TuiThemeNightModule,
 } from '@taiga-ui/core';
 
 import {TuiDocHeaderModule} from '../internal/header/header.module';
@@ -18,13 +16,11 @@ import {TuiDocMainComponent} from './main.component';
     imports: [
         CommonModule,
         RouterModule,
-        TuiThemeNightModule,
         TuiDocHeaderModule,
         TuiRootModule,
         TuiDialogModule,
         TuiAlertModule,
         TuiButtonDirective,
-        TuiModeModule,
         TuiDocNavigationModule,
     ],
     declarations: [TuiDocMainComponent],
diff --git a/projects/addon-doc/components/main/main.style.less b/projects/addon-doc/components/main/main.style.less
index e380be16cc2d..0fad1c8248f4 100644
--- a/projects/addon-doc/components/main/main.style.less
+++ b/projects/addon-doc/components/main/main.style.less
@@ -29,7 +29,6 @@ html,
 body {
     scroll-padding-top: @sticky-header-height;
     background: var(--tui-base-01);
-    height: auto;
 }
 
 tui-root > tui-scroll-controls > .t-bar_vertical {
@@ -105,12 +104,8 @@ tui-doc-navigation.tui-doc-navigation {
     display: block;
 }
 
-.tui-doc-night-mode-switch {
+.tui-doc-dark-mode-switch {
     margin-left: 1rem;
-
-    tui-svg {
-        color: var(--tui-text-02);
-    }
 }
 
 // highlightjs custom theme
@@ -205,13 +200,6 @@ tui-doc-code {
         color: var(--tui-link-hover);
     }
 
-    [data-mode='onDark'] {
-        .hljs-variable,
-        .hljs-template-variable {
-            color: var(--tui-warning-fill);
-        }
-    }
-
     .hljs-addition {
         background: var(--tui-success-bg);
     }
@@ -239,3 +227,10 @@ tui-doc-code {
         padding-right: 1em !important;
     }
 }
+
+[tuiTheme='dark'] tui-doc-code {
+    .hljs-variable,
+    .hljs-template-variable {
+        color: var(--tui-warning-fill);
+    }
+}
diff --git a/projects/addon-doc/components/main/main.template.html b/projects/addon-doc/components/main/main.template.html
index fc8d3c9386c4..794b8bac95be 100644
--- a/projects/addon-doc/components/main/main.template.html
+++ b/projects/addon-doc/components/main/main.template.html
@@ -1,5 +1,4 @@
-<tui-theme-night *ngIf="theme.isDefaultTheme && night.useDefaultNightTheme && (night$ | async)" />
-<tui-root [attr.tuiTheme]="theme.isDefaultTheme && night.useDefaultNightTheme && (night$ | async) ? 'night' : null">
+<tui-root [attr.tuiTheme]="(dark$ | async) ? 'dark' : null">
     <div class="tui-doc-page">
         <tui-doc-navigation class="tui-doc-navigation">
             <ng-content select="tuiDocNavigation" />
@@ -15,10 +14,10 @@
             size="s"
             tuiIconButton
             type="button"
-            class="tui-doc-night-mode-switch"
+            class="tui-doc-dark-mode-switch"
             [iconLeft]="icon"
             [style.border-radius.%]="100"
-            (click)="night.toggle()"
+            (click)="dark$.toggle()"
         ></button>
     </header>
     <ng-container ngProjectAs="tuiOverContent">
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
index ba3c0e7191cf..caac48ad00da 100644
--- a/projects/addon-doc/components/navigation/navigation.component.ts
+++ b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -25,11 +25,9 @@ import {
     tuiUniqBy,
     tuiWatch,
 } from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {TUI_COMMON_ICONS, TuiModeDirective} from '@taiga-ui/core';
+import {TUI_COMMON_ICONS} from '@taiga-ui/core';
 import type {TuiInputComponent} from '@taiga-ui/kit';
-import type {Observable} from 'rxjs';
-import {combineLatest, filter, map, startWith, switchMap, take, takeUntil} from 'rxjs';
+import {combineLatest, filter, map, switchMap, take, takeUntil} from 'rxjs';
 
 import {
     NAVIGATION_ITEMS,
@@ -47,7 +45,6 @@ import {
 })
 export class TuiDocNavigationComponent {
     private readonly router = inject(Router);
-    private readonly mode = inject(TuiModeDirective);
     private readonly doc = inject(DOCUMENT);
 
     @HostBinding('class._open')
@@ -72,11 +69,6 @@ export class TuiDocNavigationComponent {
         map(search => this.filterItems(this.flattenSubPages(this.items), search)),
     );
 
-    protected readonly mode$: Observable<TuiBrightness> = this.mode.change$.pipe(
-        startWith(null),
-        map(() => this.mode.mode || 'onLight'),
-    );
-
     constructor() {
         const titleService = inject(Title);
         const readyToScroll$ = inject(TUI_DOC_PAGE_LOADED);
diff --git a/projects/addon-doc/components/navigation/navigation.module.ts b/projects/addon-doc/components/navigation/navigation.module.ts
index 1a5264c23d76..f9836216edaf 100644
--- a/projects/addon-doc/components/navigation/navigation.module.ts
+++ b/projects/addon-doc/components/navigation/navigation.module.ts
@@ -11,7 +11,6 @@ import {
     TuiExpandModule,
     TuiHostedDropdownModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiScrollbarComponent,
     TuiSvgModule,
     TuiTextfieldControllerModule,
@@ -33,7 +32,6 @@ import {TuiDocNavigationComponent} from './navigation.component';
         TuiTextfieldControllerModule,
         TuiActiveZoneDirective,
         TuiLetModule,
-        TuiModeModule,
         TuiLinkDirective,
         TuiExpandModule,
         TuiHostedDropdownModule,
diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
index 1e54dd57a3db..e6eeee4cf67d 100644
--- a/projects/addon-doc/components/navigation/navigation.template.html
+++ b/projects/addon-doc/components/navigation/navigation.template.html
@@ -55,10 +55,7 @@
 </tui-input>
 
 <nav class="t-navigation">
-    <tui-scrollbar
-        class="t-scrollbar"
-        [tuiMode]="mode$ | async"
-    >
+    <tui-scrollbar class="t-scrollbar">
         <tui-accordion
             [closeOthers]="false"
             [rounded]="false"
diff --git a/projects/addon-doc/interfaces/demo-params.ts b/projects/addon-doc/interfaces/demo-params.ts
index b6b0fb2e5600..fb7379e7a5d8 100644
--- a/projects/addon-doc/interfaces/demo-params.ts
+++ b/projects/addon-doc/interfaces/demo-params.ts
@@ -2,6 +2,6 @@ export interface TuiDemoParams {
     sandboxExpanded?: boolean;
     sandboxOpaque?: boolean;
     sandboxWidth?: number;
-    tuiMode?: 'onDark' | 'onLight' | null;
+    darkMode?: boolean;
     updateOn?: 'blur' | 'change' | 'submit';
 }
diff --git a/projects/addon-doc/services/index.ts b/projects/addon-doc/services/index.ts
index d4311f309dbb..579d39364a1a 100644
--- a/projects/addon-doc/services/index.ts
+++ b/projects/addon-doc/services/index.ts
@@ -1,4 +1,4 @@
 export * from './theme.options';
 export * from './theme.service';
-export * from './theme-night.options';
-export * from './theme-night.service';
+export * from './theme-dark.options';
+export * from './theme-dark.service';
diff --git a/projects/addon-doc/services/theme-dark.options.ts b/projects/addon-doc/services/theme-dark.options.ts
new file mode 100644
index 000000000000..cd8c7ffaef4b
--- /dev/null
+++ b/projects/addon-doc/services/theme-dark.options.ts
@@ -0,0 +1,5 @@
+import {tuiCreateToken} from '@taiga-ui/cdk';
+
+export const TUI_DARK_THEME_DEFAULT_KEY = 'tuiNight';
+export const TUI_DARK_THEME_KEY = tuiCreateToken(TUI_DARK_THEME_DEFAULT_KEY);
+export const TUI_DARK_THEME = tuiCreateToken(false);
diff --git a/projects/addon-doc/services/theme-dark.service.ts b/projects/addon-doc/services/theme-dark.service.ts
new file mode 100644
index 000000000000..7aaee2a65a1e
--- /dev/null
+++ b/projects/addon-doc/services/theme-dark.service.ts
@@ -0,0 +1,34 @@
+import {inject, Injectable} from '@angular/core';
+import {LOCAL_STORAGE, WINDOW} from '@ng-web-apis/common';
+import {BehaviorSubject} from 'rxjs';
+
+import {TUI_DARK_THEME, TUI_DARK_THEME_KEY} from './theme-dark.options';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class TuiThemeDarkService extends BehaviorSubject<boolean> {
+    private readonly storage = inject(LOCAL_STORAGE);
+    private readonly key = inject(TUI_DARK_THEME_KEY);
+
+    constructor() {
+        super(isDark(inject(LOCAL_STORAGE), inject(TUI_DARK_THEME_KEY), inject(WINDOW)));
+    }
+
+    public override next(dark: boolean): void {
+        this.storage.setItem(this.key, String(dark));
+        super.next(dark);
+    }
+
+    public toggle(): void {
+        this.next(!this.value);
+    }
+}
+
+function isDark(storage: Storage, key: string, window: Window): boolean {
+    const fallback =
+        window.matchMedia('(prefers-color-scheme: dark)').matches ||
+        inject(TUI_DARK_THEME);
+
+    return storage.getItem(key) === 'true' || (storage.getItem(key) === null && fallback);
+}
diff --git a/projects/addon-doc/services/theme-night.options.ts b/projects/addon-doc/services/theme-night.options.ts
deleted file mode 100644
index dfe6eccbacd7..000000000000
--- a/projects/addon-doc/services/theme-night.options.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {tuiCreateToken} from '@taiga-ui/cdk';
-
-export const TUI_THEME_NIGHT_STORAGE_DEFAULT_KEY = 'tuiNight' as const;
-export const TUI_THEME_NIGHT_STORAGE_KEY = tuiCreateToken<string>(
-    TUI_THEME_NIGHT_STORAGE_DEFAULT_KEY,
-);
-export const TUI_USE_DEFAULT_NIGHT_THEME = tuiCreateToken(true);
diff --git a/projects/addon-doc/services/theme-night.service.ts b/projects/addon-doc/services/theme-night.service.ts
deleted file mode 100644
index 954d59bc44a3..000000000000
--- a/projects/addon-doc/services/theme-night.service.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {inject, Injectable} from '@angular/core';
-import {LOCAL_STORAGE, WINDOW} from '@ng-web-apis/common';
-import {BehaviorSubject} from 'rxjs';
-
-import {
-    TUI_THEME_NIGHT_STORAGE_KEY,
-    TUI_USE_DEFAULT_NIGHT_THEME,
-} from './theme-night.options';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class TuiThemeNightService extends BehaviorSubject<boolean> {
-    private readonly storage = inject(LOCAL_STORAGE);
-    private readonly key = inject(TUI_THEME_NIGHT_STORAGE_KEY);
-
-    public readonly useDefaultNightTheme = inject(TUI_USE_DEFAULT_NIGHT_THEME);
-
-    constructor() {
-        super(
-            isDark(
-                inject(LOCAL_STORAGE),
-                inject(TUI_THEME_NIGHT_STORAGE_KEY),
-                inject(WINDOW),
-            ),
-        );
-    }
-
-    public override next(night: boolean): void {
-        this.storage.setItem(this.key, String(night));
-        super.next(night);
-    }
-
-    public toggle(): void {
-        this.next(!this.value);
-    }
-}
-
-function isDark(storage: Storage, key: string, window: Window): boolean {
-    return (
-        storage[key] === 'true' ||
-        (storage[key] === null &&
-            window.matchMedia('(prefers-color-scheme: dark)').matches)
-    );
-}
diff --git a/projects/addon-doc/tokens/doc-icons.ts b/projects/addon-doc/tokens/doc-icons.ts
index 77ca2491a77d..2700197ef389 100644
--- a/projects/addon-doc/tokens/doc-icons.ts
+++ b/projects/addon-doc/tokens/doc-icons.ts
@@ -3,16 +3,16 @@ import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
 
 export interface TuiDocIcons {
     readonly code: string;
-    readonly day: string;
+    readonly light: string;
     readonly menu: string;
-    readonly night: string;
+    readonly dark: string;
     readonly search: string;
 }
 
 export const TUI_DOC_DEFAULT_ICONS: TuiDocIcons = {
     search: 'tuiIconSearch',
-    day: 'tuiIconSun',
-    night: 'tuiIconMoon',
+    light: 'tuiIconSun',
+    dark: 'tuiIconMoon',
     code: 'tuiIconCode',
     menu: 'tuiIconMenuLarge',
 };
diff --git a/projects/addon-doc/tokens/i18n.ts b/projects/addon-doc/tokens/i18n.ts
index d9311a6c7a1f..b8feb37d8101 100644
--- a/projects/addon-doc/tokens/i18n.ts
+++ b/projects/addon-doc/tokens/i18n.ts
@@ -7,10 +7,9 @@ import {tuiCreateToken} from '@taiga-ui/cdk';
 /**
  * tui-doc-demo i18n texts
  * Works with a tuple
- * [@string tuiMode tooltip content, @string word 'background', @string 'form value']
  */
 export const TUI_DOC_DEMO_TEXTS = tuiCreateToken<[string, string, string]>([
-    'Read more more about modes: ',
+    'Dark mode',
     'Background',
     'Form value',
 ]);
diff --git a/projects/addon-preview/components/preview/preview.template.html b/projects/addon-preview/components/preview/preview.template.html
index 73b349bba4fc..127525a5fc54 100644
--- a/projects/addon-preview/components/preview/preview.template.html
+++ b/projects/addon-preview/components/preview/preview.template.html
@@ -33,7 +33,7 @@
     <footer class="t-footer">
         <button
             *ngIf="rotatable"
-            tuiHintAppearance="onDark"
+            tuiHintAppearance="dark"
             tuiHintDescribe
             tuiHintDirection="top-right"
             tuiIconButton
diff --git a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
index e6cfd7b15455..0d3f1c52fc14 100644
--- a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
+++ b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
@@ -13,7 +13,7 @@
         </button>
         <label tuiSliderThumbLabel>
             <div
-                tuiHintAppearance="onDark"
+                tuiHintAppearance="dark"
                 tuiHintDirection="top-right"
                 [tuiHint]="hint"
                 [tuiHintManual]="!!(hintShow$ | async)"
@@ -48,7 +48,7 @@
     </section>
 
     <button
-        tuiHintAppearance="onDark"
+        tuiHintAppearance="dark"
         tuiHintDescribe
         tuiHintDirection="top-right"
         tuiIconButton
diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts
index 71f63339145f..7180942e7ab3 100644
--- a/projects/addon-table/components/table/directives/table.directive.ts
+++ b/projects/addon-table/components/table/directives/table.directive.ts
@@ -11,7 +11,6 @@ import {
 import {IntersectionObserverService} from '@ng-web-apis/intersection-observer';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {AbstractTuiController} from '@taiga-ui/cdk';
-import {TUI_MODE} from '@taiga-ui/core';
 import type {Observable} from 'rxjs';
 
 import {TUI_STUCK} from '../providers/stuck.provider';
@@ -22,7 +21,6 @@ import {TUI_TABLE_OPTIONS} from '../table.options';
     selector: 'table[tuiTable]',
     providers: TUI_TABLE_PROVIDERS,
     host: {
-        '($.data-mode.attr)': 'mode$',
         '($.class._stuck)': 'stuck$',
         style: 'border-collapse: separate',
     },
@@ -50,7 +48,6 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
     @Output()
     public readonly sorterChange = new EventEmitter<TuiComparator<T> | null>();
 
-    protected readonly mode$ = inject(TUI_MODE);
     protected readonly stuck$ = inject(TUI_STUCK);
     protected readonly entries$ = inject<Observable<IntersectionObserverEntry[]>>(
         IntersectionObserverService,
diff --git a/projects/addon-table/components/table/providers/table.providers.ts b/projects/addon-table/components/table/providers/table.providers.ts
index ce599c44769d..d5dab15f5364 100644
--- a/projects/addon-table/components/table/providers/table.providers.ts
+++ b/projects/addon-table/components/table/providers/table.providers.ts
@@ -6,7 +6,6 @@ import {
 } from '@ng-web-apis/intersection-observer';
 import {tuiProvide} from '@taiga-ui/cdk';
 import {
-    MODE_PROVIDER,
     TUI_TEXTFIELD_APPEARANCE_DIRECTIVE,
     TUI_TEXTFIELD_LABEL_OUTSIDE,
     TUI_TEXTFIELD_SIZE,
@@ -47,6 +46,5 @@ export const TUI_TABLE_PROVIDERS = [
         forwardRef(() => TuiTableDirective),
     ),
     IntersectionObserverService,
-    MODE_PROVIDER,
     TUI_STUCK_PROVIDER,
 ];
diff --git a/projects/addon-table/components/table/td/td.style.less b/projects/addon-table/components/table/td/td.style.less
index 93f7123c4c07..b6313bb5948c 100644
--- a/projects/addon-table/components/table/td/td.style.less
+++ b/projects/addon-table/components/table/td/td.style.less
@@ -57,7 +57,7 @@
     }
 }
 
-:host-context(table[data-mode='onDark']):after {
+:host-context([tuiTheme='dark']):after {
     background: rgba(60, 60, 60, 0.9);
 }
 
diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less
index 832fa690a354..ef8fa273ddfb 100644
--- a/projects/addon-table/components/table/th/th.style.less
+++ b/projects/addon-table/components/table/th/th.style.less
@@ -78,15 +78,15 @@
     box-shadow: 0 0.3125rem rgba(237, 237, 237, 0.7);
 }
 
-:host-context(table[data-mode='onDark']):after {
+:host-context([tuiTheme='dark'])._sticky:after {
     background: rgba(60, 60, 60, 0.9);
 }
 
-:host-context(table[data-mode='onDark'] thead[tuiThead]._stuck) {
+:host-context([tuiTheme='dark'] thead[tuiThead]._stuck) {
     box-shadow: 0 0.3125rem rgba(60, 60, 60, 0.9);
 }
 
-:host-context(table[data-mode='onDark'] thead[tuiThead]._stuck):first-child {
+:host-context([tuiTheme='dark'] thead[tuiThead]._stuck):first-child {
     box-shadow: 0.0625rem 0.3125rem rgba(60, 60, 60, 0.9);
 }
 
diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.module.ts b/projects/addon-tablebars/components/table-bars-host/table-bars-host.module.ts
index 2c58b32d0821..44c982b7f6d7 100644
--- a/projects/addon-tablebars/components/table-bars-host/table-bars-host.module.ts
+++ b/projects/addon-tablebars/components/table-bars-host/table-bars-host.module.ts
@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiButtonDirective, TuiModeModule} from '@taiga-ui/core';
+import {TuiButtonDirective} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiTableBarsHostComponent} from './table-bars-host.component';
 
 @NgModule({
-    imports: [CommonModule, PolymorpheusModule, TuiModeModule, TuiButtonDirective],
+    imports: [CommonModule, PolymorpheusModule, TuiButtonDirective],
     declarations: [TuiTableBarsHostComponent],
     exports: [TuiTableBarsHostComponent],
 })
diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html b/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html
index c62c4d5ac605..d054fe19f3b0 100644
--- a/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html
+++ b/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html
@@ -11,7 +11,7 @@
     >
         <div
             class="t-container"
-            [attr.tuiTheme]="getMode(item.mode) === 'onDark' ? 'night' : null"
+            [attr.tuiTheme]="getMode(item.mode) === 'onDark' ? 'dark' : null"
             [class.t-container_adaptive]="item.adaptive"
         >
             <div class="t-inner">
@@ -31,7 +31,6 @@
                     type="button"
                     class="t-close-button"
                     [iconLeft]="icons.close"
-                    [tuiMode]="getMode(item.mode)"
                     (click)="onCloseClick(item)"
                 >
                     {{ closeWord$ | async }}
diff --git a/projects/cdk/abstract/interactive.ts b/projects/cdk/abstract/interactive.ts
index 95ada228c015..1c9b60c2890f 100644
--- a/projects/cdk/abstract/interactive.ts
+++ b/projects/cdk/abstract/interactive.ts
@@ -3,7 +3,8 @@ import {Directive, EventEmitter, HostBinding, Input, Output} from '@angular/core
 const TUI = 'tui_interactive_';
 
 /**
- * The most basic class for interactive components
+ * TODO drop in 4.0
+ * @deprecated
  */
 @Directive()
 export abstract class AbstractTuiInteractive {
diff --git a/projects/cdk/abstract/theme-switcher.ts b/projects/cdk/abstract/theme-switcher.ts
index fe2a426ddd6f..bdf3651473f5 100644
--- a/projects/cdk/abstract/theme-switcher.ts
+++ b/projects/cdk/abstract/theme-switcher.ts
@@ -7,6 +7,8 @@ import {Directive, inject} from '@angular/core';
  * A component extending this class must have CSS variables definitions
  * and have ViewEncapsulation set to NONE. A boolean input allows to
  * switch theme on or off.
+ * TODO drop in 4.0
+ * @deprecated
  */
 @Directive()
 export abstract class AbstractTuiThemeSwitcher implements OnDestroy {
diff --git a/projects/cdk/tokens/focusable-item-accessor.ts b/projects/cdk/tokens/focusable-item-accessor.ts
index 5e074104b0f6..ccadb2b330bd 100644
--- a/projects/cdk/tokens/focusable-item-accessor.ts
+++ b/projects/cdk/tokens/focusable-item-accessor.ts
@@ -5,10 +5,16 @@ import {tuiProvide} from '@taiga-ui/cdk/utils';
 
 /**
  * A component that can be focused
+ * TODO drop in 4.0
+ * @deprecated
  */
 export const TUI_FOCUSABLE_ITEM_ACCESSOR =
     new InjectionToken<TuiFocusableElementAccessor>('[TUI_FOCUSABLE_ITEM_ACCESSOR]');
 
+/**
+ * TODO drop in 4.0
+ * @deprecated
+ */
 export function tuiAsFocusableItemAccessor(
     accessor: Type<TuiFocusableElementAccessor>,
 ): Provider {
diff --git a/projects/core/components/error/error.component.ts b/projects/core/components/error/error.component.ts
index 5341a460ae91..67261b6a9d70 100644
--- a/projects/core/components/error/error.component.ts
+++ b/projects/core/components/error/error.component.ts
@@ -7,29 +7,20 @@ import {
 } from '@angular/core';
 import {tuiIsString, TuiValidationError} from '@taiga-ui/cdk';
 import {tuiFadeIn, tuiHeightCollapse} from '@taiga-ui/core/animations';
-import {MODE_PROVIDER} from '@taiga-ui/core/providers';
-import {
-    TUI_ANIMATIONS_SPEED,
-    TUI_DEFAULT_ERROR_MESSAGE,
-    TUI_MODE,
-} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
+import {TUI_ANIMATIONS_SPEED, TUI_DEFAULT_ERROR_MESSAGE} from '@taiga-ui/core/tokens';
 import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
-import type {Observable} from 'rxjs';
 
 @Component({
     selector: 'tui-error',
     templateUrl: './error.template.html',
     styleUrls: ['./error.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
     animations: [tuiHeightCollapse, tuiFadeIn],
 })
 export class TuiErrorComponent {
     protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
     protected error: TuiValidationError | null = null;
     protected visible = true;
-    protected readonly mode$ = inject<Observable<TuiBrightness | null>>(TUI_MODE);
     protected readonly defaultErrorMessage$ = inject(TUI_DEFAULT_ERROR_MESSAGE);
 
     @Input('error')
diff --git a/projects/core/components/error/error.style.less b/projects/core/components/error/error.style.less
index af3a451eb7c2..7a6b4aa2d388 100644
--- a/projects/core/components/error/error.style.less
+++ b/projects/core/components/error/error.style.less
@@ -12,8 +12,4 @@
 .t-message-text {
     margin-top: 0.25rem;
     white-space: pre-line;
-
-    &_light {
-        color: var(--tui-negative-night);
-    }
 }
diff --git a/projects/core/components/error/error.template.html b/projects/core/components/error/error.template.html
index 3beb93b4202f..072a66698091 100644
--- a/projects/core/components/error/error.template.html
+++ b/projects/core/components/error/error.template.html
@@ -4,7 +4,6 @@
     class="t-message-text"
     [@tuiFadeIn]="options"
     [@tuiHeightCollapse]="options"
-    [class.t-message-text_light]="(mode$ | async) === 'onDark'"
 >
     <ng-container
         *polymorpheusOutlet="error.message || (defaultErrorMessage$ | async) as text; context: error.context || {}"
diff --git a/projects/core/components/index.ts b/projects/core/components/index.ts
index a9d7596c7765..ce627505fa8e 100644
--- a/projects/core/components/index.ts
+++ b/projects/core/components/index.ts
@@ -21,5 +21,4 @@ export * from '@taiga-ui/core/components/root';
 export * from '@taiga-ui/core/components/scroll-controls';
 export * from '@taiga-ui/core/components/scrollbar';
 export * from '@taiga-ui/core/components/svg';
-export * from '@taiga-ui/core/components/theme-night';
 export * from '@taiga-ui/core/components/tooltip';
diff --git a/projects/core/components/label/label.component.ts b/projects/core/components/label/label.component.ts
index ba185e93fdc3..448960bd8323 100644
--- a/projects/core/components/label/label.component.ts
+++ b/projects/core/components/label/label.component.ts
@@ -3,26 +3,17 @@ import {
     Component,
     ContentChild,
     HostBinding,
-    inject,
     Input,
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
 import type {TuiContext} from '@taiga-ui/cdk';
-import {MODE_PROVIDER} from '@taiga-ui/core/providers';
-import {TUI_MODE} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import type {Observable} from 'rxjs';
 
 @Component({
     selector: 'label[tuiLabel]',
     templateUrl: './label.template.html',
     styleUrls: ['./label.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiLabelComponent<T> {
     @Input()
@@ -36,6 +27,4 @@ export class TuiLabelComponent<T> {
     @ContentChild(NgControl)
     @HostBinding('class._control')
     protected readonly control?: NgControl;
-
-    protected readonly mode$ = inject<Observable<TuiBrightness | null>>(TUI_MODE);
 }
diff --git a/projects/core/components/label/label.style.less b/projects/core/components/label/label.style.less
index f5c6fc5a630d..d3d46217a4f2 100644
--- a/projects/core/components/label/label.style.less
+++ b/projects/core/components/label/label.style.less
@@ -28,10 +28,6 @@
     :host:not(._control) & {
         color: var(--tui-text-02);
     }
-
-    :host([data-mode='onDark']) & {
-        color: var(--tui-text-02-night);
-    }
 }
 
 .t-content {
diff --git a/projects/core/components/primitive-textfield/value-decoration/value-decoration.style.less b/projects/core/components/primitive-textfield/value-decoration/value-decoration.style.less
index 55c8cdbb55aa..cf5e3816aa34 100644
--- a/projects/core/components/primitive-textfield/value-decoration/value-decoration.style.less
+++ b/projects/core/components/primitive-textfield/value-decoration/value-decoration.style.less
@@ -20,10 +20,6 @@
         .text-overflow();
     }
 
-    :host-context(tui-primitive-textfield [tuiWrapper][data-mode='onDark']) & {
-        color: var(--tui-text-03-night);
-    }
-
     :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)) & {
         line-height: calc(var(--tui-height) - 0.25rem);
     }
@@ -39,10 +35,6 @@
 .t-postfix {
     white-space: pre;
     color: var(--tui-text-01);
-
-    :host-context(tui-primitive-textfield [tuiWrapper][data-mode='onDark']) & {
-        color: var(--tui-text-01-night);
-    }
 }
 
 .t-filler {
diff --git a/projects/core/components/root/root.style.less b/projects/core/components/root/root.style.less
index 819fd8645ced..b3c49c7528b5 100644
--- a/projects/core/components/root/root.style.less
+++ b/projects/core/components/root/root.style.less
@@ -18,18 +18,24 @@ html[data-tui-theme],
     .scrollbar-hidden();
 }
 
-html[data-tui-theme] body {
-    .text-basic();
-
-    background: var(--tui-base-01);
+body {
     margin: 0;
 }
 
 tui-root {
+    .text-basic();
+
     position: relative;
     display: block;
     flex: 1;
     -webkit-tap-highlight-color: transparent;
+
+    &:before {
+        .fullsize(fixed);
+
+        content: '';
+        background: var(--tui-base-01);
+    }
 }
 
 tui-root > .t-root-scrollbar {
diff --git a/projects/core/components/theme-night/index.ts b/projects/core/components/theme-night/index.ts
deleted file mode 100644
index 9df1c9651cef..000000000000
--- a/projects/core/components/theme-night/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './theme-night.component';
-export * from './theme-night.module';
diff --git a/projects/core/components/theme-night/ng-package.json b/projects/core/components/theme-night/ng-package.json
deleted file mode 100644
index bebf62dcb5e5..000000000000
--- a/projects/core/components/theme-night/ng-package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "lib": {
-        "entryFile": "index.ts"
-    }
-}
diff --git a/projects/core/components/theme-night/theme-night.component.ts b/projects/core/components/theme-night/theme-night.component.ts
deleted file mode 100644
index 099be0f9d9ca..000000000000
--- a/projects/core/components/theme-night/theme-night.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {AbstractTuiThemeSwitcher} from '@taiga-ui/cdk';
-
-@Component({
-    selector: 'tui-theme-night',
-    template: '',
-    styleUrls: ['./theme-night.style.less'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TuiThemeNightComponent extends AbstractTuiThemeSwitcher {}
diff --git a/projects/core/components/theme-night/theme-night.module.ts b/projects/core/components/theme-night/theme-night.module.ts
deleted file mode 100644
index 48e5b007ecfa..000000000000
--- a/projects/core/components/theme-night/theme-night.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {TuiThemeNightComponent} from './theme-night.component';
-
-@NgModule({
-    declarations: [TuiThemeNightComponent],
-    exports: [TuiThemeNightComponent],
-})
-export class TuiThemeNightModule {}
diff --git a/projects/core/components/theme-night/theme-night.style.less b/projects/core/components/theme-night/theme-night.style.less
deleted file mode 100644
index cc6e4227c104..000000000000
--- a/projects/core/components/theme-night/theme-night.style.less
+++ /dev/null
@@ -1,58 +0,0 @@
-:root {
-    --tui-base-01: #222;
-    --tui-base-02: #333;
-    --tui-base-03: #808080;
-    --tui-base-04: #959595;
-    --tui-base-05: #b0b0b0;
-    --tui-base-06: #d7d7d7;
-    --tui-base-07: #ededed;
-    --tui-base-08: #f6f6f6;
-    --tui-base-09: #fff;
-    --tui-focus: rgba(51, 51, 51, 0.64);
-    --tui-secondary: rgba(255, 255, 255, 0.16);
-    --tui-secondary-hover: rgba(255, 255, 255, 0.24);
-    --tui-secondary-active: rgba(255, 255, 255, 0.4);
-    --tui-clear: rgba(255, 255, 255, 0.16);
-    --tui-clear-disabled: rgba(255, 255, 255, 0.08);
-    --tui-clear-hover: rgba(255, 255, 255, 0.24);
-    --tui-clear-active: rgba(255, 255, 255, 0.4);
-    --tui-error-fill: rgba(255, 140, 103, 1);
-    --tui-error-bg: rgba(244, 87, 37, 0.32);
-    --tui-error-bg-hover: rgba(244, 87, 37, 0.4);
-    --tui-success-fill: rgb(74, 201, 155);
-    --tui-success-bg: rgba(74, 201, 155, 0.32);
-    --tui-success-bg-hover: rgba(74, 201, 155, 0.4);
-    --tui-warning-fill: rgb(255, 199, 0);
-    --tui-warning-bg: rgba(255, 199, 0, 0.32);
-    --tui-warning-bg-hover: rgba(255, 199, 0, 0.4);
-    --tui-info-fill: rgb(112, 182, 246);
-    --tui-info-bg: rgba(112, 182, 246, 0.32);
-    --tui-info-bg-hover: rgba(112, 182, 246, 0.4);
-    --tui-neutral-fill: rgb(149, 155, 164);
-    --tui-neutral-bg: rgba(149, 155, 164, 0.32);
-    --tui-neutral-bg-hover: rgba(149, 155, 164, 0.48);
-    --tui-text-01: rgba(255, 255, 255, 1);
-    --tui-text-02: rgba(255, 255, 255, 0.72);
-    --tui-text-03: rgba(255, 255, 255, 0.6);
-    --tui-link: #6788ff;
-    --tui-link-hover: #526ed3;
-    --tui-positive: #44c596;
-    --tui-positive-hover: #3aa981;
-    --tui-negative: #ff8c67;
-    --tui-negative-hover: #bb593a;
-    --tui-autofill: var(--tui-autofill-night);
-    --tui-elevation-01: #222;
-    --tui-elevation-02: #222;
-    --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
-    --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2);
-    --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04),
-        0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
-    --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
-    --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);
-    --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
-    --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
-}
-
-tui-notification {
-    --tui-base-01: #000;
-}
diff --git a/projects/core/components/tooltip/tooltip.component.ts b/projects/core/components/tooltip/tooltip.component.ts
index 4dc9574dde8d..f82d2b8e91f2 100644
--- a/projects/core/components/tooltip/tooltip.component.ts
+++ b/projects/core/components/tooltip/tooltip.component.ts
@@ -9,22 +9,17 @@ import {
 } from '@angular/core';
 import {TUI_IS_MOBILE, TuiDestroyService} from '@taiga-ui/cdk';
 import {TuiHintHoverDirective, TuiHintOptionsDirective} from '@taiga-ui/core/directives';
-import {MODE_PROVIDER} from '@taiga-ui/core/providers';
-import {TUI_MODE} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
-import {takeUntil} from 'rxjs';
 
 @Component({
     selector: 'tui-tooltip',
     templateUrl: './tooltip.template.html',
     styleUrls: ['./tooltip.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [TuiDestroyService, MODE_PROVIDER],
+    providers: [TuiDestroyService],
     inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],
 })
 export class TuiTooltipComponent<C = any> extends TuiHintOptionsDirective {
     private readonly isMobile = inject(TUI_IS_MOBILE);
-    private mode: TuiBrightness | null = null;
 
     @Input()
     public describeId = '';
@@ -35,19 +30,9 @@ export class TuiTooltipComponent<C = any> extends TuiHintOptionsDirective {
     @ViewChild(TuiHintHoverDirective)
     protected readonly driver$?: TuiHintHoverDirective;
 
-    constructor() {
-        super();
-
-        inject(TUI_MODE)
-            .pipe(takeUntil(inject(TuiDestroyService, {self: true})))
-            .subscribe(mode => {
-                this.mode = mode;
-            });
-    }
-
     @HostBinding('attr.data-appearance')
     protected get computedAppearance(): string {
-        return this.appearance || this.mode || '';
+        return this.appearance || '';
     }
 
     @HostListener('mousedown', ['$event'])
diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts
index 06c3e61e5c29..d79d86008c3a 100644
--- a/projects/core/directives/dropdown/dropdown.component.ts
+++ b/projects/core/directives/dropdown/dropdown.component.ts
@@ -16,13 +16,10 @@ import {
 } from '@taiga-ui/core/abstract';
 import {tuiDropdownAnimation} from '@taiga-ui/core/animations';
 import {TuiScrollbarComponent} from '@taiga-ui/core/components/scrollbar';
-import {MODE_PROVIDER} from '@taiga-ui/core/providers';
 import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';
-import {TUI_ANIMATIONS_SPEED, TUI_MODE} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
+import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
 import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-import type {Observable} from 'rxjs';
 import {map, takeUntil} from 'rxjs';
 
 import {TuiDropdownDirective} from './dropdown.directive';
@@ -54,12 +51,11 @@ import {TuiDropdownPositionDirective} from './dropdown-position.directive';
         TuiPositionService,
         tuiPositionAccessorFor('dropdown', TuiDropdownPositionDirective),
         tuiRectAccessorFor('dropdown', TuiDropdownDirective),
-        MODE_PROVIDER,
     ],
     host: {
         '[@tuiDropdownAnimation]': 'animation',
         '[attr.data-appearance]': 'options.appearance',
-        '($.data-mode.attr)': 'mode$',
+        '[attr.tuiTheme]': 'theme',
     },
     animations: [tuiDropdownAnimation],
 })
@@ -69,11 +65,13 @@ export class TuiDropdownComponent implements OnInit {
     private readonly win = inject(WINDOW);
     private readonly viewport = inject(TuiVisualViewportService);
 
-    protected readonly mode$: Observable<TuiBrightness | null> = inject(TUI_MODE);
     protected readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
     protected readonly options = inject(TUI_DROPDOWN_OPTIONS);
     protected readonly directive = inject(TuiDropdownDirective);
     protected readonly context = inject(TUI_DROPDOWN_CONTEXT, {optional: true});
+    protected readonly theme = this.directive.el
+        .closest('[tuiTheme]')
+        ?.getAttribute('tuiTheme');
 
     protected readonly sub = inject(TuiPositionService)
         .pipe(
diff --git a/projects/core/directives/dropdown/dropdown.style.less b/projects/core/directives/dropdown/dropdown.style.less
index 776131bcd30a..fe1538144f1e 100644
--- a/projects/core/directives/dropdown/dropdown.style.less
+++ b/projects/core/directives/dropdown/dropdown.style.less
@@ -21,14 +21,6 @@
     &:not([style*='top']) {
         visibility: hidden;
     }
-
-    &[data-mode='onDark'] {
-        --tui-text-01: var(--tui-text-01-night);
-        --tui-clear: var(--tui-clear-inverse);
-
-        background: #222;
-        border: 1px solid #808080;
-    }
 }
 
 .t-scroll {
diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts
index e6ebaff04774..e55a40aca7f4 100644
--- a/projects/core/directives/hint/hint.component.ts
+++ b/projects/core/directives/hint/hint.component.ts
@@ -21,7 +21,6 @@ import {
     tuiRectAccessorFor,
 } from '@taiga-ui/core/abstract';
 import {tuiFadeIn} from '@taiga-ui/core/animations';
-import {TuiModeDirective} from '@taiga-ui/core/directives/mode';
 import type {TuiPortalItem} from '@taiga-ui/core/interfaces';
 import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';
 import {TUI_ANIMATIONS_SPEED, TUI_VIEWPORT} from '@taiga-ui/core/tokens';
@@ -69,13 +68,14 @@ export class TuiHintComponent<C = any> {
 
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
     private readonly hover = inject(TuiHintHoverDirective);
-    private readonly mode = inject(TuiModeDirective, {optional: true});
     private readonly visualViewportService = inject(TuiVisualViewportService);
     private readonly viewport = inject(TUI_VIEWPORT);
 
     @HostBinding('attr.data-appearance')
+    @HostBinding('attr.tuiTheme')
     protected readonly appearance =
-        this.polymorpheus.$implicit.appearance || this.mode?.mode;
+        this.polymorpheus.$implicit.appearance ||
+        inject(TuiHintDirective).el.closest('[tuiTheme]')?.getAttribute('tuiTheme');
 
     protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
     protected readonly pointer = inject(TuiHintPointerDirective, {optional: true});
diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts
index e5ef5ce55e01..d49872e3627a 100644
--- a/projects/core/directives/hint/hint.directive.ts
+++ b/projects/core/directives/hint/hint.directive.ts
@@ -26,7 +26,6 @@ import {TUI_HINT_OPTIONS} from './hint-options.directive';
 export class TuiHintDirective<C>
     implements OnDestroy, OnChanges, TuiPortalItem<C>, TuiRectAccessor, TuiVehicle
 {
-    private readonly el: HTMLElement = inject(ElementRef).nativeElement;
     private readonly hintService = inject(TuiHintService);
     private readonly options = inject(TUI_HINT_OPTIONS);
 
@@ -40,6 +39,7 @@ export class TuiHintDirective<C>
     public tuiHintAppearance: string | null = null;
 
     public component = inject(PolymorpheusComponent<unknown>);
+    public readonly el: HTMLElement = inject(ElementRef).nativeElement;
     public readonly activeZone? = inject(TuiActiveZoneDirective, {optional: true});
     public readonly type = 'hint';
 
diff --git a/projects/core/directives/hint/hint.style.less b/projects/core/directives/hint/hint.style.less
index 184b4009640b..929cee1e7274 100644
--- a/projects/core/directives/hint/hint.style.less
+++ b/projects/core/directives/hint/hint.style.less
@@ -30,9 +30,9 @@
         background: var(--tui-error-fill);
     }
 
-    &[data-appearance='onDark'] {
-        background: var(--tui-elevation-02);
-        color: var(--tui-text-01);
+    &[data-appearance='dark'] {
+        background: var(--tui-base-08);
+        color: var(--tui-base-01);
         filter: drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.16)) drop-shadow(0 1.5rem 1rem rgba(0, 0, 0, 0.03))
             drop-shadow(0 0.75rem 0.75rem rgba(0, 0, 0, 0.04)) drop-shadow(0 0.25rem 0.375rem rgba(0, 0, 0, 0.05));
     }
diff --git a/projects/core/directives/index.ts b/projects/core/directives/index.ts
index fb016402c634..ac8b8ab09c3d 100644
--- a/projects/core/directives/index.ts
+++ b/projects/core/directives/index.ts
@@ -4,7 +4,6 @@ export * from '@taiga-ui/core/directives/dropdown';
 export * from '@taiga-ui/core/directives/hint';
 export * from '@taiga-ui/core/directives/icons';
 export * from '@taiga-ui/core/directives/mask-accessor';
-export * from '@taiga-ui/core/directives/mode';
 export * from '@taiga-ui/core/directives/number-format';
 export * from '@taiga-ui/core/directives/scroll-into-view';
 export * from '@taiga-ui/core/directives/textfield-controller';
diff --git a/projects/core/directives/mode/index.ts b/projects/core/directives/mode/index.ts
deleted file mode 100644
index 364626de7b93..000000000000
--- a/projects/core/directives/mode/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './mode.directive';
-export * from './mode.module';
diff --git a/projects/core/directives/mode/mode.directive.ts b/projects/core/directives/mode/mode.directive.ts
deleted file mode 100644
index 2d7c2645f95b..000000000000
--- a/projects/core/directives/mode/mode.directive.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Directive, Input} from '@angular/core';
-import {AbstractTuiController} from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core/types';
-
-@Directive({
-    selector: '[tuiMode]',
-})
-export class TuiModeDirective extends AbstractTuiController {
-    @Input('tuiMode')
-    public mode: TuiBrightness | null = null;
-}
diff --git a/projects/core/directives/mode/mode.module.ts b/projects/core/directives/mode/mode.module.ts
deleted file mode 100644
index 554db1212fb5..000000000000
--- a/projects/core/directives/mode/mode.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {TuiModeDirective} from './mode.directive';
-
-@NgModule({
-    declarations: [TuiModeDirective],
-    exports: [TuiModeDirective],
-})
-export class TuiModeModule {}
diff --git a/projects/core/directives/mode/ng-package.json b/projects/core/directives/mode/ng-package.json
deleted file mode 100644
index bebf62dcb5e5..000000000000
--- a/projects/core/directives/mode/ng-package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "lib": {
-        "entryFile": "index.ts"
-    }
-}
diff --git a/projects/core/directives/wrapper/README.md b/projects/core/directives/wrapper/README.md
index 3c75d811f48b..ae884d087c6e 100644
--- a/projects/core/directives/wrapper/README.md
+++ b/projects/core/directives/wrapper/README.md
@@ -17,5 +17,3 @@ To apply styles use following mixins from
 4. `.wrapper-disabled(@ruleset)`
 5. `.wrapper-focus(@ruleset)`
 6. `.wrapper-invalid(@ruleset)`
-
-Use `[data-mode='onDark']/[data-mode='onLight']` selectors to account for _mode_
diff --git a/projects/core/directives/wrapper/wrapper.directive.ts b/projects/core/directives/wrapper/wrapper.directive.ts
index 9df38a375f2b..1f20c26db2a8 100644
--- a/projects/core/directives/wrapper/wrapper.directive.ts
+++ b/projects/core/directives/wrapper/wrapper.directive.ts
@@ -1,16 +1,8 @@
-import {Directive, HostBinding, inject, Input} from '@angular/core';
+import {Directive, HostBinding, Input} from '@angular/core';
 import {TuiInteractiveState} from '@taiga-ui/core/enums';
-import {MODE_PROVIDER} from '@taiga-ui/core/providers';
-import {TUI_MODE} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
-import type {Observable} from 'rxjs';
 
 @Directive({
     selector: '[tuiWrapper]',
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiWrapperDirective {
     @Input()
@@ -35,8 +27,6 @@ export class TuiWrapperDirective {
     @HostBinding('attr.data-appearance')
     public appearance = '';
 
-    protected readonly mode$ = inject<Observable<TuiBrightness | null>>(TUI_MODE);
-
     @HostBinding('class._invalid')
     protected get computedInvalid(): boolean {
         return !this.disabled && !this.readOnly && this.invalid;
diff --git a/projects/core/providers/index.ts b/projects/core/providers/index.ts
index a40229b6cdce..10f1af2d7dbc 100644
--- a/projects/core/providers/index.ts
+++ b/projects/core/providers/index.ts
@@ -1,3 +1,2 @@
 export * from './is-mobile-resolution.provider';
-export * from './mode.provider';
 export * from './watched-controller-provider-factory';
diff --git a/projects/core/providers/mode.provider.ts b/projects/core/providers/mode.provider.ts
deleted file mode 100644
index bd4ec3ed2a43..000000000000
--- a/projects/core/providers/mode.provider.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type {Provider} from '@angular/core';
-import {ElementRef, Optional} from '@angular/core';
-import {TuiModeDirective} from '@taiga-ui/core/directives/mode';
-import {TUI_MODE} from '@taiga-ui/core/tokens';
-import type {TuiBrightness} from '@taiga-ui/core/types';
-import type {Observable} from 'rxjs';
-import {map, of, startWith} from 'rxjs';
-
-export const MODE_PROVIDER: Provider = {
-    provide: TUI_MODE,
-    deps: [[new Optional(), TuiModeDirective], ElementRef],
-    useFactory: (
-        mode: TuiModeDirective | null,
-        {nativeElement}: ElementRef,
-    ): Observable<TuiBrightness | null> => {
-        const mode$ = mode
-            ? mode.change$.pipe(
-                  startWith(null),
-                  map(() => mode.mode),
-              )
-            : of(null);
-
-        nativeElement['$.data-mode.attr'] = mode$;
-
-        return mode$;
-    },
-};
diff --git a/projects/core/services/night-theme.service.ts b/projects/core/services/dark-theme.service.ts
similarity index 69%
rename from projects/core/services/night-theme.service.ts
rename to projects/core/services/dark-theme.service.ts
index 6645e4dee86b..7dd221df6b33 100644
--- a/projects/core/services/night-theme.service.ts
+++ b/projects/core/services/dark-theme.service.ts
@@ -1,17 +1,17 @@
 import {inject, Injectable} from '@angular/core';
 import {WINDOW} from '@ng-web-apis/common';
-import {fromEvent, map, Observable, share, startWith} from 'rxjs';
+import {fromEvent, map, Observable, shareReplay, startWith} from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
 })
-export class TuiNightThemeService extends Observable<boolean> {
+export class TuiDarkThemeService extends Observable<boolean> {
     constructor() {
         const media = inject(WINDOW).matchMedia('(prefers-color-scheme: dark)');
         const media$ = fromEvent(media, 'change').pipe(
             startWith(null),
             map(() => media.matches),
-            share(),
+            shareReplay({bufferSize: 1, refCount: true}),
         );
 
         super(subscriber => media$.subscribe(subscriber));
diff --git a/projects/core/services/index.ts b/projects/core/services/index.ts
index a45f26c80a6a..4d37c43bcc12 100644
--- a/projects/core/services/index.ts
+++ b/projects/core/services/index.ts
@@ -1,7 +1,7 @@
 export * from './breakpoint.service';
+export * from './dark-theme.service';
 export * from './format-date.service';
 export * from './hint.service';
-export * from './night-theme.service';
 export * from './position.service';
 export * from './svg.service';
 export * from './visual-viewport.service';
diff --git a/projects/core/services/test/night-theme.service.spec.ts b/projects/core/services/test/dark-theme.service.spec.ts
similarity index 84%
rename from projects/core/services/test/night-theme.service.spec.ts
rename to projects/core/services/test/dark-theme.service.spec.ts
index 3b11bbced8ed..f2b8ce47ca78 100644
--- a/projects/core/services/test/night-theme.service.spec.ts
+++ b/projects/core/services/test/dark-theme.service.spec.ts
@@ -2,11 +2,11 @@ import {TestBed} from '@angular/core/testing';
 import {WINDOW} from '@ng-web-apis/common';
 import {take} from 'rxjs';
 
-import {TuiNightThemeService} from '../night-theme.service';
+import {TuiDarkThemeService} from '../dark-theme.service';
 
-describe('TuiNightThemeService', () => {
+describe('TuiDarkThemeService', () => {
     const mock: HTMLDivElement = document.createElement('div');
-    let service!: TuiNightThemeService;
+    let service!: TuiDarkThemeService;
 
     beforeEach(async () => {
         TestBed.configureTestingModule({
@@ -22,7 +22,7 @@ describe('TuiNightThemeService', () => {
             ],
         });
         await TestBed.compileComponents();
-        service = TestBed.inject(TuiNightThemeService);
+        service = TestBed.inject(TuiDarkThemeService);
         mock.matches = true as any;
     });
 
diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
index a59754875fda..a7303fe88c33 100644
--- a/projects/core/styles/mixins/textfield.less
+++ b/projects/core/styles/mixins/textfield.less
@@ -56,6 +56,7 @@
     border-inline-start-width: var(--border-start, 0);
     border-inline-end-width: var(--border-end, 0);
     text-indent: var(--text-indent);
+    color: var(--tui-text-01);
     text-align: inherit;
     box-sizing: border-box;
     white-space: nowrap;
@@ -94,15 +95,6 @@
         opacity: 1;
     }
 
-    [tuiWrapper][data-mode='onDark'] &,
-    :host-context([tuiWrapper][data-mode='onDark']) {
-        .autofill(dark);
-
-        &::placeholder {
-            color: var(--tui-text-03-night);
-        }
-    }
-
     :host[data-size='s'] &,
     :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
     :host-context(tui-textarea[data-size='s']):not(tui-textarea),
@@ -208,11 +200,6 @@
         :host._invalid:not(._focused):hover & {
             color: var(--tui-error-fill);
         }
-
-        :host._invalid:not(._focused) [tuiWrapper][data-mode='onDark'] &,
-        :host._invalid:not(._focused):hover [tuiWrapper][data-mode='onDark'] & {
-            color: var(--tui-error-fill-night);
-        }
     }
 
     :host._focused &,
@@ -234,22 +221,6 @@
     :host[data-size='l']._focused:not(._label-outside) & {
         color: var(--tui-text-01);
     }
-
-    // textfield-light
-    [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
-
-    :host[data-size='m']._focused:not(._label-outside) [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='l']._focused:not(._label-outside) [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-01-night);
-    }
-
-    :host._focused [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='m']._focused._label-outside [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='l']._focused._label-outside [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
 }
 
 .input-icon() {
diff --git a/projects/core/styles/mixins/textfield.scss b/projects/core/styles/mixins/textfield.scss
index b5eb51659561..0ca068bdecfb 100644
--- a/projects/core/styles/mixins/textfield.scss
+++ b/projects/core/styles/mixins/textfield.scss
@@ -92,15 +92,6 @@ $line-height-l: 1.25rem;
         opacity: 1;
     }
 
-    [tuiWrapper][data-mode='onDark'] &,
-    :host-context([tuiWrapper][data-mode='onDark']) {
-        @include autofill(dark);
-
-        &::placeholder {
-            color: var(--tui-text-03-night);
-        }
-    }
-
     :host[data-size='s'] &,
     :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
     :host-context(tui-textarea[data-size='s']):not(tui-textarea),
@@ -193,11 +184,6 @@ $line-height-l: 1.25rem;
         :host._invalid:not(._focused):hover & {
             color: var(--tui-error-fill);
         }
-
-        :host._invalid:not(._focused) [tuiWrapper][data-mode='onDark'] &,
-        :host._invalid:not(._focused):hover [tuiWrapper][data-mode='onDark'] & {
-            color: var(--tui-error-fill-night);
-        }
     }
 
     :host._focused &,
@@ -220,22 +206,6 @@ $line-height-l: 1.25rem;
         color: var(--tui-text-01);
     }
 
-    // textfield-light
-    [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
-
-    :host[data-size='m']._focused:not(._label-outside) [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='l']._focused:not(._label-outside) [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-01-night);
-    }
-
-    :host._focused [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='m']._focused._label-outside [tuiWrapper][data-mode='onDark'] &,
-    :host[data-size='l']._focused._label-outside [tuiWrapper][data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
-
     @include safari-only {
         & {
             will-change: unset;
diff --git a/projects/core/styles/theme/appearance/glass.less b/projects/core/styles/theme/appearance/glass.less
index dd8d5624106e..d58808661c78 100644
--- a/projects/core/styles/theme/appearance/glass.less
+++ b/projects/core/styles/theme/appearance/glass.less
@@ -16,7 +16,7 @@
         background: rgba(0, 0, 0, 0.6);
     });
 
-    [tuiTheme='night'] & {
+    [tuiTheme='dark'] & {
         background: rgba(255, 255, 255, 0.3);
 
         .appearance-hover({
diff --git a/projects/core/styles/theme/appearance/opposite.less b/projects/core/styles/theme/appearance/opposite.less
index 0e4d5bdb0fa9..7a07fd1a2b55 100644
--- a/projects/core/styles/theme/appearance/opposite.less
+++ b/projects/core/styles/theme/appearance/opposite.less
@@ -14,7 +14,7 @@
         background: #5c636b;
     });
 
-    [tuiTheme='night'] & {
+    [tuiTheme='dark'] & {
         --tui-focus: rgba(51, 51, 51, 0.48);
 
         color: rgba(0, 0, 0, 0.8);
diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less
index 02d2cd4ed3c9..73025c27cd09 100644
--- a/projects/core/styles/theme/variables.less
+++ b/projects/core/styles/theme/variables.less
@@ -1,6 +1,7 @@
 @font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
 
-:root {
+:root,
+[tuiTheme='light'][tuiTheme='light'] {
     // Deprecated TODO 4.0 delete variables --tui-heading-font and --tui-text-font
     --tui-heading-font: 'Manrope', @font-fallback;
     --tui-text-font: 'Manrope', @font-fallback;
@@ -165,7 +166,7 @@
     --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
 }
 
-[tuiTheme='night'] {
+[tuiTheme='dark'] {
     --tui-base-01: #222;
     --tui-base-02: #333;
     --tui-base-03: #808080;
diff --git a/projects/core/styles/theme/wrapper/glass.less b/projects/core/styles/theme/wrapper/glass.less
index bb195217c57b..553187fa2a58 100644
--- a/projects/core/styles/theme/wrapper/glass.less
+++ b/projects/core/styles/theme/wrapper/glass.less
@@ -16,7 +16,8 @@
         background: rgba(0, 0, 0, 0.6);
     });
 
-    &[data-mode='onDark'] {
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
         background: rgba(255, 255, 255, 0.3);
 
         .wrapper-hover({
diff --git a/projects/core/styles/theme/wrapper/icon.less b/projects/core/styles/theme/wrapper/icon.less
index aa0dcd8865af..23d130103010 100644
--- a/projects/core/styles/theme/wrapper/icon.less
+++ b/projects/core/styles/theme/wrapper/icon.less
@@ -12,7 +12,8 @@
         opacity: 0.65;
     }
 
-    &[data-mode='onDark'] {
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
         color: var(--tui-text-01-night);
 
         [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
diff --git a/projects/core/styles/theme/wrapper/mono.less b/projects/core/styles/theme/wrapper/mono.less
index 172e364eb795..23cb85099541 100644
--- a/projects/core/styles/theme/wrapper/mono.less
+++ b/projects/core/styles/theme/wrapper/mono.less
@@ -14,7 +14,8 @@ tui-wrapper[data-appearance='mono'],
         color: var(--tui-text-02);
     });
 
-    &[data-mode='onDark'] {
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
         .wrapper-focus({
             --tui-focus: var(--tui-text-01-night);
         });
diff --git a/projects/core/styles/theme/wrapper/opposite.less b/projects/core/styles/theme/wrapper/opposite.less
index 44f9e3a48a75..5adffd2badea 100644
--- a/projects/core/styles/theme/wrapper/opposite.less
+++ b/projects/core/styles/theme/wrapper/opposite.less
@@ -15,7 +15,8 @@
         background: #5c636b;
     });
 
-    &[data-mode='onDark'] {
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
         color: rgba(0, 0, 0, 0.8);
         background: #fff;
 
diff --git a/projects/core/styles/theme/wrapper/outline.less b/projects/core/styles/theme/wrapper/outline.less
index 3fcd35518828..76223930d149 100644
--- a/projects/core/styles/theme/wrapper/outline.less
+++ b/projects/core/styles/theme/wrapper/outline.less
@@ -9,7 +9,8 @@
         color: var(--tui-base-04);
     }
 
-    &[data-mode='onDark'] {
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
         color: var(--tui-text-01-night);
 
         &:after {
@@ -37,30 +38,6 @@
         });
     }
 
-    &[data-mode='onLight'] {
-        color: var(--tui-text-01);
-
-        &:after {
-            color: var(--tui-text-01);
-        }
-
-        .wrapper-hover({
-            background: var(--tui-clear-hover);
-
-            &:after {
-                color: var(--tui-text-03);
-            }
-        });
-
-        .wrapper-active({
-            background: var(--tui-clear-active);
-
-            &:after {
-                color: var(--tui-text-03);
-            }
-        });
-    }
-
     .wrapper-hover({
         &:after {
             color: var(--tui-base-05);
diff --git a/projects/core/styles/theme/wrapper/secondary-destructive.less b/projects/core/styles/theme/wrapper/secondary-destructive.less
index f48907de4011..26ceb36a908c 100644
--- a/projects/core/styles/theme/wrapper/secondary-destructive.less
+++ b/projects/core/styles/theme/wrapper/secondary-destructive.less
@@ -6,19 +6,6 @@ tui-wrapper[data-appearance='secondary-destructive'],
     background: var(--tui-error-bg);
     color: var(--tui-negative);
 
-    &[data-mode='onDark'] {
-        background: var(--tui-error-bg-night);
-        color: var(--tui-negative-night);
-
-        .wrapper-hover({
-            background: var(--tui-error-bg-night-hover);
-        });
-
-        .wrapper-active({
-            background: var(--tui-error-bg-night-hover);
-        });
-    }
-
     .wrapper-hover({
         background: var(--tui-error-bg-hover);
     });
diff --git a/projects/core/styles/theme/wrapper/secondary.less b/projects/core/styles/theme/wrapper/secondary.less
index 2a75b2d8472c..a7ac55f45fa7 100644
--- a/projects/core/styles/theme/wrapper/secondary.less
+++ b/projects/core/styles/theme/wrapper/secondary.less
@@ -7,36 +7,6 @@
     background: var(--tui-secondary);
     color: var(--tui-link);
 
-    &[data-mode='onDark'] {
-        background: var(--tui-clear-inverse);
-        color: var(--tui-text-01-night);
-
-        .wrapper-hover({
-            background: var(--tui-clear-inverse-hover);
-        });
-
-        .wrapper-active({
-            background: var(--tui-clear-inverse-active);
-        });
-
-        .wrapper-focus({
-            --tui-focus: var(--tui-text-01-night);
-        });
-    }
-
-    &[data-mode='onLight'] {
-        background: var(--tui-clear);
-        color: var(--tui-text-01);
-
-        .wrapper-hover({
-            background: var(--tui-clear-hover);
-        });
-
-        .wrapper-active({
-            background: var(--tui-clear-active);
-        });
-    }
-
     .wrapper-hover({
         background: var(--tui-secondary-hover);
     });
@@ -61,11 +31,6 @@
 
 [tuiWrapper][data-appearance='flat'] {
     background: transparent;
-
-    &[data-mode='onDark'],
-    &[data-mode='onLight'] {
-        background: transparent;
-    }
 }
 
 [tuiWrapper][data-appearance='destructive'] {
@@ -79,17 +44,4 @@
     .wrapper-active({
         background: var(--tui-error-bg-hover);
     });
-
-    &[data-mode='onDark'] {
-        color: var(--tui-negative-night);
-        background: var(--tui-error-bg-night);
-
-        .wrapper-hover({
-            background: var(--tui-error-bg-night-hover);
-        });
-
-        .wrapper-active({
-            background: var(--tui-error-bg-night-hover);
-        });
-    }
 }
diff --git a/projects/core/styles/theme/wrapper/table.less b/projects/core/styles/theme/wrapper/table.less
index 4ed95f853019..2e00907bc955 100644
--- a/projects/core/styles/theme/wrapper/table.less
+++ b/projects/core/styles/theme/wrapper/table.less
@@ -40,12 +40,6 @@
         color: var(--tui-base-04);
     }
 
-    &[data-mode='onDark'] {
-        .wrapper-focus({
-            --tui-focus: var(--tui-text-01-night);
-        });
-    }
-
     .wrapper-hover({
         &:not(._focused):before {
             background-color: var(--tui-clear);
diff --git a/projects/core/styles/theme/wrapper/textfield.less b/projects/core/styles/theme/wrapper/textfield.less
index 902c92beb778..a17d809a37fa 100644
--- a/projects/core/styles/theme/wrapper/textfield.less
+++ b/projects/core/styles/theme/wrapper/textfield.less
@@ -46,7 +46,8 @@
     });
 }
 
-[tuiWrapper][data-appearance='textfield'][data-mode='onDark'] {
+[tuiWrapper][data-appearance='textfield'][tuiTheme='dark'],
+[tuiTheme='dark'] [tuiWrapper][data-appearance='textfield'] {
     background: var(--tui-clear-inverse);
     color: var(--tui-text-01-night);
 
@@ -79,25 +80,3 @@
         }
     });
 }
-
-[tuiWrapper][data-appearance='textfield'][data-mode='onLight'] {
-    background: var(--tui-clear);
-
-    .wrapper-hover({
-        background: var(--tui-clear-hover);
-    });
-
-    .wrapper-readonly({
-        background: transparent;
-    });
-
-    .wrapper-invalid({
-        &:after {
-            color: var(--tui-error-fill);
-        }
-    });
-
-    .wrapper-focus({
-        background: transparent;
-    });
-}
diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts
index 535fc29a41d3..27861e918c62 100644
--- a/projects/core/tokens/index.ts
+++ b/projects/core/tokens/index.ts
@@ -15,7 +15,6 @@ export * from './icons';
 export * from './icons-path';
 export * from './is-mobile-resolution';
 export * from './media';
-export * from './mode';
 export * from './number-format';
 export * from './option-content';
 export * from './ordered-short-week-days';
diff --git a/projects/core/tokens/mode.ts b/projects/core/tokens/mode.ts
deleted file mode 100644
index 69f62a423d15..000000000000
--- a/projects/core/tokens/mode.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {InjectionToken} from '@angular/core';
-import type {TuiBrightness} from '@taiga-ui/core/types';
-import type {Observable} from 'rxjs';
-
-/**
- * Mode stream for private providers
- */
-export const TUI_MODE: InjectionToken<Observable<TuiBrightness | null>> =
-    new InjectionToken<Observable<TuiBrightness | null>>('[TUI_MODE]');
diff --git a/projects/core/types/brightness.ts b/projects/core/types/brightness.ts
index 64438c7f006d..2538cfe5b7bd 100644
--- a/projects/core/types/brightness.ts
+++ b/projects/core/types/brightness.ts
@@ -1 +1,5 @@
+/**
+ * TODO drop in 4.0
+ * @deprecated
+ */
 export type TuiBrightness = 'onDark' | 'onLight';
diff --git a/projects/core/utils/miscellaneous/is-editing-key.ts b/projects/core/utils/miscellaneous/is-editing-key.ts
index 8e09651a0caf..1e553b3929e9 100644
--- a/projects/core/utils/miscellaneous/is-editing-key.ts
+++ b/projects/core/utils/miscellaneous/is-editing-key.ts
@@ -3,6 +3,6 @@ import {tuiEditingKeys} from '@taiga-ui/core/constants';
 /**
  * Check if pressed key is interactive in terms of input field
  */
-export function tuiIsEditingKey(key: string): boolean {
+export function tuiIsEditingKey(key = ''): boolean {
     return key.length === 1 || tuiEditingKeys.includes(key);
 }
diff --git a/projects/demo-playwright/tests/addon-doc/navigation.spec.ts b/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
index e04bf3a076e5..bf56095d5f36 100644
--- a/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
+++ b/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
@@ -17,7 +17,7 @@ test.describe('Navigation', () => {
         );
     });
 
-    test('getting started / [night mode]', async ({page}) => {
+    test('getting started / [dark mode]', async ({page}) => {
         await tuiGoto(page, '/getting-started', {
             hideHeader: false,
             enableNightMode: true,
@@ -28,7 +28,7 @@ test.describe('Navigation', () => {
 
         await sideNavigation.isVisible();
         await expect(sideNavigation).toHaveScreenshot(
-            '02-tui-doc-navigation-night-mode.png',
+            '02-tui-doc-navigation-dark-mode.png',
         );
     });
 
diff --git a/projects/demo-playwright/tests/core/button/button.spec.ts b/projects/demo-playwright/tests/core/button/button.spec.ts
index 1d623365f57b..9269c5995e59 100644
--- a/projects/demo-playwright/tests/core/button/button.spec.ts
+++ b/projects/demo-playwright/tests/core/button/button.spec.ts
@@ -2,10 +2,10 @@ import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
 
 test.describe('Button', () => {
-    test('tuiMode=OnDark + appearance=icon + hovered state', async ({page}) => {
+    test('darkMode=true + appearance=icon + hovered state', async ({page}) => {
         await tuiGoto(
             page,
-            '/components/button/API?tuiMode=onDark&appearance=icon&icon=tuiIconEyeOff',
+            '/components/button/API?darkMode=true&appearance=icon&icon=tuiIconEyeOff',
         );
         const {apiPageExample} = new TuiDocumentationPagePO(page);
 
@@ -15,7 +15,7 @@ test.describe('Button', () => {
         await button.hover();
 
         await expect(button).toHaveScreenshot(
-            '01-[tuiMode=onDark]-[appearance=icon]-[data-state=hovered].png',
+            '01-[darkMode=true]-[appearance=icon]-[data-state=hovered].png',
         );
     });
 });
diff --git a/projects/demo-playwright/tests/core/calendars/calendars.spec.ts b/projects/demo-playwright/tests/core/calendars/calendars.spec.ts
index 82cd531e6a9b..afc0c8ad2ebf 100644
--- a/projects/demo-playwright/tests/core/calendars/calendars.spec.ts
+++ b/projects/demo-playwright/tests/core/calendars/calendars.spec.ts
@@ -5,10 +5,7 @@ test.describe('Calendars', () => {
     test.use({viewport: {width: 720, height: 700}});
 
     test('Calendar', async ({page}) => {
-        await tuiGoto(
-            page,
-            'components/calendar/API?tuiMode=null&value$=2&maxViewedMonth$=1&max$=0',
-        );
+        await tuiGoto(page, 'components/calendar/API?value$=2&maxViewedMonth$=1&max$=0');
         const {apiPageExample} = new TuiDocumentationPagePO(page);
 
         const calendar = apiPageExample.locator('tui-calendar').first();
@@ -44,10 +41,7 @@ test.describe('Calendars', () => {
     });
 
     test('Month', async ({page}) => {
-        await tuiGoto(
-            page,
-            'components/calendar-month/API?tuiMode=null&year$=1&value$=2',
-        );
+        await tuiGoto(page, 'components/calendar-month/API?year$=1&value$=2');
         const {apiPageExample} = new TuiDocumentationPagePO(page);
 
         const calendar = apiPageExample.locator('tui-calendar-month').first();
diff --git a/projects/demo-playwright/tests/core/hint/hint.spec.ts b/projects/demo-playwright/tests/core/hint/hint.spec.ts
index de8bf2c89eb3..e55d84b49e3f 100644
--- a/projects/demo-playwright/tests/core/hint/hint.spec.ts
+++ b/projects/demo-playwright/tests/core/hint/hint.spec.ts
@@ -47,12 +47,12 @@ test.describe('TuiHint', () => {
         });
     });
 
-    ['onDark', 'onLight'].forEach(mode => {
+    ['true', 'false'].forEach(mode => {
         test(`${mode} mode hint without delay`, async ({page}) => {
             await page.setViewportSize({width: 750, height: 200});
             await tuiGoto(
                 page,
-                `/directives/hint/API?tuiHintShowDelay=0&tuiMode=${mode}`,
+                `/directives/hint/API?tuiHintShowDelay=0&darkMode=${mode}`,
             );
             const example = new TuiDocumentationPagePO(page);
 
@@ -68,7 +68,7 @@ test.describe('TuiHint', () => {
             await page.setViewportSize({width: 750, height: 200});
             await tuiGoto(
                 page,
-                `/directives/hint/API?tuiHintShowDelay=1000&tuiMode=${mode}`,
+                `/directives/hint/API?tuiHintShowDelay=1000&darkMode=${mode}`,
             );
             const example = new TuiDocumentationPagePO(page);
 
diff --git a/projects/demo-playwright/tests/demo/get-demo-paths.ts b/projects/demo-playwright/tests/demo/get-demo-paths.ts
index 87f5fc68f638..f3004e45fca7 100644
--- a/projects/demo-playwright/tests/demo/get-demo-paths.ts
+++ b/projects/demo-playwright/tests/demo/get-demo-paths.ts
@@ -14,7 +14,6 @@ function flatPages(pages: TuiDocPages): readonly TuiDocPage[] {
 export const EXCLUDED_SECTIONS = ['Documentation', 'Foundations', 'Tools', 'Testing'];
 export const EXCLUDED_ROUTES = [
     DemoRoute.I18N,
-    DemoRoute.ThemeNight,
     DemoRoute.Preview, // no need take screenshot of buttons
     DemoRoute.Dialog, // just buttons
     DemoRoute.DialogCustom, // just buttons
diff --git a/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts b/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts
index ab05dbfe8043..582f990470df 100644
--- a/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts
+++ b/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts
@@ -33,10 +33,7 @@ test.describe('Tabs', () => {
     test.describe('API', () => {
         [-2, -1, 0, 1, 2, 3, 4, 5, 100, 1000].forEach(index => {
             test(`clamp active activeItemIndex=${index}`, async ({page}) => {
-                await tuiGoto(
-                    page,
-                    `/navigation/tabs/API?tuiMode=null&activeItemIndex=${index}`,
-                );
+                await tuiGoto(page, `/navigation/tabs/API?activeItemIndex=${index}`);
                 await expect(
                     new TuiDocumentationPagePO(page).apiPageExample,
                 ).toHaveScreenshot(`02-tabs-activeItemIndex-${index}.png`);
diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
index 8bf70fc81849..85cde8cb2dd4 100644
--- a/projects/demo/src/modules/app/app.component.ts
+++ b/projects/demo/src/modules/app/app.component.ts
@@ -9,11 +9,7 @@ import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TuiDocMainModule, TuiLanguageSwitcherComponent} from '@taiga-ui/addon-doc';
 import {TuiSheetModule} from '@taiga-ui/addon-mobile';
 import {TuiTableBarsHostModule} from '@taiga-ui/addon-tablebars';
-import {
-    TuiLinkDirective,
-    TuiModeModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiLinkDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {distinctUntilChanged, filter, map} from 'rxjs';
 
 import {CustomHostComponent} from '../customization/portals/examples/1/portal/custom-host.component';
@@ -31,7 +27,6 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
         TuiDocMainModule,
         NgIf,
         TuiLinkDirective,
-        TuiModeModule,
         RouterLink,
         TuiLanguageSwitcherComponent,
         VersionManagerModule,
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 6417cb6c150c..3bf5b59a9883 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -910,15 +910,6 @@ export const ROUTES: Routes = [
             title: 'Tag',
         },
     },
-    {
-        path: DemoRoute.ThemeNight,
-        loadChildren: async () =>
-            (await import('../components/theme-night/theme-night.module'))
-                .ExampleTuiThemeNightModule,
-        data: {
-            title: 'ThemeNight',
-        },
-    },
     {
         path: DemoRoute.Textarea,
         loadChildren: async () =>
@@ -988,15 +979,6 @@ export const ROUTES: Routes = [
             title: 'Confirm',
         },
     },
-    {
-        path: DemoRoute.ThemeSwitcher,
-        loadChildren: async () =>
-            (await import('../components/theme-switcher/theme-switcher.module'))
-                .ExampleTuiThemeSwitcherModule,
-        data: {
-            title: 'ThemeSwitcher',
-        },
-    },
     {
         path: DemoRoute.Tiles,
         loadChildren: async () =>
@@ -1475,14 +1457,11 @@ export const ROUTES: Routes = [
             title: 'Media',
         },
     },
-    {
-        path: DemoRoute.Mode,
-        loadChildren: async () =>
-            (await import('../directives/mode/mode.module')).ExampleTuiModeModule,
-        data: {
-            title: 'Mode',
-        },
-    },
+    route({
+        path: DemoRoute.Theme,
+        loadComponent: async () => import('../directives/theme'),
+        title: 'Theme',
+    }),
     {
         path: DemoRoute.AutoFocus,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/customization/customization.component.ts b/projects/demo/src/modules/app/customization/customization.component.ts
deleted file mode 100644
index 62f93971d600..000000000000
--- a/projects/demo/src/modules/app/customization/customization.component.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import type {AfterViewInit} from '@angular/core';
-import {Component, inject, ViewChild} from '@angular/core';
-import type {SafeStyle} from '@angular/platform-browser';
-import {DomSanitizer} from '@angular/platform-browser';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocDemoComponent} from '@taiga-ui/addon-doc';
-import {TuiDestroyService, tuiIsString, tuiPure, tuiPx} from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {Subject, takeUntil} from 'rxjs';
-
-import {
-    TUI_DOC_CUSTOMIZATION_PROVIDERS,
-    TUI_DOC_CUSTOMIZATION_VARS,
-} from './customization.providers';
-
-@Component({
-    selector: 'tui-customization',
-    templateUrl: './customization.template.html',
-    styleUrls: ['./customization.style.less'],
-    changeDetection,
-    providers: TUI_DOC_CUSTOMIZATION_PROVIDERS,
-})
-export class TuiCustomizationComponent implements AfterViewInit {
-    @ViewChild('demo')
-    private readonly demo?: TuiDocDemoComponent;
-
-    private readonly destroy$ = inject(TuiDestroyService, {self: true});
-    private readonly sanitizer = inject(DomSanitizer);
-    private variables = inject(TUI_DOC_CUSTOMIZATION_VARS);
-
-    protected readonly change$ = new Subject<void>();
-
-    public ngAfterViewInit(): void {
-        if (!this.demo) {
-            return;
-        }
-
-        this.demo.change$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.change$.next());
-    }
-
-    protected get style(): SafeStyle {
-        return this.getStyle(this.sanitizer, this.stringify(this.variables));
-    }
-
-    protected get keys(): readonly string[] {
-        return this.getKeys(this.variables);
-    }
-
-    protected get basic(): boolean {
-        return !this.hasDark && !this.hasLight;
-    }
-
-    protected get hasLight(): boolean {
-        return this.keys.some(this.isLight);
-    }
-
-    protected get hasDark(): boolean {
-        return this.keys.some(this.isDark);
-    }
-
-    protected get mode(): TuiBrightness | null {
-        return this.demo?.mode || null;
-    }
-
-    protected isLight(key: string): boolean {
-        return key.includes('onDark');
-    }
-
-    protected isDark(key: string): boolean {
-        return key.includes('onLight');
-    }
-
-    protected onModelChange(variable: string, value: number | string): void {
-        this.variables = {
-            ...this.variables,
-            [variable]: tuiIsString(value) ? value : tuiPx(value),
-        };
-    }
-
-    protected getType(key: string): 'color' | 'number' | 'string' {
-        const variable = this.variables[key];
-
-        if (key.includes('boxshadow')) {
-            return 'string';
-        }
-
-        return variable.startsWith('#') || variable.startsWith('rgb')
-            ? 'color'
-            : 'number';
-    }
-
-    protected getVariable(key: string): number | string {
-        const variable = this.variables[key];
-
-        return variable.includes('px') ? Number.parseInt(variable, 10) : variable;
-    }
-
-    @tuiPure
-    private getKeys(variables: Record<string, string>): readonly string[] {
-        return Object.keys(variables);
-    }
-
-    @tuiPure
-    private getStyle(sanitizer: DomSanitizer, variables: string): SafeStyle {
-        return sanitizer.bypassSecurityTrustStyle(variables);
-    }
-
-    @tuiPure
-    private stringify(variables: Record<string, string>): string {
-        return Object.keys(variables).reduce(
-            (result, key) => `${key}: ${variables[key]}; ${result}`,
-            '',
-        );
-    }
-}
diff --git a/projects/demo/src/modules/app/customization/customization.module.ts b/projects/demo/src/modules/app/customization/customization.module.ts
deleted file mode 100644
index eee923255ad1..000000000000
--- a/projects/demo/src/modules/app/customization/customization.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {TuiDocDemoModule, TuiDocDocumentationModule} from '@taiga-ui/addon-doc';
-import {TuiModeModule} from '@taiga-ui/core';
-import {TuiAccordionModule} from '@taiga-ui/kit';
-
-import {TuiCustomizationComponent} from './customization.component';
-
-@NgModule({
-    imports: [
-        FormsModule,
-        CommonModule,
-        TuiDocDocumentationModule,
-        TuiDocDemoModule,
-        TuiModeModule,
-        TuiAccordionModule,
-    ],
-    declarations: [TuiCustomizationComponent],
-    exports: [TuiCustomizationComponent],
-})
-export class TuiCustomizationModule {}
diff --git a/projects/demo/src/modules/app/customization/customization.providers.ts b/projects/demo/src/modules/app/customization/customization.providers.ts
deleted file mode 100644
index 6b84001d7a32..000000000000
--- a/projects/demo/src/modules/app/customization/customization.providers.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type {Provider} from '@angular/core';
-import {forwardRef, InjectionToken} from '@angular/core';
-import {WINDOW} from '@ng-web-apis/common';
-import {TuiDestroyService} from '@taiga-ui/cdk';
-import {TuiModeDirective} from '@taiga-ui/core';
-
-import {CSS_VARS} from '../../tokens/css-vars';
-import {TuiCustomizationComponent} from './customization.component';
-
-export const TUI_DOC_CUSTOMIZATION_VARS = new InjectionToken<Record<string, string>>(
-    '[TUI_DOC_CUSTOMIZATION_VARS]: CSS variables map',
-);
-export const TUI_DOC_CUSTOMIZATION_PROVIDERS: Provider[] = [
-    TuiDestroyService,
-    {
-        provide: TuiModeDirective,
-        useExisting: forwardRef(() => TuiCustomizationComponent),
-    },
-    {
-        provide: TUI_DOC_CUSTOMIZATION_VARS,
-        deps: [WINDOW, CSS_VARS],
-        useFactory: (
-            win: Window,
-            variables: readonly string[],
-        ): Record<string, string> => {
-            const styles = win.getComputedStyle(win.document.documentElement);
-
-            return variables.reduce(
-                (dictionary, variable) => ({
-                    ...dictionary,
-                    [variable]: styles.getPropertyValue(variable).trim(),
-                }),
-                {},
-            );
-        },
-    },
-];
diff --git a/projects/demo/src/modules/app/customization/customization.style.less b/projects/demo/src/modules/app/customization/customization.style.less
deleted file mode 100644
index 7f26ddcb5503..000000000000
--- a/projects/demo/src/modules/app/customization/customization.style.less
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-    display: block;
-}
diff --git a/projects/demo/src/modules/app/customization/customization.template.html b/projects/demo/src/modules/app/customization/customization.template.html
deleted file mode 100644
index ceb5b0b42827..000000000000
--- a/projects/demo/src/modules/app/customization/customization.template.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<tui-doc-demo
-    #demo
-    [attr.style]="style"
->
-    <ng-content />
-</tui-doc-demo>
-<tui-doc-documentation
-    *ngIf="basic; else withMode"
-    class="tui-space_top-6"
-    [tuiMode]="null"
->
-    <ng-template
-        *ngFor="let variable of keys"
-        [documentationPropertyName]="variable"
-        [documentationPropertyType]="getType(variable)"
-        [documentationPropertyValue]="getVariable(variable)"
-        (documentationPropertyValueChange)="onModelChange(variable, $event)"
-    />
-</tui-doc-documentation>
-<ng-template #withMode>
-    <tui-accordion
-        class="tui-space_top-6"
-        [tuiMode]="null"
-    >
-        <tui-accordion-item>
-            Default
-            <tui-doc-documentation *tuiAccordionItemContent>
-                <ng-container *ngFor="let variable of keys">
-                    <ng-template
-                        *ngIf="!isDark(variable) && !isLight(variable)"
-                        [documentationPropertyName]="variable"
-                        [documentationPropertyType]="getType(variable)"
-                        [documentationPropertyValue]="getVariable(variable)"
-                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                    />
-                </ng-container>
-            </tui-doc-documentation>
-        </tui-accordion-item>
-        <tui-accordion-item *ngIf="hasLight">
-            Light
-            <tui-doc-documentation *tuiAccordionItemContent>
-                <ng-container *ngFor="let variable of keys">
-                    <ng-template
-                        *ngIf="isLight(variable)"
-                        [documentationPropertyName]="variable"
-                        [documentationPropertyType]="getType(variable)"
-                        [documentationPropertyValue]="getVariable(variable)"
-                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                    />
-                </ng-container>
-            </tui-doc-documentation>
-        </tui-accordion-item>
-        <tui-accordion-item *ngIf="hasLight">
-            Dark
-            <tui-doc-documentation *tuiAccordionItemContent>
-                <ng-container *ngFor="let variable of keys">
-                    <ng-template
-                        *ngIf="isDark(variable)"
-                        [documentationPropertyName]="variable"
-                        [documentationPropertyType]="getType(variable)"
-                        [documentationPropertyValue]="getVariable(variable)"
-                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                    />
-                </ng-container>
-            </tui-doc-documentation>
-        </tui-accordion-item>
-    </tui-accordion>
-</ng-template>
diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
index 53c6b7e5ff03..74c2bbfc5f99 100644
--- a/projects/demo/src/modules/app/demo-routes.ts
+++ b/projects/demo/src/modules/app/demo-routes.ts
@@ -119,7 +119,6 @@ export const DemoRoute = {
     TabBar: 'navigation/tab-bar',
     Tabs: 'navigation/tabs',
     Tag: 'components/tag',
-    ThemeNight: 'components/theme-night',
     Textarea: 'components/textarea',
     PrimitiveTextfield: 'components/primitive-textfield',
     PdfViewer: 'components/pdf-viewer',
@@ -129,7 +128,6 @@ export const DemoRoute = {
     ProgressCircle: 'components/progress-circle',
     ProgressSegmented: 'components/progress-segmented',
     Confirm: 'components/confirm',
-    ThemeSwitcher: 'components/theme-switcher',
     Tiles: 'components/tiles',
     Switch: 'components/switch',
     Tooltip: 'components/tooltip',
@@ -186,7 +184,7 @@ export const DemoRoute = {
     Validator: 'directives/validator',
     ValueChanges: 'directives/value-changes',
     Media: 'media',
-    Mode: 'directives/mode',
+    Theme: 'directives/theme',
     AutoFocus: 'directives/auto-focus',
     Currency: 'pipes/currency',
     FilterPipe: 'pipes/filter',
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 806b287d463f..db26e2d33619 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -831,18 +831,6 @@ export const pages: TuiDocPages = [
         keywords: 'tag, тэг',
         route: DemoRoute.Tag,
     },
-    {
-        section: 'Components',
-        title: 'ThemeNight',
-        keywords: 'theme, dark, night, тема, тэг',
-        route: DemoRoute.ThemeNight,
-    },
-    {
-        section: 'Components',
-        title: 'ThemeSwitcher',
-        keywords: 'тема, blue, цвета, стили, кастомизация, синий, синяя',
-        route: DemoRoute.ThemeSwitcher,
-    },
     {
         section: 'Components',
         title: 'Tiles',
@@ -1223,9 +1211,9 @@ export const pages: TuiDocPages = [
             },
             {
                 section: 'Tools',
-                title: 'Mode',
-                keywords: 'фон, вид, цвет',
-                route: DemoRoute.Mode,
+                title: 'Theme',
+                keywords: 'color, mode, dark, night, тема, фон, вид, цвет',
+                route: DemoRoute.Theme,
             },
             {
                 section: 'Tools',
diff --git a/projects/demo/src/modules/charts/bar-chart/examples/2/index.ts b/projects/demo/src/modules/charts/bar-chart/examples/2/index.ts
index dd697292f6e7..bdd6b1b7fdb7 100644
--- a/projects/demo/src/modules/charts/bar-chart/examples/2/index.ts
+++ b/projects/demo/src/modules/charts/bar-chart/examples/2/index.ts
@@ -19,9 +19,9 @@ export class TuiBarChartExample2 {
 
     protected readonly labelsX = ['Jan 2021', 'Feb', 'Mar'];
     protected readonly labelsY = ['0', '10 000'];
-    protected readonly appearances = ['onDark', 'error'];
+    protected readonly appearances = ['dark', 'error'];
 
-    protected appearance = 'onDark';
+    protected appearance = this.appearances[0];
 
     protected readonly hint = ({$implicit}: TuiContext<number>): string =>
         this.value
diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
index a27761954940..99883e37bcb7 100644
--- a/projects/demo/src/modules/components/abstract/control.ts
+++ b/projects/demo/src/modules/components/abstract/control.ts
@@ -39,7 +39,7 @@ export abstract class AbstractExampleTuiControl
 
     public readonly hintDirectionVariants = TUI_HINT_DIRECTIONS;
 
-    public readonly hintAppearanceVariants = ['', 'error', 'onDark'];
+    public readonly hintAppearanceVariants = ['', 'error', 'dark'];
 
     public readonly typeVariants: readonly TuiInputType[] = [
         'text',
diff --git a/projects/demo/src/modules/components/abstract/hint.ts b/projects/demo/src/modules/components/abstract/hint.ts
index dba365809f87..3da46415367b 100644
--- a/projects/demo/src/modules/components/abstract/hint.ts
+++ b/projects/demo/src/modules/components/abstract/hint.ts
@@ -1,7 +1,7 @@
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 export abstract class AbstractExampleTuiHint {
-    public readonly appearanceVariants = ['', 'error', 'onDark'];
+    public readonly appearanceVariants = ['', 'error', 'dark'];
 
     public appearance = this.appearanceVariants[0];
 
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
index f700ab5e2260..c017fedffe99 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
@@ -28,7 +28,7 @@ export class InheritedDocumentationComponent {
 
     protected readonly directionVariants = TUI_HINT_DIRECTIONS;
 
-    protected readonly appearanceVariants = ['', 'error', 'onDark'];
+    protected readonly appearanceVariants = ['', 'error', 'dark'];
 
     protected readonly documentedComponent = inject(ABSTRACT_PROPS_ACCESSOR);
 
diff --git a/projects/demo/src/modules/components/alert/examples/2/index.html b/projects/demo/src/modules/components/alert/examples/2/index.html
index 5c182605c118..4f9c13a5da68 100644
--- a/projects/demo/src/modules/components/alert/examples/2/index.html
+++ b/projects/demo/src/modules/components/alert/examples/2/index.html
@@ -42,10 +42,9 @@
         <span>{{ money | tuiAmount: 'RUB' | async }}</span>
     </p>
     <button
-        appearance="outline"
+        appearance="whiteblock"
         size="m"
         tuiButton
-        tuiMode="onLight"
         type="button"
         (click)="withdraw()"
     >
@@ -70,14 +69,15 @@
         <span>{{ money | tuiAmount: 'RUB' | async }}</span>
     </p>
     <button
-        appearance="outline"
+        appearance="whiteblock"
         size="m"
         tuiButton
-        tuiMode="onLight"
         type="button"
         (click)="deposit()"
     >
-        Add&nbsp;
-        <span>{{ 100 | tuiAmount: 'RUB' | async }}</span>
+        <span>
+            Add&nbsp;
+            <span>{{ 100 | tuiAmount: 'RUB' | async }}</span>
+        </span>
     </button>
 </ng-template>
diff --git a/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts
index 58b09c6a0029..9dfbb3117e80 100644
--- a/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts
+++ b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts
@@ -1,13 +1,13 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import {type TuiAlertOptions, TuiButtonDirective, TuiModeModule} from '@taiga-ui/core';
+import {type TuiAlertOptions, TuiButtonDirective} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
     standalone: true,
     selector: 'tui-notifications-service-example',
-    imports: [TuiButtonDirective, TuiModeModule],
+    imports: [TuiButtonDirective],
     templateUrl: './alert-example.template.html',
     changeDetection,
 })
diff --git a/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html
index 9380b7126eb2..99b14ff938cc 100644
--- a/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html
+++ b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html
@@ -1,22 +1,20 @@
 <p>Yes?</p>
-<div tuiMode="onLight">
-    <button
-        appearance="outline"
-        size="s"
-        tuiButton
-        type="button"
-        (click)="ok()"
-    >
-        Yes
-    </button>
-    <button
-        appearance="outline"
-        size="s"
-        tuiButton
-        type="button"
-        class="tui-space_left-1"
-        (click)="cancel()"
-    >
-        No
-    </button>
-</div>
+<button
+    appearance="whiteblock"
+    size="s"
+    tuiButton
+    type="button"
+    (click)="ok()"
+>
+    Yes
+</button>
+<button
+    appearance="whiteblock"
+    size="s"
+    tuiButton
+    type="button"
+    class="tui-space_left-1"
+    (click)="cancel()"
+>
+    No
+</button>
diff --git a/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.component.ts b/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.component.ts
index 8e314b28eec0..b2e31f6c27c5 100644
--- a/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.component.ts
+++ b/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.component.ts
@@ -3,24 +3,13 @@ import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import {
-    type TuiAlertOptions,
-    TuiButtonDirective,
-    TuiLinkDirective,
-    TuiModeModule,
-} from '@taiga-ui/core';
+import {type TuiAlertOptions, TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
     standalone: true,
     selector: 'tui-notifications-service-example-with-data',
-    imports: [
-        AsyncPipe,
-        TuiModeModule,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiAmountPipe,
-    ],
+    imports: [AsyncPipe, TuiButtonDirective, TuiLinkDirective, TuiAmountPipe],
     templateUrl: './alert-example-with-data.template.html',
     styleUrls: ['./alert-example-with-data.style.less'],
     changeDetection,
diff --git a/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.template.html b/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.template.html
index 4777cd2d7bcb..acc5dd83a4b5 100644
--- a/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.template.html
+++ b/projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.template.html
@@ -1,12 +1,9 @@
 <span class="text">Your balance:</span>
 &nbsp;
 <span>{{ value | tuiAmount: 'RUB' | async }}</span>
-<div
-    tuiMode="onLight"
-    class="controls tui-space_top-3"
->
+<div class="controls tui-space_top-3">
     <button
-        appearance="outline"
+        appearance="whiteblock"
         size="m"
         tuiButton
         type="button"
@@ -16,6 +13,7 @@
         Submit
     </button>
     <button
+        appearance=""
         tuiLink
         type="button"
         [pseudo]="true"
diff --git a/projects/demo/src/modules/components/carousel/carousel.module.ts b/projects/demo/src/modules/components/carousel/carousel.module.ts
index 0b6a2e74380c..a5cb98cbe00f 100644
--- a/projects/demo/src/modules/components/carousel/carousel.module.ts
+++ b/projects/demo/src/modules/components/carousel/carousel.module.ts
@@ -9,7 +9,6 @@ import {
     TuiDialogModule,
     TuiLinkDirective,
     TuiLoaderModule,
-    TuiModeModule,
     TuiNotificationModule,
 } from '@taiga-ui/core';
 import {
@@ -39,7 +38,6 @@ import {TuiCarouselExample5} from './examples/5';
         TuiLoaderModule,
         TuiAvatarComponent,
         TuiDialogModule,
-        TuiModeModule,
         TuiRepeatTimesModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCarouselComponent)),
diff --git a/projects/demo/src/modules/components/carousel/examples/4/index.html b/projects/demo/src/modules/components/carousel/examples/4/index.html
index 7c0225f4aca3..13d02e7d4c3c 100644
--- a/projects/demo/src/modules/components/carousel/examples/4/index.html
+++ b/projects/demo/src/modules/components/carousel/examples/4/index.html
@@ -23,9 +23,10 @@
         (touchstart.passive.stop)="(0)"
     >
         <button
+            appearance="neutral"
             iconLeft="tuiIconChevronLeftLarge"
             tuiIconButton
-            tuiMode="onDark"
+            tuiTheme="dark"
             type="button"
             class="tui-space_right-4"
             (click)="navigate(-1)"
@@ -58,9 +59,10 @@ <h2>Buttons</h2>
             </div>
         </tui-carousel>
         <button
+            appearance="neutral"
             iconLeft="tuiIconChevronRightLarge"
             tuiIconButton
-            tuiMode="onDark"
+            tuiTheme="dark"
             type="button"
             class="tui-space_left-4"
             (click)="navigate(1)"
diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts
index 3df91dc2ff67..f96f91f3b917 100644
--- a/projects/demo/src/modules/components/group/group.module.ts
+++ b/projects/demo/src/modules/components/group/group.module.ts
@@ -10,7 +10,6 @@ import {
     TuiGroupDirective,
     TuiHintModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiTextfieldControllerModule,
     TuiTitleDirective,
 } from '@taiga-ui/core';
@@ -48,7 +47,6 @@ import {ExampleTuiGroupComponent} from './group.component';
         TuiComboBoxModule,
         TuiCurrencyPipeModule,
         TuiInputNumberModule,
-        TuiModeModule,
         TuiDataListModule,
         TuiDataListWrapperModule,
         CommonModule,
diff --git a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
index 0f410a1cfc36..7ba1c243ddc4 100644
--- a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
+++ b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
@@ -79,11 +79,12 @@
 
         <ng-template #template>
             <tui-thumbnail-card
-                cardNumber="1234"
                 paymentSystem="maestro"
                 size="s"
                 class="card"
-            />
+            >
+                1234
+            </tui-thumbnail-card>
         </ng-template>
 
         <tui-doc-documentation>
diff --git a/projects/demo/src/modules/components/input-password/examples/2/index.html b/projects/demo/src/modules/components/input-password/examples/2/index.html
index ec90aa77738e..961741834b4b 100644
--- a/projects/demo/src/modules/components/input-password/examples/2/index.html
+++ b/projects/demo/src/modules/components/input-password/examples/2/index.html
@@ -1,7 +1,7 @@
 <form [formGroup]="testForm">
     <tui-input-password
         formControlName="testValue"
-        tuiHintAppearance="onDark"
+        tuiHintAppearance="dark"
         tuiHintContent
         tuiHintDirection="right"
     >
diff --git a/projects/demo/src/modules/components/input/examples/5/index.html b/projects/demo/src/modules/components/input/examples/5/index.html
index d2e23d8bd715..900ed461a9b0 100644
--- a/projects/demo/src/modules/components/input/examples/5/index.html
+++ b/projects/demo/src/modules/components/input/examples/5/index.html
@@ -16,23 +16,7 @@
         <p class="wrapper wrapper_dark">
             <tui-input
                 formControlName="testValue"
-                tuiMode="onDark"
-                [tuiTextfieldCleaner]="true"
-            >
-                Type an email
-                <input
-                    placeholder="mail@mail.ru"
-                    tuiTextfield
-                    type="email"
-                />
-            </tui-input>
-        </p>
-    </div>
-    <div>
-        <p class="wrapper wrapper_light">
-            <tui-input
-                formControlName="testValue"
-                tuiMode="onLight"
+                tuiTheme="dark"
                 [tuiTextfieldCleaner]="true"
             >
                 Type an email
diff --git a/projects/demo/src/modules/components/input/examples/5/index.less b/projects/demo/src/modules/components/input/examples/5/index.less
index 401d6cdef977..991d32d04f8a 100644
--- a/projects/demo/src/modules/components/input/examples/5/index.less
+++ b/projects/demo/src/modules/components/input/examples/5/index.less
@@ -4,8 +4,4 @@
     &_dark {
         background-color: #30406a;
     }
-
-    &_light {
-        background-color: #e5e7ea;
-    }
 }
diff --git a/projects/demo/src/modules/components/input/input.component.ts b/projects/demo/src/modules/components/input/input.component.ts
index dcc11224ecaf..06012104c0a2 100644
--- a/projects/demo/src/modules/components/input/input.component.ts
+++ b/projects/demo/src/modules/components/input/input.component.ts
@@ -2,7 +2,6 @@ import type {TemplateRef} from '@angular/core';
 import {Component, ViewChild} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {DemoRoute} from '@demo/routes';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiProvide} from '@taiga-ui/cdk';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
@@ -44,8 +43,6 @@ export class ExampleTuiInputComponent extends AbstractExampleTuiControl {
 
     protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
 
-    protected modeDocPage = `/${DemoRoute.Mode}`;
-
     protected readonly example1: TuiDocExample = {
         TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),
diff --git a/projects/demo/src/modules/components/input/input.module.ts b/projects/demo/src/modules/components/input/input.module.ts
index f0ddf4385be7..0dbfb9064b08 100644
--- a/projects/demo/src/modules/components/input/input.module.ts
+++ b/projects/demo/src/modules/components/input/input.module.ts
@@ -19,7 +19,6 @@ import {
     TuiHintModule,
     TuiInitialsPipe,
     TuiLinkDirective,
-    TuiModeModule,
     TuiNotificationModule,
     TuiPrimitiveTextfieldModule,
     TuiSvgModule,
@@ -64,7 +63,6 @@ import {ExampleTuiInputComponent} from './input.component';
         TuiMapperPipeModule,
         TuiAmountPipe,
         TuiLinkDirective,
-        TuiModeModule,
         TuiTableModule,
         TuiInputDateModule,
         TuiNotificationModule,
diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
index a6e6f2836322..c74efa1d4f1d 100644
--- a/projects/demo/src/modules/components/input/input.template.html
+++ b/projects/demo/src/modules/components/input/input.template.html
@@ -170,16 +170,6 @@
             heading="Modes"
             [content]="example5"
         >
-            <tui-notification>
-                Custom mode is set with
-                <a
-                    tuiLink
-                    [routerLink]="modeDocPage"
-                >
-                    <code>tuiMode</code>
-                </a>
-                directive
-            </tui-notification>
             <tui-input-example-5 />
         </tui-doc-example>
 
diff --git a/projects/demo/src/modules/components/link/examples/3/index.html b/projects/demo/src/modules/components/link/examples/3/index.html
index c7d024dd2793..89691c490f5e 100644
--- a/projects/demo/src/modules/components/link/examples/3/index.html
+++ b/projects/demo/src/modules/components/link/examples/3/index.html
@@ -6,7 +6,7 @@
 >
     Large icon
 </a>
-<p tuiTheme="night">
+<p tuiTheme="dark">
     <button
         appearance="icon"
         iconRight="tuiIconHelpCircle"
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.html b/projects/demo/src/modules/components/notification/examples/1/index.html
index 542b73b4e110..263fac4d5b06 100644
--- a/projects/demo/src/modules/components/notification/examples/1/index.html
+++ b/projects/demo/src/modules/components/notification/examples/1/index.html
@@ -18,7 +18,7 @@
         {{ status | titlecase }} label ({{ size | uppercase }})
         <tui-svg
             src="tuiIconHelpCircle"
-            tuiHintAppearance="onDark"
+            tuiHintAppearance="dark"
             tuiHintDirection="right"
             [tuiHint]="tooltip"
         />
diff --git a/projects/demo/src/modules/components/notification/examples/3/index.html b/projects/demo/src/modules/components/notification/examples/3/index.html
index e4dbfe5ee1fc..685756c1b782 100644
--- a/projects/demo/src/modules/components/notification/examples/3/index.html
+++ b/projects/demo/src/modules/components/notification/examples/3/index.html
@@ -59,10 +59,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-3"
-        >
+        <div class="buttons tui-space_top-3">
             <button
                 appearance="whiteblock"
                 size="s"
@@ -90,10 +87,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-3 tui-space_bottom-1"
-        >
+        <div class="buttons tui-space_top-3 tui-space_bottom-1">
             <button
                 appearance="whiteblock"
                 size="s"
@@ -120,10 +114,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-2 tui-space_bottom-1"
-        >
+        <div class="buttons tui-space_top-2 tui-space_bottom-1">
             <button
                 appearance="whiteblock"
                 size="xs"
@@ -155,10 +146,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-3"
-        >
+        <div class="buttons tui-space_top-3">
             <button
                 appearance="whiteblock"
                 size="s"
@@ -186,10 +174,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-3 tui-space_bottom-1"
-        >
+        <div class="buttons tui-space_top-3 tui-space_bottom-1">
             <button
                 appearance="whiteblock"
                 size="s"
@@ -216,10 +201,7 @@
             <strong>Title</strong>
         </div>
         Notification multiline long text with icons
-        <div
-            tuiMode="onLight"
-            class="buttons tui-space_top-2 tui-space_bottom-1"
-        >
+        <div class="buttons tui-space_top-2 tui-space_bottom-1">
             <button
                 appearance="whiteblock"
                 size="xs"
diff --git a/projects/demo/src/modules/components/notification/notification.module.ts b/projects/demo/src/modules/components/notification/notification.module.ts
index 9be227da0844..9e7f03817123 100644
--- a/projects/demo/src/modules/components/notification/notification.module.ts
+++ b/projects/demo/src/modules/components/notification/notification.module.ts
@@ -7,7 +7,6 @@ import {
     TuiButtonDirective,
     TuiHintModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiNotificationModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
@@ -22,7 +21,6 @@ import {ExampleTuiNotificationComponent} from './notification.component';
         TuiNotificationModule,
         TuiButtonDirective,
         TuiLinkDirective,
-        TuiModeModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
index 0463f8479fac..c2e0e02188f3 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
@@ -120,7 +120,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt
 
     protected readonly hintDirectionVariants = TUI_HINT_DIRECTIONS;
 
-    protected readonly hintAppearanceVariants = ['', 'error', 'onDark'];
+    protected readonly hintAppearanceVariants = ['', 'error', 'dark'];
 
     protected invalid = false;
 
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
index b3c3c025fa3e..820e9d3bf567 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
@@ -17,8 +17,6 @@ import {
 import {TuiAvatarComponent, TuiRadioListComponent} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
-import {TuiCustomizationModule} from '../../app/customization/customization.module';
-import {ThemesModule} from '../../themes/themes.module';
 import {HintControllerDocumentationModule} from '../abstract/hint-controller-documentation/hint-controller-documentation.module';
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TextfieldControllerDocumentationModule} from '../abstract/textfield-controller-documentation/textfield-controller-documentation.module';
@@ -44,10 +42,8 @@ import {ExampleTuiPrimitiveTextfieldComponent} from './primitive-textfield.compo
         PolymorpheusModule,
         TuiHintModule,
         TuiRadioListComponent,
-        TuiCustomizationModule,
         TuiLabelModule,
         TuiWrapperModule,
-        ThemesModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPrimitiveTextfieldComponent)),
     ],
diff --git a/projects/demo/src/modules/components/scrollbar/examples/5/style.less b/projects/demo/src/modules/components/scrollbar/examples/5/style.less
index 11d62a3ca2b4..3dc390b10e37 100644
--- a/projects/demo/src/modules/components/scrollbar/examples/5/style.less
+++ b/projects/demo/src/modules/components/scrollbar/examples/5/style.less
@@ -3,7 +3,7 @@
 .box {
     width: 16rem;
     height: 16rem;
-    background: var(--tui-base-07);
+    background: var(--tui-base-02);
 }
 
 .content {
diff --git a/projects/demo/src/modules/components/scrollbar/examples/5/template.html b/projects/demo/src/modules/components/scrollbar/examples/5/template.html
index efcddefb7752..e7fea4de5039 100644
--- a/projects/demo/src/modules/components/scrollbar/examples/5/template.html
+++ b/projects/demo/src/modules/components/scrollbar/examples/5/template.html
@@ -1,5 +1,5 @@
 <tui-scrollbar
-    tuiMode="onDark"
+    tuiTheme="dark"
     class="box"
 >
     <div class="content">
diff --git a/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts b/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts
index 4972beb8f60b..7420c0c9538c 100644
--- a/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts
+++ b/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts
@@ -5,7 +5,6 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
     TuiButtonDirective,
-    TuiModeModule,
     TuiNotificationModule,
     TuiScrollableDirective,
     TuiScrollbarComponent,
@@ -25,7 +24,6 @@ import {ExampleTuiScrollbarComponent} from './scrollbar.component';
         ScrollingModule,
         TuiButtonDirective,
         TuiScrollbarComponent,
-        TuiModeModule,
         TuiNotificationModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiScrollbarComponent)),
diff --git a/projects/demo/src/modules/components/slider/examples/6/index.html b/projects/demo/src/modules/components/slider/examples/6/index.html
index a309e873778c..5eb9894a2642 100644
--- a/projects/demo/src/modules/components/slider/examples/6/index.html
+++ b/projects/demo/src/modules/components/slider/examples/6/index.html
@@ -4,7 +4,7 @@
         iconLeft="tuiIconMinus"
         size="xs"
         tuiIconButton
-        tuiTheme="night"
+        tuiTheme="dark"
         type="button"
         class="minus"
         (click)="change(-0.25)"
@@ -14,7 +14,7 @@
         class="slider-wrapper"
     >
         <div
-            tuiHintAppearance="onDark"
+            tuiHintAppearance="dark"
             tuiHintDirection="top"
             [tuiHint]="hint"
             [tuiHintManual]="!!(showHint$ | async)"
@@ -38,7 +38,7 @@
         iconLeft="tuiIconPlus"
         size="xs"
         tuiIconButton
-        tuiTheme="night"
+        tuiTheme="dark"
         type="button"
         class="plus"
         (click)="change(+0.25)"
diff --git a/projects/demo/src/modules/components/slider/slider.module.ts b/projects/demo/src/modules/components/slider/slider.module.ts
index b555b48394de..300c2172c59f 100644
--- a/projects/demo/src/modules/components/slider/slider.module.ts
+++ b/projects/demo/src/modules/components/slider/slider.module.ts
@@ -11,7 +11,6 @@ import {
     TuiButtonDirective,
     TuiHintModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiNotificationModule,
 } from '@taiga-ui/core';
 import {TuiSliderModule} from '@taiga-ui/kit';
@@ -33,7 +32,6 @@ import {ExampleTuiSliderComponent} from './slider.component';
         ReactiveFormsModule,
         TuiLinkDirective,
         TuiNotificationModule,
-        TuiModeModule,
         TuiButtonDirective,
         TuiHintModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSliderComponent)),
diff --git a/projects/demo/src/modules/components/swipe-action/examples/2/index.html b/projects/demo/src/modules/components/swipe-action/examples/2/index.html
index 3c7ba54b017a..8049b860d156 100644
--- a/projects/demo/src/modules/components/swipe-action/examples/2/index.html
+++ b/projects/demo/src/modules/components/swipe-action/examples/2/index.html
@@ -1,6 +1,5 @@
 <tui-swipe-actions [style.--tui-actions-padding.rem]="0.5">
     <div
-        tuiMode="onDark"
         tuiSurface
         class="blur"
     >
diff --git a/projects/demo/src/modules/components/tabs/examples/3/index.html b/projects/demo/src/modules/components/tabs/examples/3/index.html
index a8b64337f86e..250250af91d6 100644
--- a/projects/demo/src/modules/components/tabs/examples/3/index.html
+++ b/projects/demo/src/modules/components/tabs/examples/3/index.html
@@ -1,6 +1,5 @@
 <div
-    tuiMode="onDark"
-    tuiTheme="night"
+    tuiTheme="dark"
     class="wrapper"
 >
     <h1 class="tui-text_h3 title">Monty Python</h1>
diff --git a/projects/demo/src/modules/components/tabs/tabs.module.ts b/projects/demo/src/modules/components/tabs/tabs.module.ts
index 6e99c1dfbbb3..dd2c1d8a73c5 100644
--- a/projects/demo/src/modules/components/tabs/tabs.module.ts
+++ b/projects/demo/src/modules/components/tabs/tabs.module.ts
@@ -9,7 +9,6 @@ import {
     TuiDataListModule,
     TuiDropdownModule,
     TuiIconComponent,
-    TuiModeModule,
     TuiNotificationModule,
     TuiScrollbarComponent,
 } from '@taiga-ui/core';
@@ -30,7 +29,6 @@ import {ExampleTuiTabsComponent} from './tabs.component';
         FormsModule,
         TuiTabsModule,
         TuiInputNumberModule,
-        TuiModeModule,
         TuiNotificationModule,
         TuiButtonDirective,
         TuiDropdownModule,
diff --git a/projects/demo/src/modules/components/tag/examples/2/index.html b/projects/demo/src/modules/components/tag/examples/2/index.html
index 56e2347f55a9..b82b4a331c3d 100644
--- a/projects/demo/src/modules/components/tag/examples/2/index.html
+++ b/projects/demo/src/modules/components/tag/examples/2/index.html
@@ -11,20 +11,14 @@
         [hoverable]="true"
         [value]="tag"
     />
-    <div
-        tuiMode="onDark"
-        class="light-mode"
-    >
+    <div class="light-mode">
         <tui-tag
             class="tag"
             [hoverable]="true"
             [value]="tag"
         />
     </div>
-    <div
-        tuiMode="onLight"
-        class="dark-mode"
-    >
+    <div class="dark-mode">
         <tui-tag
             class="tag"
             [hoverable]="true"
diff --git a/projects/demo/src/modules/components/tag/tag.module.ts b/projects/demo/src/modules/components/tag/tag.module.ts
index 1d49c7db6d15..e8e8d92c98be 100644
--- a/projects/demo/src/modules/components/tag/tag.module.ts
+++ b/projects/demo/src/modules/components/tag/tag.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiForModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
-import {TuiModeModule, TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
 import {TuiRadioListComponent, TuiTagModule} from '@taiga-ui/kit';
 
 import {TuiTagExample1} from './examples/1';
@@ -21,7 +21,6 @@ import {ExampleTuiTagComponent} from './tag.component';
         FormsModule,
         TuiRadioListComponent,
         TuiTagModule,
-        TuiModeModule,
         TuiSvgModule,
         TuiRepeatTimesModule,
         TuiAddonDocModule,
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/import-module.md b/projects/demo/src/modules/components/theme-night/examples/import/import-module.md
deleted file mode 100644
index 95775f8c1364..000000000000
--- a/projects/demo/src/modules/components/theme-night/examples/import/import-module.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```ts
-import {TuiThemeNightModule, TuiModeModule} from '@taiga-ui/core';
-
-// ...
-
-@NgModule({
-  imports: [
-    // ...
-    TuiThemeNightModule,
-    TuiModeModule,
-  ],
-  // ...
-})
-export class AppModule {}
-```
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/insert-component.md b/projects/demo/src/modules/components/theme-night/examples/import/insert-component.md
deleted file mode 100644
index 598a14e745e9..000000000000
--- a/projects/demo/src/modules/components/theme-night/examples/import/insert-component.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-@Component({
-  // ...
-})
-export class AppComponent {
-  readonly night = inject(TuiThemeNightService);
-
-  get mode(): TuiBrightness | null {
-    return this.night.value ? 'onDark' : null;
-  }
-}
-```
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md b/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md
deleted file mode 100644
index 2fd821837610..000000000000
--- a/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-<tui-theme-night *ngIf="night$ | async"></tui-theme-night>
-
-<tui-root [tuiMode]="mode">
-  <button (click)="night.toggle()">Turn theme</button>
-</tui-root>
-```
diff --git a/projects/demo/src/modules/components/theme-night/theme-night.component.ts b/projects/demo/src/modules/components/theme-night/theme-night.component.ts
deleted file mode 100644
index 356765c80fef..000000000000
--- a/projects/demo/src/modules/components/theme-night/theme-night.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {DemoRoute} from '@demo/routes';
-
-@Component({
-    selector: 'example-tui-theme-night',
-    templateUrl: './theme-night.template.html',
-    changeDetection,
-})
-export class ExampleTuiThemeNightComponent {
-    protected modeDocPage = `/${DemoRoute.Mode}`;
-
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleComponent = import(
-        './examples/import/insert-component.md?raw'
-    );
-
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-}
diff --git a/projects/demo/src/modules/components/theme-night/theme-night.module.ts b/projects/demo/src/modules/components/theme-night/theme-night.module.ts
deleted file mode 100644
index 4fe572a6d523..000000000000
--- a/projects/demo/src/modules/components/theme-night/theme-night.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkDirective} from '@taiga-ui/core';
-
-import {ExampleTuiThemeNightComponent} from './theme-night.component';
-
-@NgModule({
-    imports: [
-        TuiLinkDirective,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiThemeNightComponent)),
-    ],
-    declarations: [ExampleTuiThemeNightComponent],
-    exports: [ExampleTuiThemeNightComponent],
-})
-export class ExampleTuiThemeNightModule {}
diff --git a/projects/demo/src/modules/components/theme-night/theme-night.template.html b/projects/demo/src/modules/components/theme-night/theme-night.template.html
deleted file mode 100644
index 8fcfeb8ee000..000000000000
--- a/projects/demo/src/modules/components/theme-night/theme-night.template.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<tui-doc-page
-    header="ThemeNight"
-    package="CORE"
-    type="components"
->
-    <ng-template pageTab>
-        <p>
-            <code>ThemeNight</code>
-            is a
-            <a
-                routerLink="/components/theme-switcher"
-                tuiLink
-            >
-                <code>ThemeSwitcher</code>
-            </a>
-            that you can use together with
-            <a
-                tuiLink
-                [routerLink]="modeDocPage"
-            >
-                <code>Mode</code>
-            </a>
-            directive to create a night mode in you application.
-        </p>
-
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiThemeNightModule</code>
-                    and
-                    <code>TuiModeModule</code>
-                    into your main module:
-                </p>
-
-                <tui-doc-code
-                    filename="app.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="app.component.ts"
-                    [code]="exampleComponent"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="app.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/components/theme-switcher/examples/1/index.html b/projects/demo/src/modules/components/theme-switcher/examples/1/index.html
deleted file mode 100644
index 0589c6069c02..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/examples/1/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<p>
-    Samples of
-    <code>LESS</code>
-    and
-    <code>TypeScript</code>
-    are in
-    <code>elderly</code>
-    component.
-</p>
-<elderly *ngIf="enabled" />
-<label tuiLabel>
-    <input
-        tuiSwitch
-        type="checkbox"
-        [showIcons]="false"
-        [(ngModel)]="enabled"
-    />
-    Senior Citizen mode
-</label>
diff --git a/projects/demo/src/modules/components/theme-switcher/examples/1/index.ts b/projects/demo/src/modules/components/theme-switcher/examples/1/index.ts
deleted file mode 100644
index db4d71e335ad..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/examples/1/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-theme-switcher-1',
-    templateUrl: './index.html',
-    encapsulation,
-    changeDetection,
-})
-export class TuiThemeSwitcherExample1 {
-    protected enabled = false;
-}
diff --git a/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.component.ts b/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.component.ts
deleted file mode 100644
index e4cf96e2e3db..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {AbstractTuiThemeSwitcher} from '@taiga-ui/cdk';
-
-@Component({
-    selector: 'elderly',
-    template: '',
-    styleUrls: ['./elderly.style.less'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection,
-})
-export class ElderlyComponent extends AbstractTuiThemeSwitcher {}
diff --git a/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.style.less b/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.style.less
deleted file mode 100644
index bba67b3b4a7a..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/examples/elderly/elderly.style.less
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-    // Primary
-    --tui-primary-text: #fff;
-    --tui-primary: #299d37;
-    --tui-primary-hover: #2c7a35;
-    --tui-primary-active: #2c7a35;
-
-    // Link
-    --tui-link: #f59726;
-    --tui-link-hover: #fab00b;
-
-    // Selection
-    --tui-selection: #f3fadc;
-}
diff --git a/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts b/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
deleted file mode 100644
index b420e436c8a5..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-theme-switcher',
-    templateUrl: './theme-switcher.template.html',
-    styleUrls: ['./theme-switcher.style.less'],
-    changeDetection,
-})
-export class ExampleTuiThemeSwitcherComponent {
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/elderly/elderly.component.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/elderly/elderly.style.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/components/theme-switcher/theme-switcher.module.ts b/projects/demo/src/modules/components/theme-switcher/theme-switcher.module.ts
deleted file mode 100644
index 8089b0fd2673..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/theme-switcher.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiNotificationModule} from '@taiga-ui/core';
-import {TuiLabelDirective} from '@taiga-ui/experimental';
-import {TuiSwitchComponent} from '@taiga-ui/kit';
-
-import {TuiThemeSwitcherExample1} from './examples/1';
-import {ElderlyComponent} from './examples/elderly/elderly.component';
-import {ExampleTuiThemeSwitcherComponent} from './theme-switcher.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiSwitchComponent,
-        TuiNotificationModule,
-        TuiAddonDocModule,
-        TuiLabelDirective,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiThemeSwitcherComponent)),
-    ],
-    declarations: [
-        ExampleTuiThemeSwitcherComponent,
-        TuiThemeSwitcherExample1,
-        ElderlyComponent,
-    ],
-    exports: [ExampleTuiThemeSwitcherComponent],
-})
-export class ExampleTuiThemeSwitcherModule {}
diff --git a/projects/demo/src/modules/components/theme-switcher/theme-switcher.style.less b/projects/demo/src/modules/components/theme-switcher/theme-switcher.style.less
deleted file mode 100644
index a0ff2af267ec..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/theme-switcher.style.less
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-.tooltip {
-    position: relative;
-
-    &:hover .bubble {
-        opacity: 1;
-    }
-}
-
-.bubble {
-    .transition(opacity);
-    position: absolute;
-    left: 3.125rem;
-    bottom: 1.875rem;
-    width: 15.625rem;
-    background: var(--tui-text-01);
-    color: var(--tui-base-01);
-    border-radius: 0.25rem;
-    padding: 0.625rem;
-    opacity: 0;
-
-    &:after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        bottom: -15px;
-        border-top: 15px solid var(--tui-text-01);
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-        transform: translate(-10px, 0);
-    }
-}
diff --git a/projects/demo/src/modules/components/theme-switcher/theme-switcher.template.html b/projects/demo/src/modules/components/theme-switcher/theme-switcher.template.html
deleted file mode 100644
index 683d4566ef78..000000000000
--- a/projects/demo/src/modules/components/theme-switcher/theme-switcher.template.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<tui-doc-page
-    header="ThemeSwitcher"
-    package="CDK"
-    path="cdk/abstract/theme-switcher.ts"
->
-    <ng-template pageTab>
-        <p>
-            <code>AbstractTuiThemeSwitcher</code>
-            is an abstract class to be used for dynamic theme switching. In the sample below you can see a component
-            that extends
-            <code>AbstractTuiThemeSwitcher</code>
-            and reassigns some CSS variables.
-        </p>
-
-        <tui-notification class="tui-space_bottom-4">
-            Use
-            <code>*ngIf</code>
-            to switch theme on the fly
-        </tui-notification>
-
-        <tui-notification status="warning">
-            Component must have
-            <code>encapsulation: ViewEncapsulation.None</code>
-        </tui-notification>
-
-        <tui-doc-example
-            id="green"
-            heading="Green theme"
-            [content]="example1"
-        >
-            <tui-theme-switcher-1 />
-        </tui-doc-example>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/components/tooltip/examples/2/index.html b/projects/demo/src/modules/components/tooltip/examples/2/index.html
index 0ab06b908bfd..7e4866c7d473 100644
--- a/projects/demo/src/modules/components/tooltip/examples/2/index.html
+++ b/projects/demo/src/modules/components/tooltip/examples/2/index.html
@@ -2,7 +2,6 @@
     Custom host can be set with
     <a
         tuiLink
-        tuiMode="onDark"
         [routerLink]="['/tui-hint']"
     >
         <code>tuiHint</code>
@@ -12,7 +11,7 @@
 <tui-avatar
     size="l"
     tabindex="0"
-    tuiHintAppearance="onDark"
+    tuiHintAppearance="dark"
     tuiHintDirection="right"
     [style.background]="'❤' | tuiAutoColor"
     [tuiHint]="tooltip"
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.module.ts b/projects/demo/src/modules/components/tooltip/tooltip.module.ts
index bc62468139ab..71c4e6b0537c 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.module.ts
+++ b/projects/demo/src/modules/components/tooltip/tooltip.module.ts
@@ -9,7 +9,6 @@ import {
     TuiHintModule,
     TuiLinkDirective,
     TuiLoaderModule,
-    TuiModeModule,
     TuiTextfieldControllerModule,
     TuiTooltipModule,
 } from '@taiga-ui/core';
@@ -31,7 +30,6 @@ import {ExampleTuiTooltipComponent} from './tooltip.component';
         TuiLoaderModule,
         TuiInputModule,
         PolymorpheusModule,
-        TuiModeModule,
         TuiAddonDocModule,
         CommonModule,
         FormsModule,
diff --git a/projects/demo/src/modules/customization/variables/index.html b/projects/demo/src/modules/customization/variables/index.html
index fc21f8bbc4d7..b39fbab20b07 100644
--- a/projects/demo/src/modules/customization/variables/index.html
+++ b/projects/demo/src/modules/customization/variables/index.html
@@ -22,24 +22,6 @@
         </li>
     </ul>
 
-    <p>
-        An easy way to dynamically override variables is to use a
-        <a
-            routerLink="/components/theme-switcher"
-            tuiLink
-        >
-            <code>ThemeSwitcher</code>
-        </a>
-        . This is how
-        <a
-            routerLink="/components/theme-night"
-            tuiLink
-        >
-            <code>ThemeNight</code>
-        </a>
-        does it.
-    </p>
-
     <tui-doc-example
         id="override"
         heading="Override example"
diff --git a/projects/demo/src/modules/customization/wrapper/index.html b/projects/demo/src/modules/customization/wrapper/index.html
index 523c6be3407d..4b802a70d7a8 100644
--- a/projects/demo/src/modules/customization/wrapper/index.html
+++ b/projects/demo/src/modules/customization/wrapper/index.html
@@ -23,19 +23,6 @@
             </tui-doc-copy>
         </li>
     </ul>
-    <p>
-        Use
-        <code>[data-mode='onDark']</code>
-        /
-        <code>[data-mode='onLight']</code>
-        selectors to account for
-        <a
-            tuiLink
-            [routerLink]="modeDocPage"
-        >
-            Mode
-        </a>
-    </p>
 
     <tui-doc-example
         id="material"
diff --git a/projects/demo/src/modules/customization/wrapper/index.ts b/projects/demo/src/modules/customization/wrapper/index.ts
index 97767772688a..683e948028ca 100644
--- a/projects/demo/src/modules/customization/wrapper/index.ts
+++ b/projects/demo/src/modules/customization/wrapper/index.ts
@@ -3,7 +3,6 @@ import {NgForOf} from '@angular/common';
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {DemoRoute} from '@demo/routes';
 import {
     TuiDocCopyModule,
     type TuiDocExample,
@@ -31,8 +30,6 @@ import {TuiWrapperExample1} from './examples/1';
     changeDetection,
 })
 export default class PageComponent {
-    protected modeDocPage = `/${DemoRoute.Mode}`;
-
     protected readonly example1: TuiDocExample = {
         HTML: import('./examples/1/index.html?raw'),
         LESS: import('./examples/1/index.less?raw'),
diff --git a/projects/demo/src/modules/directives/hint-manual/examples/1/index.html b/projects/demo/src/modules/directives/hint-manual/examples/1/index.html
index 21c7671c7723..34a159b81cf9 100644
--- a/projects/demo/src/modules/directives/hint-manual/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint-manual/examples/1/index.html
@@ -9,14 +9,14 @@
 </button>
 
 <ng-template #template>
-    <div tuiMode="onDark">
-        Use
-        <a
-            routerLink="hint"
-            tuiLink
-            class="link"
-        >
-            Hint
-        </a>
-    </div>
+    Use
+    <a
+        appearance="icon"
+        routerLink="hint"
+        tuiLink
+        tuiTheme="dark"
+        class="link"
+    >
+        Hint
+    </a>
 </ng-template>
diff --git a/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts b/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
index 21b17ab76aa3..649380665fbb 100644
--- a/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
+++ b/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
@@ -2,12 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiHintModule,
-    TuiLinkDirective,
-    TuiModeModule,
-} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiHintModule, TuiLinkDirective} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
@@ -19,7 +14,6 @@ import {ExampleTuiHintManualComponent} from './hint-manual.component';
         TuiButtonDirective,
         TuiHintModule,
         TuiLinkDirective,
-        TuiModeModule,
         PolymorpheusModule,
         CommonModule,
         InheritedDocumentationModule,
diff --git a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
index 44443d3e9055..be3ff2fb0fe6 100644
--- a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
+++ b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiHintModule, TuiLinkDirective, TuiModeModule} from '@taiga-ui/core';
+import {TuiHintModule, TuiLinkDirective} from '@taiga-ui/core';
 import {TuiIslandModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -15,7 +15,6 @@ import {ExampleTuiHintPointerComponent} from './hint-pointer.component';
         TuiHintModule,
         TuiIslandModule,
         TuiLinkDirective,
-        TuiModeModule,
         PolymorpheusModule,
         CommonModule,
         InheritedDocumentationModule,
diff --git a/projects/demo/src/modules/directives/hint/examples/1/index.html b/projects/demo/src/modules/directives/hint/examples/1/index.html
index ae79f921973f..376365fb93b5 100644
--- a/projects/demo/src/modules/directives/hint/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint/examples/1/index.html
@@ -1,6 +1,6 @@
 <tui-avatar
     size="l"
-    tuiHintAppearance="onDark"
+    tuiHintAppearance="dark"
     tuiHintDirection="right"
     [style.background]="'❤' | tuiAutoColor"
     [tuiHint]="tooltip"
diff --git a/projects/demo/src/modules/directives/media/examples/2/index.html b/projects/demo/src/modules/directives/media/examples/2/index.html
index ddd4ffb5bcb6..51fff02b4277 100644
--- a/projects/demo/src/modules/directives/media/examples/2/index.html
+++ b/projects/demo/src/modules/directives/media/examples/2/index.html
@@ -13,15 +13,13 @@
             type="video/mp4"
         />
     </video>
-    <div
-        tuiMode="onDark"
-        class="controls"
-    >
+    <div class="controls">
         <button
-            appearance="flat"
+            appearance="glass"
             size="s"
             title="Play/Pause"
             tuiIconButton
+            tuiTheme="dark"
             type="button"
             [iconLeft]="icon"
             [style.border-radius.%]="100"
diff --git a/projects/demo/src/modules/directives/media/media.module.ts b/projects/demo/src/modules/directives/media/media.module.ts
index 96f64d5ed2e6..ba98a6379607 100644
--- a/projects/demo/src/modules/directives/media/media.module.ts
+++ b/projects/demo/src/modules/directives/media/media.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHighDpiDirective, TuiMediaDirective} from '@taiga-ui/cdk';
-import {TuiButtonDirective, TuiLinkDirective, TuiModeModule} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core';
 import {TuiSliderModule} from '@taiga-ui/kit';
 
 import {TuiMediaExample1} from './examples/1';
@@ -21,7 +21,6 @@ import {ExampleTuiMediaComponent} from './media.component';
         TuiLinkDirective,
         TuiButtonDirective,
         TuiSliderModule,
-        TuiModeModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiMediaComponent)),
     ],
diff --git a/projects/demo/src/modules/directives/mode/examples/import/import-module.md b/projects/demo/src/modules/directives/mode/examples/import/import-module.md
deleted file mode 100644
index 04acf61e1187..000000000000
--- a/projects/demo/src/modules/directives/mode/examples/import/import-module.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {TuiModeModule} from '@taiga-ui/core';
-
-// ...
-
-@NgModule({
-  imports: [
-    // ...
-    TuiModeModule,
-  ],
-  // ...
-})
-export class MyModule {}
-```
diff --git a/projects/demo/src/modules/directives/mode/examples/import/insert-template.md b/projects/demo/src/modules/directives/mode/examples/import/insert-template.md
deleted file mode 100644
index cc8b87091585..000000000000
--- a/projects/demo/src/modules/directives/mode/examples/import/insert-template.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<div tuiMode="onDark">...</div>
-```
diff --git a/projects/demo/src/modules/directives/mode/mode.component.ts b/projects/demo/src/modules/directives/mode/mode.component.ts
deleted file mode 100644
index b6623f085b59..000000000000
--- a/projects/demo/src/modules/directives/mode/mode.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-mode',
-    templateUrl: './mode.template.html',
-    changeDetection,
-})
-export class ExampleTuiModeComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/mode/mode.module.ts b/projects/demo/src/modules/directives/mode/mode.module.ts
deleted file mode 100644
index d88c43f41af0..000000000000
--- a/projects/demo/src/modules/directives/mode/mode.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiModeModule} from '@taiga-ui/core';
-import {TuiInputModule, TuiInputNumberModule, TuiSwitchComponent} from '@taiga-ui/kit';
-
-import {TuiModeExample1} from './examples/1';
-import {ExampleTuiModeComponent} from './mode.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiModeModule,
-        TuiInputModule,
-        TuiSwitchComponent,
-        TuiInputNumberModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiModeComponent)),
-    ],
-    declarations: [ExampleTuiModeComponent, TuiModeExample1],
-    exports: [ExampleTuiModeComponent],
-})
-export class ExampleTuiModeModule {}
diff --git a/projects/demo/src/modules/directives/mode/mode.template.html b/projects/demo/src/modules/directives/mode/mode.template.html
deleted file mode 100644
index 022ddf6c182e..000000000000
--- a/projects/demo/src/modules/directives/mode/mode.template.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<tui-doc-page
-    header="Mode"
-    package="CORE"
-    type="directives"
->
-    <ng-template pageTab>
-        <p>
-            <code>tuiMode</code>
-            allows to set style for a scope of interface.
-        </p>
-
-        <p>There are three modes by default:</p>
-
-        <ul class="tui-list">
-            <li class="tui-list__item">
-                <b>Normal</b>
-            </li>
-            <li class="tui-list__item">
-                <b>tuiMode="onDark"</b>
-                - transparent light for dark background
-            </li>
-            <li class="tui-list__item">
-                <b>tuiMode="onLight"</b>
-                - transparent dark for light background
-            </li>
-        </ul>
-
-        <p>
-            If you need something more, then you can either redefine various css variables or define appearance in css.
-        </p>
-
-        <tui-doc-example
-            id="base"
-            heading="Basic"
-            [content]="example1"
-        >
-            <tui-mode-example-1 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiModeModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/directives/mode/examples/1/index.html b/projects/demo/src/modules/directives/theme/examples/1/index.html
similarity index 93%
rename from projects/demo/src/modules/directives/mode/examples/1/index.html
rename to projects/demo/src/modules/directives/theme/examples/1/index.html
index 32ed0d6d5f1c..4194c2d83749 100644
--- a/projects/demo/src/modules/directives/mode/examples/1/index.html
+++ b/projects/demo/src/modules/directives/theme/examples/1/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiMode="onDark"
+    tuiTheme="dark"
     class="dark"
 >
     <p>
@@ -16,8 +16,8 @@
         <tui-input-number [(ngModel)]="money">Sum</tui-input-number>
     </p>
     <div
+        tuiTheme="light"
         class="light"
-        [tuiMode]="null"
     >
         <p>
             <tui-input [(ngModel)]="text">Text</tui-input>
diff --git a/projects/demo/src/modules/directives/mode/examples/1/index.less b/projects/demo/src/modules/directives/theme/examples/1/index.less
similarity index 88%
rename from projects/demo/src/modules/directives/mode/examples/1/index.less
rename to projects/demo/src/modules/directives/theme/examples/1/index.less
index 0306c403967b..341e9d3d7e87 100644
--- a/projects/demo/src/modules/directives/mode/examples/1/index.less
+++ b/projects/demo/src/modules/directives/theme/examples/1/index.less
@@ -9,4 +9,5 @@
     padding: 0.625rem 1.25rem;
     background: var(--tui-base-01);
     border-radius: 0.25rem;
+    color: var(--tui-text-01);
 }
diff --git a/projects/demo/src/modules/directives/mode/examples/1/index.ts b/projects/demo/src/modules/directives/theme/examples/1/index.ts
similarity index 56%
rename from projects/demo/src/modules/directives/mode/examples/1/index.ts
rename to projects/demo/src/modules/directives/theme/examples/1/index.ts
index 76afb665c798..e88c3eae8e2c 100644
--- a/projects/demo/src/modules/directives/mode/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/theme/examples/1/index.ts
@@ -1,18 +1,19 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiInputModule, TuiInputNumberModule, TuiSwitchComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-mode-example-1',
+    standalone: true,
+    imports: [TuiInputModule, FormsModule, TuiSwitchComponent, TuiInputNumberModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiModeExample1 {
+export default class ExampleComponent {
     protected toggle = false;
-
     protected text = '';
-
     protected money = 237;
 }
diff --git a/projects/demo/src/modules/directives/theme/index.html b/projects/demo/src/modules/directives/theme/index.html
new file mode 100644
index 000000000000..4194383d073d
--- /dev/null
+++ b/projects/demo/src/modules/directives/theme/index.html
@@ -0,0 +1,20 @@
+<tui-doc-page
+    header="Theme"
+    type="directives"
+>
+    <ng-template pageTab>
+        <code>tuiTheme</code>
+        allows to set style for a DOM branch. By default
+        <code>dark</code>
+        and
+        <code>light</code>
+        are included. Importing is not required.
+
+        <tui-doc-example
+            id="themes"
+            heading="Themes"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/directives/theme/index.ts b/projects/demo/src/modules/directives/theme/index.ts
new file mode 100644
index 000000000000..2555e135a838
--- /dev/null
+++ b/projects/demo/src/modules/directives/theme/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemoModule],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/11/index.html b/projects/demo/src/modules/experimental/card-large/examples/11/index.html
index 132a80af4fcd..f505339cc502 100644
--- a/projects/demo/src/modules/experimental/card-large/examples/11/index.html
+++ b/projects/demo/src/modules/experimental/card-large/examples/11/index.html
@@ -2,7 +2,7 @@
     tuiCardLarge
     tuiHeader
     tuiSurface="elevated"
-    tuiTheme="night"
+    tuiTheme="dark"
     class="image"
 >
     <h1 tuiTitle>
@@ -10,10 +10,7 @@ <h1 tuiTitle>
         <span tuiSubtitle>Subtitle</span>
     </h1>
 
-    <aside
-        tuiAccessories
-        tuiTheme="light"
-    >
+    <aside tuiAccessories>
         <button
             appearance="glass"
             tuiButtonClose
diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.html b/projects/demo/src/modules/experimental/cell/examples/6/index.html
index a74b52202ba3..47ab5eddb0c4 100644
--- a/projects/demo/src/modules/experimental/cell/examples/6/index.html
+++ b/projects/demo/src/modules/experimental/cell/examples/6/index.html
@@ -41,7 +41,7 @@
     <div
         tuiCellActions
         tuiGroup
-        tuiTheme="night"
+        tuiTheme="dark"
         [collapsed]="true"
     >
         <button
diff --git a/projects/demo/src/modules/experimental/surface/examples/7/index.html b/projects/demo/src/modules/experimental/surface/examples/7/index.html
index f660d54e65d3..8052ce753d71 100644
--- a/projects/demo/src/modules/experimental/surface/examples/7/index.html
+++ b/projects/demo/src/modules/experimental/surface/examples/7/index.html
@@ -35,7 +35,7 @@ <h3 class="heading">Gas</h3>
     class="restaurant"
 >
     <header
-        tuiMode="onDark"
+        tuiTheme="dark"
         class="header"
     >
         <label tuiLabel="RESTAURANT">Eat all you can</label>
@@ -70,8 +70,8 @@ <h3 class="heading">Gas</h3>
 </div>
 
 <div
-    tuiMode="onDark"
     tuiSurface
+    tuiTheme="dark"
     class="blur"
 >
     <tui-avatar src="/assets/images/avatar.jpg" />
@@ -136,8 +136,8 @@ <h3 class="heading">
 </div>
 
 <div
-    tuiMode="onDark"
     tuiSurface
+    tuiTheme="dark"
     class="mask"
 >
     <h3 class="heading">
@@ -155,15 +155,17 @@ <h3 class="heading">
     <span class="sum">{{ 23742 | tuiAmount: 'USD' : 'left' | async }}</span>
     <footer class="footer">
         <tui-thumbnail-card
-            cardNumber="1234"
             paymentSystem="mastercard"
             [style.background]="'#337'"
-        />
+        >
+            1234
+        </tui-thumbnail-card>
         <tui-thumbnail-card
-            cardNumber="5678"
             paymentSystem="visa"
             [style.background]="'#e33'"
-        />
+        >
+            5678
+        </tui-thumbnail-card>
         <button
             appearance="secondary"
             iconLeft="tuiIconPlus"
diff --git a/projects/demo/src/modules/experimental/surface/examples/7/index.less b/projects/demo/src/modules/experimental/surface/examples/7/index.less
index 9c826f88293b..597c515f7780 100644
--- a/projects/demo/src/modules/experimental/surface/examples/7/index.less
+++ b/projects/demo/src/modules/experimental/surface/examples/7/index.less
@@ -61,6 +61,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
+    padding: 1rem;
     font: var(--tui-font-heading-6);
     color: var(--tui-text-01-night);
 
@@ -75,6 +76,8 @@
     grid-row: span 3;
     display: flex;
     flex-direction: column;
+    padding: 1rem;
+    border-radius: 1.5rem;
 
     .heading {
         margin: -0.25rem 0 0;
diff --git a/projects/demo/src/modules/experimental/surface/surface.module.ts b/projects/demo/src/modules/experimental/surface/surface.module.ts
index e460735c0b8d..e975e2fe7288 100644
--- a/projects/demo/src/modules/experimental/surface/surface.module.ts
+++ b/projects/demo/src/modules/experimental/surface/surface.module.ts
@@ -10,7 +10,6 @@ import {
     TuiButtonDirective,
     TuiLabelModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiNotificationModule,
     TuiScrollbarComponent,
 } from '@taiga-ui/core';
@@ -40,7 +39,6 @@ import {ExampleTuiSurfaceComponent} from './surface.component';
         TuiLinkDirective,
         TuiAvatarComponent,
         TuiLabelModule,
-        TuiModeModule,
         TuiAmountPipe,
         TuiThumbnailCardComponent,
         tuiGetDocModules(ExampleTuiSurfaceComponent),
diff --git a/projects/demo/src/modules/experimental/tooltip/tooltip.module.ts b/projects/demo/src/modules/experimental/tooltip/tooltip.module.ts
index 437874b167ea..4a7a62ca249b 100644
--- a/projects/demo/src/modules/experimental/tooltip/tooltip.module.ts
+++ b/projects/demo/src/modules/experimental/tooltip/tooltip.module.ts
@@ -8,7 +8,6 @@ import {
     TuiIconComponent,
     TuiLinkDirective,
     TuiLoaderModule,
-    TuiModeModule,
     TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -28,7 +27,6 @@ import {ExampleTuiTooltipComponent} from './tooltip.component';
         TuiLoaderModule,
         TuiInputModule,
         PolymorpheusModule,
-        TuiModeModule,
         CommonModule,
         FormsModule,
         TuiAppearanceDirective,
diff --git a/projects/demo/src/modules/icons/icons.component.ts b/projects/demo/src/modules/icons/icons.component.ts
index 932083f04f2d..c085537fca41 100644
--- a/projects/demo/src/modules/icons/icons.component.ts
+++ b/projects/demo/src/modules/icons/icons.component.ts
@@ -1,10 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {assets} from '@demo/utils';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {TuiModeDirective} from '@taiga-ui/core';
-import type {Observable} from 'rxjs';
-import {map, startWith} from 'rxjs';
 
 import {TUI_DEMO_ICONS} from './icons.tokens';
 
@@ -15,7 +11,6 @@ import {TUI_DEMO_ICONS} from './icons.tokens';
     changeDetection,
 })
 export class IconsComponent {
-    private readonly mode = inject(TuiModeDirective);
     protected readonly icons = inject(TUI_DEMO_ICONS);
     protected readonly keys = Object.keys(this.icons);
     protected readonly exampleModule = import('./import/import-module.md?raw');
@@ -38,11 +33,6 @@ export class IconsComponent {
 
     protected icon = this.iconVariants[0];
 
-    protected readonly mode$: Observable<TuiBrightness> = this.mode.change$.pipe(
-        startWith(null),
-        map(() => this.mode.mode || 'onLight'),
-    );
-
     protected onIntersection(entries: IntersectionObserverEntry[]): boolean {
         return entries[entries.length - 1]?.isIntersecting ?? false;
     }
diff --git a/projects/demo/src/modules/themes/bootstrap/bootstrap.component.ts b/projects/demo/src/modules/themes/bootstrap/bootstrap.component.ts
deleted file mode 100644
index 068c930fa207..000000000000
--- a/projects/demo/src/modules/themes/bootstrap/bootstrap.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {AbstractTuiThemeSwitcher} from '@taiga-ui/cdk';
-
-@Component({
-    selector: 'bootstrap',
-    template: '',
-    styleUrls: ['./bootstrap.style.less'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection,
-})
-export class BootstrapComponent extends AbstractTuiThemeSwitcher {}
diff --git a/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less b/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less
deleted file mode 100644
index 6047797a9cab..000000000000
--- a/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-.theme-wrapper {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-
-    --tui-primary-text: #fff;
-    --tui-primary: #007bff;
-    --tui-primary-hover: #0069d9;
-    --tui-primary-active: #0062cc;
-    --tui-radius-m: 0.25rem;
-    --tui-text-03: #6c757d;
-    --tui-text-02: #6c757d;
-
-    .demo-placeholder {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    }
-
-    [tui-wrapper][data-appearance='textfield'] {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        background: transparent;
-        box-shadow: none;
-
-        &:after {
-            .transition(all);
-            color: #ced4da;
-        }
-
-        .wrapper-focus({
-            &:after {
-                color: #80bdff;
-                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-            }
-        });
-    }
-
-    [tui-wrapper][data-appearance='textfield'][data-mode='onDark'] {
-        &:after {
-            color: #959aa0;
-        }
-
-        .wrapper-hover({background: transparent});
-
-        .wrapper-focus({
-            &:after {
-                color: #db6574;
-                box-shadow: none;
-            }
-        });
-    }
-
-    [tui-wrapper][data-appearance='textfield'][data-mode='onLight'] {
-        &:after {
-            color: #959aa0;
-        }
-
-        .wrapper-hover({
-            background: transparent;
-        });
-
-        .wrapper-focus({
-            &:after {
-                color: #80bdff;
-                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-            }
-        });
-    }
-
-    // TODO: Cover this by CSS vars
-    tui-button {
-        .transition(box-shadow);
-        font-size: 1rem;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-
-        &._focused {
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-        }
-    }
-
-    tui-tabs {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        box-shadow: none;
-        color: #007bff;
-
-        [tuiTab] {
-            margin: 0;
-            padding: 0 0.75rem;
-            height: 2.5rem;
-            border-bottom: 1px solid #dee2e6;
-
-            &:hover {
-                color: #0069d9;
-            }
-
-            &._active {
-                border: 1px solid #dee2e6;
-                border-bottom: 0;
-                border-radius: 0.25rem 0.25rem 0 0;
-                color: #495057;
-            }
-        }
-    }
-}
diff --git a/projects/demo/src/modules/themes/material/material.component.ts b/projects/demo/src/modules/themes/material/material.component.ts
deleted file mode 100644
index c93752692454..000000000000
--- a/projects/demo/src/modules/themes/material/material.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {AbstractTuiThemeSwitcher} from '@taiga-ui/cdk';
-
-@Component({
-    selector: 'material',
-    template: '',
-    styleUrls: ['./material.style.less'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection,
-})
-export class MaterialComponent extends AbstractTuiThemeSwitcher {}
diff --git a/projects/demo/src/modules/themes/material/material.style.less b/projects/demo/src/modules/themes/material/material.style.less
deleted file mode 100644
index 3c0c769c62f8..000000000000
--- a/projects/demo/src/modules/themes/material/material.style.less
+++ /dev/null
@@ -1,104 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-.theme-wrapper {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-
-    --tui-primary-text: #fff;
-    --tui-primary: #6200ee;
-    --tui-primary-hover: var(--tui-primary);
-    --tui-primary-active: #a56bf5;
-    --tui-radius-m: 0.25rem;
-    --tui-text-03: #6c757d;
-    --tui-text-02: rgba(0, 0, 0, 0.6);
-
-    .demo-placeholder {
-        font-family: 'RobotoRegular', Helvetica, Arial, sans-serif;
-    }
-
-    [tui-wrapper][data-appearance='textfield'] {
-        font-family: 'RobotoRegular', Helvetica, Arial, sans-serif;
-        background: #f5f5f5;
-        border-width: 0;
-        color: rgba(0, 0, 0, 0.87);
-        border-radius: 0.25rem 0.25rem 0 0;
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.42);
-
-        &:after {
-            .transition(transform, 0.2s);
-            top: 100%;
-            height: 0.125rem;
-            margin-top: -0.125rem;
-            border-radius: 0;
-            border-width: 0;
-            background-color: var(--tui-primary);
-            transform-origin: bottom;
-            transform: scale(0);
-        }
-
-        .wrapper-hover({
-            background: #ececec;
-            box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
-        });
-
-        .wrapper-focus({
-            background: #dcdcdc;
-
-            &:after {
-                transform: none;
-                color: var(--tui-primary);
-            }
-
-            label {
-                color: var(--tui-primary) !important;
-            }
-        });
-    }
-
-    // TODO: Cover this by CSS vars
-    tui-button {
-        .transition(box-shadow);
-        text-transform: uppercase;
-        font-weight: bold;
-        box-shadow:
-            0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.2),
-            0 0.125rem 0.125rem rgba(0, 0, 0, 0.14),
-            0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.12);
-
-        &._pressed {
-            box-shadow:
-                0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
-                0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
-                0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
-        }
-    }
-
-    tui-tabs {
-        color: rgba(0, 0, 0, 0.6);
-        box-shadow: none;
-    }
-
-    [tuiTab] {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        font-weight: 500 !important;
-        text-transform: uppercase;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        margin-right: 0;
-
-        &:hover {
-            background: rgba(98, 0, 238, 0.04);
-            color: rgba(0, 0, 0, 0.6);
-            box-shadow: none;
-        }
-
-        &:active {
-            .transition(background);
-            background: rgba(98, 0, 238, 0.12);
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        &._active {
-            color: var(--tui-primary);
-        }
-    }
-}
diff --git a/projects/demo/src/modules/themes/themes.module.ts b/projects/demo/src/modules/themes/themes.module.ts
deleted file mode 100644
index 92b6711ddd94..000000000000
--- a/projects/demo/src/modules/themes/themes.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {BootstrapComponent} from './bootstrap/bootstrap.component';
-import {MaterialComponent} from './material/material.component';
-
-@NgModule({
-    declarations: [MaterialComponent, BootstrapComponent],
-    exports: [MaterialComponent, BootstrapComponent],
-})
-export class ThemesModule {}
diff --git a/projects/experimental/components/navigation/aside.component.ts b/projects/experimental/components/navigation/aside.component.ts
index de485e6962dd..e83daf9a2326 100644
--- a/projects/experimental/components/navigation/aside.component.ts
+++ b/projects/experimental/components/navigation/aside.component.ts
@@ -30,7 +30,7 @@ import {tuiButtonOptionsProvider, tuiDropdownOptionsProvider} from '@taiga-ui/co
     ],
     host: {
         tuiNavigationAside: '',
-        tuiTheme: 'night',
+        tuiTheme: 'dark',
         '[class._expanded]': 'tuiNavigationAside',
     },
 })
diff --git a/projects/experimental/components/navigation/header.component.ts b/projects/experimental/components/navigation/header.component.ts
index e261066b4dfb..788941a7b1a6 100644
--- a/projects/experimental/components/navigation/header.component.ts
+++ b/projects/experimental/components/navigation/header.component.ts
@@ -20,7 +20,7 @@ import {
         tuiDropdownOptionsProvider({appearance: 'dropdown-navigation'}),
     ],
     host: {
-        tuiTheme: 'night',
+        tuiTheme: 'dark',
     },
 })
 export class TuiHeaderComponent {}
diff --git a/projects/experimental/components/tooltip/tooltip.component.ts b/projects/experimental/components/tooltip/tooltip.component.ts
index a210f8b45419..013c8489c35d 100644
--- a/projects/experimental/components/tooltip/tooltip.component.ts
+++ b/projects/experimental/components/tooltip/tooltip.component.ts
@@ -7,16 +7,12 @@ import {
     ViewChild,
 } from '@angular/core';
 import {TUI_PLATFORM, TuiDestroyService, tuiIsString} from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
-    TUI_MODE,
     TuiAppearanceDirective,
     TuiHintHoverDirective,
     TuiHintOptionsDirective,
 } from '@taiga-ui/core';
 import {TuiTextfieldComponent} from '@taiga-ui/experimental/components/textfield';
-import {takeUntil} from 'rxjs';
 
 import {TUI_TOOLTIP_OPTIONS} from './tooltip.options';
 
@@ -27,13 +23,12 @@ import {TUI_TOOLTIP_OPTIONS} from './tooltip.options';
     templateUrl: './tooltip.template.html',
     styleUrls: ['./tooltip.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [TuiDestroyService, MODE_PROVIDER],
+    providers: [TuiDestroyService],
     inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],
 })
 export class TuiTooltipComponent<C = any> extends TuiHintOptionsDirective {
     private readonly textfield = inject(TuiTextfieldComponent, {optional: true});
     private readonly platform = inject(TUI_PLATFORM);
-    private mode: TuiBrightness | null = null;
 
     @Input()
     public describeId = '';
@@ -47,22 +42,12 @@ export class TuiTooltipComponent<C = any> extends TuiHintOptionsDirective {
     protected readonly tooltipOptions = inject(TUI_TOOLTIP_OPTIONS);
     protected readonly iconAppearance = inject(TuiAppearanceDirective, {optional: true});
 
-    constructor() {
-        super();
-
-        inject(TUI_MODE)
-            .pipe(takeUntil(inject(TuiDestroyService, {self: true})))
-            .subscribe(mode => {
-                this.mode = mode;
-            });
-    }
-
     protected get id(): string {
         return this.describeId || this.textfield?.id || '';
     }
 
     protected get computedAppearance(): string {
-        return this.appearance || this.mode || '';
+        return this.appearance;
     }
 
     protected get tooltipIcon(): string {
diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.component.ts b/projects/kit/components/accordion/accordion-item/accordion-item.component.ts
index 74463fd4897a..697ca7d3124d 100644
--- a/projects/kit/components/accordion/accordion-item/accordion-item.component.ts
+++ b/projects/kit/components/accordion/accordion-item/accordion-item.component.ts
@@ -18,7 +18,6 @@ import {
     tuiIsNativeFocused,
 } from '@taiga-ui/cdk';
 import type {TuiSizeS} from '@taiga-ui/core';
-import {MODE_PROVIDER, TUI_MODE} from '@taiga-ui/core';
 import {TUI_ARROW_OPTIONS} from '@taiga-ui/kit/components/arrow';
 
 import {TuiAccordionItemContentDirective} from './accordion-item-content.directive';
@@ -29,10 +28,7 @@ import {TuiAccordionItemEagerContentDirective} from './accordion-item-eager-cont
     templateUrl: './accordion-item.template.html',
     styleUrls: ['./accordion-item.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [tuiAsFocusableItemAccessor(TuiAccordionItemComponent), MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
+    providers: [tuiAsFocusableItemAccessor(TuiAccordionItemComponent)],
 })
 export class TuiAccordionItemComponent
     extends AbstractTuiInteractive
@@ -82,7 +78,6 @@ export class TuiAccordionItemComponent
     protected readonly lazyContent?: TuiAccordionItemContentDirective;
 
     protected readonly options = inject(TUI_ARROW_OPTIONS);
-    protected readonly mode$ = inject(TUI_MODE);
 
     public get nativeFocusableElement(): TuiNativeFocusableElement | null {
         return this.disabled || !this.focusableElement
diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.style.less b/projects/kit/components/accordion/accordion-item/accordion-item.style.less
index 709af5b3bd17..d5eb502c1de9 100644
--- a/projects/kit/components/accordion/accordion-item/accordion-item.style.less
+++ b/projects/kit/components/accordion/accordion-item/accordion-item.style.less
@@ -51,22 +51,10 @@
             border-top-width: 0;
         }
 
-        :host[data-mode='onDark'] & {
-            border-color: var(--tui-base-03);
-        }
-
-        :host[data-mode='onLight'] & {
-            border-color: var(--tui-text-01);
-        }
-
         :host._focus-visible & {
             border: 2px solid var(--tui-focus);
         }
     }
-
-    :host:not([data-mode]) & {
-        background: var(--tui-base-01);
-    }
 }
 
 .t-header {
@@ -86,15 +74,6 @@
     text-align: left;
     outline: none;
 
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-01-night);
-        border-color: var(--tui-base-03);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: var(--tui-text-01);
-    }
-
     :host:not([data-borders]) & {
         border-bottom-width: 0;
         box-shadow: none;
@@ -104,14 +83,10 @@
         padding-right: 0.75rem;
     }
 
-    :host[data-mode='onDark'] &_open {
+    :host-context([tuiTheme='dark']) &_open {
         background: var(--tui-clear-inverse);
     }
 
-    :host[data-mode='onLight'] &_open {
-        background: var(--tui-clear);
-    }
-
     :host[data-size='s'] & {
         font: var(--tui-font-text-m);
         min-height: var(--tui-height-m);
@@ -128,17 +103,9 @@
     }
 
     &_hoverable {
-        .t-wrapper:hover:not([data-mode]) > & {
+        .t-wrapper:hover > & {
             background: var(--tui-base-02);
         }
-
-        .t-wrapper:hover[data-mode='onDark'] > & {
-            background: var(--tui-clear-inverse);
-        }
-
-        .t-wrapper:hover[data-mode='onLight'] > & {
-            background: var(--tui-clear);
-        }
     }
 }
 
@@ -159,30 +126,14 @@
     width: 1.5rem;
     height: 1.5rem;
     margin-left: auto;
-    color: var(--tui-base-06);
+    color: var(--tui-text-03);
 
     &_open {
         transform: rotate(180deg);
     }
 
-    :host[data-mode] & {
-        opacity: var(--tui-disabled-opacity);
-    }
-
-    :host:hover[data-mode] & {
-        opacity: 0.8;
-    }
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-01-night);
-    }
-
-    :host[data-mode='onLight'] & {
-        color: var(--tui-text-01);
-    }
-
-    :host:hover:not([data-mode]) & {
-        color: var(--tui-base-07);
+    :host:hover & {
+        color: var(--tui-text-02);
     }
 }
 
diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts b/projects/kit/components/breadcrumbs/breadcrumbs.component.ts
index 700229128681..87293d5b14a4 100644
--- a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts
+++ b/projects/kit/components/breadcrumbs/breadcrumbs.component.ts
@@ -9,7 +9,7 @@ import {
     TemplateRef,
 } from '@angular/core';
 import {EMPTY_QUERY, TuiItemDirective} from '@taiga-ui/cdk';
-import {tuiLinkOptionsProvider, TuiModeDirective} from '@taiga-ui/core';
+import {tuiLinkOptionsProvider} from '@taiga-ui/core';
 
 import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options';
 
@@ -20,7 +20,7 @@ import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [tuiLinkOptionsProvider({appearance: 'icon'})],
 })
-export class TuiBreadcrumbsComponent extends TuiModeDirective {
+export class TuiBreadcrumbsComponent {
     private readonly options = inject(TUI_BREADCRUMBS_OPTIONS);
 
     @Input()
diff --git a/projects/kit/components/filter/filter.module.ts b/projects/kit/components/filter/filter.module.ts
index a212a61f80c5..ba46b7383f33 100644
--- a/projects/kit/components/filter/filter.module.ts
+++ b/projects/kit/components/filter/filter.module.ts
@@ -1,7 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {TuiModeModule} from '@taiga-ui/core';
 import {TuiBadgeDirective} from '@taiga-ui/kit/components/badge';
 import {TuiBlockDirective} from '@taiga-ui/kit/components/block';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -14,7 +13,6 @@ import {TuiFilterComponent} from './filter.component';
         FormsModule,
         PolymorpheusModule,
         TuiBadgeDirective,
-        TuiModeModule,
         TuiBlockDirective,
     ],
     declarations: [TuiFilterComponent],
diff --git a/projects/kit/components/filter/filter.template.html b/projects/kit/components/filter/filter.template.html
index e1b6930ad72b..70bd450abc8d 100644
--- a/projects/kit/components/filter/filter.template.html
+++ b/projects/kit/components/filter/filter.template.html
@@ -10,7 +10,6 @@
     <tui-badge
         *ngIf="badgeHandler(item) as badgeValue"
         appearance="neutral"
-        tuiMode="onLight"
         [size]="badgeSize"
     >
         {{ badgeValue }}
diff --git a/projects/kit/components/input-password/input-password.component.ts b/projects/kit/components/input-password/input-password.component.ts
index edca0da204cd..7b6a3336aeb3 100644
--- a/projects/kit/components/input-password/input-password.component.ts
+++ b/projects/kit/components/input-password/input-password.component.ts
@@ -18,8 +18,6 @@ import {
 } from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
-    TUI_MODE,
     TUI_TEXTFIELD_SIZE,
     TuiHintOptionsDirective,
     TuiPrimitiveTextfieldComponent,
@@ -27,7 +25,7 @@ import {
 import {TUI_PASSWORD_TEXTS} from '@taiga-ui/kit/tokens';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import type {Observable} from 'rxjs';
-import {combineLatest, EMPTY, map, startWith} from 'rxjs';
+import {EMPTY, map, startWith} from 'rxjs';
 
 import {TUI_INPUT_PASSWORD_OPTIONS} from './input-password.options';
 
@@ -39,7 +37,6 @@ import {TUI_INPUT_PASSWORD_OPTIONS} from './input-password.options';
     providers: [
         tuiAsFocusableItemAccessor(TuiInputPasswordComponent),
         tuiAsControl(TuiInputPasswordComponent),
-        MODE_PROVIDER,
     ],
 })
 export class TuiInputPasswordComponent
@@ -50,20 +47,14 @@ export class TuiInputPasswordComponent
     private readonly textfield?: TuiPrimitiveTextfieldComponent;
 
     private readonly textfieldSize = inject(TUI_TEXTFIELD_SIZE);
-    private readonly mode$ = inject(TUI_MODE);
     protected readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});
     protected readonly directive$: Observable<any> = this.hintOptions?.change$ || EMPTY;
 
     protected isPasswordHidden = true;
 
-    protected readonly computedAppearance$: Observable<string> = combineLatest([
-        this.mode$.pipe(map(val => (val === 'onDark' ? 'onDark' : ''))),
-        this.directive$.pipe(
-            startWith(null),
-            map(() => this.hintOptions?.appearance || ''),
-        ),
-    ]).pipe(
-        map(([mode, controller]) => controller || mode),
+    protected readonly computedAppearance$: Observable<string> = this.directive$.pipe(
+        startWith(null),
+        map(() => this.hintOptions?.appearance || ''),
         startWith(''),
     );
 
diff --git a/projects/kit/components/input-tag/input-tag.component.ts b/projects/kit/components/input-tag/input-tag.component.ts
index c981c733d67f..be7b0bf5705d 100644
--- a/projects/kit/components/input-tag/input-tag.component.ts
+++ b/projects/kit/components/input-tag/input-tag.component.ts
@@ -36,24 +36,20 @@ import {
 } from '@taiga-ui/cdk';
 import type {TuiDataListHost, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
     TEXTFIELD_CONTROLLER_PROVIDER,
     TUI_COMMON_ICONS,
-    TUI_MODE,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
     tuiAsDataListHost,
     TuiDataListDirective,
     TuiHintOptionsDirective,
     TuiHostedDropdownComponent,
-    TuiModeDirective,
     TuiScrollbarComponent,
 } from '@taiga-ui/core';
 import type {TuiStringifiableItem} from '@taiga-ui/kit/classes';
 import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
 import type {TuiStatus} from '@taiga-ui/kit/types';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import type {Observable} from 'rxjs';
-import {map, takeUntil, timer} from 'rxjs';
+import {takeUntil, timer} from 'rxjs';
 
 import {TUI_INPUT_TAG_OPTIONS} from './input-tag.options';
 
@@ -80,7 +76,6 @@ const TAG_VERTICAL_SPACE_REM = 0.125;
         tuiAsControl(TuiInputTagComponent),
         tuiAsDataListHost(TuiInputTagComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
-        MODE_PROVIDER,
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
 })
@@ -107,8 +102,6 @@ export class TuiInputTagComponent
     private readonly scrollBar?: ElementRef<HTMLElement>;
 
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
-    private readonly modeDirective = inject(TuiModeDirective, {optional: true});
-    private readonly mode$ = inject(TUI_MODE);
     private readonly options = inject(TUI_INPUT_TAG_OPTIONS);
 
     @Input()
@@ -159,7 +152,7 @@ export class TuiInputTagComponent
     protected readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});
     protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
     protected readonly icons = inject(TUI_COMMON_ICONS);
-    protected status$: Observable<TuiStatus> = this.mode$.pipe(map(() => this.status));
+    protected status: TuiStatus = this.options.tagStatus;
     protected open = false;
 
     @Input('pseudoFocused')
@@ -296,10 +289,6 @@ export class TuiInputTagComponent
         );
     }
 
-    protected get status(): TuiStatus {
-        return this.modeDirective?.mode ? 'default' : this.options.tagStatus;
-    }
-
     protected get canOpen(): boolean {
         return this.interactive && !!this.datalist;
     }
diff --git a/projects/kit/components/input-tag/input-tag.options.ts b/projects/kit/components/input-tag/input-tag.options.ts
index 6fa516939dbd..d6ca0efe5f6e 100644
--- a/projects/kit/components/input-tag/input-tag.options.ts
+++ b/projects/kit/components/input-tag/input-tag.options.ts
@@ -11,7 +11,7 @@ export interface TuiInputTagOptions {
 export const TUI_INPUT_TAG_DEFAULT_OPTIONS: TuiInputTagOptions = {
     separator: ',',
     uniqueTags: true,
-    tagStatus: 'primary',
+    tagStatus: 'default',
 };
 
 /**
diff --git a/projects/kit/components/input-tag/input-tag.style.less b/projects/kit/components/input-tag/input-tag.style.less
index 1c5203eb8d58..ed5299e1a4d8 100644
--- a/projects/kit/components/input-tag/input-tag.style.less
+++ b/projects/kit/components/input-tag/input-tag.style.less
@@ -260,7 +260,7 @@
         opacity: 0;
     }
 
-    [tuiWrapper][data-mode='onDark'] &::placeholder {
+    :host-context([tuiTheme='dark']) &::placeholder {
         color: var(--tui-text-03-night);
     }
 
diff --git a/projects/kit/components/input-tag/input-tag.template.html b/projects/kit/components/input-tag/input-tag.template.html
index f0248984f470..675fbd56ca9c 100644
--- a/projects/kit/components/input-tag/input-tag.template.html
+++ b/projects/kit/components/input-tag/input-tag.template.html
@@ -63,7 +63,7 @@
                                 [removable]="!readOnly && removable"
                                 [separator]="separator"
                                 [size]="controller.size"
-                                [status]="(status$ | async)!"
+                                [status]="status"
                                 [tuiFocusable]="false"
                                 [value]="item.toString()"
                                 (edited)="onTagEdited($event, index)"
diff --git a/projects/kit/components/input-tag/test/input-tag-no-mode.component.spec.ts b/projects/kit/components/input-tag/test/input-tag-no-mode.component.spec.ts
deleted file mode 100644
index be178ad6fabc..000000000000
--- a/projects/kit/components/input-tag/test/input-tag-no-mode.component.spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {Component, ViewChild} from '@angular/core';
-import type {ComponentFixture} from '@angular/core/testing';
-import {TestBed} from '@angular/core/testing';
-import {FormsModule} from '@angular/forms';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {TuiRootModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {
-    TuiInputTagComponent,
-    TuiInputTagModule,
-    tuiInputTagOptionsProvider,
-} from '@taiga-ui/kit';
-
-describe('InputTag [TUI_TAG_STATUS=neutral]', () => {
-    @Component({
-        template: `
-            <tui-root>
-                <tui-input-tag
-                    [ngModel]="tags"
-                    [tuiTextfieldLabelOutside]="labelOutside"
-                    [tuiTextfieldSize]="size"
-                ></tui-input-tag>
-            </tui-root>
-        `,
-        providers: [tuiInputTagOptionsProvider({tagStatus: 'neutral'})],
-    })
-    class TestComponent {
-        @ViewChild(TuiInputTagComponent)
-        public component!: TuiInputTagComponent;
-
-        public tags = ['Tag1', 'Tag2'];
-
-        public labelOutside = true;
-        public size: TuiSizeL | TuiSizeS = 's';
-    }
-
-    let fixture: ComponentFixture<TestComponent>;
-
-    it('correct status for tag when tuiMode emitted null', async () => {
-        await TestBed.configureTestingModule({
-            imports: [
-                FormsModule,
-                TuiRootModule,
-                TuiInputTagModule,
-                TuiTextfieldControllerModule,
-            ],
-            declarations: [TestComponent],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestComponent);
-        fixture.detectChanges();
-
-        expect(
-            fixture.nativeElement
-                .querySelector('[data-status]')
-                ?.getAttribute('data-status'),
-        ).toBe('neutral');
-    });
-});
diff --git a/projects/kit/components/pagination/pagination.component.ts b/projects/kit/components/pagination/pagination.component.ts
index 03d954ae7eba..e3602b0dea85 100644
--- a/projects/kit/components/pagination/pagination.component.ts
+++ b/projects/kit/components/pagination/pagination.component.ts
@@ -22,11 +22,10 @@ import {
     tuiIsNativeFocusedIn,
 } from '@taiga-ui/cdk';
 import type {TuiHorizontalDirection, TuiSizeL, TuiSizeS, TuiSizeXS} from '@taiga-ui/core';
-import {TUI_SPIN_ICONS, TuiModeDirective} from '@taiga-ui/core';
+import {TUI_SPIN_ICONS} from '@taiga-ui/core';
 import {TUI_PAGINATION_TEXTS} from '@taiga-ui/kit/tokens';
 import {tuiHorizontalDirectionToNumber} from '@taiga-ui/kit/utils/math';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {EMPTY, map} from 'rxjs';
 
 const DOTS_LENGTH = 1;
 const ACTIVE_ITEM_LENGTH = 1;
@@ -46,7 +45,6 @@ export class TuiPaginationComponent
     private readonly els: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;
 
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
-    private readonly modeDirective = inject(TuiModeDirective, {optional: true});
 
     @Input()
     public length = 1;
@@ -84,10 +82,6 @@ export class TuiPaginationComponent
     @Output()
     public readonly indexChange = new EventEmitter<number>();
 
-    protected readonly mode$ = this.modeDirective
-        ? this.modeDirective.change$.pipe(map(() => this.modeDirective?.mode || null))
-        : EMPTY;
-
     protected readonly texts$ = inject(TUI_PAGINATION_TEXTS);
     protected readonly icons = inject(TUI_SPIN_ICONS);
 
diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less
index 3d5660d3f1e8..089ea2c12462 100644
--- a/projects/kit/components/progress/progress-bar/progress-bar.component.less
+++ b/projects/kit/components/progress/progress-bar/progress-bar.component.less
@@ -52,10 +52,6 @@
     overflow: hidden;
     border-radius: 1rem;
 
-    &[data-mode='onDark'] {
-        --tui-clear: var(--tui-clear-inverse);
-    }
-
     &[data-size='xs'] {
         --t-height: 0.25rem;
     }
diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.ts b/projects/kit/components/progress/progress-bar/progress-bar.component.ts
index 46a01127cd46..41f706c8f241 100644
--- a/projects/kit/components/progress/progress-bar/progress-bar.component.ts
+++ b/projects/kit/components/progress/progress-bar/progress-bar.component.ts
@@ -1,22 +1,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    inject,
-    Input,
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
-import {MODE_PROVIDER, TUI_MODE} from '@taiga-ui/core';
 
 @Component({
     selector: 'progress[tuiProgressBar]',
     template: '',
     styleUrls: ['./progress-bar.component.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiProgressBarComponent {
     @Input()
@@ -26,6 +15,4 @@ export class TuiProgressBarComponent {
     @Input()
     @HostBinding('attr.data-size')
     public size: TuiSizeXS | TuiSizeXXL = 'm';
-
-    protected readonly mode$ = inject(TUI_MODE);
 }
diff --git a/projects/kit/components/progress/progress-circle/progress-circle.component.ts b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
index 0695c05a3251..22f6a6849a74 100644
--- a/projects/kit/components/progress/progress-circle/progress-circle.component.ts
+++ b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
@@ -1,12 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    inject,
-    Input,
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import type {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-import {MODE_PROVIDER, TUI_MODE} from '@taiga-ui/core';
 import {delay, of} from 'rxjs';
 
 @Component({
@@ -14,10 +7,6 @@ import {delay, of} from 'rxjs';
     templateUrl: './progress-circle.template.html',
     styleUrls: ['./progress-circle.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiProgressCircleComponent {
     @Input()
@@ -36,8 +25,6 @@ export class TuiProgressCircleComponent {
 
     protected readonly animationDelay$ = of(true).pipe(delay(0));
 
-    protected readonly mode$ = inject(TUI_MODE);
-
     @HostBinding('style.--progress-ratio')
     protected get progressRatio(): number {
         const ratio = this.value / this.max;
diff --git a/projects/kit/components/progress/progress-circle/progress-circle.style.less b/projects/kit/components/progress/progress-circle/progress-circle.style.less
index 6381c4010e2c..1df156c25290 100644
--- a/projects/kit/components/progress/progress-circle/progress-circle.style.less
+++ b/projects/kit/components/progress/progress-circle/progress-circle.style.less
@@ -45,10 +45,6 @@
     width: var(--t-diameter);
     height: var(--t-diameter);
 
-    &[data-mode='onDark'] {
-        --tui-clear: var(--tui-clear-inverse);
-    }
-
     &[data-size='s'] {
         --t-diameter: @legacy-width[@s];
         --t-track-stroke: @legacy-track-stroke[@s];
diff --git a/projects/kit/components/push/index.ts b/projects/kit/components/push/index.ts
index 071058373ff3..d12500452999 100644
--- a/projects/kit/components/push/index.ts
+++ b/projects/kit/components/push/index.ts
@@ -1,5 +1,4 @@
 export * from './push.component';
-export * from './push.directive';
 export * from './push.module';
 export * from './push.options';
 export * from './push.service';
diff --git a/projects/kit/components/push/push.component.ts b/projects/kit/components/push/push.component.ts
index c2f7b426223f..9df278cc6c02 100644
--- a/projects/kit/components/push/push.component.ts
+++ b/projects/kit/components/push/push.component.ts
@@ -7,13 +7,14 @@ import {
     Output,
 } from '@angular/core';
 import {tuiIsObserved, tuiIsString} from '@taiga-ui/cdk';
-import {TUI_CLOSE_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core';
+import {TUI_CLOSE_WORD, TUI_COMMON_ICONS, tuiButtonOptionsProvider} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-push',
     templateUrl: './push.template.html',
     styleUrls: ['./push.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [tuiButtonOptionsProvider({size: 's', appearance: 'secondary'})],
 })
 export class TuiPushComponent {
     @Input()
diff --git a/projects/kit/components/push/push.directive.ts b/projects/kit/components/push/push.directive.ts
deleted file mode 100644
index 5a2f68325a63..000000000000
--- a/projects/kit/components/push/push.directive.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Directive, inject} from '@angular/core';
-import {tuiProvide} from '@taiga-ui/cdk';
-import type {TuiButtonOptions} from '@taiga-ui/core';
-import {TUI_BUTTON_OPTIONS, TuiModeDirective} from '@taiga-ui/core';
-import {Subject} from 'rxjs';
-
-@Directive({
-    selector: 'tui-push',
-    providers: [
-        tuiProvide(TuiModeDirective, TuiPushDirective),
-        tuiProvide(TUI_BUTTON_OPTIONS, TuiPushDirective),
-    ],
-})
-export class TuiPushDirective extends TuiModeDirective implements TuiButtonOptions {
-    private readonly modeDirective = inject(TuiModeDirective, {
-        optional: true,
-        skipSelf: true,
-    });
-
-    public size: TuiButtonOptions['size'] = 's';
-
-    public shape = null;
-
-    public override readonly change$ = this.modeDirective?.change$ || new Subject();
-
-    public get appearance(): string {
-        return this.modeDirective?.mode === 'onDark' ? 'accent' : 'secondary';
-    }
-}
diff --git a/projects/kit/components/push/push.module.ts b/projects/kit/components/push/push.module.ts
index 7923ca8f125f..a4f2ad43b018 100644
--- a/projects/kit/components/push/push.module.ts
+++ b/projects/kit/components/push/push.module.ts
@@ -9,7 +9,6 @@ import {
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiPushComponent} from './push.component';
-import {TuiPushDirective} from './push.directive';
 import {TuiPushAlertComponent} from './push-alert.component';
 import {TuiPushAlertDirective} from './push-alert.directive';
 
@@ -22,17 +21,7 @@ import {TuiPushAlertDirective} from './push-alert.directive';
         TuiSvgModule,
         TuiFormatDatePipeModule,
     ],
-    declarations: [
-        TuiPushComponent,
-        TuiPushDirective,
-        TuiPushAlertComponent,
-        TuiPushAlertDirective,
-    ],
-    exports: [
-        TuiPushComponent,
-        TuiPushDirective,
-        TuiPushAlertComponent,
-        TuiPushAlertDirective,
-    ],
+    declarations: [TuiPushComponent, TuiPushAlertComponent, TuiPushAlertDirective],
+    exports: [TuiPushComponent, TuiPushAlertComponent, TuiPushAlertDirective],
 })
 export class TuiPushModule {}
diff --git a/projects/kit/components/tag/tag.component.ts b/projects/kit/components/tag/tag.component.ts
index 5d14139c78a3..a7e5d513c0f0 100644
--- a/projects/kit/components/tag/tag.component.ts
+++ b/projects/kit/components/tag/tag.component.ts
@@ -11,13 +11,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import type {TuiSizeL, TuiSizeS, TuiSizeXS} from '@taiga-ui/core';
-import {
-    MODE_PROVIDER,
-    TUI_COMMON_ICONS,
-    TUI_MODE,
-    tuiSizeBigger,
-    tuiStringHashToHsl,
-} from '@taiga-ui/core';
+import {TUI_COMMON_ICONS, tuiSizeBigger, tuiStringHashToHsl} from '@taiga-ui/core';
 import type {TuiStatus} from '@taiga-ui/kit/types';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
@@ -28,10 +22,6 @@ import {TUI_TAG_OPTIONS} from './tag.options';
     templateUrl: './tag.template.html',
     styleUrls: ['./tag.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiTagComponent {
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
@@ -86,7 +76,6 @@ export class TuiTagComponent {
     protected editing = false;
 
     protected readonly icons = inject(TUI_COMMON_ICONS);
-    protected readonly mode$ = inject(TUI_MODE);
 
     protected editedText: string | null = null;
 
diff --git a/projects/kit/components/tag/tag.style.less b/projects/kit/components/tag/tag.style.less
index f0aea2194b25..a4586dd65781 100644
--- a/projects/kit/components/tag/tag.style.less
+++ b/projects/kit/components/tag/tag.style.less
@@ -71,7 +71,7 @@
             background-color: var(--tui-error-bg-hover);
         }
 
-        &[data-mode='onDark'] {
+        :host-context([tuiTheme='dark']) & {
             background-color: var(--tui-error-bg-night);
             color: var(--tui-text-01-night);
 
@@ -91,7 +91,7 @@
             background-color: var(--tui-success-bg-hover);
         }
 
-        &[data-mode='onDark'] {
+        :host-context([tuiTheme='dark']) & {
             background-color: var(--tui-success-bg-night);
             color: var(--tui-text-01-night);
 
@@ -111,7 +111,7 @@
             background-color: var(--tui-warning-bg-hover);
         }
 
-        &[data-mode='onDark'] {
+        :host-context([tuiTheme='dark']) & {
             background-color: var(--tui-warning-bg-night);
             color: var(--tui-text-01-night);
 
@@ -126,17 +126,15 @@
         color: var(--tui-text-01-night);
         background-color: var(--tui-base-06);
 
-        &:not([data-mode]) {
-            &._hoverable:hover {
-                background-color: var(--tui-base-07);
-            }
+        &._hoverable:hover {
+            background-color: var(--tui-base-07);
+        }
 
-            &._hoverable:active {
-                background-color: var(--tui-base-08);
-            }
+        &._hoverable:active {
+            background-color: var(--tui-base-08);
         }
 
-        &[data-mode='onDark'] {
+        :host-context([tuiTheme='dark']) & {
             color: var(--tui-text-01-night);
             background-color: var(--tui-clear-inverse);
 
@@ -152,19 +150,6 @@
                 border: 2px solid var(--tui-base-01);
             }
         }
-
-        &[data-mode='onLight'] {
-            background-color: var(--tui-clear);
-            color: var(--tui-text-01);
-
-            &._hoverable:hover {
-                background-color: var(--tui-clear-hover);
-            }
-
-            &._hoverable:active {
-                background-color: var(--tui-clear-active);
-            }
-        }
     }
 
     &._editing {
diff --git a/projects/kit/components/textarea/textarea.component.ts b/projects/kit/components/textarea/textarea.component.ts
index 908ea006617a..3a258ecf9e3b 100644
--- a/projects/kit/components/textarea/textarea.component.ts
+++ b/projects/kit/components/textarea/textarea.component.ts
@@ -19,10 +19,8 @@ import {
 } from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
     TEXTFIELD_CONTROLLER_PROVIDER,
     TUI_ICON_PADDINGS,
-    TUI_MODE,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
     tuiGetBorder,
     TuiHintOptionsDirective,
@@ -43,10 +41,8 @@ export const LINE_HEIGHT_L = 24;
         tuiAsFocusableItemAccessor(TuiTextareaComponent),
         tuiAsControl(TuiTextareaComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
-        MODE_PROVIDER,
     ],
     host: {
-        '($.data-mode.attr)': 'mode$',
         '[class._ios]': 'isIOS',
     },
 })
@@ -71,7 +67,6 @@ export class TuiTextareaComponent
     public expandable = false;
 
     protected readonly isIOS = inject(TUI_IS_IOS);
-    protected readonly mode$ = inject(TUI_MODE);
     protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
     protected readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});
 
diff --git a/projects/kit/components/textarea/textarea.style.less b/projects/kit/components/textarea/textarea.style.less
index f86e842450e7..73f56d53c9ea 100644
--- a/projects/kit/components/textarea/textarea.style.less
+++ b/projects/kit/components/textarea/textarea.style.less
@@ -12,10 +12,6 @@
     border-radius: var(--tui-radius-m);
     color: var(--tui-text-01);
 
-    &[data-mode='onDark'] {
-        color: var(--tui-text-01-night);
-    }
-
     &[data-size='s'] {
         --tui-height: var(--tui-height-s);
         --tui-textarea-height: 4.5625rem;
@@ -201,10 +197,6 @@
         opacity: 0;
     }
 
-    :host[data-mode='onDark'] &::placeholder {
-        color: var(--tui-text-03-night);
-    }
-
     :host._focused &:not(:read-only)::placeholder {
         opacity: 1;
     }
@@ -218,10 +210,6 @@
         padding: 0 1rem;
     }
 
-    :host[data-mode='onDark']._disabled & {
-        color: var(--tui-text-03-night);
-    }
-
     /* Safari 9+, < 13.1 */
     @supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
         :host._ios & {
@@ -307,8 +295,4 @@
     margin-top: auto;
     text-align: right;
     color: var(--tui-text-03);
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-03-night);
-    }
 }
diff --git a/projects/kit/directives/skeleton/skeleton.style.less b/projects/kit/directives/skeleton/skeleton.style.less
index e26931d056cd..e54574bc9ddf 100644
--- a/projects/kit/directives/skeleton/skeleton.style.less
+++ b/projects/kit/directives/skeleton/skeleton.style.less
@@ -32,6 +32,6 @@
     }
 }
 
-[tuiTheme='night'] [tuiSkeleton]._skeleton {
+[tuiTheme='dark'] [tuiSkeleton]._skeleton {
     filter: contrast(0) brightness(0) invert(1);
 }