Skip to main content

Material Design Theme

How to use#

A plugin that uses Material Design can inherit app colors and font into the plugin by injecting the meta tag enableMDTheme as following

<head>
<!-- ... -->
<meta name="buildfire" content="enableMDTheme" />
<!-- ... -->
<script src="../../../scripts/buildfire.min.js"></script>
</head>
warning

Meta tags must be added to the head of the HTML document before buildfire.min.js is referenced

Injected styles use CSS custom properties as explained in https://material.io/develop/web/components/theme/

Referencing Material Design#

You can reference Material Design JS and CSS files instead of having to include them in your plugin resources as following:

Control#

<head>
<!-- Enable material theme using meta tag -->
<meta name="buildfire" content="enableMDTheme" />
<!-- Include buildfire.js -->
<script src="../../../../scripts/buildfire.min.js"></script>
<!-- Include material design css and js -->
<link
href="../../../../styles/materialDesign/material-components-web@4.0.0.min.css"
rel="stylesheet"
/>
<script
src="../../../../scripts/materialDesign/material-components-web@4.0.0.min.js"
type="text/javascript"
></script>
</head>

Widget#

<head>
<!-- Enable material theme using meta tag -->
<meta name="buildfire" content="enableMDTheme" />
<!-- Include buildfire.js -->
<script src="../../../scripts/buildfire.min.js"></script>
<!-- Include material design css and js -->
<link
href="../../../styles/materialDesign/material-components-web@4.0.0.min.css"
rel="stylesheet"
/>
<script
src="../../../scripts/materialDesign/material-components-web@4.0.0.min.js"
type="text/javascript"
></script>
</head>

Predefined classes#

Predefined custom properties can apply app styles to most of the components. However, for components or elements that do not have colors defined it is recommended to use the following predefined classes

Custom propertyDescription
mdc-theme--primarySets the text color to the theme primary color.
mdc-theme--secondarySets the text color to the theme secondary color.
mdc-theme--backgroundSets the background color to the theme background color.
mdc-theme--surfaceSets the background color to the surface background color
mdc-theme--errorSets the text color to the theme error color.
mdc-theme--on-primarySets the text color to the color configured for text on the primary color.
mdc-theme--on-secondarySets the text color to the color configured for text on the secondary color.
mdc-theme--on-surfaceSets the text color to the color configured for text on the surface color.
mdc-theme--on-errorSets the text color to the color configured for text on the error color.
mdc-theme--text-primary-on-backgroundPrimary text on top of the theme background color.
mdc-theme--text-secondary-on-backgroundSecondary text on top of the theme background color.
mdc-theme--text-hint-on-backgroundHint text on top of the theme background color.
mdc-theme--text-disabled-on-backgroundDisabled text on top of the theme background color.
mdc-theme--text-icon-on-backgroundIcon on top of the theme background color.
mdc-theme--text-primary-on-lightPrimary text on top of a light-colored background.
mdc-theme--text-secondary-on-lightSecondary text on top of a light-colored background.
mdc-theme--text-hint-on-lightHint text on top of a light-colored background.
mdc-theme--text-disabled-on-lightDisabled text on top of a light-colored background.
mdc-theme--text-icon-on-lightIcons on top of a light-colored background.
mdc-theme--text-primary-on-darkPrimary text on top of a dark-colored background.
mdc-theme--text-secondary-on-darkSecondary text on top of a dark-colored background.
mdc-theme--text-hint-on-darkHint text on top of a dark-colored background.
mdc-theme--text-disabled-on-darkDisabled text on top of a dark-colored background.
mdc-theme--text-icon-on-darkIcons on top of a dark-colored background.
mdc-theme--primary-bgSets the background color to the theme primary color.
mdc-theme--secondary-bgSets the background color to the theme secondary color.
tip

Test your plugin on an app using light BuildFire color theme and dark theme as well to make sure it displays properly on both.

You can also access the app theme programmatically by using buildfire.appearance.getAppTheme() function.

Javascript Implementation Tips#

When implementing standard material components make sure to use CommonJS Approach mdc.componentName.MDCComponent();. There is no need to install any additional npm packages.

Example components#

// Checkbox
const checkbox = new mdc.checkbox.MDCCheckbox(
document.querySelector(".mdc-checkbox")
);
// textfield
const textfield = new mdc.textField.MDCTextField(
document.querySelector(".mdc-text-field")
);