Aurelia Materialize Bridge works with MaterializeCSS 2.x
These workarounds enable you to use Aurelia Materialize Bridge (AMB) with MaterializeCSS 2.x, leveraging its new color system derived from Material Design M3.
Demo
You can see the theming page of Requestland. I spent days to integrate our theming system with the new color system introduced in Material Design M3.
I also wrote an article on dark mode and another on theming made with the workarounds below.
Why upgrade to MaterializeCSS 2?
MaterializeCSS has transitioned to new developers and is evolving to incorporate the latest Material Design 3 (M3) guidelines. MaterializeCSS 2.x introduces features aligned with M3, such as rounded and tonal buttons.
One of the standout features of MaterializeCSS 2.x is its revamped color system, powered by Google’s Material Color Utilities (MCU). MCU generates a wide range of colors from a single seed color for both light and dark modes. MaterializeCSS applies these colors as CSS variables like --md-sys-color-primary and --md-sys-color-background to the <html> root element.
Aurelia Materialize Bridge (AMB) serves as an efficient connector between the Aurelia framework and MaterializeCSS. However, AMB remains at the Material Design 1 (M1) level and has not been updated for several years.
In this article, I’ll share the workarounds I developed after spending weeks making AMB compatible with MaterializeCSS 2.x.
Workarounds for Using AMB with MaterializeCSS 2.x
Browser new styles
Browser node_modules/@materializecss/materialize/dist/css/materialize.css to see default colors.
When you encounter any conflict with changed CSS classes introduced in MaterializeCSS 2, look into it.
Add global references in main.ts
To bridge compatibility, include the following code in your main.ts:
import * as Materializecss from '@materializecss/materialize'; import * as AMB from 'aurelia-materialize-bridge'; global.M = Materializecss; // Export MaterializeCSS
window['Waves'] = Materializecss.Waves;
Materializecss.Waves['attach'] = () => {};
global.M.textareaAutoResize = Materializecss.Forms.textareaAutoResize;
global.M.updateTextFields = () => {};
Remove and replace
Remove use of M.updateTextField().
Replace M.toast() with 'new M.Toast()'.
Update md-button attributes
For md-button="flat: false;", include .filled, .outlined, or .tonal.
For md-button="flat: true;", use .text.
Fix <label> in md-select
MaterializeCSS 2.x introduces its own <label> styling, conflicting with AMB’s <label class="md-select-label">. Add the following adjustment:
.input-field .md-select-label {
top: 0px;
transform: scale(0.75);
}
Handle label lifting for <md-input> and <input>
MaterializeCSS 2.x requires a placeholder=" " (not "") to properly lift labels. Make sure to include this placeholder attribute.
Enable md-char-counter functionality
The md-char-counter requires a maxlength attribute to function. Here’s an example:
<md-input label="Name"
maxlength.bind="100"
md-char-counter="100">
</md-input>
Remove bullet of ul
ul:not(.browser-default) {
list-style-type: none;
}Add div to .collapsible-body
<div class="collapsible-body">
<div>
text
</div>
</div>
Fix range (slider)
input[type=range]::-webkit-slider-runnable-track {
background-color: var(--md-sys-color-primary);
}
input[type=range]::-moz-range-track {
background-color: var(--md-sys-color-primary);
}Use the new color system
Remove <md-colors>.
Conclusion
AMB has a limited theme functionality. Now you can use a complete theming and dark mode with MaterializeCSS. You can see how to implement dark mode in my previous article.
With these adjustments, you can successfully use Aurelia Materialize Bridge alongside MaterializeCSS 2.x, unlocking the powerful features of Material Design 3.
