You can give your MDriven Turnkey application a consistent visual theme and use data-dependent styles to make important values stand out; this guide is for developers designing Turnkey user interfaces in MDriven Designer.

There are two different styling tasks. Choose the one that matches the result you need:

Task	Use it when	Example
Theming	You want a visual decision to affect the application consistently.	Set the primary colour, navigation bar colour, base font size, or spacing used across screens.
Data-dependent styling	You want the appearance of a control, row, or cell to communicate the state of the data it shows.	Show a status label in green when an order is approved and red when it is rejected.

Do not use a data-dependent expression to implement your whole application theme. Conversely, changing a theme colour is not a way to express that one value is overdue or below zero.

Theme the application consistently

A theme is the application-wide set of visual values such as colours, typography, component sizes, and navigation appearance. In Turnkey, prefer the MDriven Turnkey StyleSystem's CSS variables for these shared decisions. A CSS variable is a named CSS custom property whose value can be reused by the Turnkey styles.

For example, changing the primary colour through the theme affects controls that use the primary colour. Changing the base font size affects the density and readability of the interface across screens. This is more consistent than adding the same colour or font rule separately to each ViewModel control.

Choose the right theme mechanism

Need	Recommended approach	Result
Change standard Turnkey colours, dimensions, or other shared values in CSS	Use CSS custom properties in tkusercss.css.	A file-based theme applied by Turnkey.
Keep theme values in the model and use them when the application starts	Use the StyleSystem and theme data in the model.	Theme values are maintained as application data rather than repeated in CSS files.
Select between sets of CSS rules while the application runs	Use Theme as data.	The application can choose among theme data objects at runtime.
Make changes to the underlying SCSS theme source	Follow MDriven Turnkey theming.	A compiled theme-user.css replaces the default theme stylesheet.

Use CSS custom properties for a file-based theme

Use this approach when you want to maintain shared Turnkey values in CSS.

1. Create tkusercss.css in the model directory's Content folder.
2. Add a :root rule.
3. Set the CSS variables you want to override.
4. Upload the model from MDriven Designer and reload the application to see the result.

For example, this file changes the base font size and selected shared colours:

:root {
  --base-font-size: 14px;
  --primary-color: rgb(0, 102, 153);
  --success-color: rgb(30, 130, 76);
}

Use the documented property names and expected value formats. For example, the listed Turnkey colour properties use RGB format and size properties specify pixels. See MDriven Turnkey theming for the available custom properties, file location, deployment behaviour, and the SCSS-based alternative.

Maintain the theme as model data

Use the StyleSystem when you want shared theme values to be maintained in the model. The theme values can be applied throughout the application, rather than copied into each screen. This is useful when the application needs a centrally maintained brand colour, font size, table density, or navigation bar height.

For a walkthrough of changing theme variables and using theme data, watch the theming overview. For CSS rules stored as data and selected at runtime, follow Theme as data.

Precedence gotcha: a corresponding rule in tkusercss.css overrides a value supplied through Theme as data. Remove or change the file-based rule when you expect the model-held value to take effect.

Use styles to communicate data

Data-dependent styling changes the presentation according to a value in the current data object or ViewModel. Use it to draw attention to information, not to redefine the overall theme.

Examples include:

• A green status label when ThingsAreSuperGreat is true and a red label when it is false.
• A warning class on a value that requires review.
• A red number when an economic value is below zero.

The style decision belongs on the ViewModel control that renders the value. In MDriven Designer, the control's Style ref can contain a style name or an OCL expression. Turnkey adds the resulting value as a CSS class on the rendered control, so the class must exist in your styling.

Apply a conditional style to one control

1. Define the styles that represent the states. For example, define a green style named TheGreenStyle and a red style named TheRedStyle. You can maintain such styles in the model through StylesInModel.
2. Open the ViewModel in MDriven Designer and select the column or control that displays the status.
3. Enter a style reference or OCL expression in Style ref.
4. Make the expression return the name of the style to apply.
5. Run the application and verify both data states.

For example, a status label can choose between two model-maintained styles with this expression:

self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)

When ThingsAreSuperGreat is true, the expression returns TheGreenStyle; otherwise it returns TheRedStyle. The ViewModel column uses that returned style name.

Keep style names meaningful. For example, use names such as ApprovedStatus, RejectedStatus, or NeedsAttention when they represent a business state. This makes the ViewModel expression readable and lets you change the visual treatment later without changing the condition.

Style tables at the right level

A table can need styling at three different levels. Use the narrowest level that expresses the requirement.

What you want to style	Where to define it	Example
Every cell in one column	Add style information to the ViewModel attribute that defines the column.	Make every Status value use the same presentation.
A complete row	Add a string attribute named Style or CssClass to the ViewModel used for the table.	Highlight the whole row when the record requires review.
One cell in each rendered row	Add a string attribute named <Column name>_Style or <Column name>_CssClass.	Colour only the Balance cell when its value is negative.

Use CssClass when you want to provide a CSS class name. The name Style renders as an HTML style attribute value. For example, an OCL expression for a Style value can produce an inline background colour:

'background-color:#' + cell.ColourValue.toString('X6') + ';'

For the full rules for Style ref, Style, CssClass, format strings, and table styling, see Styling and CSS for Bootstrap, Angular and MVC.

Work with Turnkey component styles

Turnkey uses BEM (Block, Element, Modifier), a CSS naming convention for component rules. A modifier class changes the presentation of a Turnkey component. Put modifier classes in the ViewModel Editor's Style ref field when you want a supported component variation rather than a custom one-off rule.

For example, Turnkey provides contextual colour concepts including danger, warning, success, and info. Use these concepts consistently: a success treatment communicates a positive state, while a warning treatment signals that the user should pay attention. The available elements, modifier classes, layout behaviour, and typography options are documented in Turnkey Styling.

Verify your styling

1. Test the theme on more than one ViewModel. A theme change should remain consistent across screens.
2. Test each data state that can select a conditional style. For the example above, verify both true and false values for ThingsAreSuperGreat.
3. Check tables separately. A row style, column style, and cell style have different ViewModel naming conventions.
4. If a model-held theme value does not appear, check whether tkusercss.css overrides the same property.
5. Keep custom CSS focused on rules that are not available through theme variables, StyleSystem values, or supported Turnkey modifiers.

See also

• Documentation:MDriven Turnkey theming
• Documentation:Theme as data
• Documentation:Turnkey Styling
• HowTos:Define and Set CSS Styles in MDriven Turnkey
• HowTos:Add logotype and favicon
• Documentation:UI&Styling