Materialize - Màu sắc

Materialize hỗ trợ một tập hợp các lớp màu phong phú. Các lớp màu này được lấy cảm hứng và phát triển dựa trên các màu được sử dụng trong tiếp thị, biển báo và ghi chú.

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

Sử dụng

Sau đây là danh sách các lớp độ sáng / tối, có thể được sử dụng để thay đổi màu được áp dụng.

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

Thí dụ

Ví dụ sau minh họa cách sử dụng các lớp trên để hiển thị nền hoặc thay đổi màu của văn bản. Trong trường hợp nền, hãy thêm các lớp như vậy và trong trường hợp là văn bản, hậu tố '-text' vào lớp màu và tiền tố 'văn bản-' vào lớp sét.

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>

Kết quả

Xác minh kết quả.