Materialize - 顏色

Materialize 支援豐富的顏色類。這些顏色類的設計靈感來源於市場營銷、道路標誌和便利貼中使用的顏色。

紅色 (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)

用法

以下是亮度/暗度類列表，可用於更改應用的顏色。

lighten-1 (淺色1)
lighten-2 (淺色2)
lighten-3 (淺色3)
lighten-4 (淺色4)
lighten-5 (淺色5)
darken-1 (深色1)
darken-2 (深色2)
darken-3 (深色3)
darken-4 (深色4)
accent-1 (強調色1)
accent-2 (強調色2)
accent-3 (強調色3)
accent-4 (強調色4)

示例

以下示例演示如何使用上述類來渲染背景或更改文字顏色。對於背景，直接新增這些類；對於文字，在顏色類字尾“-text”，在亮度類字首“text-” 。

線上演示

<!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>

輸出

驗證輸出。

列印頁面