From 372dfa2632585851131ed7173dbebc81ab598ecd Mon Sep 17 00:00:00 2001
From: jul-lam <julian.lamplmair.ext@siemens.com>
Date: Thu, 19 Dec 2024 09:22:35 +0100
Subject: [PATCH 1/4] feat(echarts): change theme names

---
 packages/echarts/src/index.ts                   |  4 ----
 packages/echarts/src/register.ts                | 17 ++++++-----------
 packages/echarts/src/themes/brand-dark.ts       |  2 +-
 packages/echarts/src/themes/brand-light.ts      |  2 +-
 .../src/themes/builder/brand-dark-tb.json       |  2 +-
 .../src/themes/builder/brand-light-tb.json      |  2 +-
 .../src/themes/builder/classic-dark-tb.json     |  2 +-
 .../src/themes/builder/classic-light-tb.json    |  2 +-
 packages/echarts/src/themes/classic-dark.ts     |  2 +-
 packages/echarts/src/themes/classic-light.ts    |  2 +-
 10 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/echarts/src/index.ts b/packages/echarts/src/index.ts
index c04f9c4577..6783adc0ea 100644
--- a/packages/echarts/src/index.ts
+++ b/packages/echarts/src/index.ts
@@ -13,7 +13,3 @@ export { default as brandDark } from './themes/brand-dark';
 export { default as brandLight } from './themes/brand-light';
 export { default as classicDark } from './themes/classic-dark';
 export { default as classicLight } from './themes/classic-light';
-
-export function convertThemeName(conventionalName: string) {
-  return conventionalName.replace('theme-', '');
-}
diff --git a/packages/echarts/src/register.ts b/packages/echarts/src/register.ts
index fbcbdfded4..74a14dc37f 100644
--- a/packages/echarts/src/register.ts
+++ b/packages/echarts/src/register.ts
@@ -8,10 +8,10 @@
  */
 
 import type { ECharts } from 'echarts';
