diff --git a/example/app.less b/example/app.less
index 3a94c53e6..50b65a081 100644
--- a/example/app.less
+++ b/example/app.less
@@ -11,39 +11,15 @@
}
page {
- background-color: #f6f6f6;
- --bg-color-demo-desc: #0009;
- --bg-color-demo-title: #000000e6;
- --bg-color-demo: #fff;
- --bg-color-demo-border: #e7e7e7;
- --bg-color-demo-secondary: #fff;
- --td-navbar-bg-color: #f6f6f6;
- --td-navbar-color: black;
- --td-color-demo-notice-icon: rgba(0, 0, 0, 0.9);
- --td-avatar-border-color: var(--bg-color-demo);
+ background-color: var(--td-bg-color-page);
+
+ --bg-color-demo-desc: var(--td-text-color-secondary);
+ --bg-color-demo-title: var(--td-text-color-primary);
+ --bg-color-demo: var(--td-bg-color-container);
+ --bg-color-demo-secondary: var(--td-bg-color-container);
+ --td-navbar-bg-color: var(--td-bg-color-page);
+ --td-navbar-color: var(--td-text-color-primary);
--td-progress-circle-inner-bg-color: var(--bg-color-demo);
- --td-navbar-bg-color-example: @bg-color-container;
- --td-navbar-color-example: @text-color-primary;
- --td-grid-bg-color-example: @bg-color-container;
- --td-grid-item-bg-color-example: @bg-color-container;
- --td-input-border-color-example: rgba(220, 220, 220, 1);
-}
-
-@media (prefers-color-scheme: dark) {
- page {
- background: #181818 !important;
- --bg-color-demo-title: #fff;
- --bg-color-demo-desc: #fff;
- --bg-color-demo: #181818;
- --bg-color-demo-border: #383838;
- --bg-color-demo-secondary: #2c2c2c;
- --td-navbar-bg-color: #181818;
- --td-navbar-color: white;
- --td-color-demo-notice-icon: rgba(255, 255, 255, 0.9);
- --td-grid-bg-color-example: transparent;
- --td-grid-item-bg-color-example: transparent;
- --td-input-border-color-example: #5e5e5e;
- }
}
.skyline {
@@ -60,6 +36,11 @@ page {
.demo {
padding-bottom: 56rpx;
+ &-navbar {
+ --td-navbar-bg-color: var(--td-bg-color-container);
+ --td-navbar-color: var(--td-text-color-primary);
+ }
+
&-title {
font-size: 48rpx;
font-weight: 700;
diff --git a/site/theme/dark.ts b/site/theme/dark.ts
index 747c6a600..8ce200c98 100644
--- a/site/theme/dark.ts
+++ b/site/theme/dark.ts
@@ -2,7 +2,6 @@ const DARK_MODE_NAME = 'dark';
const darkModeCss = `
body {
- background: #181818;
--td-primary-color-1: #1b2f51;
--td-primary-color-2: #173463;
--td-primary-color-3: #143975;
@@ -137,22 +136,6 @@ const darkModeCss = `
--td-scrollbar-color: rgba(255, 255, 255, 10%);
--td-scroll-track-color: #333;
- --bg-color-demo-home-text: rgba(255, 255, 255, 0.9);
- --bg-color-demo-home: #4f4e4e;
- --bg-color-demo-title: #fff;
- --bg-color-demo-desc: #fff;
- --bg-color-demo: #181818;
- --bg-color-demo-border: #5e5e5e;
- --bg-color-demo-secondary: #2c2c2c;
- --td-navbar-bg-color: #181818;
- --td-navbar-color: white;
- --td-border-level-1-color: var(--td-gray-color-11);
- --td-component-stroke: var(--td-gray-color-11);
- --td-border-level-2-color: var(--td-gray-color-9);
- --td-component-border: var(--td-gray-color-9);
- --td-grid-bg-color-example: transparent;
- --td-grid-item-bg-color-example: transparent;
- --td-input-border-color-example: #5e5e5e;
}
`;
@@ -300,21 +283,7 @@ const lightModeCss = `
--td-scrollbar-color: rgba(0, 0, 0, 10%);
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
--td-scroll-track-color: #fff;
- --bg-color-demo-desc: #0009;
- --bg-color-demo-title: #000000e6;
- --bg-color-demo: #fff;
- --bg-color-demo-border: #e7e7e7;
- --bg-color-demo-secondary: #fff;
- --td-navbar-bg-color: #f6f6f6;
- --td-navbar-color: black;
- --td-color-demo-notice-icon: rgba(0, 0, 0, 0.9);
- --td-avatar-border-color: var(--bg-color-demo);
- --td-progress-circle-inner-bg-color: var(--bg-color-demo);
- --td-navbar-bg-color-example: var(--td-bg-color-container);
- --td-navbar-color-example: var(--td-text-color-primary);
- --td-grid-bg-color-example: var(--td-bg-color-container);
- --td-grid-item-bg-color-example: var(--td-bg-color-container);
- --td-input-border-color-example: rgba(220, 220, 220, 1);
+
}
`;
@@ -341,11 +310,12 @@ const LIGHT_WHITE_BACKGROUND_COMPONENTS = [
'action-sheet',
'dialog',
'loading',
- 'message',
'notice-bar',
'overlay',
'popup',
'pull-down-refresh',
+ 'toast',
+ 'guide',
];
function getCurComponentBackground() {
@@ -354,17 +324,16 @@ function getCurComponentBackground() {
const lastSegment = url.substring(lastUnderscoreIndex + 1);
let backgroundCss = '';
if (LIGHT_WHITE_BACKGROUND_COMPONENTS.includes(lastSegment)) {
- backgroundCss = 'body{ background: #fff !important; }';
- } else {
- backgroundCss = 'body{ background: #f6f6f6 !important; }';
+ backgroundCss = 'body{ background-color: var(--td-bg-color-container); }';
}
return backgroundCss;
}
function getDarkStyle() {
+ const curComponentBackground = getCurComponentBackground();
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
- styleElement.textContent = darkModeCss;
+ styleElement.textContent = darkModeCss + curComponentBackground;
styleElement.id = 'dark';
return styleElement;
}
diff --git a/src/action-sheet/_example/action-sheet.less b/src/action-sheet/_example/action-sheet.less
index 4bd49f1ef..3071191bf 100644
--- a/src/action-sheet/_example/action-sheet.less
+++ b/src/action-sheet/_example/action-sheet.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
.t-button {
margin-top: 32rpx;
diff --git a/src/action-sheet/_example/action-sheet.wxml b/src/action-sheet/_example/action-sheet.wxml
index b82e16514..60a6cc21b 100644
--- a/src/action-sheet/_example/action-sheet.wxml
+++ b/src/action-sheet/_example/action-sheet.wxml
@@ -1,4 +1,4 @@
-
+
ActionSheet 动作面板
从底部弹出的模态框,提供和当前场景相关的操作动作,也支持提供信息输入和描述。
diff --git a/src/avatar/_example/avatar.less b/src/avatar/_example/avatar.less
index 62af19de8..9b62ea8f4 100644
--- a/src/avatar/_example/avatar.less
+++ b/src/avatar/_example/avatar.less
@@ -1,5 +1,5 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
.demo-avatar {
diff --git a/src/avatar/_example/avatar.wxml b/src/avatar/_example/avatar.wxml
index 84037577b..1bdd75d89 100644
--- a/src/avatar/_example/avatar.wxml
+++ b/src/avatar/_example/avatar.wxml
@@ -1,5 +1,5 @@
-
+
Avatar 头像
diff --git a/src/back-top/_example/back-top.less b/src/back-top/_example/back-top.less
index 08665091e..aa2e97f3d 100644
--- a/src/back-top/_example/back-top.less
+++ b/src/back-top/_example/back-top.less
@@ -1,5 +1,5 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
.skeleton-item {
padding-bottom: 48rpx;
diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml
index fc4f29fa0..4bae1dec6 100644
--- a/src/back-top/_example/back-top.wxml
+++ b/src/back-top/_example/back-top.wxml
@@ -1,4 +1,4 @@
-
+
BackTop 返回顶部
用于当页面过长往下滑动时,帮助用户快速回到页面顶部。
diff --git a/src/back-top/_example/skyline/back-top.less b/src/back-top/_example/skyline/back-top.less
index 08665091e..aa2e97f3d 100644
--- a/src/back-top/_example/skyline/back-top.less
+++ b/src/back-top/_example/skyline/back-top.less
@@ -1,5 +1,5 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
.skeleton-item {
padding-bottom: 48rpx;
diff --git a/src/button/_example/button.less b/src/button/_example/button.less
index 3b782f198..c8d2d650a 100644
--- a/src/button/_example/button.less
+++ b/src/button/_example/button.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.t-button {
diff --git a/src/button/_example/button.wxml b/src/button/_example/button.wxml
index 3a8d42744..f31ef3779 100644
--- a/src/button/_example/button.wxml
+++ b/src/button/_example/button.wxml
@@ -1,4 +1,4 @@
-
+
Button 按钮
用于开启一个闭环的操作任务,如“删除”对象、“购买”商品等。
diff --git a/src/button/_example/skyline/button.less b/src/button/_example/skyline/button.less
index 7a284e8b9..6aabfe1ad 100644
--- a/src/button/_example/skyline/button.less
+++ b/src/button/_example/skyline/button.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.button-example {
diff --git a/src/count-down/_example/count-down.less b/src/count-down/_example/count-down.less
index 66ce489d9..ab4769fac 100644
--- a/src/count-down/_example/count-down.less
+++ b/src/count-down/_example/count-down.less
@@ -1,7 +1,7 @@
@gray: rgba(0, 0, 0, 0.4);
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
.flex {
diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml
index abdd27106..72970c52b 100644
--- a/src/count-down/_example/count-down.wxml
+++ b/src/count-down/_example/count-down.wxml
@@ -1,4 +1,4 @@
-
+
CountDown 倒计时
用于实时展示倒计时数值。
diff --git a/src/count-down/_example/skyline/count-down.less b/src/count-down/_example/skyline/count-down.less
index e81280cfe..2b200c211 100644
--- a/src/count-down/_example/skyline/count-down.less
+++ b/src/count-down/_example/skyline/count-down.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/dialog/_example/dialog.less b/src/dialog/_example/dialog.less
index 23062cc7e..2b200c211 100644
--- a/src/dialog/_example/dialog.less
+++ b/src/dialog/_example/dialog.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/dialog/_example/dialog.wxml b/src/dialog/_example/dialog.wxml
index 2cae6ae82..4e90dc01d 100644
--- a/src/dialog/_example/dialog.wxml
+++ b/src/dialog/_example/dialog.wxml
@@ -1,4 +1,4 @@
-
+
Dialog 对话框
用于显示重要提示或请求用户进行重要操作,一种打断当前操作的模态视图。
diff --git a/src/dialog/_example/skyline/dialog.less b/src/dialog/_example/skyline/dialog.less
index 23062cc7e..2b200c211 100644
--- a/src/dialog/_example/skyline/dialog.less
+++ b/src/dialog/_example/skyline/dialog.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/dialog/_example/skyline/dialog.wxml b/src/dialog/_example/skyline/dialog.wxml
index c5ba30b0f..da4da2700 100644
--- a/src/dialog/_example/skyline/dialog.wxml
+++ b/src/dialog/_example/skyline/dialog.wxml
@@ -1,5 +1,5 @@
-
+
Dialog 对话框
diff --git a/src/divider/_example/divider.less b/src/divider/_example/divider.less
index 23062cc7e..2b200c211 100644
--- a/src/divider/_example/divider.less
+++ b/src/divider/_example/divider.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/divider/_example/divider.wxml b/src/divider/_example/divider.wxml
index 843292b2d..3ef7db7c0 100644
--- a/src/divider/_example/divider.wxml
+++ b/src/divider/_example/divider.wxml
@@ -1,4 +1,4 @@
-
+
Divider 分割线
用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
diff --git a/src/divider/_example/skyline/divider.less b/src/divider/_example/skyline/divider.less
index 23062cc7e..2b200c211 100644
--- a/src/divider/_example/skyline/divider.less
+++ b/src/divider/_example/skyline/divider.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/divider/_example/skyline/divider.wxml b/src/divider/_example/skyline/divider.wxml
index f514aaab9..8b60a94db 100644
--- a/src/divider/_example/skyline/divider.wxml
+++ b/src/divider/_example/skyline/divider.wxml
@@ -1,5 +1,5 @@
-
+
Divider 分割线
diff --git a/src/drawer/_example/drawer.less b/src/drawer/_example/drawer.less
index 23062cc7e..2b200c211 100644
--- a/src/drawer/_example/drawer.less
+++ b/src/drawer/_example/drawer.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/drawer/_example/drawer.wxml b/src/drawer/_example/drawer.wxml
index e7d047ce7..fc606e474 100644
--- a/src/drawer/_example/drawer.wxml
+++ b/src/drawer/_example/drawer.wxml
@@ -1,4 +1,4 @@
-
+
Drawer 抽屉
用作一组平行关系页面/内容的切换器,相较于Tab,同屏可展示更多的选项数量。
diff --git a/src/drawer/_example/skyline/drawer.less b/src/drawer/_example/skyline/drawer.less
index 23062cc7e..88f6ee6b3 100644
--- a/src/drawer/_example/skyline/drawer.less
+++ b/src/drawer/_example/skyline/drawer.less
@@ -1,3 +1,2 @@
page {
- background-color: #fff;
}
diff --git a/src/empty/_example/empty.less b/src/empty/_example/empty.less
index e81280cfe..2b200c211 100644
--- a/src/empty/_example/empty.less
+++ b/src/empty/_example/empty.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/empty/_example/empty.wxml b/src/empty/_example/empty.wxml
index db300d45e..447aadd39 100644
--- a/src/empty/_example/empty.wxml
+++ b/src/empty/_example/empty.wxml
@@ -1,4 +1,4 @@
-
+
Empty 空状态
用于空状态时的占位提示。
diff --git a/src/empty/_example/skyline/empty.less b/src/empty/_example/skyline/empty.less
index e81280cfe..2b200c211 100644
--- a/src/empty/_example/skyline/empty.less
+++ b/src/empty/_example/skyline/empty.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/fab/_example/fab.less b/src/fab/_example/fab.less
index 8bdd50599..ef3fc22dd 100644
--- a/src/fab/_example/fab.less
+++ b/src/fab/_example/fab.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.wrapper {
diff --git a/src/fab/_example/fab.wxml b/src/fab/_example/fab.wxml
index 20b8ff31e..208e0dd59 100644
--- a/src/fab/_example/fab.wxml
+++ b/src/fab/_example/fab.wxml
@@ -1,4 +1,4 @@
-
+
Fab 悬浮按钮
当功能使用图标即可表意清楚时,可使用纯图标悬浮按钮,例如:添加、发布
diff --git a/src/fab/_example/skyline/fab.less b/src/fab/_example/skyline/fab.less
index 8bdd50599..ef3fc22dd 100644
--- a/src/fab/_example/skyline/fab.less
+++ b/src/fab/_example/skyline/fab.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.wrapper {
diff --git a/src/footer/_example/footer.less b/src/footer/_example/footer.less
index e81280cfe..2b200c211 100644
--- a/src/footer/_example/footer.less
+++ b/src/footer/_example/footer.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/footer/_example/footer.wxml b/src/footer/_example/footer.wxml
index fa7f5f896..ca26ed447 100644
--- a/src/footer/_example/footer.wxml
+++ b/src/footer/_example/footer.wxml
@@ -1,4 +1,4 @@
-
+
Footer 页脚
用于基础列表展示,可附带文字、品牌logo、操作,常用商详、个人中心、设置等页面。
diff --git a/src/footer/_example/skyline/footer.less b/src/footer/_example/skyline/footer.less
index e81280cfe..2b200c211 100644
--- a/src/footer/_example/skyline/footer.less
+++ b/src/footer/_example/skyline/footer.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/footer/_example/skyline/footer.wxml b/src/footer/_example/skyline/footer.wxml
index 498a42fdb..52ad497e8 100644
--- a/src/footer/_example/skyline/footer.wxml
+++ b/src/footer/_example/skyline/footer.wxml
@@ -1,5 +1,5 @@
-
+
Footer 页脚
用于基础列表展示,可附带文字、品牌logo、操作,常用商详、个人中心、设置等页面。
diff --git a/src/guide/_example/guide.less b/src/guide/_example/guide.less
index e81280cfe..2b200c211 100644
--- a/src/guide/_example/guide.less
+++ b/src/guide/_example/guide.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/guide/_example/guide.wxml b/src/guide/_example/guide.wxml
index a78a8c88b..b79675ec8 100644
--- a/src/guide/_example/guide.wxml
+++ b/src/guide/_example/guide.wxml
@@ -1,6 +1,5 @@
-
-
-
+
+
Guide 引导
逐步骤进行指引或解释说明的组件,常用于用户不熟悉的或需进行特别强调的页面。
diff --git a/src/icon/_example/base/index.wxss b/src/icon/_example/base/index.wxss
index dc9f7c439..803b42569 100644
--- a/src/icon/_example/base/index.wxss
+++ b/src/icon/_example/base/index.wxss
@@ -8,6 +8,7 @@
flex: 0 0 25%;
text-align: center;
margin-bottom: 30rpx;
+ color: var(--td-text-color-primary);
}
.demo__card-name {
diff --git a/src/icon/_example/icon.less b/src/icon/_example/icon.less
index 45092da14..130876120 100644
--- a/src/icon/_example/icon.less
+++ b/src/icon/_example/icon.less
@@ -1,5 +1,5 @@
@import './iconfont.wxss';
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/icon/_example/icon.wxml b/src/icon/_example/icon.wxml
index f60347ced..97003ca8a 100644
--- a/src/icon/_example/icon.wxml
+++ b/src/icon/_example/icon.wxml
@@ -1,4 +1,4 @@
-
+
Icon 图标
-
+
Icon 图标
diff --git a/src/image-viewer/_example/image-viewer.less b/src/image-viewer/_example/image-viewer.less
index 23062cc7e..2b200c211 100644
--- a/src/image-viewer/_example/image-viewer.less
+++ b/src/image-viewer/_example/image-viewer.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/image-viewer/_example/image-viewer.wxml b/src/image-viewer/_example/image-viewer.wxml
index f0ba503aa..1a41a7e3d 100644
--- a/src/image-viewer/_example/image-viewer.wxml
+++ b/src/image-viewer/_example/image-viewer.wxml
@@ -1,4 +1,4 @@
-
+
ImageViewer 图片预览
用于图片内容的缩略展示与查看。
diff --git a/src/image-viewer/_example/skyline/image-viewer.less b/src/image-viewer/_example/skyline/image-viewer.less
new file mode 100644
index 000000000..2b200c211
--- /dev/null
+++ b/src/image-viewer/_example/skyline/image-viewer.less
@@ -0,0 +1,3 @@
+page {
+ background-color: var(--td-bg-color-container);
+}
diff --git a/src/image/_example/image.less b/src/image/_example/image.less
index f6468968a..7d0d1ef1f 100644
--- a/src/image/_example/image.less
+++ b/src/image/_example/image.less
@@ -1,5 +1,5 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
.title {
diff --git a/src/image/_example/image.wxml b/src/image/_example/image.wxml
index e69b988c4..a2b5fa9dd 100644
--- a/src/image/_example/image.wxml
+++ b/src/image/_example/image.wxml
@@ -1,4 +1,4 @@
-
+
Image 图片
用于展示效果,主要为上下左右居中裁切、拉伸、平铺等方式。
diff --git a/src/image/_example/skyline/image.less b/src/image/_example/skyline/image.less
index e81280cfe..2b200c211 100644
--- a/src/image/_example/skyline/image.less
+++ b/src/image/_example/skyline/image.less
@@ -1,3 +1,3 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/indexes/_example/indexes.less b/src/indexes/_example/indexes.less
index c6f5637c0..dfbaa38bd 100644
--- a/src/indexes/_example/indexes.less
+++ b/src/indexes/_example/indexes.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.t-button {
diff --git a/src/indexes/_example/indexes.wxml b/src/indexes/_example/indexes.wxml
index f4ee201d1..61f609296 100644
--- a/src/indexes/_example/indexes.wxml
+++ b/src/indexes/_example/indexes.wxml
@@ -1,4 +1,4 @@
-
+
Indexes 索引
用于页面中信息快速检索,可以根据目录中的页码快速找到所需的内容。
diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap
index dc35fdc0d..9df490d04 100644
--- a/src/input/__test__/__snapshots__/demo.test.js.snap
+++ b/src/input/__test__/__snapshots__/demo.test.js.snap
@@ -67,7 +67,7 @@ exports[`Input Input bordered demo works fine 1`] = `
-
+
Loading 加载
diff --git a/src/loading/_example/skyline/loading.less b/src/loading/_example/skyline/loading.less
index 23062cc7e..2b200c211 100644
--- a/src/loading/_example/skyline/loading.less
+++ b/src/loading/_example/skyline/loading.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/message-item/message-item.less b/src/message-item/message-item.less
index 9468961bd..60dd90951 100644
--- a/src/message-item/message-item.less
+++ b/src/message-item/message-item.less
@@ -10,7 +10,7 @@
@message-content-font-size: @font-size-base;
@message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色
-@message-box-shadow: var(--td-message-box-shadow, @shadow-4); // 消息通知阴影
+@message-box-shadow: var(--td-message-box-shadow, @shadow-1); // 消息通知阴影
@message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小
@message-content-font-color: var(--td-message-content-font-color, @text-color-primary); // 内容文本颜色
@message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色
diff --git a/src/message/_example/message.less b/src/message/_example/message.less
index f599b59be..9eb308835 100644
--- a/src/message/_example/message.less
+++ b/src/message/_example/message.less
@@ -1,7 +1,5 @@
-page {
- background: #fff;
-}
-
-.demo-block__oper {
- padding: 0 32rpx;
+.message-example {
+ .t-button {
+ background-color: transparent;
+ }
}
diff --git a/src/message/_example/message.wxml b/src/message/_example/message.wxml
index 8fc6a01ca..2da61c277 100644
--- a/src/message/_example/message.wxml
+++ b/src/message/_example/message.wxml
@@ -1,5 +1,5 @@
-
+
Message 消息通知
用于轻量级反馈或提示,不会打断用户操作。
diff --git a/src/navbar/_example/navbar.less b/src/navbar/_example/navbar.less
index 81647d295..a0092e1ba 100644
--- a/src/navbar/_example/navbar.less
+++ b/src/navbar/_example/navbar.less
@@ -17,6 +17,6 @@
}
.demo {
- --td-navbar-bg-color: var(--td-navbar-bg-color-example);
- --td-navbar-color: var(--td-navbar-color-example);
+ --td-navbar-bg-color: var(--td-bg-color-container);
+ --td-navbar-color: var(--text-color-primary);
}
diff --git a/src/navbar/_example/skyline/navbar.less b/src/navbar/_example/skyline/navbar.less
index 333dad0ff..3d9ca2368 100644
--- a/src/navbar/_example/skyline/navbar.less
+++ b/src/navbar/_example/skyline/navbar.less
@@ -16,6 +16,6 @@
}
.demo {
- --td-navbar-bg-color: var(--td-navbar-bg-color-example);
- --td-navbar-color: var(--td-navbar-color-example);
+ --td-navbar-bg-color: var(--td-bg-color-container);
+ --td-navbar-color: var(--text-color-primary);
}
diff --git a/src/navbar/navbar.less b/src/navbar/navbar.less
index acec88717..34e590b0b 100644
--- a/src/navbar/navbar.less
+++ b/src/navbar/navbar.less
@@ -69,7 +69,7 @@
padding-right: @navbar-right;
padding-top: @navbar-padding-top;
color: @navbar-color;
- background: @navbar-bg-color;
+ background-color: @navbar-bg-color;
display: flex;
align-items: center;
box-sizing: content-box;
diff --git a/src/notice-bar/_example/custom/index.wxss b/src/notice-bar/_example/custom/index.wxss
index 1b20ca61f..4d9c75f21 100644
--- a/src/notice-bar/_example/custom/index.wxss
+++ b/src/notice-bar/_example/custom/index.wxss
@@ -4,5 +4,5 @@ page .external-class {
}
page .external-class-prefix-icon {
- color: var(--td-color-demo-notice-icon)
-}
\ No newline at end of file
+ color: var(--td-text-color-primary);
+}
diff --git a/src/notice-bar/_example/notice-bar.less b/src/notice-bar/_example/notice-bar.less
index 500d7d9e2..66a988ecd 100644
--- a/src/notice-bar/_example/notice-bar.less
+++ b/src/notice-bar/_example/notice-bar.less
@@ -1,5 +1,5 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
.t-notice-bar {
diff --git a/src/notice-bar/_example/notice-bar.wxml b/src/notice-bar/_example/notice-bar.wxml
index c096b19e9..297ad80b4 100644
--- a/src/notice-bar/_example/notice-bar.wxml
+++ b/src/notice-bar/_example/notice-bar.wxml
@@ -1,4 +1,4 @@
-
+
NoticeBar 公告栏
在导航栏下方,用于给用户显示提示消息。
diff --git a/src/overlay/_example/overlay.less b/src/overlay/_example/overlay.less
index 23062cc7e..2b200c211 100644
--- a/src/overlay/_example/overlay.less
+++ b/src/overlay/_example/overlay.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/overlay/_example/overlay.wxml b/src/overlay/_example/overlay.wxml
index 2d5cdd8bd..93a5de617 100644
--- a/src/overlay/_example/overlay.wxml
+++ b/src/overlay/_example/overlay.wxml
@@ -1,4 +1,4 @@
-
+
Overlay 遮罩层
通过遮罩层,可以强调部分内容
diff --git a/src/overlay/_example/skyline/overlay.less b/src/overlay/_example/skyline/overlay.less
index 23062cc7e..2b200c211 100644
--- a/src/overlay/_example/skyline/overlay.less
+++ b/src/overlay/_example/skyline/overlay.less
@@ -1,3 +1,3 @@
page {
- background-color: #fff;
+ background-color: var(--td-bg-color-container);
}
diff --git a/src/popup/_example/popup.less b/src/popup/_example/popup.less
index 4d5e5909c..1837d8a94 100644
--- a/src/popup/_example/popup.less
+++ b/src/popup/_example/popup.less
@@ -1,4 +1,4 @@
page {
- background: #fff;
+ background-color: var(--td-bg-color-container);
padding-bottom: 48rpx;
}
diff --git a/src/popup/_example/popup.wxml b/src/popup/_example/popup.wxml
index e014d8de4..24d850449 100644
--- a/src/popup/_example/popup.wxml
+++ b/src/popup/_example/popup.wxml
@@ -1,4 +1,4 @@
-
+
Popup 弹出层
由其他控件触发,屏幕滑出或弹出一块自定义内容区域。