主题配置 ​

KOCA-Mobile 移动端框架新增了动态主题切换的功能，在 KOCA 低代码开发平台中也有对应的主题管理配置。在没有配置主题的情况下，会使用 KOCA-Mobile 移动端框架内置的默认主题。

操作说明 ​

1. 首次进入主题配置后，默认只有默认主题，主题类名为theme-default，类名和颜色值不能修改，且不能删除
2. 在最后一个主题下，有一个新增主题的按钮，如果界面高度不够，需要下滑出现
3. 点击新增主题按钮后可以添加主题
4. 每个主题的颜色值会同步渲染展示，并可以通过填写或单击颜色选择器在色卡中选择颜色，方便开发者直观查看效果
5. 新增的主题填充默认主题的色值，类名会自动赋值，用户也可以自定义主题的样式类名。类名的作用是在 KOCA-Mobile 移动端框架中生效的依据，所以不可重名
6. 在每个主题的右上角都有一个应用主题的单选框，注意有且只有一个是生效状态
7. 主题效果需在出码编译后查看效果，出码时会将应用的主题设置为选中的主题

样式 ​

主题色 ​

koca mobile 提供五个关于主题的 scss 颜色变量，分别是：

• $kui-color-primary 代表主体色
• $kui-color-success 代表成功色
• $kui-color-warning 代表警告色
• $kui-color-error 代表错误色
• $kui-color-info 代表信息色

他们都有对应的dark、light和disabled状态，分别表示对应的加深、变浅和禁止的对应颜色。拿主体色举例，就有四个变量:$kui-color-primary、$kui-color-primary-dark、$kui-color-primary-light、$kui-color-primary-disabled，以此类推。

举例 koca mobile 的button组件来说:

1. 设置type参数为primary时，按钮显示蓝色。
2. 按钮被按下时，使用的是primary的加深颜色，也即dark状态。
3. 按钮设置为镂空状态(plain为true)时，背景色为primary的变浅颜色，也即light状态。
4. 按钮处于禁止状态时，使用的是primary的稍浅颜色，也即disabled状态。

• 查看样式

  css

  $kui-color-primary: #3261ff;
  $kui-color-primary-dark: #3664e2;
  $kui-color-primary-disable: #5683ff;
  $kui-color-primary-light: #e8eef8;
  
  $kui-color-success: #5ac725;
  $kui-color-success-dark: #53c21d;
  $kui-color-success-disable: #a9e08f;
  $kui-color-success-light: #f5fff0;
  
  $kui-color-warning: #ea9f2b;
  $kui-color-warning-dark: #daa556;
  $kui-color-warning-disable: #eec88e;
  $kui-color-warning-light: #faf5ee;
  
  $kui-color-error: #f93500;
  $kui-color-error-dark: #f75d5d;
  $kui-color-error-disable: #fab6b6;
  $kui-color-error-light: #fcf5f5;
  
  $kui-color-info: #aaaaaa;
  $kui-color-info-dark: #838389;
  $kui-color-info-disable: #c4c6c9;
  $kui-color-info-light: #f3f5fb;

  $kui-color-primary: #3261ff;
  $kui-color-primary-dark: #3664e2;
  $kui-color-primary-disable: #5683ff;
  $kui-color-primary-light: #e8eef8;
  
  $kui-color-success: #5ac725;
  $kui-color-success-dark: #53c21d;
  $kui-color-success-disable: #a9e08f;
  $kui-color-success-light: #f5fff0;
  
  $kui-color-warning: #ea9f2b;
  $kui-color-warning-dark: #daa556;
  $kui-color-warning-disable: #eec88e;
  $kui-color-warning-light: #faf5ee;
  
  $kui-color-error: #f93500;
  $kui-color-error-dark: #f75d5d;
  $kui-color-error-disable: #fab6b6;
  $kui-color-error-light: #fcf5f5;
  
  $kui-color-info: #aaaaaa;
  $kui-color-info-dark: #838389;
  $kui-color-info-disable: #c4c6c9;
  $kui-color-info-light: #f3f5fb;

