制作主题系统 - 图1

确定配色

你可以自己确定配色,或者在这里寻找配色:
12个精选UI配色、渐变配色、纯色配色网站(内附使用技巧) - 知乎 (zhihu.com)
UI设计色彩搭配表-配色表工具-普画网 (puhuajia.com)
或者安装uTools安装“颜色”插件来寻找配色。
Snipaste_2021-09-20_16-37-35.png
这篇文章选择了各有10种颜色的“Indigo”和“Cyan”来参考。

制作过程

编写返回颜色函数

Snipaste_2021-09-21_08-20-25.png
Snipaste_2021-09-21_08-32-13.png
(先把颜色值存到列表中,然后编写函数返回其色阶值【色阶取值为0~9】)

编写设定颜色部分

Snipaste_2021-09-21_08-37-14.png

Snipaste_2021-09-21_08-29-56.png
Snipaste_2021-09-21_08-37-28.pngSnipaste_2021-09-21_08-39-58.pngSnipaste_2021-09-21_08-40-36.png
这样基本上就完成了。
theme_ci.gif

字体颜色切换

有时候制作了一个暗黑/明亮的主题,可能字体会因为色差小而模糊不清。
Snipaste_2021-09-21_09-00-49.png
下面是用把HEX转换为rgb后相乘取其中两个相乘最大的值,检测是否大于指定的值而决定字体颜色的代码:
Snipaste_2021-09-21_09-06-33.png
image.png
image.png
image.png
theme_LD.gif