Perspective Themes

Sepasoft MES Module Suite

Perspective Theme

MES Perspective components use the Ignition Perspective theme on the session.

In MES 4.83.2 SP0 and later, the Sepasoft theme is added to the page as an inline stylesheet. Do not import the Sepasoft CSS into your theme.

Light and dark

The page looks for the first <link rel="stylesheet"> whose address contains theme.

The dark check ignores letter case.

MES components also read the Perspective session theme name.

Name the theme so both checks select the same theme. Use light, dark, or a name that starts with light- or dark-. Examples: light-cool, dark-cool.

Set the theme on the Perspective session. In the Designer, the session property is props.theme.

Custom theme

Create the theme in Ignition. Put light or dark at the start of the theme name. Add your own CSS in that theme.

Do not add an @import for the Sepasoft light or dark CSS. MES inserts that stylesheet.

Override a Sepasoft style

Your theme CSS overrides a Sepasoft rule when your selector is more specific, or when the rule uses !important.

The Sepasoft theme sets CSS variables on the page. Set the same variable in your theme to change that color, font size, or spacing.

A component style property, such as buttonStyle or tableStyle, is written on that component. It overrides the theme for the properties you set. Those properties are documented on each component page.

CSS variables

:root {
  --background: #1a1a1a;
  --color: #f5f5f5;
}

Example. This sets the page background and the default text color in a theme whose name starts with dark-:

Sepasoft MES Module Suite