文本颜色 ​

Koca mobile 中，分别提炼了一些用于文字颜色，分别是：

• $kui-color-main 主要文字颜色，整个应用的主体文字颜色

• $kui-color-title 标题文字颜色，一般用于内容的标题等，如新闻列表的标题

• $kui-color-subtitle 副标题文字颜色

• $kui-color-content 常规文字颜色，一般用于内容的主体，如新闻列表的概要

• $kui-color-paragraph 段落文字颜色，一般用于段落文本

• $kui-color-tips 次要文字颜色，一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字

• $kui-color-light 占位文字颜色属于更浅的灰色，看场景选择使用

• 查看样式

  css

  $kui-color-main: #303133;
  $kui-color-title: #333333;
  $kui-color-subtitle: #666666;
  $kui-color-content: #606266;
  $kui-color-paragraph: #999999;
  $kui-color-tips: #909193;
  $kui-color-light: #c0c4cc;

  $kui-color-main: #303133;
  $kui-color-title: #333333;
  $kui-color-subtitle: #666666;
  $kui-color-content: #606266;
  $kui-color-paragraph: #999999;
  $kui-color-tips: #909193;
  $kui-color-light: #c0c4cc;

背景颜色 ​

$kui-color-bg 背景颜色

$kui-color-bg-dark 深色背景颜色

• 查看样式
  css

  $kui-color-bg: #f3f3f3;
  $kui-color-bg-dark: #212121;

  $kui-color-bg: #f3f3f3;
  $kui-color-bg-dark: #212121;

边框颜色 ​

$kui-color-border 全局边框颜色

• 查看样式
  css

  $kui-color-border: #eaeaea;

  $kui-color-border: #eaeaea;

禁用颜色 ​

$kui-color-disabled 全局禁用颜色

• 查看样式
  css

  $kui-color-disabled: #c8c9cc;

  $kui-color-disabled: #c8c9cc;

场景颜色 ​

基金场景

$kui-color-navup 代表涨幅

$kui-color-navdown 代表跌幅

• 查看样式
  css

  $kui-color-navup: #f93500;
  $kui-color-navdown: #00a000;

  $kui-color-navup: #f93500;
  $kui-color-navdown: #00a000;

其他颜色 ​

• 查看样式
  css

  $kui-color-green: #00a000;
  $kui-color-blue: #4c9fea;
  $kui-color-white: #ffffff;
  $kui-color-black: #000000;
  $kui-color-000: #000000;
  $kui-color-21: #212121;
  $kui-color-333: #333333;
  $kui-color-666: #666666;
  $kui-color-gray: #919191;
  $kui-color-999: #999999;
  $kui-color-ba: #bababa;
  $kui-color-fa: #fafafa;
  $kui-color-ea: #eaeaea;
  $kui-color-f8: #f8f8f8;
  $kui-color-red: #f93500;
  $kui-color-fff: #ffffff;
  $kui-color-f2: #f2f2f2;
  $kui-color-d7: #d7d7d7;
  $kui-color-de: #dedede;

  $kui-color-green: #00a000;
  $kui-color-blue: #4c9fea;
  $kui-color-white: #ffffff;
  $kui-color-black: #000000;
  $kui-color-000: #000000;
  $kui-color-21: #212121;
  $kui-color-333: #333333;
  $kui-color-666: #666666;
  $kui-color-gray: #919191;
  $kui-color-999: #999999;
  $kui-color-ba: #bababa;
  $kui-color-fa: #fafafa;
  $kui-color-ea: #eaeaea;
  $kui-color-f8: #f8f8f8;
  $kui-color-red: #f93500;
  $kui-color-fff: #ffffff;
  $kui-color-f2: #f2f2f2;
  $kui-color-d7: #d7d7d7;
  $kui-color-de: #dedede;