颜色变量
scss
// Primary / 主题
$ucs-color-primary: #604CFC;
$ucs-color-primary-1: #EFE8FF;
$ucs-color-primary-2: #D6C9FE;
$ucs-color-primary-3: #BCA9FE;
$ucs-color-primary-4: #9F8AFD;
$ucs-color-primary-5: #816BFD;
$ucs-color-primary-6: #604CFC;
$ucs-color-primary-7: #3C2FD0;
$ucs-color-primary-8: #2019A4;
$ucs-color-primary-9: #0B0978;
$ucs-color-primary-10: #00014D;scss
// Success / 成功
$ucs-color-success: #07C160;
$ucs-color-success-1: #E8FFEF;
$ucs-color-success-2: #B2F3C9;
$ucs-color-success-3: #81E6A8;
$ucs-color-success-4: #54DA8C;
$ucs-color-success-5: #2BCD74;
$ucs-color-success-6: #07C160;
$ucs-color-success-7: #04A457;
$ucs-color-success-8: #02874B;
$ucs-color-success-9: #016A3E;
$ucs-color-success-10: #004D2F;scss
// Warning / 警告
$ucs-color-warning: #EDA20C;
$ucs-color-warning-1: #FFFBE8;
$ucs-color-warning-2: #FBEEBA;
$ucs-color-warning-3: #F8DF8C;
$ucs-color-warning-4: #F4CD60;
$ucs-color-warning-5: #F1B836;
$ucs-color-warning-6: #EDA20C;
$ucs-color-warning-7: #C57F07;
$ucs-color-warning-8: #9D6004;
$ucs-color-warning-9: #754301;
$ucs-color-warning-10: #4D2900;scss
// Danger / 危险
$ucs-color-danger: #D9514C;
$ucs-color-danger-1: #FFEDE8;
$ucs-color-danger-2: #F7CEC5;
$ucs-color-danger-3: #F0AFA5;
$ucs-color-danger-4: #E88F85;
$ucs-color-danger-5: #E17068;
$ucs-color-danger-6: #D9514C;
$ucs-color-danger-7: #B63030;
$ucs-color-danger-8: #931A1E;
$ucs-color-danger-9: #700A11;
$ucs-color-danger-10: #4D0008;scss
// Grey / 中性灰
$ucs-color-grey: #a9aeb8;
$ucs-color-grey-1: #ffffff;
$ucs-color-grey-2: #f7f8fa;
$ucs-color-grey-3: #f2f3f5;
$ucs-color-grey-4: #e5e6eb;
$ucs-color-grey-5: #c9cdd4;
$ucs-color-grey-6: #a9aeb8;
$ucs-color-grey-7: #86909c;
$ucs-color-grey-8: #6b7785;
$ucs-color-grey-9: #4e5969;
$ucs-color-grey-10: #272e3b;
$ucs-color-grey-11: #1d2129;
$ucs-color-grey-12: #141414;scss
// Red / 浪漫红
$ucs-color-red: #F53F3F;
$ucs-color-red-1: #FFECE8;
$ucs-color-red-2: #FDCDC5;
$ucs-color-red-3: #FBACA3;
$ucs-color-red-4: #F98981;
$ucs-color-red-5: #F76560;
$ucs-color-red-6: #F53F3F;
$ucs-color-red-7: #CB272D;
$ucs-color-red-8: #A1151E;
$ucs-color-red-9: #770813;
$ucs-color-red-10: #4D000A;scss
// Orange Red / 晚秋红
$ucs-color-orangered: #F77234;
$ucs-color-orangered-1: #FFF3E8;
$ucs-color-orangered-2: #FDDDC3;
$ucs-color-orangered-3: #FCC59F;
$ucs-color-orangered-4: #FAAC7B;
$ucs-color-orangered-5: #F99057;
$ucs-color-orangered-6: #F77234;
$ucs-color-orangered-7: #CC5120;
$ucs-color-orangered-8: #A23511;
$ucs-color-orangered-9: #771F06;
$ucs-color-orangered-10: #4D0E00;scss
// Orange / 活力橙
$ucs-color-orange: #FF7D00;
$ucs-color-orange-1: #FFF7E8;
$ucs-color-orange-2: #FFE4BA;
$ucs-color-orange-3: #FFCF8B;
$ucs-color-orange-4: #FFB65D;
$ucs-color-orange-5: #FF9A2E;
$ucs-color-orange-6: #FF7D00;
$ucs-color-orange-7: #D25F00;
$ucs-color-orange-8: #A64500;
$ucs-color-orange-9: #792E00;
$ucs-color-orange-10: #4D1B00;scss
// Gold / 黄昏
$ucs-color-gold: #F7BA1E;
$ucs-color-gold-1: #FFFCE8;
$ucs-color-gold-2: #FDF4BF;
$ucs-color-gold-3: #FCE996;
$ucs-color-gold-4: #FADC6D;
$ucs-color-gold-5: #F9CC45;
$ucs-color-gold-6: #F7BA1E;
$ucs-color-gold-7: #CC9213;
$ucs-color-gold-8: #A26D0A;
$ucs-color-gold-9: #774B04;
$ucs-color-gold-10: #4D2D00;scss
// Yellow / 柠檬黄
$ucs-color-yellow: #FADC19;
$ucs-color-yellow-1: #FEFFE8;
$ucs-color-yellow-2: #FEFEBE;
$ucs-color-yellow-3: #FDFA94;
$ucs-color-yellow-4: #FCF26B;
$ucs-color-yellow-5: #FBE842;
$ucs-color-yellow-6: #FADC19;
$ucs-color-yellow-7: #CFAF0F;
$ucs-color-yellow-8: #A38408;
$ucs-color-yellow-9: #785D03;
$ucs-color-yellow-10: #4D3800;scss
// Lime / 新生绿
$ucs-color-lime: #9FDB1D;
$ucs-color-lime-1: #FCFFE8;
$ucs-color-lime-2: #EDF8BB;
$ucs-color-lime-3: #DCF190;
$ucs-color-lime-4: #C9E968;
$ucs-color-lime-5: #B5E241;
$ucs-color-lime-6: #9FDB1D;
$ucs-color-lime-7: #7EB712;
$ucs-color-lime-8: #5F940A;
$ucs-color-lime-9: #437004;
$ucs-color-lime-10: #2A4D00;scss
// Green / 仙野绿
$ucs-color-green: #00B42A;
$ucs-color-green-1: #E8FFEA;
$ucs-color-green-2: #AFF0B5;
$ucs-color-green-3: #7BE188;
$ucs-color-green-4: #4CD263;
$ucs-color-green-5: #23C343;
$ucs-color-green-6: #00B42A;
$ucs-color-green-7: #009A29;
$ucs-color-green-8: #008026;
$ucs-color-green-9: #006622;
$ucs-color-green-10: #004D1C;scss
// Cyan / 碧涛青
$ucs-color-cyan: #14C9C9;
$ucs-color-cyan-1: #E8FFFB;
$ucs-color-cyan-2: #B7F4EC;
$ucs-color-cyan-3: #89E9E0;
$ucs-color-cyan-4: #5EDFD6;
$ucs-color-cyan-5: #37D4CF;
$ucs-color-cyan-6: #14C9C9;
$ucs-color-cyan-7: #0DA5AA;
$ucs-color-cyan-8: #07828B;
$ucs-color-cyan-9: #03616C;
$ucs-color-cyan-10: #00424D;scss
// Blue / 海蔚蓝
$ucs-color-blue: #3491FA;
$ucs-color-blue-1: #E8F7FF;
$ucs-color-blue-2: #C3E7FE;
$ucs-color-blue-3: #9FD4FD;
$ucs-color-blue-4: #7BC0FC;
$ucs-color-blue-5: #57A9FB;
$ucs-color-blue-6: #3491FA;
$ucs-color-blue-7: #206CCF;
$ucs-color-blue-8: #114BA3;
$ucs-color-blue-9: #063078;
$ucs-color-blue-10: #001A4D;scss
// Arco Blue / 极致蓝
$ucs-color-arcoblue: #165DFF;
$ucs-color-arcoblue-1: #E8F3FF;
$ucs-color-arcoblue-2: #BEDAFF;
$ucs-color-arcoblue-3: #94BFFF;
$ucs-color-arcoblue-4: #6AA1FF;
$ucs-color-arcoblue-5: #4080FF;
$ucs-color-arcoblue-6: #165DFF;
$ucs-color-arcoblue-7: #0E42D2;
$ucs-color-arcoblue-8: #072CA6;
$ucs-color-arcoblue-9: #031A79;
$ucs-color-arcoblue-10: #000D4D;scss
// Purple / 暗夜紫
$ucs-color-purple: #722ED1;
$ucs-color-purple-1: #F5E8FF;
$ucs-color-purple-2: #DDBEF6;
$ucs-color-purple-3: #C396ED;
$ucs-color-purple-4: #A871E3;
$ucs-color-purple-5: #8D4EDA;
$ucs-color-purple-6: #722ED1;
$ucs-color-purple-7: #551DB0;
$ucs-color-purple-8: #3C108F;
$ucs-color-purple-9: #27066E;
$ucs-color-purple-10: #16004D;scss
// Pink Purple / 青春紫
$ucs-color-pinkpurple: #D91AD9;
$ucs-color-pinkpurple-1: #FFE8FB;
$ucs-color-pinkpurple-2: #F7BAEF;
$ucs-color-pinkpurple-3: #F08EE6;
$ucs-color-pinkpurple-4: #E865DF;
$ucs-color-pinkpurple-5: #E13EDB;
$ucs-color-pinkpurple-6: #D91AD9;
$ucs-color-pinkpurple-7: #B010B6;
$ucs-color-pinkpurple-8: #8A0993;
$ucs-color-pinkpurple-9: #650370;
$ucs-color-pinkpurple-10: #42004D;scss
// Magenta / 品红
$ucs-color-magenta: #F5319D;
$ucs-color-magenta-1: #FFE8F1;
$ucs-color-magenta-2: #FDC2DB;
$ucs-color-magenta-3: #FB9DC7;
$ucs-color-magenta-4: #F979B7;
$ucs-color-magenta-5: #F754A8;
$ucs-color-magenta-6: #F5319D;
$ucs-color-magenta-7: #CB1E83;
$ucs-color-magenta-8: #A11069;
$ucs-color-magenta-9: #77064F;
$ucs-color-magenta-10: #4D0034;修改色彩
在 uni.scss 中，修改您需要调整色彩，按需修改。
示例
假如我要修改主题（primary）色彩，那么在 uni.scss 中修改如下：
scss
// uni.scss文件
$ucs-color-primary: #D9514C; // 需要调整的色彩在uni-app / uni-app-x 中使用色彩变量
如果需要在项目页面中使用到色彩变量，可以在 uni.scss 中引入变量文件
1.引入变量文件
scss
// uni.scss文件
@import "@/uni_modules/ucs-css/var.scss";2.页面中使用
vue
<template>
<view>
<text class="test">
变量用法
</text>
</view>
</template>
<script setup>
</script>
<style lang="scss">
.test {
color: $ucs-color-primary; // 在样式中使用变量
}
</style>