-import brandDarkProject from './themes/brand-dark';
-import brandLightProject from './themes/brand-light';
-import classicDarkProject from './themes/classic-dark';
-import classicLightProject from './themes/classic-light';
+import brandDark from './themes/brand-dark';
+import brandLight from './themes/brand-light';
+import classicDark from './themes/classic-dark';
+import classicLight from './themes/classic-light';
 
 declare global {
   interface Window {
@@ -19,19 +19,14 @@ declare global {
   }
 }
 
-export default function registerEChartsThemes(echartsInstance?: any) {
+export default function registerTheme(echartsInstance?: any) {
   const echarts = echartsInstance ?? window.echarts;
 
   if (!echarts) {
     throw Error('echarts not found');
   }
 
-  [
-    classicDarkProject,
-    classicLightProject,
-    brandDarkProject,
-    brandLightProject,
-  ].forEach((themeBundle) => {
+  [classicDark, classicLight, brandDark, brandLight].forEach((themeBundle) => {
     echarts.registerTheme(themeBundle.themeName, themeBundle.theme);
   });
 }
diff --git a/packages/echarts/src/themes/brand-dark.ts b/packages/echarts/src/themes/brand-dark.ts
index 9996e21b8e..03ba4a2611 100644
--- a/packages/echarts/src/themes/brand-dark.ts
+++ b/packages/echarts/src/themes/brand-dark.ts
@@ -28,7 +28,7 @@ const colors = [
 ];
 
 export default {
-  themeName: 'brand-dark',
+  themeName: 'theme-brand-dark',
   theme: {
     color: colors,
     backgroundColor: 'rgba(0,0,0,0)',
diff --git a/packages/echarts/src/themes/brand-light.ts b/packages/echarts/src/themes/brand-light.ts
index 9abd468a3b..337dda726d 100644
--- a/packages/echarts/src/themes/brand-light.ts
+++ b/packages/echarts/src/themes/brand-light.ts
@@ -28,7 +28,7 @@ const colors = [
 ];
 
 export default {
-  themeName: 'brand-light',
+  themeName: 'theme-brand-light',
   theme: {
     color: colors,
     backgroundColor: 'rgba(0,0,0,0)',
diff --git a/packages/echarts/src/themes/builder/brand-dark-tb.json b/packages/echarts/src/themes/builder/brand-dark-tb.json
index e53923778d..26d5b9ddab 100644
--- a/packages/echarts/src/themes/builder/brand-dark-tb.json
+++ b/packages/echarts/src/themes/builder/brand-dark-tb.json
@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "themeName": "brand-dark",
+  "themeName": "theme-brand-dark",
   "theme": {
     "seriesCnt": 3,
     "backgroundColor": "transparent",
diff --git a/packages/echarts/src/themes/builder/brand-light-tb.json b/packages/echarts/src/themes/builder/brand-light-tb.json
index 5cf3d2f35f..16bb7c6c5a 100644
--- a/packages/echarts/src/themes/builder/brand-light-tb.json
+++ b/packages/echarts/src/themes/builder/brand-light-tb.json
@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "themeName": "brand-light",
+  "themeName": "theme-brand-light",
   "theme": {
     "seriesCnt": 3,
     "backgroundColor": "rgba(0,0,0,0)",
diff --git a/packages/echarts/src/themes/builder/classic-dark-tb.json b/packages/echarts/src/themes/builder/classic-dark-tb.json
index 02c9859801..ed221e6052 100644
--- a/packages/echarts/src/themes/builder/classic-dark-tb.json
+++ b/packages/echarts/src/themes/builder/classic-dark-tb.json
@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "themeName": "classic-dark",
+  "themeName": "theme-classic-dark",
   "theme": {
     "seriesCnt": 3,
     "backgroundColor": "rgba(0,0,0,0)",
diff --git a/packages/echarts/src/themes/builder/classic-light-tb.json b/packages/echarts/src/themes/builder/classic-light-tb.json
index 53dd6c3958..83a8e558ee 100644
--- a/packages/echarts/src/themes/builder/classic-light-tb.json
+++ b/packages/echarts/src/themes/builder/classic-light-tb.json
@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "themeName": "classic-light",
+  "themeName": "theme-classic-light",
   "theme": {
     "seriesCnt": 3,
     "backgroundColor": "rgba(0,0,0,0)",
diff --git a/packages/echarts/src/themes/classic-dark.ts b/packages/echarts/src/themes/classic-dark.ts
index 266f23c037..7946abf5f8 100644
--- a/packages/echarts/src/themes/classic-dark.ts
+++ b/packages/echarts/src/themes/classic-dark.ts
@@ -28,7 +28,7 @@ const colors = [
 ];
 
 export default {
-  themeName: 'classic-dark',
+  themeName: 'theme-classic-dark',
   theme: {
     color: colors,
     backgroundColor: 'rgba(0,0,0,0)',
diff --git a/packages/echarts/src/themes/classic-light.ts b/packages/echarts/src/themes/classic-light.ts
index 38a2b882f1..9d76aa14b7 100644
--- a/packages/echarts/src/themes/classic-light.ts
+++ b/packages/echarts/src/themes/classic-light.ts
@@ -28,7 +28,7 @@ const colors = [
 ];
 
 export default {
-  themeName: 'classic-light',
+  themeName: 'theme-classic-light',
   theme: {
     color: colors,
     backgroundColor: 'rgba(0,0,0,0)',

From ac16bc8b9e09866f1c30db221f2bf5255757707a Mon Sep 17 00:00:00 2001
From: jul-lam <julian.lamplmair.ext@siemens.com>
Date: Thu, 19 Dec 2024 09:23:37 +0100
Subject: [PATCH 2/4] test(echarts): adapt theme logic

---
 packages/echarts/tests/basic.html       |  6 ++----
 packages/echarts/tests/more-colors.html | 14 ++++++--------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/echarts/tests/basic.html b/packages/echarts/tests/basic.html
index ab030c6861..da4677b62b 100644
--- a/packages/echarts/tests/basic.html
+++ b/packages/echarts/tests/basic.html
@@ -37,12 +37,10 @@
         const searchParams = new URLSearchParams(location.search);
 
         if (!searchParams.has('theme')) {
-          return 'brand-dark';
+          return 'theme-brand-dark';
         }
 
-        const theme = searchParams.get('theme');
-
-        return theme.substring('theme-'.length, theme.length);
+        return searchParams.get('theme');
       }
 
       registerTheme(echarts);
diff --git a/packages/echarts/tests/more-colors.html b/packages/echarts/tests/more-colors.html
index 997aa0037b..66550a9b21 100644
--- a/packages/echarts/tests/more-colors.html
+++ b/packages/echarts/tests/more-colors.html
@@ -39,12 +39,10 @@
         const searchParams = new URLSearchParams(location.search);
 
         if (!searchParams.has('theme')) {
-          return 'brand-dark';
+          return 'theme-brand-dark';
         }
 
-        const theme = searchParams.get('theme');
-
-        return theme.substring('theme-'.length, theme.length);
+        return searchParams.get('theme');
       }
 
       registerTheme(echarts);
@@ -185,7 +183,7 @@
       };
 
       switch (theme) {
-        case 'classic-dark':
+        case 'theme-classic-dark':
           options.color = [
             '#EF9A9A' /* theme-chart-14 */,
             '#F38FC2' /* theme-chart-13 */,
@@ -198,7 +196,7 @@
           ];
           break;
 
-        case 'classic-light':
+        case 'theme-classic-light':
           options.color = [
             '#9E5833' /* theme-chart-14 */,
             '#6F2542' /* theme-chart-13 */,
@@ -211,7 +209,7 @@
           ];
           break;
 
-        case 'brand-dark':
+        case 'theme-brand-dark':
           options.color = [
             '#BE5925' /* theme-chart-14 */,
             '#FF98C4' /* theme-chart-13 */,
@@ -224,7 +222,7 @@
           ];
           break;
 
-        case 'brand-light':
+        case 'theme-brand-light':
           options.color = [
             '#BE5925' /* theme-chart-14 */,
             '#4F153D' /* theme-chart-13 */,

From 6d47f23b10e2da5582922ee1ccee16702b933abc Mon Sep 17 00:00:00 2001
From: jul-lam <julian.lamplmair.ext@siemens.com>
Date: Thu, 19 Dec 2024 09:24:16 +0100
Subject: [PATCH 3/4] docs(echarts): adapt theme logic in examples

---
 .../echarts-bar-horizontal-stacked.ts         |  6 ++---
 .../preview-examples/echarts-bar-simple.ts    | 17 ++++++++----
 .../src/preview-examples/echarts-circle.ts    | 12 +++------
 .../preview-examples/echarts-empty-state.ts   |  6 ++---
 .../src/preview-examples/echarts-gauge.ts     | 12 +++------
 .../preview-examples/echarts-line-advanced.ts | 12 +++------
 .../echarts-line-multiple-y-axis.ts           | 12 +++------
 .../preview-examples/echarts-line-simple.ts   |  8 +++---
 .../src/preview-examples/echarts-pie.ts       |  8 +++---
 .../preview-examples/echarts-progress-arc.ts  | 16 ++++-------
 .../echarts-progress-circle.ts                | 16 ++++-------
 .../preview-examples/echarts-special-3d.ts    |  6 ++---
 .../echarts-special-toolbox.ts                |  8 +++---
 .../preview-examples/echarts-special-zoom.ts  | 10 +++----
 .../src/preview-examples/echarts.ts           |  6 ++---
 .../echarts-bar-horizontal-stacked.html       |  9 +++----
 .../preview-examples/echarts-bar-simple.html  |  9 +++----
 .../src/preview-examples/echarts-circle.html  |  8 ++----
 .../preview-examples/echarts-empty-state.html |  9 +++----
 .../src/preview-examples/echarts-gauge.html   | 11 +++-----
 .../echarts-line-advanced.html                |  8 ++----
 .../echarts-line-multiple-y-axis.html         |  8 ++----
 .../preview-examples/echarts-line-simple.html |  9 +++----
 .../src/preview-examples/echarts-pie.html     |  8 ++----
 .../echarts-progress-arc.html                 |  8 ++----
 .../echarts-progress-circle.html              |  8 ++----
 .../preview-examples/echarts-special-3d.html  |  8 ++----
 .../echarts-special-toolbox.html              |  9 +++----
 .../echarts-special-zoom.html                 |  8 ++----
 .../src/preview-examples/echarts.html         |  9 +++----
 .../echarts-bar-horizontal-stacked.tsx        |  8 +++---
 .../preview-examples/echarts-bar-simple.tsx   | 17 +++++++-----
 .../src/preview-examples/echarts-circle.tsx   |  8 +++---
 .../preview-examples/echarts-empty-state.tsx  |  8 +++---
 .../src/preview-examples/echarts-gauge.tsx    | 12 +++------
 .../echarts-line-advanced.tsx                 | 12 ++++-----
 .../echarts-line-multiple-y-axis.tsx          | 12 +++------
 .../preview-examples/echarts-line-simple.tsx  |  8 +++---
 .../src/preview-examples/echarts-pie.tsx      |  8 +++---
 .../preview-examples/echarts-progress-arc.tsx | 12 +++------
 .../echarts-progress-circle.tsx               | 12 +++------
 .../preview-examples/echarts-special-3d.tsx   | 12 +++------
 .../echarts-special-toolbox.tsx               | 10 +++----
 .../preview-examples/echarts-special-zoom.tsx | 12 +++------
 .../src/preview-examples/echarts.tsx          |  8 +++---
 .../echarts-bar-horizontal-stacked.vue        | 27 ++++++++++---------
 .../preview-examples/echarts-bar-simple.vue   |  6 ++---
 .../src/preview-examples/echarts-circle.vue   | 10 +++----
 .../preview-examples/echarts-empty-state.vue  |  6 ++---
 .../src/preview-examples/echarts-gauge.vue    | 10 +++----
 .../echarts-line-advanced.vue                 | 10 +++----
 .../echarts-line-multiple-y-axis.vue          |  8 ++----
 .../preview-examples/echarts-line-simple.vue  |  8 +++---
 .../src/preview-examples/echarts-pie.vue      | 10 +++----
 .../preview-examples/echarts-progress-arc.vue | 17 ++++++------
 .../echarts-progress-circle.vue               | 17 +++++++-----
 .../preview-examples/echarts-special-3d.vue   | 13 +++------
 .../echarts-special-toolbox.vue               |  9 +++----
 .../preview-examples/echarts-special-zoom.vue | 10 +++----
 .../src/preview-examples/echarts.vue          |  6 ++---
 60 files changed, 233 insertions(+), 377 deletions(-)

diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts
index a0cf01339c..a893433682 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { BarSeriesOption, EChartsOption } from 'echarts';
@@ -19,7 +19,7 @@ import { BarSeriesOption, EChartsOption } from 'echarts';
   styleUrls: ['./echarts-bar-horizontal-stacked.css'],
 })
 export default class EchartsBarHorizontalStacked implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   data = {
     years: ['2023', '2022', '2021', '2020', '2019'],
@@ -66,7 +66,7 @@ export default class EchartsBarHorizontalStacked implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts
index a98ac0f89c..7bac240bd8 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -16,12 +16,19 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-bar-simple.html',
-  styleUrls: ["./echarts-bar-simple.css"],
+  styleUrls: ['./echarts-bar-simple.css'],
 })
 export default class EchartsBarSimple implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
   data = {
-    products: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E', 'Product F'],
+    products: [
+      'Product A',
+      'Product B',
+      'Product C',
+      'Product D',
+      'Product E',
+      'Product F',
+    ],
     sales: [10.3, 9.2, 7.3, 6.4, 6.2, 4.4],
   };
 
@@ -50,7 +57,7 @@ export default class EchartsBarSimple implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-circle.ts
index 23277599f9..a00ab76a12 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-circle.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-circle.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -20,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-circle.html',
-  styleUrls: ["./echarts-circle.css"],
+  styleUrls: ['./echarts-circle.css'],
 })
 export default class EchartsCircle implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   data = [
     { value: 72.17, name: 'Windows' },
@@ -70,7 +66,7 @@ export default class EchartsCircle implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts
index f63450d51f..46c5bff7c3 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -19,7 +19,7 @@ import { EChartsOption } from 'echarts';
   styleUrls: ['./echarts-empty-state.css'],
 })
 export default class EchartsLineSimple implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
   data = {
     weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     value: [],
@@ -45,7 +45,7 @@ export default class EchartsLineSimple implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts
index 64e18a0b98..2ccecc4f38 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -20,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-gauge.html',
-  styleUrls: ["./echarts-gauge.css"],
+  styleUrls: ['./echarts-gauge.css'],
 })
 export default class EchartsGauge implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   value = 45.3;
 
@@ -132,7 +128,7 @@ export default class EchartsGauge implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts
index 3921aceeb2..b64bd72531 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  registerTheme,
-  getComputedCSSProperty,
-} from '@siemens/ix-echarts';
+import { registerTheme, getComputedCSSProperty } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -20,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-line-advanced.html',
-  styleUrls: ["./echarts-line-advanced.css"],
+  styleUrls: ['./echarts-line-advanced.css'],
 })
 export default class EchartsLineAdvanced implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   dates = Array.from({ length: 2025 - 2013 }, (_, i) => (2013 + i).toString());
 
@@ -76,7 +72,7 @@ export default class EchartsLineAdvanced implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts
index 89f9405a25..92046c89cd 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption, SeriesOption } from 'echarts';
@@ -21,10 +17,10 @@ import { YAXisOption } from 'echarts/types/dist/shared';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-line-multiple-y-axis.html',
-  styleUrls: ["./echarts-line-multiple-y-axis.css"],
+  styleUrls: ['./echarts-line-multiple-y-axis.css'],
 })
 export default class EchartsLineMultipleYAxis implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   dates = Array.from({ length: 2025 - 2013 }, (_, i) => (2013 + i).toString());
 
@@ -169,7 +165,7 @@ export default class EchartsLineMultipleYAxis implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts
index 6d1365d285..0c87806859 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -16,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-line-simple.html',
-  styleUrls: ["./echarts-line-simple.css"],
+  styleUrls: ['./echarts-line-simple.css'],
 })
 export default class EchartsLineSimple implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   data = {
     weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -48,7 +48,7 @@ export default class EchartsLineSimple implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-pie.ts b/packages/angular-test-app/src/preview-examples/echarts-pie.ts
index e3073392c5..0c5c1ad1f6 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-pie.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-pie.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -16,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-pie.html',
-  styleUrls: ["./echarts-pie.css"],
+  styleUrls: ['./echarts-pie.css'],
 })
 export default class EchartsPie implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   data = [
     { value: 29.4, name: 'China' },
@@ -65,7 +65,7 @@ export default class EchartsPie implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts
index c717037f05..bf1cfb5af4 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -20,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-progress-arc.html',
-  styleUrls: ["./echarts-progress-arc.css"],
+  styleUrls: ['./echarts-progress-arc.css'],
 })
 export default class EchartsProgressArc implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   value = 60;
 
