Skip to main content

Developing with themes

Ask AI
Copy a prompt to ask an AI assistant about this page.

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.

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.

How to set a theme​

To choose a theme set the data-ix-theme attribute of the <html> 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 data-ix-theme="classic" data-ix-color-schema="dark">
  <!-- Framework related imports -->
  <!--  -->
  <body></body>
</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

// 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​