体验智能小程序主题色配置

面板小程序开发相关产品技术讨论,包括面板小程序、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
User avatar
Muzzzhi
Posts: 75

主题色配置

一. 简介

智能小程序主题色是指智能小程序的主要色调,主要用于智能小程序的背景色、文字颜色、按钮颜色等。主题色随着 App 配置而变化,同时支持 light 和 dark 两种主题色。 开发者无需关心主题色的变化。

二. 主题色

主题色值通过 css 变量的方式提供,开发者可在 css 中使用变量,在不同主题下,变量值会自动变化。

三. 主题色变量

变量名含义
--app-B1主背景色
--app-B2头部导航背景
--app-B3卡片背景
--app-B4弹窗背景
--app-B5底部导航背景
--app-B6列表背景
--app-M1按钮背景
--app-M2辅色 1(错误/警告/危险)
--app-M3辅色 2 (成功/开关/推荐)
--app-M4辅色 3 (提示/引导)
--app-M5Tab 选中色

四. 文本色扩展

在对应的主题色下,文本色扩展了 8 种,开发者可根据需要使用。 格式为 --app-${key}-N${level},其中 level 为 1 ~ 8 的数字。

示例:

Code: Select all

.app {
  background-color: var(--app-M1);
  color: var(--app-M1-N1);
}

五. 主题色小程序

扫码体验主题色小程序:

mp.png

高级进阶

一. 自定义主题

如果你想要自定义主题色,可以通过 app.tyss 内声明:

Code: Select all

page {
  color-scheme: light;
  --custom-color: #ff0000;
}
@media (prefers-color-scheme: dark) {
  page {
    color-scheme: dark;
    --custom-color: #0000ff;
  }
}

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM


Tags:
User avatar
TheThingX
Posts: 65
Location: TheThingX
Contact:

Re: 体验智能小程序主题色配置

This page is about configuring the theme color of a Smart MiniApp. The theme color is the main color tone of a Smart MiniApp mainly used for the background color, text color, button color, etc. of a Smart MiniApp. The theme color changes with the app configuration and supports both light and dark themes. Developers do not need to worry about the change of theme color. The theme color value is provided through css variables, and developers can use variables in css. Under different themes, variable values will change automatically. For more information on theme colors and variables, please refer to the web page context above.

[][TheThingX.com]
Post Reply