@@ -36,9 +32,7 @@ export default class EchartsProgressArc implements OnInit {
           show: true,
           lineStyle: {
             width: 15,
-            color: [
-              [1, getComputedCSSProperty('color-neutral-40')],
-            ],
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
           },
         },
         axisTick: {
@@ -91,7 +85,7 @@ export default class EchartsProgressArc implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts
index f634dd31b6..1ef2f6609e 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -20,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-progress-circle.html',
-  styleUrls: ["./echarts-progress-circle.css"],
+  styleUrls: ['./echarts-progress-circle.css'],
 })
 export default class EchartsProgressCircle implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   value = 60;
 
@@ -36,9 +32,7 @@ export default class EchartsProgressCircle implements OnInit {
           show: true,
           lineStyle: {
             width: 15,
-            color: [
-              [1, getComputedCSSProperty('color-neutral-40')],
-            ],
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
           },
         },
         axisTick: {
@@ -99,7 +93,7 @@ export default class EchartsProgressCircle implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts
index 62d2395f76..0ff45b1687 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, getComputedCSSProperty } from '@siemens/ix-echarts';
+import { getComputedCSSProperty } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import { EChartsOption } from 'echarts';
 
@@ -22,7 +22,7 @@ import * as _ from 'echarts-gl/dist/echarts-gl';
   styleUrls: ['./echarts-special-3d.css'],
 })
 export default class EchartsSpecial3d implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   gridConfig() {
     return {
@@ -82,7 +82,7 @@ export default class EchartsSpecial3d implements OnInit {
 
   ngOnInit() {
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts
index 7a7be99c68..1e51b8be36 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -16,10 +16,10 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-special-toolbox.html',
-  styleUrls: ["./echarts-special-toolbox.css"],
+  styleUrls: ['./echarts-special-toolbox.css'],
 })
 export default class EchartsSpecialToolbox implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   options: EChartsOption = {
     toolbox: {
@@ -57,7 +57,7 @@ export default class EchartsSpecialToolbox implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts
index 82bbc95544..7294587b11 100644
--- a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts
@@ -8,11 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-  convertThemeName,
-  registerTheme,
-  getComputedCSSProperty,
-} from '@siemens/ix-echarts';
+import { registerTheme, getComputedCSSProperty } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts/core';
 import { EChartsOption } from 'echarts';
@@ -23,7 +19,7 @@ import { EChartsOption } from 'echarts';
   styleUrls: ['./echarts-special-zoom.css'],
 })
 export default class EchartsSpecialZoom implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   //create some random data
   private base = +new Date(1968, 9, 3);
@@ -99,7 +95,7 @@ export default class EchartsSpecialZoom implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/echarts.ts b/packages/angular-test-app/src/preview-examples/echarts.ts
index 60caad60a4..845473f211 100644
--- a/packages/angular-test-app/src/preview-examples/echarts.ts
+++ b/packages/angular-test-app/src/preview-examples/echarts.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
@@ -19,7 +19,7 @@ import { EChartsOption } from 'echarts';
   styleUrls: ['./echarts.css'],
 })
 export default class Echarts implements OnInit {
-  theme = convertThemeName(themeSwitcher.getCurrentTheme());
+  theme = themeSwitcher.getCurrentTheme();
 
   options: EChartsOption = {
     tooltip: {
@@ -144,7 +144,7 @@ export default class Echarts implements OnInit {
     registerTheme(echarts);
 
     themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = convertThemeName(theme);
+      this.theme = theme;
     });
   }
 }
