wip: 临时提交
This commit is contained in:
Ray.Hao
@@ -1,5 +1,3 @@
|
||||
@import "./theme";
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
|
||||
@@ -1,190 +0,0 @@
|
||||
/**
|
||||
* 统一主题系统
|
||||
* 简洁易懂，一个文件搞定所有主题
|
||||
*/
|
||||
|
||||
/* 亮色主题（默认） */
|
||||
:root,
|
||||
page {
|
||||
/* ===== 主题色 ===== */
|
||||
--wot-color-theme: #165dff;
|
||||
--primary-color: var(--wot-color-theme);
|
||||
--primary-color-light: #94bfff;
|
||||
--primary-color-dark: #0e3c9b;
|
||||
|
||||
/* ===== 功能色 ===== */
|
||||
--wot-color-success: #0fc6c2;
|
||||
--wot-color-warning: #ff7d00;
|
||||
--wot-color-danger: #f5222d;
|
||||
--wot-color-info: #86909c;
|
||||
|
||||
/* ===== 文本颜色 ===== */
|
||||
--wot-color-text: #1d2129;
|
||||
--wot-color-text-secondary: #4e5969;
|
||||
--wot-color-text-placeholder: #86909c;
|
||||
--wot-color-text-disabled: #c9cdd4;
|
||||
|
||||
/* ===== 背景颜色 ===== */
|
||||
--wot-color-bg: #ffffff;
|
||||
--wot-color-bg-page: #f5f7fa;
|
||||
--wot-color-bg-light: #f8f9fa;
|
||||
--wot-color-bg-container: #ffffff;
|
||||
|
||||
/* ===== 边框颜色 ===== */
|
||||
--wot-color-border: #e5e6eb;
|
||||
--wot-color-border-light: #f2f3f5;
|
||||
|
||||
/* ===== 组件专用变量 ===== */
|
||||
--wot-card-bg-color: var(--wot-color-bg-container);
|
||||
--wot-card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
--wot-cell-bg-color: var(--wot-color-bg-container);
|
||||
--wot-popup-bg-color: var(--wot-color-bg-container);
|
||||
--wot-navbar-bg-color: var(--wot-color-bg-container);
|
||||
--wot-tabbar-bg-color: var(--wot-color-bg-container);
|
||||
}
|
||||
|
||||
/* 暗黑主题 */
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark"] page,
|
||||
.wot-theme-dark,
|
||||
.wot-theme-dark page {
|
||||
/* ===== 主题色（暗黑模式下稍微调亮） ===== */
|
||||
--wot-color-theme: #4080ff;
|
||||
--primary-color: var(--wot-color-theme);
|
||||
--primary-color-light: #6fa0ff;
|
||||
--primary-color-dark: #2060df;
|
||||
|
||||
/* ===== 功能色 ===== */
|
||||
--wot-color-success: #1dd1cc;
|
||||
--wot-color-warning: #ff8c1a;
|
||||
--wot-color-danger: #ff4757;
|
||||
--wot-color-info: #9ca3af;
|
||||
|
||||
/* ===== 文本颜色 ===== */
|
||||
--wot-color-text: #ffffff;
|
||||
--wot-color-text-secondary: #d1d5db;
|
||||
--wot-color-text-placeholder: #9ca3af;
|
||||
--wot-color-text-disabled: #6b7280;
|
||||
|
||||
/* ===== 背景颜色 ===== */
|
||||
--wot-color-bg: #1a1a1a;
|
||||
--wot-color-bg-page: #0f0f0f;
|
||||
--wot-color-bg-light: #2a2a2a;
|
||||
--wot-color-bg-container: #1f1f1f;
|
||||
|
||||
/* ===== 边框颜色 ===== */
|
||||
--wot-color-border: #404040;
|
||||
--wot-color-border-light: #606060;
|
||||
|
||||
/* ===== 组件专用变量 ===== */
|
||||
--wot-card-bg-color: var(--wot-color-bg-container);
|
||||
--wot-card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||
--wot-cell-bg-color: var(--wot-color-bg-container);
|
||||
--wot-popup-bg-color: var(--wot-color-bg-container);
|
||||
--wot-navbar-bg-color: var(--wot-color-bg-container);
|
||||
--wot-tabbar-bg-color: var(--wot-color-bg-container);
|
||||
}
|
||||
|
||||
/* 动态主题色类（这些会被 useTheme 动态应用到根元素） */
|
||||
.theme-color-165DFF {
|
||||
--wot-color-theme: #165dff;
|
||||
--primary-color: #165dff;
|
||||
}
|
||||
.theme-color-0FC6C2 {
|
||||
--wot-color-theme: #0fc6c2;
|
||||
--primary-color: #0fc6c2;
|
||||
}
|
||||
.theme-color-722ED1 {
|
||||
--wot-color-theme: #722ed1;
|
||||
--primary-color: #722ed1;
|
||||
}
|
||||
.theme-color-F5222D {
|
||||
--wot-color-theme: #f5222d;
|
||||
--primary-color: #f5222d;
|
||||
}
|
||||
.theme-color-FA8C16 {
|
||||
--wot-color-theme: #fa8c16;
|
||||
--primary-color: #fa8c16;
|
||||
}
|
||||
.theme-color-FADB14 {
|
||||
--wot-color-theme: #fadb14;
|
||||
--primary-color: #fadb14;
|
||||
}
|
||||
.theme-color-52C41A {
|
||||
--wot-color-theme: #52c41a;
|
||||
--primary-color: #52c41a;
|
||||
}
|
||||
.theme-color-EB2F96 {
|
||||
--wot-color-theme: #eb2f96;
|
||||
--primary-color: #eb2f96;
|
||||
}
|
||||
.theme-color-13C2C2 {
|
||||
--wot-color-theme: #13c2c2;
|
||||
--primary-color: #13c2c2;
|
||||
}
|
||||
.theme-color-1890FF {
|
||||
--wot-color-theme: #1890ff;
|
||||
--primary-color: #1890ff;
|
||||
}
|
||||
.theme-color-CD5C5C {
|
||||
--wot-color-theme: #cd5c5c;
|
||||
--primary-color: #cd5c5c;
|
||||
}
|
||||
.theme-color-228B22 {
|
||||
--wot-color-theme: #228b22;
|
||||
--primary-color: #228b22;
|
||||
}
|
||||
|
||||
/* 全局基础样式 */
|
||||
page {
|
||||
color: var(--wot-color-text);
|
||||
background-color: var(--wot-color-bg-page);
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
/* H5 环境下的 body 样式 */
|
||||
/* #ifdef H5 */
|
||||
body {
|
||||
color: var(--wot-color-text);
|
||||
background-color: var(--wot-color-bg-page);
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* 通用组件样式重置 */
|
||||
view,
|
||||
text,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 确保所有 Wot 组件使用主题变量 */
|
||||
:deep(.wd-button--primary) {
|
||||
background-color: var(--wot-color-theme) !important;
|
||||
border-color: var(--wot-color-theme) !important;
|
||||
}
|
||||
|
||||
:deep(.wd-cell) {
|
||||
background-color: var(--wot-cell-bg-color) !important;
|
||||
}
|
||||
|
||||
:deep(.wd-navbar) {
|
||||
background-color: var(--wot-navbar-bg-color) !important;
|
||||
}
|
||||
|
||||
:deep(.wd-tabbar) {
|
||||
background-color: var(--wot-tabbar-bg-color) !important;
|
||||
}
|
||||
|
||||
:deep(.wd-icon) {
|
||||
color: var(--wot-color-theme) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user