-
Notifications
You must be signed in to change notification settings - Fork 85
BuildFire Material Design Theme
This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/material-design-theme/
A plugin that uses Material Design can inherit app colors and font into the plugin by injecting the meta tag enableMDTheme as following
<meta name="buildfire" content="enableMDTheme">.
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/
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:
mdc-theme--primary
mdc-theme--secondary
mdc-theme--background
mdc-theme--surface
mdc-theme--error
mdc-theme--on-primary
mdc-theme--on-secondary
mdc-theme--on-surface
mdc-theme--on-error
mdc-theme--text-primary-on-background
mdc-theme--text-secondary-on-background
mdc-theme--text-hint-on-background
mdc-theme--text-disabled-on-background
mdc-theme--text-icon-on-background
mdc-theme--text-primary-on-light
mdc-theme--text-secondary-on-light
mdc-theme--text-hint-on-light
mdc-theme--text-disabled-on-light
mdc-theme--text-icon-on-light
mdc-theme--text-primary-on-dark
mdc-theme--text-secondary-on-dark
mdc-theme--text-hint-on-dark
mdc-theme--text-disabled-on-dark
mdc-theme--text-icon-on-dark
mdc-theme--primary-bg
mdc-theme--secondary-bg
It also recommended to 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.
You can reference Material Design JS and CSS files instead of having to include them in your plugin resources as following:
<link href="../../../styles/materialDesign/[email protected]" rel="stylesheet">
<script src="../../../scripts/materialDesign/[email protected]" type="text/javascript"></script>
You can find a sample buildfire plugin at https://github.com/BuildFire/simpleBuildFireJSExamples/tree/master/exampleMaterialDesignPlugin