diff --git a/packages/html-test-app/src/preview-examples/echarts-bar-horizontal-stacked.html b/packages/html-test-app/src/preview-examples/echarts-bar-horizontal-stacked.html
index 753a5b3183..7d9c079d29 100644
--- a/packages/html-test-app/src/preview-examples/echarts-bar-horizontal-stacked.html
+++ b/packages/html-test-app/src/preview-examples/echarts-bar-horizontal-stacked.html
@@ -18,18 +18,15 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-bar-simple.html b/packages/html-test-app/src/preview-examples/echarts-bar-simple.html
index 751405e8af..6563f9e2af 100644
--- a/packages/html-test-app/src/preview-examples/echarts-bar-simple.html
+++ b/packages/html-test-app/src/preview-examples/echarts-bar-simple.html
@@ -18,18 +18,15 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-circle.html b/packages/html-test-app/src/preview-examples/echarts-circle.html
index edd66dcb7b..2d1a907be6 100644
--- a/packages/html-test-app/src/preview-examples/echarts-circle.html
+++ b/packages/html-test-app/src/preview-examples/echarts-circle.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-empty-state.html b/packages/html-test-app/src/preview-examples/echarts-empty-state.html
index 2b912e0ade..7cecba5899 100644
--- a/packages/html-test-app/src/preview-examples/echarts-empty-state.html
+++ b/packages/html-test-app/src/preview-examples/echarts-empty-state.html
@@ -18,7 +18,7 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div class="echarts">
       <div id="empty-state-container" class="empty-state-container">
         <ix-empty-state
