Tuesday, March 7, 2017

Materialize - Colors

Materialize supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black
white
transparent

Following is the list of lightness / darkness classes which can be used to vary the color applied.

Usage

lighten-1
lighten-2
lighten-3
lighten-4
lighten-5
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4

Following example showcases how to use above classes to render the background or to change the color of text. In case of background, add the classes as such and in case of text, suffix '-text' to color class and prefix 'text-' to lightning class.

Example

materialize_colors.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
  </head>
  <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class="card-panel">         
         <div class="card-panel red lighten-2">   
            <h1>Red Colored Theme</h1>
         </div>
         <span class="red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         <ul>          
            <li class="red lighten-5"><p>Using red lighten-5</p></li>
            <li class="red lighten-4"><p>Using red lighten-4</p></li>
            <li class="red lighten-3"><p>Using red lighten-3</p></li>
            <li class="red lighten-2"><p>Using red lighten-2</p></li>
            <li class="red lighten-1"><p>Using red lighten-1</p></li>
            <li class="red"><p>Using red</p></li>
            <li class="red darken-1"><p>Using red darken-1</p></li>
            <li class="red darken-2"><p>Using red darken-2</p></li>
            <li class="red darken-3"><p>Using red darken-3</p></li>
            <li class="red darken-4"><p>Using red darken-4</p></li>
            <li class="red accent-1"><p>Using red accent-1</p></li>
            <li class="red accent-2"><p>Using red accent-2</p></li>
            <li class="red accent-3"><p>Using red accent-3</p></li>
            <li class="red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

Result

Verify the result.

Color Theme Demo

Red Colored Theme

Red Colored Text

Using red lighten-5
Using red lighten-4
Using red lighten-3
Using red lighten-2
Using red lighten-1
Using red
Using red darken-1
Using red darken-2
Using red darken-3
Using red darken-4
Using red accent-1
Using red accent-2
Using red accent-3
Using red accent-4

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews