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.
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 |
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.
In CSS, simply prepend the theme to the selector
.sme-theme-dark .my-class,
.sme-theme-light .sme-theme-dark .my-class {{'{'}}
/* Themed Style*/
}
In SCSS, you can use the ancestor selector syntax.
.my-class {{'{'}}
.sme-theme-dark &,
.sme-theme-light .sme-theme-dark & {{'{'}}
/* Themed Style*/
}
}
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*/
}
you can also programmatically detect the theme using this code
const theme = MsftSme.self().Resources.theme; // theme will be either "dark" or "light"