Themes

There are 2 themes in SME:

These themes are automatically applied base on the users settings to the body element in each module.

Theme in SME is more extensive than just changing color. It can include color, font, icons, spacing and more.

Theme Classes

The class for the current theme is always applied to the 'body' element for you. However there are some cases where a specific theme need to be applied. When necessary you can use the following classes:

Class Effect
.sme-theme-light Applies the light theme
.sme-theme-dark Applies the dark theme

Custom Themed Components

There are several ways to apply css to your components based on the current theme. You must account for the target theme and nested theme structures. Examples are done for the dark theme.

CSS

In CSS, simply prepend the theme to the selector

.sme-theme-dark .my-class, .sme-theme-light .sme-theme-dark .my-class {{'{'}} /* Themed Style*/ }

SCSS

In SCSS, you can use the ancestor selector syntax.

.my-class {{'{'}} .sme-theme-dark &, .sme-theme-light .sme-theme-dark & {{'{'}} /* Themed Style*/ } }

Shadow DOM UX Frameworks

Some frameworks that utilize shadow dom for components (such as Angular 2) enable a special syntax to style components based on classes outside the current component

This syntax will be the same as the two methods listed above, however the :host-context selector should be used instead of the raw theme class.

The example below uses the host-context selector for the css of a component

:host-context(.sme-theme-dark) :host-context(.sme-theme-dark) .my-class, :host-context(.sme-theme-light .sme-theme-dark) .my-class {{'{'}} /* Themed Style*/ }

Typescript

you can also programmatically detect the theme using this code

const theme = MsftSme.self().Resources.theme; // theme will be either "dark" or "light"