feat(samples): move data-theme to body

didimmova · didimmova · commit 2fd1126beea5 · 2026-03-11T10:11:18.000+02:00
diff --git a/samples/grids/grid-lite/styling-config-themes/index.html b/samples/grids/grid-lite/styling-config-themes/index.html
@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" >
     <link rel="stylesheet"    href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
   </head>
-  <body>
+  <body data-theme="bootstrap-light">
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.scss b/samples/grids/grid-lite/styling-config-themes/src/index.scss
@@ -33,7 +33,7 @@ $themes: (
 
 // Generate theme classes
 @each $name, $config in $themes {
-    .grid-lite-wrapper[data-theme="#{$name}"] {
+    body[data-theme="#{$name}"] .grid-lite-wrapper {
         @include palette(list.nth($config, 1));
         @include typography(list.nth($config, 2), list.nth($config, 3));
     }
diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.tsx b/samples/grids/grid-lite/styling-config-themes/src/index.tsx
@@ -30,14 +30,12 @@ defineComponents(IgcRatingComponent, IgcSelectComponent);
 export default class Sample extends React.Component<any, any> {
   private dataService: GridLiteDataService;
   private gridRef: React.RefObject<any>;
-  private wrapperRef: React.RefObject<HTMLDivElement>;
   private selectRef: React.RefObject<any>;
 
   constructor(props: any) {
     super(props);
     this.dataService = new GridLiteDataService();
     this.gridRef = React.createRef();
-    this.wrapperRef = React.createRef();
     this.selectRef = React.createRef();
     this.state = {
       currentTheme: 'bootstrap-light'
@@ -61,9 +59,7 @@ export default class Sample extends React.Component<any, any> {
 
   private changeTheme = (theme: string) => {
     this.setState({ currentTheme: theme });
-    if (this.wrapperRef.current) {
-      this.wrapperRef.current.setAttribute('data-theme', theme);
-    }
+    document.body.setAttribute('data-theme', theme);
   }
 
   public render(): JSX.Element {
@@ -83,7 +79,7 @@ export default class Sample extends React.Component<any, any> {
           </igc-select>
         </div>
 
-        <div className="grid-lite-wrapper" ref={this.wrapperRef}>
+        <div className="grid-lite-wrapper">
           <igc-grid-lite ref={this.gridRef} id="grid-lite">
             <igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
             <igc-grid-lite-column field="price" header="Price" sortable filterable data-type="number"></igc-grid-lite-column>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ $themes: (`
`33`	`33`
`34`	`34`	`// Generate theme classes`
`35`	`35`	`@each $name, $config in $themes {`
`36`		`- .grid-lite-wrapper[data-theme="#{$name}"] {`
	`36`	`+ body[data-theme="#{$name}"] .grid-lite-wrapper {`
`37`	`37`	`@include palette(list.nth($config, 1));`
`38`	`38`	`@include typography(list.nth($config, 2), list.nth($config, 3));`
`39`	`39`	`}`