Day 25 Compose UI Theme

今年的疫情蛮严重的，希望大家都过得安好，希望疫情快点过去，能回到一些线下技术聚会的时光～

今天目标：了解 Compose UI 上 Theme 怎麽使用。

终於到最後几天了，介绍一下开发的时候可能会遇到的功能。

首先回到我们 Compose UI 的内容，之前的元件们已经可以简单地做一些功能了，
但是推出到线上时，我们很容易有UI主题颜色上的需要，
所以如果能够改变成适合的主题时，我们会轻松很多。

其实过去的20来话都一直有用到 Theme 这个功能，只是我没有去关注而已。
譬如 Day 12的 Dialog：

里面就直接使用了预设的 MaterialTheme 来实作。

Compose UI Android 目前已经内建提供 Material 的主题，
MaterialTheme 提供了 Colors , Shapes, 与 Typography 来方便开发者设置主题。
Colors 就是提供了 The color system 的
相关颜色设定物件（关於 The color system ），
当然也包含了 Dark mode 的 color 设定。
Shapes 则是纸片化设计的一些应用形状，

你可以在 shape system 中找到他有提供的 Shape 使用方法

Typography 则是字型的部分，这部分我觉得蛮不错的！

Compose UI 定义了一个 type system，可以请设计师直接按照这个大小比率去设定，
这样就能简易的完成 Metarial Design 的字型大小。

private val defaultTypography = Typography() 
val appTypography = Typography
( h1 = defaultTypography.h1.copy(fontFamily = appFontFamily), 
h2 = defaultTypography.h2.copy(fontFamily = appFontFamily), 
h3 = defaultTypography.h3.copy(fontFamily = appFontFamily), 
h4 = defaultTypography.h4.copy(fontFamily = appFontFamily), 
h5 = defaultTypography.h5.copy(fontFamily = appFontFamily), 
h6 = defaultTypography.h6.copy(fontFamily = appFontFamily), 
subtitle1 = defaultTypography.subtitle1.copy(fontFamily = appFontFamily), 
subtitle2 = defaultTypography.subtitle2.copy(fontFamily = appFontFamily), 
body1 = defaultTypography.body1.copy(fontFamily = appFontFamily), body2 = defaultTypography.body2.copy(fontFamily = appFontFamily), button = defaultTypography.button.copy(fontFamily = appFontFamily), caption = defaultTypography.caption.copy(fontFamily = appFontFamily), 
overline = defaultTypography.overline.copy(fontFamily = appFontFamily) )

Component styles

虽然已经有了一个标准的 Material Design 的标准，
但有时候我们还是会有超过标准的个别需求，
在这种时候就可以利用已经宣告好的部分自行组合成需要的主题设计。

Custom design systems

你也可以完全重新设计一个你需要的主题，但这部分我就不多着墨了。
请参阅范例及 Material Theme source code：
https://github.com/android/compose-samples/tree/main/Jetsnack
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/MaterialTheme.kt

以上就是 Theme的介绍，今天的内容都了解了吗？
如果了解的话，我们就明天见罗！：）
参考资料：
https://developer.android.com/codelabs/jetpack-compose-theming#0
https://ithelp.ithome.com.tw/articles/10260634?sc=iThelpR
https://developer.android.com/jetpack/compose/themes
https://alexzh.com/jetpack-compose-theme-and-typography/

本文同步发表在 Medium 上 文章连结