diff --git a/apps/doc/project.json b/apps/doc/project.json
index b084bf3532..c8e273d54d 100644
--- a/apps/doc/project.json
+++ b/apps/doc/project.json
@@ -33,11 +33,6 @@
             "glob": "**/*",
             "input": "node_modules/@taiga-ui/icons/src",
             "output": "assets/taiga-ui/icons"
-          },
-          {
-            "glob": "**/*",
-            "input": "libs/icons/base/src/styles/icons",
-            "output": "assets/prizm-icons/fonts"
           }
         ],
         "styles": [
diff --git a/apps/doc/src/app/app.module.ts b/apps/doc/src/app/app.module.ts
index 0a245b77ae..1d2c8b4dcc 100644
--- a/apps/doc/src/app/app.module.ts
+++ b/apps/doc/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { SetTaskModule } from './how-to-work/set-task/set-task.module';
 import { IntroductionModule } from './forZIIoT/introduction/introduction.module';
 import { LibraryRequirementsModule } from './forZIIoT/library-requirements/library-requirements.module';
 import { PRIZM_ENGLISH_LANGUAGE, PRIZM_RUSSIAN_LANGUAGE, prizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { ThemeTokenChanger } from './theme-token-changer/theme-token-changer.component';
 
 registerLocaleData(localeRu);
 @NgModule({
diff --git a/apps/doc/src/app/logo/logo.component.html b/apps/doc/src/app/logo/logo.component.html
index b66a8f1b72..6ace165966 100644
--- a/apps/doc/src/app/logo/logo.component.html
+++ b/apps/doc/src/app/logo/logo.component.html
@@ -2,8 +2,22 @@
   <a href="http://prizm.zyfra.com/" target="_blank">
     <img src="/assets/logos/logo-dark.svg" />
   </a>
-  <prizm-toggle [ngModel]="isNight$ | async" (ngModelChange)="onMode($event)" iconOn="social-sun">
-  </prizm-toggle>
+
+  <div class="buttons-block">
+    <prizm-toggle
+      [ngModel]="isNight$ | async"
+      (ngModelChange)="onMode($event)"
+      iconOn="social-sun"
+    ></prizm-toggle>
+
+    <prizm-icons-svg
+      class="theme-tokens-updater"
+      [size]="24"
+      [name]="PrizmIconSvgEnum.SHAPE_GEOMETRY_SQUARE_CIRCLE_PLUS_TRIANGLE_FILL"
+      (click)="openThemeChanger()"
+    >
+    </prizm-icons-svg>
+  </div>
 </div>
 <div
   class="sub-text x-margin prizm-font-input-text-14px"
diff --git a/apps/doc/src/app/logo/logo.component.less b/apps/doc/src/app/logo/logo.component.less
index b59e041079..13e96996d2 100644
--- a/apps/doc/src/app/logo/logo.component.less
+++ b/apps/doc/src/app/logo/logo.component.less
@@ -29,3 +29,18 @@
     color: var(--prizm-status-info-primary-default);
   }
 }
+
+.buttons-block {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.theme-tokens-updater {
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--prizm-index-plan);
+  }
+}
diff --git a/apps/doc/src/app/logo/logo.component.ts b/apps/doc/src/app/logo/logo.component.ts
index 0628c262a1..98fa2f30c8 100644
--- a/apps/doc/src/app/logo/logo.component.ts
+++ b/apps/doc/src/app/logo/logo.component.ts
@@ -2,8 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { debounceTime, filter, map } from 'rxjs/operators';
 import { PrizmThemeService } from '@prizm-ui/theme';
 import { LOCAL_STORAGE } from '@ng-web-apis/common';
-import { PrizmIconsSvgRegistry, PrizmIconSvgEnum, prizmIconSvgOtherGitHub } from '@prizm-ui/icons';
+import {
+  PrizmIconsSvgRegistry,
+  PrizmIconSvgEnum,
+  prizmIconSvgOtherGitHub,
+  prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+} from '@prizm-ui/icons';
 import { PrizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { PolymorphComponent, PrizmDialogService } from '@prizm-ui/components';
+import { ThemeTokenChanger } from '../theme-token-changer/theme-token-changer.component';
 
 @Component({
   selector: 'prizm-doc-logo',
@@ -21,18 +28,34 @@ export class LogoComponent {
   readonly githubSvgName = PrizmIconSvgEnum.OTHER_GIT_HUB;
 
   constructor(
+    private readonly dialogService: PrizmDialogService,
     private readonly themeSwitcher: PrizmThemeService,
     public readonly languageSwitcher: PrizmLanguageSwitcher,
     private readonly svgRegistry: PrizmIconsSvgRegistry,
     @Inject(LOCAL_STORAGE) private readonly storage: Storage
   ) {
-    this.svgRegistry.registerIcons([prizmIconSvgOtherGitHub]);
+    this.svgRegistry.registerIcons([
+      prizmIconSvgOtherGitHub,
+      prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+    ]);
   }
 
   public onMode(isNight: boolean): void {
     this.storage.setItem(`night`, isNight ? 'true' : 'false');
     this.themeSwitcher.update(isNight ? 'dark' : 'light');
   }
+
+  protected readonly PrizmIconSvgEnum = PrizmIconSvgEnum;
+
+  public openThemeChanger() {
+    this.dialogService
+      .open(new PolymorphComponent(ThemeTokenChanger), {
+        closeable: true,
+        header: 'Theme changer',
+        height: 800,
+      })
+      .subscribe();
+  }
 }
 
 export const LOGO_CONTENT = 'assets/images/logo.svg';
diff --git a/apps/doc/src/app/logo/logo.module.ts b/apps/doc/src/app/logo/logo.module.ts
index d11eebc659..3d353171ca 100644
--- a/apps/doc/src/app/logo/logo.module.ts
+++ b/apps/doc/src/app/logo/logo.module.ts
@@ -5,18 +5,27 @@ import { LogoComponent } from './logo.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { PrizmIconsSvgComponent } from '@prizm-ui/icons';
-import { PrizmToggleModule } from '@prizm-ui/components';
+import {
+  PrizmButtonComponent,
+  PrizmDialogComponent,
+  PrizmDialogModule,
+  PrizmToggleComponent,
+} from '@prizm-ui/components';
 import { PrizmLetDirective } from '@prizm-ui/helpers';
+import { ThemeTokenChanger } from '../theme-token-changer/theme-token-changer.component';
 
 @NgModule({
   imports: [
     PrizmLetDirective,
     TuiLinkModule,
+    PrizmButtonComponent,
     CommonModule,
     RouterModule,
+    PrizmDialogModule,
+    ThemeTokenChanger,
     FormsModule,
     PrizmIconsSvgComponent,
-    PrizmToggleModule,
+    PrizmToggleComponent,
   ],
   declarations: [LogoComponent],
   exports: [LogoComponent],
diff --git a/apps/doc/src/app/theme-token-changer/theme-token-changer.component.html b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.html
new file mode 100644
index 0000000000..245d1eb9c5
--- /dev/null
+++ b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.html
@@ -0,0 +1,30 @@
+<div #prizmTheme prizmTheme>
+  <prizm-doc-documentation [hasTestId]="false" heading="Base variables" hostComponentKey="Base variables">
+    <ng-template
+      *ngFor="let token of PRIZM_THEME_TOKEN_BASE_VARIABLES"
+      [documentationPropertyName]="token"
+      [documentationPropertyValue]="getTokenValue(token)"
+      (documentationPropertyValueChange)="themeService.updateTokenValue(token, $event)"
+      documentationPropertyType="string"
+      documentationPropertyMode="css-var"
+    >
+      {{ token }}
+    </ng-template>
+  </prizm-doc-documentation>
+  <prizm-doc-documentation
+    [hasTestId]="false"
+    heading="Palette variables"
+    hostComponentKey="Palette variables"
+  >
+    <ng-template
+      *ngFor="let token of PRIZM_THEME_TOKEN_PALETTE_VARIABLES"
+      [documentationPropertyName]="token"
+      [documentationPropertyValue]="getTokenValue(token)"
+      (documentationPropertyValueChange)="themeService.updateTokenValue(token, $event)"
+      documentationPropertyType="string"
+      documentationPropertyMode="css-var"
+    >
+      {{ token }}
+    </ng-template>
+  </prizm-doc-documentation>
+</div>
diff --git a/apps/doc/src/app/theme-token-changer/theme-token-changer.component.less b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.less
new file mode 100644
index 0000000000..13e96996d2
--- /dev/null
+++ b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.less
@@ -0,0 +1,46 @@
+.logo-block {
+  margin-top: 44px;
+}
+
+.logo-block,
+.sub-text {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.x-margin {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.sub-text {
+  margin-top: 14px;
+  color: var(--prizm-palette-gray-h750-dark);
+  margin-bottom: 32px;
+  text-align: left;
+}
+
+.icon {
+  cursor: pointer;
+  color: var(--prizm-text-icon-exception);
+
+  &:hover {
+    color: var(--prizm-status-info-primary-default);
+  }
+}
+
+.buttons-block {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.theme-tokens-updater {
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--prizm-index-plan);
+  }
+}
diff --git a/apps/doc/src/app/theme-token-changer/theme-token-changer.component.ts b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.ts
new file mode 100644
index 0000000000..b2686d5f3e
--- /dev/null
+++ b/apps/doc/src/app/theme-token-changer/theme-token-changer.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
+import {
+  PRIZM_THEME_TOKEN_BASE_VARIABLES,
+  PRIZM_THEME_TOKEN_PALETTE_VARIABLES,
+  PrizmThemeModule,
+  PrizmThemeService,
+} from '@prizm-ui/theme';
+import { LOCAL_STORAGE } from '@ng-web-apis/common';
+import {
+  PrizmIconsSvgRegistry,
+  prizmIconSvgOtherGitHub,
+  prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+} from '@prizm-ui/icons';
+import { PrizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { PrizmAddonDocModule } from '@prizm-ui/doc';
+import { DOCUMENT, NgFor } from '@angular/common';
+
+@Component({
+  selector: 'prizm-doc-theme-token-changer',
+  templateUrl: './theme-token-changer.component.html',
+  styleUrls: ['./theme-token-changer.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PrizmAddonDocModule, NgFor, PrizmThemeModule],
+})
+export class ThemeTokenChanger implements OnInit {
+  @ViewChild('prizmTheme') prizmThemeElement!: ElementRef<HTMLElement>;
+  readonly PRIZM_THEME_TOKEN_PALETTE_VARIABLES = PRIZM_THEME_TOKEN_PALETTE_VARIABLES;
+  readonly PRIZM_THEME_TOKEN_BASE_VARIABLES = PRIZM_THEME_TOKEN_BASE_VARIABLES;
+  readonly mapValue = new Map<string, string>();
+
+  constructor(
+    public readonly themeService: PrizmThemeService,
+    @Inject(DOCUMENT) public readonly document: Document,
+    private readonly svgRegistry: PrizmIconsSvgRegistry
+  ) {
+    this.svgRegistry.registerIcons([
+      prizmIconSvgOtherGitHub,
+      prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+    ]);
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
+
+  public getTokenValue(token: string): string {
+    return this.mapValue.get(token) ?? '';
+  }
+
+  private init() {
+    this.addTokenValueToMap(PRIZM_THEME_TOKEN_PALETTE_VARIABLES);
+    this.addTokenValueToMap(PRIZM_THEME_TOKEN_BASE_VARIABLES);
+  }
+
+  private addTokenValueToMap(tokens: string[]) {
+    tokens.forEach((token: string) => {
+      this.mapValue.set(token, this.themeService.getTokenValue(token) ?? '');
+    });
+  }
+}
diff --git a/libs/theme/src/index.ts b/libs/theme/src/index.ts
index 4152de4a3f..bccc364231 100644
--- a/libs/theme/src/index.ts
+++ b/libs/theme/src/index.ts
@@ -1,3 +1,4 @@
 export * from './lib/services';
 export * from './lib/types';
 export * from './lib/directive';
+export * from './lib/const';
diff --git a/libs/theme/src/lib/const.ts b/libs/theme/src/lib/const.ts
new file mode 100644
index 0000000000..9fad0d519d
--- /dev/null
+++ b/libs/theme/src/lib/const.ts
@@ -0,0 +1,385 @@
+export const PRIZM_THEME_TOKEN_PALETTE_VARIABLES = [
+  'prizm-palette-shadow-dark',
+  'prizm-palette-shadow-light',
+  'prizm-palette-0-light',
+  'prizm-palette-1200-light',
+  'prizm-palette-gray-h50-light',
+  'prizm-palette-gray-100-light',
+  'prizm-palette-gray-h150-light',
+  'prizm-palette-gray-200-light',
+  'prizm-palette-gray-h250-light',
+  'prizm-palette-gray-300-light',
+  'prizm-palette-gray-h350-light',
+  'prizm-palette-gray-400-light',
+  'prizm-palette-gray-h450-light',
+  'prizm-palette-gray-500-light',
+  'prizm-palette-gray-h550-light',
+  'prizm-palette-gray-600-light',
+  'prizm-palette-gray-h650-light',
+  'prizm-palette-gray-700-light',
+  'prizm-palette-gray-h750-light',
+  'prizm-palette-gray-800-light',
+  'prizm-palette-gray-h850-light',
+  'prizm-palette-gray-900-light',
+  'prizm-palette-gray-h950-light',
+  'prizm-palette-gray-1000-light',
+  'prizm-palette-gray-h1050-light',
+  'prizm-palette-gray-1100-light',
+  'prizm-palette-gray-h1150-light',
+  'prizm-palette-blue-h50-light',
+  'prizm-palette-blue-100-light',
+  'prizm-palette-blue-h150-light',
+  'prizm-palette-blue-200-light',
+  'prizm-palette-blue-h250-light',
+  'prizm-palette-blue-300-light',
+  'prizm-palette-blue-h350-light',
+  'prizm-palette-blue-400-light',
+  'prizm-palette-blue-h450-light',
+  'prizm-palette-blue-500-light',
+  'prizm-palette-blue-h550-light',
+  'prizm-palette-blue-600-light',
+  'prizm-palette-blue-h650-light',
+  'prizm-palette-blue-700-light',
+  'prizm-palette-blue-h750-light',
+  'prizm-palette-blue-800-light',
+  'prizm-palette-blue-h850-light',
+  'prizm-palette-blue-900-light',
+  'prizm-palette-blue-h950-light',
+  'prizm-palette-blue-1000-light',
+  'prizm-palette-blue-h1050-light',
+  'prizm-palette-blue-1100-light',
+  'prizm-palette-blue-h1150-light',
+  'prizm-palette-green-h50-light',
+  'prizm-palette-green-100-light',
+  'prizm-palette-green-h150-light',
+  'prizm-palette-green-200-light',
+  'prizm-palette-green-h250-light',
+  'prizm-palette-green-300-light',
+  'prizm-palette-green-h350-light',
+  'prizm-palette-green-400-light',
+  'prizm-palette-green-h450-light',
+  'prizm-palette-green-500-light',
+  'prizm-palette-green-h550-light',
+  'prizm-palette-green-600-light',
+  'prizm-palette-green-h650-light',
+  'prizm-palette-green-700-light',
+  'prizm-palette-green-h750-light',
+  'prizm-palette-green-800-light',
+  'prizm-palette-green-h850-light',
+  'prizm-palette-green-900-light',
+  'prizm-palette-green-h950-light',
+  'prizm-palette-green-1000-light',
+  'prizm-palette-green-h1050-light',
+  'prizm-palette-green-1100-light',
+  'prizm-palette-green-h1150-light',
+  'prizm-palette-yellow-h50-light',
+  'prizm-palette-yellow-100-light',
+  'prizm-palette-yellow-h150-light',
+  'prizm-palette-yellow-200-light',
+  'prizm-palette-yellow-h250-light',
+  'prizm-palette-yellow-300-light',
+  'prizm-palette-yellow-h350-light',
+  'prizm-palette-yellow-400-light',
+  'prizm-palette-yellow-h450-light',
+  'prizm-palette-yellow-500-light',
+  'prizm-palette-yellow-h550-light',
+  'prizm-palette-yellow-600-light',
+  'prizm-palette-yellow-h650-light',
+  'prizm-palette-yellow-700-light',
+  'prizm-palette-yellow-h750-light',
+  'prizm-palette-yellow-800-light',
+  'prizm-palette-yellow-h850-light',
+  'prizm-palette-yellow-900-light',
+  'prizm-palette-yellow-h950-light',
+  'prizm-palette-yellow-1000-light',
+  'prizm-palette-yellow-h1050-light',
+  'prizm-palette-yellow-1100-light',
+  'prizm-palette-yellow-h1150-light',
+  'prizm-palette-orange-h50-light',
+  'prizm-palette-orange-100-light',
+  'prizm-palette-orange-h150-light',
+  'prizm-palette-orange-200-light',
+  'prizm-palette-orange-h250-light',
+  'prizm-palette-orange-300-light',
+  'prizm-palette-orange-h350-light',
+  'prizm-palette-orange-400-light',
+  'prizm-palette-orange-h450-light',
+  'prizm-palette-orange-500-light',
+  'prizm-palette-orange-h550-light',
+  'prizm-palette-orange-600-light',
+  'prizm-palette-orange-h650-light',
+  'prizm-palette-orange-700-light',
+  'prizm-palette-orange-h750-light',
+  'prizm-palette-orange-800-light',
+  'prizm-palette-orange-h850-light',
+  'prizm-palette-orange-900-light',
+  'prizm-palette-orange-h950-light',
+  'prizm-palette-orange-1000-light',
+  'prizm-palette-orange-h1050-light',
+  'prizm-palette-orange-1100-light',
+  'prizm-palette-orange-h1150-light',
+  'prizm-palette-red-h50-light',
+  'prizm-palette-red-100-light',
+  'prizm-palette-red-h150-light',
+  'prizm-palette-red-200-light',
+  'prizm-palette-red-h250-light',
+  'prizm-palette-red-300-light',
+  'prizm-palette-red-h350-light',
+  'prizm-palette-red-400-light',
+  'prizm-palette-red-h450-light',
+  'prizm-palette-red-500-light',
+  'prizm-palette-red-h550-light',
+  'prizm-palette-red-600-light',
+  'prizm-palette-red-h650-light',
+  'prizm-palette-red-700-light',
+  'prizm-palette-red-h750-light',
+  'prizm-palette-red-800-light',
+  'prizm-palette-red-h850-light',
+  'prizm-palette-red-900-light',
+  'prizm-palette-red-h950-light',
+  'prizm-palette-red-1000-light',
+  'prizm-palette-red-h1050-light',
+  'prizm-palette-red-1050-light',
+  'prizm-palette-red-h1150-light',
+  'prizm-palette-0-dark',
+  'prizm-palette-1200-dark',
+  'prizm-palette-gray-h50-dark',
+  'prizm-palette-gray-100-dark',
+  'prizm-palette-gray-h150-dark',
+  'prizm-palette-gray-200-dark',
+  'prizm-palette-gray-h250-dark',
+  'prizm-palette-gray-300-dark',
+  'prizm-palette-gray-h350-dark',
+  'prizm-palette-gray-400-dark',
+  'prizm-palette-gray-h450-dark',
+  'prizm-palette-gray-500-dark',
+  'prizm-palette-gray-h550-dark',
+  'prizm-palette-gray-600-dark',
+  'prizm-palette-gray-h650-dark',
+  'prizm-palette-gray-700-dark',
+  'prizm-palette-gray-h750-dark',
+  'prizm-palette-gray-800-dark',
+  'prizm-palette-gray-h850-dark',
+  'prizm-palette-gray-900-dark',
+  'prizm-palette-gray-h950-dark',
+  'prizm-palette-gray-1000-dark',
+  'prizm-palette-gray-h1050-dark',
+  'prizm-palette-gray-1100-dark',
+  'prizm-palette-gray-h1150-dark',
+  'prizm-palette-blue-h50-dark',
+  'prizm-palette-blue-100-dark',
+  'prizm-palette-blue-h150-dark',
+  'prizm-palette-blue-200-dark',
+  'prizm-palette-blue-h250-dark',
+  'prizm-palette-blue-300-dark',
+  'prizm-palette-blue-h350-dark',
+  'prizm-palette-blue-400-dark',
+  'prizm-palette-blue-h450-dark',
+  'prizm-palette-blue-500-dark',
+  'prizm-palette-blue-h550-dark',
+  'prizm-palette-blue-600-dark',
+  'prizm-palette-blue-h650-dark',
+  'prizm-palette-blue-700-dark',
+  'prizm-palette-blue-h750-dark',
+  'prizm-palette-blue-800-dark',
+  'prizm-palette-blue-h850-dark',
+  'prizm-palette-blue-900-dark',
+  'prizm-palette-blue-h950-dark',
+  'prizm-palette-blue-1000-dark',
+  'prizm-palette-blue-h1050-dark',
+  'prizm-palette-blue-1100-dark',
+  'prizm-palette-blue-h1150-dark',
+  'prizm-palette-green-h50-dark',
+  'prizm-palette-green-100-dark',
+  'prizm-palette-green-h150-dark',
+  'prizm-palette-green-200-dark',
+  'prizm-palette-green-h250-dark',
+  'prizm-palette-green-300-dark',
+  'prizm-palette-green-h350-dark',
+  'prizm-palette-green-400-dark',
+  'prizm-palette-green-h450-dark',
+  'prizm-palette-green-500-dark',
+  'prizm-palette-green-h550-dark',
+  'prizm-palette-green-600-dark',
+  'prizm-palette-green-h650-dark',
+  'prizm-palette-green-700-dark',
+  'prizm-palette-green-h750-dark',
+  'prizm-palette-green-800-dark',
+  'prizm-palette-green-h850-dark',
+  'prizm-palette-green-900-dark',
+  'prizm-palette-green-h950-dark',
+  'prizm-palette-green-1000-dark',
+  'prizm-palette-green-h1050-dark',
+  'prizm-palette-green-1100-dark',
+  'prizm-palette-green-h1150-dark',
+  'prizm-palette-yellow-h50-dark',
+  'prizm-palette-yellow-100-dark',
+  'prizm-palette-yellow-h150-dark',
+  'prizm-palette-yellow-200-dark',
+  'prizm-palette-yellow-h250-dark',
+  'prizm-palette-yellow-300-dark',
+  'prizm-palette-yellow-h350-dark',
+  'prizm-palette-yellow-400-dark',
+  'prizm-palette-yellow-h450-dark',
+  'prizm-palette-yellow-500-dark',
+  'prizm-palette-yellow-h550-dark',
+  'prizm-palette-yellow-600-dark',
+  'prizm-palette-yellow-h650-dark',
+  'prizm-palette-yellow-700-dark',
+  'prizm-palette-yellow-h750-dark',
+  'prizm-palette-yellow-800-dark',
+  'prizm-palette-yellow-h850-dark',
+  'prizm-palette-yellow-900-dark',
+  'prizm-palette-yellow-h950-dark',
+  'prizm-palette-yellow-1000-dark',
+  'prizm-palette-yellow-h1050-dark',
+  'prizm-palette-yellow-1100-dark',
+  'prizm-palette-yellow-h1150-dark',
+  'prizm-palette-orange-h50-dark',
+  'prizm-palette-orange-100-dark',
+  'prizm-palette-orange-h150-dark',
+  'prizm-palette-orange-200-dark',
+  'prizm-palette-orange-h250-dark',
+  'prizm-palette-orange-300-dark',
+  'prizm-palette-orange-h350-dark',
+  'prizm-palette-orange-400-dark',
+  'prizm-palette-orange-h450-dark',
+  'prizm-palette-orange-500-dark',
+  'prizm-palette-orange-h550-dark',
+  'prizm-palette-orange-600-dark',
+  'prizm-palette-orange-h650-dark',
+  'prizm-palette-orange-700-dark',
+  'prizm-palette-orange-h750-dark',
+  'prizm-palette-orange-800-dark',
+  'prizm-palette-orange-h850-dark',
+  'prizm-palette-orange-900-dark',
+  'prizm-palette-orange-h950-dark',
+  'prizm-palette-orange-1000-dark',
+  'prizm-palette-orange-h1050-dark',
+  'prizm-palette-orange-1100-dark',
+  'prizm-palette-orange-h1150-dark',
+  'prizm-palette-red-h50-dark',
+  'prizm-palette-red-100-dark',
+  'prizm-palette-red-h150-dark',
+  'prizm-palette-red-200-dark',
+  'prizm-palette-red-h250-dark',
+  'prizm-palette-red-300-dark',
+  'prizm-palette-red-h350-dark',
+  'prizm-palette-red-400-dark',
+  'prizm-palette-red-h450-dark',
+  'prizm-palette-red-500-dark',
+  'prizm-palette-red-h550-dark',
+  'prizm-palette-red-600-dark',
+  'prizm-palette-red-h650-dark',
+  'prizm-palette-red-700-dark',
+  'prizm-palette-red-h750-dark',
+  'prizm-palette-red-800-dark',
+  'prizm-palette-red-h850-dark',
+  'prizm-palette-red-900-dark',
+  'prizm-palette-red-h950-dark',
+  'prizm-palette-red-1000-dark',
+  'prizm-palette-red-h1050-dark',
+  'prizm-palette-red-1050-dark',
+  'prizm-palette-red-h1150-dark',
+];
+
+export const PRIZM_THEME_TOKEN_BASE_VARIABLES = [
+  'prizm-text-icon-primary',
+  'prizm-text-icon-secondary',
+  'prizm-text-icon-tertiary',
+  'prizm-text-icon-disable',
+  'prizm-text-icon-link',
+  'prizm-text-icon-link-hover',
+  'prizm-text-icon-link-visited',
+  'prizm-text-icon-reverse',
+  'prizm-text-icon-exception',
+  'prizm-background-fill-primary',
+  'prizm-background-fill-secondary',
+  'prizm-background-fill-panel',
+  'prizm-background-fill-overlay',
+  'prizm-background-fill-blanket',
+  'prizm-background-fill-reverse',
+  'prizm-background-stroke',
+  'prizm-background-stroke-focus',
+  'prizm-table-fill-header-default',
+  'prizm-table-fill-header-hover',
+  'prizm-table-fill-row-zebra_default',
+  'prizm-table-fill-row-hover',
+  'prizm-table-fill-row-active',
+  'prizm-table-fill-cell-disable',
+  'prizm-table-stroke-cell-default',
+  'prizm-table-stroke-cell-hover',
+  'prizm-table-stroke-cell-active',
+  'prizm-status-info-primary-default',
+  'prizm-status-info-primary-hover',
+  'prizm-status-info-secondary-default',
+  'prizm-status-info-secondary-hover',
+  'prizm-status-none-primary-default',
+  'prizm-status-none-primary-hover',
+  'prizm-status-none-secondary-default',
+  'prizm-status-none-secondary-hover',
+  'prizm-status-success-primary-default',
+  'prizm-status-success-primary-hover',
+  'prizm-status-success-secondary-default',
+  'prizm-status-success-secondary-hover',
+  'prizm-status-attention-primary-default',
+  'prizm-status-attention-primary-hover',
+  'prizm-status-attention-secondary-default',
+  'prizm-status-attention-secondary-hover',
+  'prizm-status-warning-primary-default',
+  'prizm-status-warning-primary-hover',
+  'prizm-status-warning-secondary-default',
+  'prizm-status-warning-secondary-hover',
+  'prizm-status-alarm-primary-default',
+  'prizm-status-alarm-primary-hover',
+  'prizm-status-alarm-secondary-default',
+  'prizm-status-alarm-secondary-hover',
+  'prizm-index-plan',
+  'prizm-index-fact',
+  'prizm-index-prognosis',
+  'prizm-button-primary-solid-default',
+  'prizm-button-primary-solid-hover',
+  'prizm-button-primary-solid-active',
+  'prizm-button-primary-ghost-active',
+  'prizm-button-secondary-solid-default',
+  'prizm-button-secondary-solid-hover',
+  'prizm-button-secondary-solid-active',
+  'prizm-button-secondary-ghost-active',
+  'prizm-button-success-solid-default',
+  'prizm-button-success-solid-hover',
+  'prizm-button-success-solid-active',
+  'prizm-button-success-ghost-active',
+  'prizm-button-warning-solid-default',
+  'prizm-button-warning-solid-hover',
+  'prizm-button-warning-solid-active',
+  'prizm-button-warning-ghost-active',
+  'prizm-button-alarm-solid-default',
+  'prizm-button-alarm-solid-hover',
+  'prizm-button-alarm-solid-active',
+  'prizm-button-alarm-ghost-active',
+  'prizm-button-ghost-hover',
+  'prizm-button-disable',
+  'prizm-form-fill-default',
+  'prizm-form-fill-disable',
+  'prizm-form-stroke-default',
+  'prizm-form-stroke-hover',
+  'prizm-form-stroke-disable',
+  'prizm-form-active',
+  'prizm-form-active-hover',
+  'prizm-form-active-disable',
+  'prizm-chart-axis-default',
+  'prizm-chart-axis-line-hover',
+  'prizm-chart-axis-line-active',
+  'prizm-chart-axis-area-hover',
+  'prizm-chart-axis-area-active',
+  'prizm-chart-fill-blanket',
+  'prizm-shadow-color',
+  'prizm-shadow-big-top',
+  'prizm-shadow-big-right',
+  'prizm-shadow-big-left',
+  'prizm-shadow-big-bottom',
+  'prizm-shadow-mini-top',
+  'prizm-shadow-mini-right',
+  'prizm-shadow-mini-left',
+  'prizm-shadow-mini-bottom',
+];
diff --git a/libs/theme/src/lib/obj.ts b/libs/theme/src/lib/obj.ts
new file mode 100644
index 0000000000..8ccf5de28a
--- /dev/null
+++ b/libs/theme/src/lib/obj.ts
@@ -0,0 +1,100 @@
+export const AA = {
+  '--prizm-text-icon-primary': 'var(--prizm-palette-1200)',
+  '--prizm-text-icon-secondary': 'var(--prizm-palette-gray-800)',
+  '--prizm-text-icon-tertiary': 'var(--prizm-palette-gray-600)',
+  '--prizm-text-icon-disable': 'var(--prizm-palette-gray-500)',
+  '--prizm-text-icon-link': 'var(--prizm-palette-blue-500)',
+  '--prizm-text-icon-link-hover': 'var(--prizm-palette-blue-h750)',
+  '--prizm-text-icon-link-visited': 'var(--prizm-palette-blue-700)',
+  '--prizm-text-icon-reverse': 'var(--prizm-palette-0)',
+  '--prizm-text-icon-exception': 'var(--prizm-palette-1200)',
+  '--prizm-background-fill-primary': 'var(--prizm-palette-gray-100)',
+  '--prizm-background-fill-secondary': 'var(--prizm-palette-0)',
+  '--prizm-background-fill-panel': 'var(--prizm-palette-gray-300)',
+  '--prizm-background-fill-overlay': 'var(--prizm-palette-gray-200)',
+  '--prizm-background-fill-blanket': '#0f11157f',
+  '--prizm-background-fill-reverse': 'var(--prizm-palette-gray-1100)',
+  '--prizm-background-stroke': 'var(--prizm-palette-gray-400)',
+  '--prizm-background-stroke-focus': 'var(--prizm-palette-blue-800)',
+  '--prizm-table-fill-header-default': 'var(--prizm-palette-gray-200)',
+  '--prizm-table-fill-header-hover': 'var(--prizm-palette-gray-h250)',
+  '--prizm-table-fill-row-zebra_default': 'var(--prizm-palette-gray-200)',
+  '--prizm-table-fill-row-hover': 'var(--prizm-palette-gray-h250)',
+  '--prizm-table-fill-row-active': 'var(--prizm-palette-blue-400)',
+  '--prizm-table-fill-cell-disable': 'var(--prizm-palette-gray-300)',
+  '--prizm-table-stroke-cell-default': 'var(--prizm-palette-gray-400)',
+  '--prizm-table-stroke-cell-hover': 'var(--prizm-palette-gray-h650)',
+  '--prizm-table-stroke-cell-active': 'var(--prizm-palette-blue-600)',
+  '--prizm-status-info-primary-default': 'var(--prizm-palette-blue-600)',
+  '--prizm-status-info-primary-hover': 'var(--prizm-palette-blue-h650)',
+  '--prizm-status-info-secondary-default': 'var(--prizm-palette-blue-300)',
+  '--prizm-status-info-secondary-hover': 'var(--prizm-palette-blue-h350)',
+  '--prizm-status-none-primary-default': 'var(--prizm-palette-gray-600)',
+  '--prizm-status-none-primary-hover': 'var(--prizm-palette-gray-h650)',
+  '--prizm-status-none-secondary-default': 'var(--prizm-palette-gray-300)',
+  '--prizm-status-none-secondary-hover': 'var(--prizm-palette-gray-h350)',
+  '--prizm-status-success-primary-default': 'var(--prizm-palette-green-600)',
+  '--prizm-status-success-primary-hover': 'var(--prizm-palette-green-h650)',
+  '--prizm-status-success-secondary-default': 'var(--prizm-palette-green-300)',
+  '--prizm-status-success-secondary-hover': 'var(--prizm-palette-green-h350)',
+  '--prizm-status-attention-primary-default': 'var(--prizm-palette-yellow-900)',
+  '--prizm-status-attention-primary-hover': 'var(--prizm-palette-yellow-h950)',
+  '--prizm-status-attention-secondary-default': 'var(--prizm-palette-yellow-300)',
+  '--prizm-status-attention-secondary-hover': 'var(--prizm-palette-yellow-h350)',
+  '--prizm-status-warning-primary-default': 'var(--prizm-palette-orange-800)',
+  '--prizm-status-warning-primary-hover': 'var(--prizm-palette-orange-h850)',
+  '--prizm-status-warning-secondary-default': 'var(--prizm-palette-orange-300)',
+  '--prizm-status-warning-secondary-hover': 'var(--prizm-palette-orange-h350)',
+  '--prizm-status-alarm-primary-default': 'var(--prizm-palette-red-600)',
+  '--prizm-status-alarm-primary-hover': 'var(--prizm-palette-red-h650)',
+  '--prizm-status-alarm-secondary-default': 'var(--prizm-palette-red-300)',
+  '--prizm-status-alarm-secondary-hover': 'var(--prizm-palette-red-h350)',
+  '--prizm-index-plan': '#4075ff',
+  '--prizm-index-fact': '#ffffff',
+  '--prizm-index-prognosis': 'var(--prizm-palette-gray-600)',
+  '--prizm-button-primary-solid-default': 'var(--prizm-palette-blue-600)',
+  '--prizm-button-primary-solid-hover': 'var(--prizm-palette-blue-h650)',
+  '--prizm-button-primary-solid-active': 'var(--prizm-palette-blue-700)',
+  '--prizm-button-primary-ghost-active': 'var(--prizm-palette-blue-400)',
+  '--prizm-button-secondary-solid-default': 'var(--prizm-palette-gray-600)',
+  '--prizm-button-secondary-solid-hover': 'var(--prizm-palette-gray-h650)',
+  '--prizm-button-secondary-solid-active': 'var(--prizm-palette-gray-700)',
+  '--prizm-button-secondary-ghost-active': 'var(--prizm-palette-gray-400)',
+  '--prizm-button-success-solid-default': 'var(--prizm-palette-green-600)',
+  '--prizm-button-success-solid-hover': 'var(--prizm-palette-green-h650)',
+  '--prizm-button-success-solid-active': 'var(--prizm-palette-green-700)',
+  '--prizm-button-success-ghost-active': 'var(--prizm-palette-green-400)',
+  '--prizm-button-warning-solid-default': 'var(--prizm-palette-orange-800)',
+  '--prizm-button-warning-solid-hover': 'var(--prizm-palette-orange-h850)',
+  '--prizm-button-warning-solid-active': 'var(--prizm-palette-orange-900)',
+  '--prizm-button-warning-ghost-active': 'var(--prizm-palette-orange-400)',
+  '--prizm-button-alarm-solid-default': 'var(--prizm-palette-red-600)',
+  '--prizm-button-alarm-solid-hover': 'var(--prizm-palette-red-h650)',
+  '--prizm-button-alarm-solid-active': 'var(--prizm-palette-red-700)',
+  '--prizm-button-alarm-ghost-active': 'var(--prizm-palette-red-400)',
+  '--prizm-button-ghost-hover': 'var(--prizm-palette-gray-h350)',
+  '--prizm-button-disable': 'var(--prizm-palette-gray-300)',
+  '--prizm-form-fill-default': 'var(--prizm-palette-0)',
+  '--prizm-form-fill-disable': 'var(--prizm-palette-0)',
+  '--prizm-form-stroke-default': 'var(--prizm-palette-gray-500)',
+  '--prizm-form-stroke-hover': 'var(--prizm-palette-gray-h650)',
+  '--prizm-form-stroke-disable': 'var(--prizm-palette-1200)',
+  '--prizm-form-active': 'var(--prizm-palette-blue-600)',
+  '--prizm-form-active-hover': 'var(--prizm-palette-blue-h650)',
+  '--prizm-form-active-disable': 'var(--prizm-palette-blue-400)',
+  '--prizm-chart-axis-default': 'var(--prizm-palette-gray-300)',
+  '--prizm-chart-axis-line-hover': 'var(--prizm-palette-1200)',
+  '--prizm-chart-axis-line-active': 'var(--prizm-palette-blue-600)',
+  '--prizm-chart-axis-area-hover': '#8a91a233',
+  '--prizm-chart-axis-area-active': '#436cee33',
+  '--prizm-chart-fill-blanket': '#8a91a233',
+  '--prizm-shadow-color': 'var(--prizm-palette-shadow-dark)',
+  '--prizm-shadow-big-top': '0px -8px 32px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-big-right': '8px 0px 32px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-big-left': '-8px 0px 32px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-big-bottom': '0px 8px 32px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-mini-top': '0px -2px 4px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-mini-right': '2px 0px 4px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-mini-left': '-2px 0px 4px 0px var(--prizm-shadow-color)',
+  '--prizm-shadow-mini-bottom': '0px 2px 4px 0px var(--prizm-shadow-color)',
+};
diff --git a/libs/theme/src/lib/services/theme.service.ts b/libs/theme/src/lib/services/theme.service.ts
index 96bd8f1172..3c5dd0ff72 100644
--- a/libs/theme/src/lib/services/theme.service.ts
+++ b/libs/theme/src/lib/services/theme.service.ts
@@ -79,4 +79,20 @@ export class PrizmThemeService implements OnDestroy {
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
+
+  public getTokenValue(token: string, el: HTMLElement | null = null): string | null {
+    el = el ?? this.rootElement;
+    console.log('#Mz getTokenValue', token, this.rootElement);
+    if (!el) return null;
+    const style = getComputedStyle(el);
+    return style.getPropertyValue(`--${token}`);
+  }
+
+  public updateTokenValue(token: string, value: string, el: HTMLElement | null = null): boolean {
+    el = el ?? this.rootElement;
+    if (!el) return false;
+    const style = el.style;
+    style.setProperty(`--${token}`, value);
+    return true;
+  }
 }
diff --git a/libs/theme/src/styles/theme/v3/dark.less b/libs/theme/src/styles/theme/v3/dark.less
deleted file mode 100644
index e69de29bb2..0000000000