# Developing with themes > Siemens Industrial Experience supports theming for all of its components. Everyone can use the two embedded themes that already ship with Siemens Industrial Experience: Classic light (theme-classic-light) and Classic dark (theme-classic-dark). You can also create your own themes to customize the design system for your own brand. Siemens AG applications should utilize the exclusive Siemens AG Corporate Brand Theme. import ThemeSwitcher from '@site/docs/autogenerated/playground/theme-switcher.mdx'; # ## Siemens AG Corporate Brand Theme :::info The Siemens AG Corporate Brand Theme is exclusively available for official Siemens AG products, where it should always be used as the default theme to reflect the latest Siemens AG Corporate Brand guidelines. Siemens AG employees can access the Corporate Brand Theme at [**https://code.siemens.com/siemens-ix/ix-brand-theme**](https://code.siemens.com/siemens-ix/ix-brand-theme). ::: ## How to set a theme To choose a theme set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system. ```html ``` ## Applying only core functionalities without preloading themes Importing `siemens-ix-core.css` will only load core related functionalities, without preloading any theme or bootstrap. You can load a specific theme by importing the corresponding CSS file. **_Import CSS_** ```tsx // Load 3rd Party libraries import 'bootstrap/dist/css/bootstrap.css'; // Load the core parts import '@siemens/ix/dist/siemens-ix/siemens-ix-core.css'; // Load theme import '@siemens/ix/dist/siemens-ix/theme/classic-light.css'; import '@siemens/ix/dist/siemens-ix/theme/classic-dark.css'; ``` ## Working with themes during runtime ### React Examples #### theme-switcher.tsx ```tsx import './theme-switcher.scoped.css'; import { themeSwitcher, ThemeVariant } from '@siemens/ix'; import { IxButton, IxCheckbox, IxCol, IxLayoutGrid, IxRow, IxSelect, IxSelectItem, } from '@siemens/ix-react'; import { useEffect, useState } from 'react'; export default () => { const [variants] = useState(['light', 'dark']); const [selectedVariant, setSelectedVariant] = useState('dark'); const [useSystemTheme, setUseSystemTheme] = useState(false); useEffect(() => { themeSwitcher.setTheme('classic', selectedVariant); }, []); const onValueChange = (event: CustomEvent) => { if (useSystemTheme) { return; } const newVariant = event.detail as ThemeVariant; themeSwitcher.setColorSchema(newVariant); setSelectedVariant(newVariant); }; const toggle = () => { if (useSystemTheme) { return; } themeSwitcher.toggleMode(); const newVariant = selectedVariant === 'light' ? 'dark' : 'light'; setSelectedVariant(newVariant); }; const onCheckedChange = (event: CustomEvent) => { const checked = event.detail; setUseSystemTheme(checked); if (checked) { themeSwitcher.setColorSchema('system'); } else { themeSwitcher.setColorSchema(selectedVariant); } }; return ( Light/Dark Toggle mode Theme {variants.map((variant) => ( ))} ); }; ``` #### theme-switcher.scoped.css ```css .theme-switcher ix-col { display: flex; align-items: center; height: 2.5rem; } ``` ### Angular Examples #### theme-switcher.ts ```ts import { Component, OnInit } from '@angular/core'; import { themeSwitcher, ThemeVariant } from '@siemens/ix'; @Component({ standalone: false, selector: 'app-example', templateUrl: './theme-switcher.html', styleUrls: ['./theme-switcher.css'], }) export default class ThemeSwitcher implements OnInit { variants: ThemeVariant[] = ['light', 'dark']; selectedVariant: ThemeVariant = 'dark'; useSystemTheme = false; ngOnInit() { themeSwitcher.setTheme('classic', this.selectedVariant); } onValueChange(event: Event) { if (this.useSystemTheme) { return; } const customEvent = event as CustomEvent; const newVariant = customEvent.detail as ThemeVariant; themeSwitcher.setColorSchema(newVariant); this.selectedVariant = newVariant; } toggleMode() { if (this.useSystemTheme) { return; } themeSwitcher.toggleMode(); this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light'; } onSystemMode(event: CustomEvent) { const checked = event.detail; this.useSystemTheme = checked; if (checked) { themeSwitcher.setColorSchema('system'); } else { themeSwitcher.setColorSchema(this.selectedVariant); } } } ``` #### theme-switcher.html ```html Light/Dark Toggle mode Theme ``` #### theme-switcher.css ```css .theme-switcher ix-col { display: flex; align-items: center; height: 2.5rem; } ``` ### Angular Standalone Examples #### theme-switcher.ts ```ts import { NgForOf } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { IxButton, IxCheckbox, IxCol, IxLayoutGrid, IxRow, IxSelect, IxSelectItem, IxSelectValueAccessorDirective, } from '@siemens/ix-angular/standalone'; import { themeSwitcher, ThemeVariant } from '@siemens/ix'; @Component({ selector: 'app-example', imports: [ IxLayoutGrid, IxRow, IxCol, IxButton, IxCheckbox, IxSelect, IxSelectItem, IxSelectValueAccessorDirective, NgForOf, ], templateUrl: './theme-switcher.html', styleUrls: ['./theme-switcher.css'], }) export default class ThemeSwitcher implements OnInit { variants: ThemeVariant[] = ['light', 'dark']; selectedVariant: ThemeVariant = 'dark'; useSystemTheme = false; ngOnInit() { themeSwitcher.setTheme('classic', this.selectedVariant); } onValueChange(event: Event) { if (this.useSystemTheme) { return; } const customEvent = event as CustomEvent; const newVariant = customEvent.detail as ThemeVariant; themeSwitcher.setColorSchema(newVariant); this.selectedVariant = newVariant; } toggleMode() { if (this.useSystemTheme) { return; } themeSwitcher.toggleMode(); this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light'; } onSystemMode(event: CustomEvent) { const checked = event.detail; this.useSystemTheme = checked; if (checked) { themeSwitcher.setColorSchema('system'); } else { themeSwitcher.setColorSchema(this.selectedVariant); } } } ``` #### theme-switcher.html ```html Light/Dark Toggle mode Theme ``` #### theme-switcher.css ```css .theme-switcher ix-col { display: flex; align-items: center; height: 2.5rem; } ``` ### Vue Examples #### theme-switcher.vue ```vue ``` #### theme-switcher.css ```css .theme-switcher ix-col { display: flex; align-items: center; height: 2.5rem; } ```