@@ -33,14 +33,11 @@
     </div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-gauge.html b/packages/html-test-app/src/preview-examples/echarts-gauge.html
index 21d4e98588..25e4693ff4 100644
--- a/packages/html-test-app/src/preview-examples/echarts-gauge.html
+++ b/packages/html-test-app/src/preview-examples/echarts-gauge.html
@@ -18,23 +18,20 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         registerTheme,
         getComputedCSSProperty,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme),
-          { renderer: 'svg' }
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme, {
+          renderer: 'svg',
+        });
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-line-advanced.html b/packages/html-test-app/src/preview-examples/echarts-line-advanced.html
index 0a168bd606..8284442dae 100644
--- a/packages/html-test-app/src/preview-examples/echarts-line-advanced.html
+++ b/packages/html-test-app/src/preview-examples/echarts-line-advanced.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         registerTheme,
         getComputedCSSProperty,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html
index 26baf7a3d7..964db61c48 100644
--- a/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html
+++ b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-line-simple.html b/packages/html-test-app/src/preview-examples/echarts-line-simple.html
index 90fb38ebfd..b92e6920d6 100644
--- a/packages/html-test-app/src/preview-examples/echarts-line-simple.html
+++ b/packages/html-test-app/src/preview-examples/echarts-line-simple.html
@@ -18,18 +18,15 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-pie.html b/packages/html-test-app/src/preview-examples/echarts-pie.html
index 3293493b4e..c5e817d9a3 100644
--- a/packages/html-test-app/src/preview-examples/echarts-pie.html
+++ b/packages/html-test-app/src/preview-examples/echarts-pie.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-arc.html b/packages/html-test-app/src/preview-examples/echarts-progress-arc.html
index fe9db2e33f..8c71bcbcf6 100644
--- a/packages/html-test-app/src/preview-examples/echarts-progress-arc.html
+++ b/packages/html-test-app/src/preview-examples/echarts-progress-arc.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts-gauge"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-circle.html b/packages/html-test-app/src/preview-examples/echarts-progress-circle.html
index 515fb58350..23377d18b6 100644
--- a/packages/html-test-app/src/preview-examples/echarts-progress-circle.html
+++ b/packages/html-test-app/src/preview-examples/echarts-progress-circle.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts-gauge"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-special-3d.html b/packages/html-test-app/src/preview-examples/echarts-special-3d.html
index 625a9babb6..5ac9f9fc05 100644
--- a/packages/html-test-app/src/preview-examples/echarts-special-3d.html
+++ b/packages/html-test-app/src/preview-examples/echarts-special-3d.html
@@ -19,22 +19,18 @@
     <script src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         getComputedCSSProperty,
         registerTheme,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html
index cf307ccc10..6d26b30b38 100644
--- a/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html
+++ b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html
@@ -18,11 +18,11 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       const data = {
@@ -31,10 +31,7 @@
       };
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts-special-zoom.html b/packages/html-test-app/src/preview-examples/echarts-special-zoom.html
index b74285f1e4..bf5713faf2 100644
--- a/packages/html-test-app/src/preview-examples/echarts-special-zoom.html
+++ b/packages/html-test-app/src/preview-examples/echarts-special-zoom.html
@@ -18,22 +18,18 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
       import {
-        convertThemeName,
         registerTheme,
         getComputedCSSProperty,
       } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/html-test-app/src/preview-examples/echarts.html b/packages/html-test-app/src/preview-examples/echarts.html
index 22711b5429..f495c4a24a 100644
--- a/packages/html-test-app/src/preview-examples/echarts.html
+++ b/packages/html-test-app/src/preview-examples/echarts.html
@@ -18,18 +18,15 @@
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <!-- External resources -->
   </head>
-  <body>
+  <body class="theme-classic-dark">
     <div id="main" class="echarts"></div>
 
     <script type="module">
