前言

以前的 App 就是看設計師或工程師心情去配色，後來 Google 推出 Material Design，只要配好亮色系六色和暗色系六色，就可以做出不難看的應用程式

網站

Color Picker

Color Picker

Color Picker 是個能快速找到相似色、對比色等的網站，是個很方便的配色網站

Color Tool

Color Tools

Color Tools 是專為 Material Design 設計的網站，還有應用程式可以對照，缺點是沒有繼續更新，所以匯出的顏色名稱跟現在的有點不符合

範例

1. 在 res > values > colors.xml
   建立好色票

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <color name="black">#FF000000</color>
       <color name="white">#FFFFFFFF</color>
   
       <color name="night_01579b">#01579b</color>
       <color name="night_4f83cc">#4f83cc</color>
       <color name="night_ffffff">#ffffff</color>
       <color name="night_4fc3f7">#ff8f00</color>
       <color name="night_8bf6ff">#c56000</color>
       <color name="night_222222">#222222</color>
   
       <color name="light_9fa8da">#90caf9</color>
       <color name="light_6f79a8">#5d99c6</color>
       <color name="light_ffffff">#ffffff</color>
       <color name="light_01579b">#fff59d</color>
       <color name="light_4f83cc">#cbc26d</color>
       <color name="light_222222">#222222</color>
   
   </resources>
   

2. 在 res > values > themes > themes.xml
   建立亮色模示的顏色

   <resources xmlns:tools="http://schemas.android.com/tools">
   <!-- Base application theme. -->
       <style name="Theme.專案名稱" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
       <!-- Primary brand color. -->
           <item name="colorPrimary">@color/light_9fa8da</item>
           <item name="colorPrimaryVariant">@color/light_6f79a8</item>
           <item name="colorOnPrimary">@color/light_222222</item>
           <!-- Secondary brand color. -->
           <item name="colorSecondary">@color/light_01579b</item>
           <item name="colorSecondaryVariant">@color/light_4f83cc</item>
           <item name="colorOnSecondary">@color/light_222222</item>
           <!-- Status bar color. -->
           <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
           <!-- Customize your theme here. -->
       </style>
   </resources>
   

3. 在 res > values > themes > themes.xml(night)
   建立深色模示的顏色

   <resources xmlns:tools="http://schemas.android.com/tools">
   <!-- Base application theme. -->
       <style name="Theme.專案名稱" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
           <!-- Primary brand color. -->
           <item name="colorPrimary">@color/night_01579b</item>
           <item name="colorPrimaryVariant">@color/night_4f83cc</item>
           <item name="colorOnPrimary">@color/night_ffffff</item>
       <!-- Secondary brand color. -->
           <item name="colorSecondary">@color/night_4fc3f7</item>
           <item name="colorSecondaryVariant">@color/night_8bf6ff</item>
           <item name="colorOnSecondary">@color/night_222222</item>
           <!-- Status bar color. -->
           <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
           <!-- Customize your theme here. -->
       </style>
   </resources>
   

4. 這樣就把元件的預設顏色設定完成，是不是很簡單呢

移除初始 Toolbar

一般來說就算要用 Toolbar，也是自己另外設定，但是專案的預設主題就有，所以我們要手動關閉他
回到上面的亮色和深色模示的顏色設定，把第三行的 parent 從 DarkActionBar 改成 NoActionBar 就好

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <!-- 這邊是顏色設定 -->

    </style>
</resources>