Tuniao UI Uniapp V3颜色有效值
图鸟样式中的类型有以下 5 种值
primary success warning danger error info
内置的类型中提供了以下参数的颜色的变量值
light-3 light-5 light-7 light-8 light-9 dark-2
示例
css
background-color: var(--tn-color-primary);
background-color: var(--tn-color-primary-dark-2);
background-color: var(--tn-color-primary-light-3);
background-color: var(--tn-color-primary-light-5);
background-color: var(--tn-color-primary-light-7);
background-color: var(--tn-color-primary-light-8);
background-color: var(--tn-color-primary-light-9);background-color: var(--tn-color-primary);
background-color: var(--tn-color-primary-dark-2);
background-color: var(--tn-color-primary-light-3);
background-color: var(--tn-color-primary-light-5);
background-color: var(--tn-color-primary-light-7);
background-color: var(--tn-color-primary-light-8);
background-color: var(--tn-color-primary-light-9);图鸟样式中修改了以下颜色的默认，可以供开发者直接使用
red purplered purple bluepurple aquablue blue indigo cyan teal green yellowgreen lime yellow orangeyellow orange orangered brown grey gray
内置的颜色中提供了以下参数的颜色的变量值
disabled dark light
css
background-color: var(--tn-color-red);
background-color: var(--tn-color-red-disabled);
background-color: var(--tn-color-red-dark);
background-color: var(--tn-color-red-light);background-color: var(--tn-color-red);
background-color: var(--tn-color-red-disabled);
background-color: var(--tn-color-red-dark);
background-color: var(--tn-color-red-light);可以通过覆盖以下变量来修改图鸟内置颜色
css
/* 默认黑白色 */
--tn-color-white: #ffffff;
--tn-color-black: #000000;
/* 主题色rgb值 */
--tn-color-primary-rgb: 1, 190, 255;
--tn-color-success-rgb: 0, 216, 134;
--tn-color-warning-rgb: 251, 189, 18;
--tn-color-danger-rgb: 255, 68, 79;
--tn-color-error-rgb: 255, 68, 79;
--tn-color-info-rgb: 156, 156, 156;
/* 内置颜色rgb值 */
--tn-color-red-rgb: 232, 58, 48;
--tn-color-purplered-rgb: 231, 47, 140;
--tn-color-purple-rgb: 137, 47, 232;
--tn-color-bluepurple-rgb: 95, 79, 217;
--tn-color-aquablue-rgb: 54, 70, 255;
--tn-color-blue-rgb: 61, 126, 255;
--tn-color-indigo-rgb: 49, 201, 232;
--tn-color-cyan-rgb: 45, 232, 189;
--tn-color-teal-rgb: 36, 240, 131;
--tn-color-green-rgb: 49, 231, 73;
--tn-color-yellowgreen-rgb: 164, 232, 47;
--tn-color-lime-rgb: 213, 235, 0;
--tn-color-yellow-rgb: 255, 244, 32;
--tn-color-orangeyellow-rgb: 255, 202, 40;
--tn-color-orange-rgb: 255, 167, 38;
--tn-color-orangered-rgb: 255, 112, 67;
--tn-color-brown-rgb: 145, 79, 44;
--tn-color-grey-rgb: 120, 144, 156;
--tn-color-gray-rgb: 170, 170, 170;/* 默认黑白色 */
--tn-color-white: #ffffff;
--tn-color-black: #000000;
/* 主题色rgb值 */
--tn-color-primary-rgb: 1, 190, 255;
--tn-color-success-rgb: 0, 216, 134;
--tn-color-warning-rgb: 251, 189, 18;
--tn-color-danger-rgb: 255, 68, 79;
--tn-color-error-rgb: 255, 68, 79;
--tn-color-info-rgb: 156, 156, 156;
/* 内置颜色rgb值 */
--tn-color-red-rgb: 232, 58, 48;
--tn-color-purplered-rgb: 231, 47, 140;
--tn-color-purple-rgb: 137, 47, 232;
--tn-color-bluepurple-rgb: 95, 79, 217;
--tn-color-aquablue-rgb: 54, 70, 255;
--tn-color-blue-rgb: 61, 126, 255;
--tn-color-indigo-rgb: 49, 201, 232;
--tn-color-cyan-rgb: 45, 232, 189;
--tn-color-teal-rgb: 36, 240, 131;
--tn-color-green-rgb: 49, 231, 73;
--tn-color-yellowgreen-rgb: 164, 232, 47;
--tn-color-lime-rgb: 213, 235, 0;
--tn-color-yellow-rgb: 255, 244, 32;
--tn-color-orangeyellow-rgb: 255, 202, 40;
--tn-color-orange-rgb: 255, 167, 38;
--tn-color-orangered-rgb: 255, 112, 67;
--tn-color-brown-rgb: 145, 79, 44;
--tn-color-grey-rgb: 120, 144, 156;
--tn-color-gray-rgb: 170, 170, 170;css
/* 主题色Hex值 */
--tn-color-primary: #01beff;
--tn-color-primary-light-3: #4dd2ff;
--tn-color-primary-light-5: #80dfff;
--tn-color-primary-light-7: #b3ecff;
--tn-color-primary-light-8: #ccf2ff;
--tn-color-primary-light-9: #e6f9ff;
--tn-color-primary-dark-2: #0198cc;
--tn-color-success: #00d886;
--tn-color-success-light-3: #4de4aa;
--tn-color-success-light-5: #80ecc3;
--tn-color-success-light-7: #b3f3db;
--tn-color-success-light-8: #ccf7e7;
--tn-color-success-light-9: #e6fbf3;
--tn-color-success-dark-2: #00ad6b;
--tn-color-warning: #fbbd12;
--tn-color-warning-light-3: #fcd159;
--tn-color-warning-light-5: #fdde89;
--tn-color-warning-light-7: #feebb8;
--tn-color-warning-light-8: #fef2d0;
--tn-color-warning-light-9: #fff8e7;
--tn-color-warning-dark-2: #c9970e;
--tn-color-danger: #ff444f;
--tn-color-danger-light-3: #ff7c84;
--tn-color-danger-light-5: #ffa2a7;
--tn-color-danger-light-7: #ffc7ca;
--tn-color-danger-light-8: #ffdadc;
--tn-color-danger-light-9: #ffeced;
--tn-color-danger-dark-2: #cc363f;
--tn-color-error: #ff444f;
--tn-color-error-light-3: #ff7c84;
--tn-color-error-light-5: #ffa2a7;
--tn-color-error-light-7: #ffc7ca;
--tn-color-error-light-8: #ffdadc;
--tn-color-error-light-9: #ffeced;
--tn-color-error-dark-2: #cc363f;
--tn-color-info: #9c9c9c;
--tn-color-info-light-3: #bababa;
--tn-color-info-light-5: #cecece;
--tn-color-info-light-7: #e1e1e1;
--tn-color-info-light-8: #ebebeb;
--tn-color-info-light-9: whitesmoke;
--tn-color-info-dark-2: #7d7d7d;
/* 内置颜色Hex值 */
--tn-color-red: #e83a30;
--tn-color-red-dark: #ba2e26;
--tn-color-red-light: #fad8d6;
--tn-color-red-disabled: #f39c97;
--tn-color-purplered: #e72f8c;
--tn-color-purplered-dark: #b9266f;
--tn-color-purplered-light: #fad5e8;
--tn-color-purplered-disabled: #f397c5;
--tn-color-purple: #892fe8;
--tn-color-purple-dark: #6e26ba;
--tn-color-purple-light: #e7d5fa;
--tn-color-purple-disabled: #c497f3;
--tn-color-bluepurple: #5f4fd9;
--tn-color-bluepurple-dark: #4c3fae;
--tn-color-bluepurple-light: #dfdcf7;
--tn-color-bluepurple-disabled: #afa7ec;
--tn-color-aquablue: #3646ff;
--tn-color-aquablue-dark: #2b38cc;
--tn-color-aquablue-light: #d7daff;
--tn-color-aquablue-disabled: #9aa2ff;
--tn-color-blue: #3d7eff;
--tn-color-blue-dark: #3165cc;
--tn-color-blue-light: #d8e5ff;
--tn-color-blue-disabled: #9ebeff;
--tn-color-indigo: #31c9e8;
--tn-color-indigo-dark: #27a1ba;
--tn-color-indigo-light: #d6f4fa;
--tn-color-indigo-disabled: #98e4f3;
--tn-color-cyan: #2de8bd;
--tn-color-cyan-dark: #24ba97;
--tn-color-cyan-light: #d5faf2;
--tn-color-cyan-disabled: #96f3de;
--tn-color-teal: #24f083;
--tn-color-teal-dark: #1dc069;
--tn-color-teal-light: #d3fce6;
--tn-color-teal-disabled: #91f7c1;
--tn-color-green: #31e749;
--tn-color-green-dark: #27b93a;
--tn-color-green-light: #d6fadb;
--tn-color-green-disabled: #98f3a4;
--tn-color-yellowgreen: #a4e82f;
--tn-color-yellowgreen-dark: #82ba26;
--tn-color-yellowgreen-light: #edfad5;
--tn-color-yellowgreen-disabled: #d1f397;
--tn-color-lime: #d5eb00;
--tn-color-lime-dark: #aabc00;
--tn-color-lime-light: #f7fbcc;
--tn-color-lime-disabled: #e9f57f;
--tn-color-yellow: #fff420;
--tn-color-yellow-dark: #ccc21a;
--tn-color-yellow-light: #fffdd2;
--tn-color-yellow-disabled: #fff88f;
--tn-color-orangeyellow: #ffca28;
--tn-color-orangeyellow-dark: #cca220;
--tn-color-orangeyellow-light: #fff4d4;
--tn-color-orangeyellow-disabled: #ffe493;
--tn-color-orange: #ffa726;
--tn-color-orange-dark: #cc851e;
--tn-color-orange-light: #ffedd4;
--tn-color-orange-disabled: #ffd392;
--tn-color-orangered: #ff7043;
--tn-color-orangered-dark: #cc5a36;
--tn-color-orangered-light: #ffe2d9;
--tn-color-orangered-disabled: #ffb7a1;
--tn-color-brown: #914f2c;
--tn-color-brown-dark: #743f23;
--tn-color-brown-light: #e9dcd5;
--tn-color-brown-disabled: #c8a795;
--tn-color-grey: #78909c;
--tn-color-grey-dark: #5f7e8b;
--tn-color-grey-light: #e4e9ec;
--tn-color-grey-disabled: #c6d1d8;
--tn-color-gray: #aaaaaa;
--tn-color-gray-dark: #838383;
--tn-color-gray-light: #f8f7f8;
--tn-color-gray-disabled: #e6e6e6;
/* 默认背景颜色 */
--tn-bg-color: #ffffff;
/* 默认页面背景颜色 */
--tn-bg-color-page: #f4f4f4;
/* 默认覆盖层颜色 */
--tn-bg-color-overlay: #ffffff;
/* 默认mask颜色 */
--tn-bg-color-mask: rgba(0, 0, 0, 0.5);
/* 默认字体颜色 */
--tn-text-color-primary: #080808;
--tn-text-color-secondary: #9c9c9c;
--tn-text-color-placeholder: #838383;
--tn-text-color-disabled: #e6e6e6;/* 主题色Hex值 */
--tn-color-primary: #01beff;
--tn-color-primary-light-3: #4dd2ff;
--tn-color-primary-light-5: #80dfff;
--tn-color-primary-light-7: #b3ecff;
--tn-color-primary-light-8: #ccf2ff;
--tn-color-primary-light-9: #e6f9ff;
--tn-color-primary-dark-2: #0198cc;
--tn-color-success: #00d886;
--tn-color-success-light-3: #4de4aa;
--tn-color-success-light-5: #80ecc3;
--tn-color-success-light-7: #b3f3db;
--tn-color-success-light-8: #ccf7e7;
--tn-color-success-light-9: #e6fbf3;
--tn-color-success-dark-2: #00ad6b;
--tn-color-warning: #fbbd12;
--tn-color-warning-light-3: #fcd159;
--tn-color-warning-light-5: #fdde89;
--tn-color-warning-light-7: #feebb8;
--tn-color-warning-light-8: #fef2d0;
--tn-color-warning-light-9: #fff8e7;
--tn-color-warning-dark-2: #c9970e;
--tn-color-danger: #ff444f;
--tn-color-danger-light-3: #ff7c84;
--tn-color-danger-light-5: #ffa2a7;
--tn-color-danger-light-7: #ffc7ca;
--tn-color-danger-light-8: #ffdadc;
--tn-color-danger-light-9: #ffeced;
--tn-color-danger-dark-2: #cc363f;
--tn-color-error: #ff444f;
--tn-color-error-light-3: #ff7c84;
--tn-color-error-light-5: #ffa2a7;
--tn-color-error-light-7: #ffc7ca;
--tn-color-error-light-8: #ffdadc;
--tn-color-error-light-9: #ffeced;
--tn-color-error-dark-2: #cc363f;
--tn-color-info: #9c9c9c;
--tn-color-info-light-3: #bababa;
--tn-color-info-light-5: #cecece;
--tn-color-info-light-7: #e1e1e1;
--tn-color-info-light-8: #ebebeb;
--tn-color-info-light-9: whitesmoke;
--tn-color-info-dark-2: #7d7d7d;
/* 内置颜色Hex值 */
--tn-color-red: #e83a30;
--tn-color-red-dark: #ba2e26;
--tn-color-red-light: #fad8d6;
--tn-color-red-disabled: #f39c97;
--tn-color-purplered: #e72f8c;
--tn-color-purplered-dark: #b9266f;
--tn-color-purplered-light: #fad5e8;
--tn-color-purplered-disabled: #f397c5;
--tn-color-purple: #892fe8;
--tn-color-purple-dark: #6e26ba;
--tn-color-purple-light: #e7d5fa;
--tn-color-purple-disabled: #c497f3;
--tn-color-bluepurple: #5f4fd9;
--tn-color-bluepurple-dark: #4c3fae;
--tn-color-bluepurple-light: #dfdcf7;
--tn-color-bluepurple-disabled: #afa7ec;
--tn-color-aquablue: #3646ff;
--tn-color-aquablue-dark: #2b38cc;
--tn-color-aquablue-light: #d7daff;
--tn-color-aquablue-disabled: #9aa2ff;
--tn-color-blue: #3d7eff;
--tn-color-blue-dark: #3165cc;
--tn-color-blue-light: #d8e5ff;
--tn-color-blue-disabled: #9ebeff;
--tn-color-indigo: #31c9e8;
--tn-color-indigo-dark: #27a1ba;
--tn-color-indigo-light: #d6f4fa;
--tn-color-indigo-disabled: #98e4f3;
--tn-color-cyan: #2de8bd;
--tn-color-cyan-dark: #24ba97;
--tn-color-cyan-light: #d5faf2;
--tn-color-cyan-disabled: #96f3de;
--tn-color-teal: #24f083;
--tn-color-teal-dark: #1dc069;
--tn-color-teal-light: #d3fce6;
--tn-color-teal-disabled: #91f7c1;
--tn-color-green: #31e749;
--tn-color-green-dark: #27b93a;
--tn-color-green-light: #d6fadb;
--tn-color-green-disabled: #98f3a4;
--tn-color-yellowgreen: #a4e82f;
--tn-color-yellowgreen-dark: #82ba26;
--tn-color-yellowgreen-light: #edfad5;
--tn-color-yellowgreen-disabled: #d1f397;
--tn-color-lime: #d5eb00;
--tn-color-lime-dark: #aabc00;
--tn-color-lime-light: #f7fbcc;
--tn-color-lime-disabled: #e9f57f;
--tn-color-yellow: #fff420;
--tn-color-yellow-dark: #ccc21a;
--tn-color-yellow-light: #fffdd2;
--tn-color-yellow-disabled: #fff88f;
--tn-color-orangeyellow: #ffca28;
--tn-color-orangeyellow-dark: #cca220;
--tn-color-orangeyellow-light: #fff4d4;
--tn-color-orangeyellow-disabled: #ffe493;
--tn-color-orange: #ffa726;
--tn-color-orange-dark: #cc851e;
--tn-color-orange-light: #ffedd4;
--tn-color-orange-disabled: #ffd392;
--tn-color-orangered: #ff7043;
--tn-color-orangered-dark: #cc5a36;
--tn-color-orangered-light: #ffe2d9;
--tn-color-orangered-disabled: #ffb7a1;
--tn-color-brown: #914f2c;
--tn-color-brown-dark: #743f23;
--tn-color-brown-light: #e9dcd5;
--tn-color-brown-disabled: #c8a795;
--tn-color-grey: #78909c;
--tn-color-grey-dark: #5f7e8b;
--tn-color-grey-light: #e4e9ec;
--tn-color-grey-disabled: #c6d1d8;
--tn-color-gray: #aaaaaa;
--tn-color-gray-dark: #838383;
--tn-color-gray-light: #f8f7f8;
--tn-color-gray-disabled: #e6e6e6;
/* 默认背景颜色 */
--tn-bg-color: #ffffff;
/* 默认页面背景颜色 */
--tn-bg-color-page: #f4f4f4;
/* 默认覆盖层颜色 */
--tn-bg-color-overlay: #ffffff;
/* 默认mask颜色 */
--tn-bg-color-mask: rgba(0, 0, 0, 0.5);
/* 默认字体颜色 */
--tn-text-color-primary: #080808;
--tn-text-color-secondary: #9c9c9c;
--tn-text-color-placeholder: #838383;
--tn-text-color-disabled: #e6e6e6;使用方法
样式类型使用
在类型前加上 tn-type- 前缀，如 tn-type-primary，后面紧接_[样式作用的属性]，如tn-type-primary_bg
内置颜色使用
在颜色值前加上tn-前缀，如tn-red，后面紧接_[样式作用的属性]，如tn-red_bg