-      import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+      import { registerTheme } from '@siemens/ix-echarts';
       import { themeSwitcher } from '@siemens/ix';
 
       function initChart(theme, options) {
-        var myChart = echarts.init(
-          document.querySelector('#main'),
-          convertThemeName(theme)
-        );
+        var myChart = echarts.init(document.querySelector('#main'), theme);
         myChart.setOption(options);
 
         return myChart;
diff --git a/packages/react-test-app/src/preview-examples/echarts-bar-horizontal-stacked.tsx b/packages/react-test-app/src/preview-examples/echarts-bar-horizontal-stacked.tsx
index c32ab0633b..9224f02d66 100644
--- a/packages/react-test-app/src/preview-examples/echarts-bar-horizontal-stacked.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-bar-horizontal-stacked.tsx
@@ -10,7 +10,7 @@
 import './echarts-bar-horizontal-stacked.scoped.css';
 
 import { useEffect, useState } from 'react';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { BarSeriesOption, EChartsOption } from 'echarts';
 export default function EchartsBarHorizontalStacked() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-bar-simple.tsx b/packages/react-test-app/src/preview-examples/echarts-bar-simple.tsx
index 741c36349c..4036901821 100644
--- a/packages/react-test-app/src/preview-examples/echarts-bar-simple.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-bar-simple.tsx
@@ -10,7 +10,7 @@
 import './echarts-bar-simple.scoped.css';
 
 import { useEffect, useState } from 'react';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,18 +19,23 @@ import { EChartsOption } from 'echarts';
 export default function EchartsBarSimple() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
   const data = {
-    products: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E', 'Product F'],
+    products: [
+      'Product A',
+      'Product B',
+      'Product C',
+      'Product D',
+      'Product E',
+      'Product F',
+    ],
     sales: [10.3, 9.2, 7.3, 6.4, 6.2, 4.4],
   };
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-circle.tsx b/packages/react-test-app/src/preview-examples/echarts-circle.tsx
index e2f949f61c..6cbc2755b0 100644
--- a/packages/react-test-app/src/preview-examples/echarts-circle.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-circle.tsx
@@ -10,7 +10,7 @@
 import './echarts-circle.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsCircle() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-empty-state.tsx b/packages/react-test-app/src/preview-examples/echarts-empty-state.tsx
index ac9487c717..ceb68e6422 100644
--- a/packages/react-test-app/src/preview-examples/echarts-empty-state.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-empty-state.tsx
@@ -10,7 +10,7 @@
 import './echarts-empty-state.scoped.css';
 
 import { useEffect, useState } from 'react';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -20,13 +20,11 @@ import { IxEmptyState } from '@siemens/ix-react';
 export default function Echarts() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-gauge.tsx b/packages/react-test-app/src/preview-examples/echarts-gauge.tsx
index 400e023081..a1ede38c45 100644
--- a/packages/react-test-app/src/preview-examples/echarts-gauge.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-gauge.tsx
@@ -10,11 +10,7 @@
 import './echarts-gauge.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -23,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsGauge() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-line-advanced.tsx b/packages/react-test-app/src/preview-examples/echarts-line-advanced.tsx
index 300899e58d..24b5f5d560 100644
--- a/packages/react-test-app/src/preview-examples/echarts-line-advanced.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-line-advanced.tsx
@@ -10,7 +10,7 @@
 import './echarts-line-advanced.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,17 +19,17 @@ import { EChartsOption } from 'echarts';
 export default function EchartsLineAdvanced() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
-  const dates = Array.from({ length: 2025 - 2013 }, (_, i) => (2013 + i).toString());
+  const dates = Array.from({ length: 2025 - 2013 }, (_, i) =>
+    (2013 + i).toString()
+  );
 
   const stockData = [
     77.67, 82.81, 84.09, 91.75, 118.15, 107.48, 99.36, 93.07, 137.18, 104.38,
diff --git a/packages/react-test-app/src/preview-examples/echarts-line-multiple-y-axis.tsx b/packages/react-test-app/src/preview-examples/echarts-line-multiple-y-axis.tsx
index 01486f68b1..82f31fd6f6 100644
--- a/packages/react-test-app/src/preview-examples/echarts-line-multiple-y-axis.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-line-multiple-y-axis.tsx
@@ -10,11 +10,7 @@
 import './echarts-line-multiple-y-axis.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -24,13 +20,11 @@ import { YAXisOption } from 'echarts/types/dist/shared';
 export default function EchartsLineMultipleYAxis() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-line-simple.tsx b/packages/react-test-app/src/preview-examples/echarts-line-simple.tsx
index 46d2bca8a2..9c59584398 100644
--- a/packages/react-test-app/src/preview-examples/echarts-line-simple.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-line-simple.tsx
@@ -10,7 +10,7 @@
 import './echarts-line-simple.scoped.css';
 
 import { useEffect, useState } from 'react';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsLineSimple() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-pie.tsx b/packages/react-test-app/src/preview-examples/echarts-pie.tsx
index 1c44a9be72..0a4651b6f7 100644
--- a/packages/react-test-app/src/preview-examples/echarts-pie.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-pie.tsx
@@ -10,7 +10,7 @@
 import './echarts-pie.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsPie() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-progress-arc.tsx b/packages/react-test-app/src/preview-examples/echarts-progress-arc.tsx
index 3a92bdb7d9..92bb10e1a6 100644
--- a/packages/react-test-app/src/preview-examples/echarts-progress-arc.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-progress-arc.tsx
@@ -10,7 +10,7 @@
 import './echarts-progress-arc.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsProgressArc() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
@@ -40,9 +38,7 @@ export default function EchartsProgressArc() {
           show: true,
           lineStyle: {
             width: 15,
-            color: [
-              [1, getComputedCSSProperty('color-neutral-40')],
-            ],
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
           },
         },
         axisTick: {
diff --git a/packages/react-test-app/src/preview-examples/echarts-progress-circle.tsx b/packages/react-test-app/src/preview-examples/echarts-progress-circle.tsx
index 6bb32ca85c..b465255804 100644
--- a/packages/react-test-app/src/preview-examples/echarts-progress-circle.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-progress-circle.tsx
@@ -10,7 +10,7 @@
 import './echarts-progress-circle.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsGauge() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
@@ -40,9 +38,7 @@ export default function EchartsGauge() {
           show: true,
           lineStyle: {
             width: 15,
-            color: [
-              [1, getComputedCSSProperty('color-neutral-40')],
-            ],
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
           },
         },
         axisTick: {
diff --git a/packages/react-test-app/src/preview-examples/echarts-special-3d.tsx b/packages/react-test-app/src/preview-examples/echarts-special-3d.tsx
index 2d1e5d9f19..22771beeb2 100644
--- a/packages/react-test-app/src/preview-examples/echarts-special-3d.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-special-3d.tsx
@@ -10,11 +10,7 @@
 import './echarts-special-3d.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -24,13 +20,11 @@ import 'echarts-gl';
 export default function EchartsSpecial3d() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts-special-toolbox.tsx b/packages/react-test-app/src/preview-examples/echarts-special-toolbox.tsx
index daf0736ad9..ee5a73763d 100644
--- a/packages/react-test-app/src/preview-examples/echarts-special-toolbox.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-special-toolbox.tsx
@@ -10,7 +10,7 @@
 import './echarts-special-toolbox.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {convertThemeName, registerTheme} from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,20 +19,18 @@ import { EChartsOption } from 'echarts';
 export default function EchartsSpecialToolbox() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
   const data = {
     months: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     values: [150, 230, 224, 218, 135, 147, 260],
-  }
+  };
 
   const options: EChartsOption = {
     toolbox: {
diff --git a/packages/react-test-app/src/preview-examples/echarts-special-zoom.tsx b/packages/react-test-app/src/preview-examples/echarts-special-zoom.tsx
index 3de03a9846..9e1c13ade0 100644
--- a/packages/react-test-app/src/preview-examples/echarts-special-zoom.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts-special-zoom.tsx
@@ -10,11 +10,7 @@
 import './echarts-special-zoom.scoped.css';
 
 import { useEffect, useState } from 'react';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -23,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function EchartsSpecialZoom() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/react-test-app/src/preview-examples/echarts.tsx b/packages/react-test-app/src/preview-examples/echarts.tsx
index 17a17b9c7f..d8a8dcd33b 100644
--- a/packages/react-test-app/src/preview-examples/echarts.tsx
+++ b/packages/react-test-app/src/preview-examples/echarts.tsx
@@ -10,7 +10,7 @@
 import './echarts.scoped.css';
 
 import { useEffect, useState } from 'react';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -19,13 +19,11 @@ import { EChartsOption } from 'echarts';
 export default function Echarts() {
   registerTheme(echarts);
 
-  const [theme, setTheme] = useState(
-    convertThemeName(themeSwitcher.getCurrentTheme())
-  );
+  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
 
   useEffect(() => {
     themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(convertThemeName(theme));
+      setTheme(theme);
     });
   }, []);
 
diff --git a/packages/vue-test-app/src/preview-examples/echarts-bar-horizontal-stacked.vue b/packages/vue-test-app/src/preview-examples/echarts-bar-horizontal-stacked.vue
index c3f8be36a5..f2f9ffb248 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-bar-horizontal-stacked.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-bar-horizontal-stacked.vue
@@ -9,14 +9,14 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {convertThemeName, registerTheme} from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
 import * as charts from 'echarts/charts';
 import * as components from 'echarts/components';
 import * as renderer from 'echarts/renderers';
-import {BarSeriesOption, EChartsOption} from 'echarts';
+import { BarSeriesOption, EChartsOption } from 'echarts';
 
 echarts.use([
   components.TooltipComponent,
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = {
@@ -48,12 +48,15 @@ const seriesData = [
   { name: 'China', data: data.salesChina },
 ];
 
-const series = seriesData.map(({ name, data }) => ({
-  name,
-  data,
-  type: 'bar',
-  stack: 'x',
-} as BarSeriesOption));
+const series = seriesData.map(
+  ({ name, data }) =>
+    ({
+      name,
+      data,
+      type: 'bar',
+      stack: 'x',
+    } as BarSeriesOption)
+);
 
 const options: EChartsOption = {
   xAxis: {
@@ -80,7 +83,5 @@ const options: EChartsOption = {
 <style scoped src="./echarts-bar-horizontal-stacked.css"></style>
 
 <template>
-    <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
+  <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
 </template>
-
-
diff --git a/packages/vue-test-app/src/preview-examples/echarts-bar-simple.vue b/packages/vue-test-app/src/preview-examples/echarts-bar-simple.vue
index a5adcca733..665f860969 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-bar-simple.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-bar-simple.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = {
diff --git a/packages/vue-test-app/src/preview-examples/echarts-circle.vue b/packages/vue-test-app/src/preview-examples/echarts-circle.vue
index 18cdd87942..19abdf8a47 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-circle.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-circle.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -33,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = [
diff --git a/packages/vue-test-app/src/preview-examples/echarts-empty-state.vue b/packages/vue-test-app/src/preview-examples/echarts-empty-state.vue
index d913f971e7..faa0f1b38c 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-empty-state.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-empty-state.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -30,10 +30,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = {
diff --git a/packages/vue-test-app/src/preview-examples/echarts-gauge.vue b/packages/vue-test-app/src/preview-examples/echarts-gauge.vue
index fc2c6fd580..4be16eb36e 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-gauge.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-gauge.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const value = 45.3;
@@ -54,9 +54,7 @@ const options: EChartsOption = {
         show: true,
         lineStyle: {
           width: 18,
-          color: [
-            [1, getComputedCSSProperty('color-neutral-40')],
-          ],
+          color: [[1, getComputedCSSProperty('color-neutral-40')]],
         },
       },
       axisTick: {
diff --git a/packages/vue-test-app/src/preview-examples/echarts-line-advanced.vue b/packages/vue-test-app/src/preview-examples/echarts-line-advanced.vue
index c72c2ec063..ccf15eacb7 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-line-advanced.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-line-advanced.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -34,10 +30,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const dates = Array.from({ length: 2025 - 2013 }, (_, i) =>
diff --git a/packages/vue-test-app/src/preview-examples/echarts-line-multiple-y-axis.vue b/packages/vue-test-app/src/preview-examples/echarts-line-multiple-y-axis.vue
index 77ea864559..f74a5a581e 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-line-multiple-y-axis.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-line-multiple-y-axis.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -34,7 +30,7 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 const dates = Array.from({ length: 2025 - 2013 }, (_, i) =>
   (2013 + i).toString()
diff --git a/packages/vue-test-app/src/preview-examples/echarts-line-simple.vue b/packages/vue-test-app/src/preview-examples/echarts-line-simple.vue
index 4af628c9ea..98311ee459 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-line-simple.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-line-simple.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = {
@@ -62,5 +62,5 @@ const options = {
 <style scoped src="./echarts-line-simple.css"></style>
 
 <template>
-    <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
+  <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/echarts-pie.vue b/packages/vue-test-app/src/preview-examples/echarts-pie.vue
index 6541aad591..f5da1aa8d4 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-pie.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-pie.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -33,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = [
diff --git a/packages/vue-test-app/src/preview-examples/echarts-progress-arc.vue b/packages/vue-test-app/src/preview-examples/echarts-progress-arc.vue
index fbf3933829..28574978e0 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-progress-arc.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-progress-arc.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -33,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const value = 60;
@@ -103,5 +99,10 @@ const options = {
 <style scoped src="./echarts-progress-arc.css"></style>
 
 <template>
-  <VueECharts :theme="theme" :option="options" autoresize class="echarts-gauge"></VueECharts>
+  <VueECharts
+    :theme="theme"
+    :option="options"
+    autoresize
+    class="echarts-gauge"
+  ></VueECharts>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/echarts-progress-circle.vue b/packages/vue-test-app/src/preview-examples/echarts-progress-circle.vue
index a39557830a..9293c2c965 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-progress-circle.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-progress-circle.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {convertThemeName, getComputedCSSProperty, registerTheme} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const value = 60;
@@ -46,9 +46,7 @@ const options: EChartsOption = {
         show: true,
         lineStyle: {
           width: 15,
-          color: [
-            [1, getComputedCSSProperty('color-neutral-40')],
-          ],
+          color: [[1, getComputedCSSProperty('color-neutral-40')]],
         },
       },
       axisTick: {
@@ -109,5 +107,10 @@ const options: EChartsOption = {
 <style scoped src="./echarts-progress-circle.css"></style>
 
 <template>
-    <VueECharts :theme="theme" :option="options" autoresize class="echarts-gauge"></VueECharts>
+  <VueECharts
+    :theme="theme"
+    :option="options"
+    autoresize
+    class="echarts-gauge"
+  ></VueECharts>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/echarts-special-3d.vue b/packages/vue-test-app/src/preview-examples/echarts-special-3d.vue
index 086b8ec65a..3727d4523f 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-special-3d.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-special-3d.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -23,7 +19,6 @@ import * as renderer from 'echarts/renderers';
 import { EChartsOption } from 'echarts';
 import 'echarts-gl';
 
-
 echarts.use([
   components.TooltipComponent,
   components.LegendComponent,
@@ -35,10 +30,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 function gridConfig() {
@@ -101,5 +96,5 @@ const options = {
 <style scoped src="./echarts-special-3d.css"></style>
 
 <template>
-    <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
+  <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/echarts-special-toolbox.vue b/packages/vue-test-app/src/preview-examples/echarts-special-toolbox.vue
index bd89a2fb1f..97400ac82e 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-special-toolbox.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-special-toolbox.vue
@@ -9,10 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -33,10 +30,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const data = {
diff --git a/packages/vue-test-app/src/preview-examples/echarts-special-zoom.vue b/packages/vue-test-app/src/preview-examples/echarts-special-zoom.vue
index 62b78fc39d..0ac73cb9b8 100644
--- a/packages/vue-test-app/src/preview-examples/echarts-special-zoom.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts-special-zoom.vue
@@ -9,11 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {
-  convertThemeName,
-  getComputedCSSProperty,
-  registerTheme,
-} from '@siemens/ix-echarts';
+import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -35,10 +31,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 //create some random data
diff --git a/packages/vue-test-app/src/preview-examples/echarts.vue b/packages/vue-test-app/src/preview-examples/echarts.vue
index df60ec8822..5eb489795b 100644
--- a/packages/vue-test-app/src/preview-examples/echarts.vue
+++ b/packages/vue-test-app/src/preview-examples/echarts.vue
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
+import { registerTheme } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts/core';
@@ -29,10 +29,10 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(convertThemeName(themeSwitcher.getCurrentTheme()));
+const theme = ref(themeSwitcher.getCurrentTheme());
 
 themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = convertThemeName(newTheme);
+  theme.value = newTheme;
 });
 
 const options: EChartsOption = {

From e26701618e5bc3664cd482f2317c40db13388b83 Mon Sep 17 00:00:00 2001
From: Julian Lamplmair <151610373+jul-lam@users.noreply.github.com>
Date: Thu, 19 Dec 2024 09:33:49 +0100
Subject: [PATCH 4/4] changeset

---
 .changeset/tame-emus-poke.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tame-emus-poke.md

diff --git a/.changeset/tame-emus-poke.md b/.changeset/tame-emus-poke.md
new file mode 100644
index 0000000000..5a4f4ccf3e
--- /dev/null
+++ b/.changeset/tame-emus-poke.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix-echarts": patch
+---
+
+The __echarts__ theme names have been adapted to the default theme names