How to use materialize colors classes
Deepak Tailor - Dec 21 2020
There are many classes for colors in materialize css. We can use these classes on any text or any background. materialize provided three type of colors : lighten for light color, darken for dark color and accent for accent colors.
Color class use in backgrounds
To add color to the background, we write the name of the class. If we want to make the color light or dark, then we can also give it in this class. Light class has classes from lighten-1 to lighten-5. And in dark class there is class from darken-1 to darken-4. Like:
<!-- background color class -->
<div class="card-panel red lighten-1">background color use in card</div>
<div class="card-panel red lighten-2">background color use in card</div>
<div class="card-panel red lighten-3">background color use in card</div>
<div class="card-panel red lighten-4">background color use in card</div>
<div class="card-panel red lighten-5">background color use in card</div>
<div class="card-panel red darken-1">background color use in card</div>
<div class="card-panel red darken-2">background color use in card</div>
<div class="card-panel red darken-3">background color use in card</div>
<div class="card-panel red darken-4">background color use in card</div>
<div class="card-panel red accent-1">background color use in card</div>
<div class="card-panel red accent-2">background color use in card</div>
<div class="card-panel red accent-3">background color use in card</div>
<div class="card-panel red accent-4">background color use in card</div>
<!-- background color class -->Color class use in text or headings
<!-- text colors -->
<div class="card-panel">
<h6 class="red-text">this is text color class</h6>
<h6 class="red-text text-lighten-1">this is text color class</h6>
<h6 class="red-text text-lighten-2">this is text color class</h6>
<h6 class="red-text text-lighten-3">this is text color class</h6>
<h6 class="red-text text-lighten-4">this is text color class</h6>
<h6 class="red-text text-lighten-5">this is text color class</h6>
<br/>
<h6 class="red-text text-darken-1">this is text color class</h6>
<h6 class="red-text text-darken-2">this is text color class</h6>
<h6 class="red-text text-darken-3">this is text color class</h6>
<h6 class="red-text text-darken-4">this is text color class</h6>
<br/>
<h6 class="red-text text-accent-1">this is text color class</h6>
<h6 class="red-text text-accent-2">this is text color class</h6>
<h6 class="red-text text-accent-3">this is text color class</h6>
<h6 class="red-text text-accent-4">this is text color class</h6>
</div>
<!-- text colors -->Color class use in buttons
<!-- color use in buttons -->
<button type="button" class="btn blue">Primary Button</button>
<button type="button" class="btn grey">Secondary Button</button>
<button type="button" class="btn cyan">Info Button</button>
<button type="button" class="btn orange">Warning Button</button>
<button type="button" class="btn green">Success Button</button>
<!-- color use in buttons -->Deepak Tailor
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in