Theme

Themes are used to customize component styles by applying a set of colors. This page will guide you through the process of enabling light or dark themes in the application.

Available themes

EOS design system provides two prebuilt themes:

  • Light Theme
  • Dark Theme

    • The light theme is the default theme of the EOS design system.

How to install a theme

Install EOS in your project either by using the NPM package or including the CDN link.

Themes implementation

In order to implement the dark theme you need to inject the dark-theme class in the document's body tag. It will require to use Javascript or front-end language of your choice. This functionality is not available in the NPM package. You can use any of the 2 UIs provided below to enable users of your application to switch between themes.

Example

UI implementation in SUSE products

Implement a theme switch in SUSE products by using one (or both) of the following options.

Table types
How to use this element

Example
Code