feat(lib)!: Remove ODS Charts mode option. Use [data-bs-theme]

docs/README.md

@@ -33,7 +33,7 @@ The theme is configured with {@link ODSChartsThemeOptions}:
 - {@link ODSChartsThemeOptions.categoricalColors}: colors to be used to graph the chart.
 - {@link ODSChartsThemeOptions.cssTheme}: optionally indicates an external theme to be used like boosted.
 - {@link ODSChartsThemeOptions.lineStyle}: style of line in lineCharts.
-- {@link ODSChartsThemeOptions.cssSelector}: fixes the light or dark mode.
+- {@link ODSChartsThemeOptions.cssSelector}: css selector of an element that determines the light or dark mode. Optional, default is 'body'. Not needed if the {@link ODSChartsTheme.manageThemeObserver}` feature is used.
 
 ### Graph features
 
@@ -42,6 +42,7 @@ Additional features can be added calling methods on {@link ODSChartsTheme}:
 - {@link ODSChartsTheme.externalizeLegends}: to add Orange Design System theme to legends.
 - {@link ODSChartsTheme.externalizePopover}: to add Orange Design System theme to popover or tooltip.
 - {@link ODSChartsTheme.manageChartResize}`: to dynamically adapt graph size to its container.
+- {@link ODSChartsTheme.manageThemeObserver}`: to dynamically switch between theme dark/light mode .
 
 The {@link ODSChartsTheme} is used to build the ODS theme and the charts options.
 

docs/examples/index.js

@@ -265,6 +265,9 @@ async function displayChart(
   legendsOrientation,
   refresh = false
 ) {
+  if (!mode) {
+    mode = 'default';
+  }
   if (!refresh) {
     generateExampleDiv(id, (!usedLegends || usedLegends === 'odscharts') && 'vertical' === legendsOrientation ? 'row' : 'column');
     let iframe = document.querySelector(`#${id} iframe`);
@@ -441,7 +444,7 @@ async function displayChart(
   document.getElementById(id + '_html').innerText = generateChartDiv(
     id,
     usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column',
-    themeManager.options.mode
+    mode
   );
   document.getElementById(id + '_code').innerText = `///////////////////////////////////////////////////
 // Used data
@@ -481,7 +484,12 @@ var themeManager = ODSCharts.getThemeManager({
       (key) => iframe.contentWindow.ODSCharts.ODSChartsLineStyle[key] === themeManager.options.lineStyle
     )
   },
-  cssTheme: ODSCharts.ODSChartsCSSThemes.${Object.keys(iframe.contentWindow.ODSCharts.ODSChartsCSSThemes).find((key) => key === cssThemeName)}
+  cssTheme: ODSCharts.ODSChartsCSSThemes.${Object.keys(iframe.contentWindow.ODSCharts.ODSChartsCSSThemes).find((key) => key === cssThemeName)}${
+    ['light', 'dark'].includes(mode)
+      ? `,
+  cssSelector: '.graph-holder'`
+      : ``
+  }
 });
 
 // register this theme to echarts
@@ -568,7 +576,7 @@ myChart.setOption(themeManager.getChartOptions());
       document.querySelector(`#body_content_1_${id}`).append(custumColorDiv);
     }
 
-    document.querySelector(`#accordion_${id} #darkModeInput option[value="${themeManager.options.mode}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #darkModeInput option[value="${mode}"]`).setAttribute('selected', 'selected');
     document.querySelector(`#accordion_${id} #lineStyleInput option[value="${themeManager.options.lineStyle}"]`).setAttribute('selected', 'selected');
     document.querySelector(`#accordion_${id} #rendererInput option[value="${rendererInput}"]`).setAttribute('selected', 'selected');
     document.querySelector(`#accordion_${id} #popoverInput option[value="${popoverInput}"]`).setAttribute('selected', 'selected');

src/theme/colors/colors-css-variables.ts

@@ -12,7 +12,7 @@ import { ODSChartsCSSThemesNames } from '../css-themes/css-themes';
  * Added for None or Boosted 4 themes
  */
 const BOOSTED5_VARIABLE = `
-.ods-charts-context, [data-bs-theme=light] .ods-charts-context, .ods-charts-context[data-bs-theme=light] {
+.ods-charts-context, [data-bs-theme=light] .ods-charts-context, .ods-charts-context[data-bs-theme=light], [data-bs-theme] .ods-charts-context[data-bs-theme=light]  {
   color-scheme: light;
   --bs-blue: #4170d8;
   --bs-indigo: #a885d8;
@@ -63,7 +63,7 @@ const BOOSTED5_VARIABLE = `
   --bs-tertiary-bg: #fafafa;
 }
 
-[data-bs-theme=dark] .ods-charts-context, .ods-charts-context[data-bs-theme=dark] {
+[data-bs-theme=dark] .ods-charts-context, .ods-charts-context[data-bs-theme=dark], [data-bs-theme] .ods-charts-context[data-bs-theme=dark] {
   color-scheme: dark;
   --bs-body-color: #fff;
   --bs-body-color-rgb: 255, 255, 255;