今天來了解一下 Ionic 組件的 CSS 如何修改吧～ Ionic Framework 是使用 CSS 變數，不需要下載 Sass 或任何 CSS 預處理器也可以使用喔！

顏色樣式

從 src/theme/variables.css 中可以看到 Ionic 預設的主要顏色樣式，包含其顏色主題的陰影與原色色調，若要更改其中的顏色樣式，例如 primary 的顏色，則要連 contrast、shade、tint 一起修改，可以到 Ionic 提供的 Color Generator 來修改，也可以看到 iOS 與 Android 手機樣式的不同，修改後直接複製下面的程式碼再回頭修改 variables.css 檔案。

平台樣式

Ionic 組件會根據運行的作業系統而更改樣式(Adaptive Styling)，例如使用 Android 作業模式的手機，該 html 會加上 class = "md"，代表所有頁面都套用 Material Design 的模式，反之 iOS 就是用 class = "iOS"

若想另行覆蓋其樣式，在某些作業系統模式下才使用，可以這樣寫：

.ios {
  --ion-background-color: #222;
}

CSS 變數使用

例如要修改 ion-title 的樣式，官方建議使用 scoped 屬性，為了讓父組件的樣式不要影響到子組件。

<style scoped>
    ion-title {
    background: 36454f;
    }
</style>

或用 var() 取用 ionic css 變數

<style scoped>
    ion-title {
    background: var(--ion-color-primary);
    }
</style>

也可以從官方文件中組件的介紹裡尋找 CSS Custom Properties 定義的變數，例如 ion-title 的官方文件

<style scoped>
    ion-title {
    --color: var(--ion-color-primary);
    }
</style>