fix(Demo): fix design token error for dark mode (#3049)

* fix(Demo): fix design token error for dark mode

* test: update snapshots

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;

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;
 }

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;

src/action-sheet/_example/action-sheet.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="ActionSheet" leftArrow />
+<t-navbar class="demo-navbar" title="ActionSheet" leftArrow />
 <view class="demo">
   <view class="demo-title">ActionSheet 动作面板</view>
   <view class="demo-desc">从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。</view>

src/avatar/_example/avatar.less

@@ -1,5 +1,5 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }
 
 .demo-avatar {

src/avatar/_example/avatar.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar title="Avatar" leftArrow />
+  <t-navbar class="demo-navbar" title="Avatar" leftArrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <view class="demo-title">Avatar 头像</view>

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;

src/back-top/_example/back-top.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="BackTop" leftArrow />
+<t-navbar class="demo-navbar" title="BackTop" leftArrow />
 <view class="demo">
   <view class="demo-title">BackTop 返回顶部</view>
   <view class="demo-desc"> 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。</view>

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;

src/button/_example/button.less

@@ -1,5 +1,5 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }
 
 .t-button {

src/button/_example/button.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Button" leftArrow />
+<t-navbar class="demo-navbar" title="Button" leftArrow />
 <view class="demo">
   <view class="demo-title">Button 按钮</view>
   <view class="demo-desc">用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</view>

src/button/_example/skyline/button.less

@@ -1,5 +1,5 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }
 
 .button-example {

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 {

src/count-down/_example/count-down.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="CountDown" leftArrow />
+<t-navbar class="demo-navbar" title="CountDown" leftArrow />
 <view class="demo-title">CountDown 倒计时</view>
 <view class="demo-desc">用于实时展示倒计时数值。</view>
 

src/count-down/_example/skyline/count-down.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/dialog/_example/dialog.less

@@ -1,3 +1,3 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/dialog/_example/dialog.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Dialog" leftArrow />
+<t-navbar class="demo-navbar" title="Dialog" leftArrow />
 <view class="demo">
   <view class="demo-title">Dialog 对话框</view>
   <view class="demo-desc">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</view>

src/dialog/_example/skyline/dialog.less

@@ -1,3 +1,3 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/dialog/_example/skyline/dialog.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="block" title="Dialog" left-arrow />
+  <t-navbar class="block demo-navbar" title="Dialog" left-arrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <view class="demo-title">Dialog 对话框</view>

src/divider/_example/divider.less

@@ -1,3 +1,3 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/divider/_example/divider.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Divider" leftArrow />
+<t-navbar class="demo-navbar" title="Divider" leftArrow />
 <view class="demo">
   <view class="demo-title">Divider 分割线</view>
   <view class="demo-desc">用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。</view>

src/divider/_example/skyline/divider.less

@@ -1,3 +1,3 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/divider/_example/skyline/divider.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="block" title="Divider" left-arrow />
+  <t-navbar class="demo-navbar" class="block" title="Divider" left-arrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <view class="demo-title">Divider 分割线</view>

src/drawer/_example/drawer.less

@@ -1,3 +1,3 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/drawer/_example/drawer.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Drawer" leftArrow />
+<t-navbar class="demo-navbar" title="Drawer" leftArrow />
 <view class="demo">
   <view class="demo-title">Drawer 抽屉</view>
   <view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>

src/drawer/_example/skyline/drawer.less

@@ -1,3 +1,2 @@
 page {
-  background-color: #fff;
 }

src/empty/_example/empty.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/empty/_example/empty.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Empty" leftArrow />
+<t-navbar class="demo-navbar" title="Empty" leftArrow />
 <view class="demo">
   <view class="demo-title">Empty 空状态</view>
   <view class="demo-desc">用于空状态时的占位提示。</view>

src/empty/_example/skyline/empty.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/fab/_example/fab.less

@@ -1,5 +1,5 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }
 
 .wrapper {

src/fab/_example/fab.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Fab" leftArrow />
+<t-navbar class="demo-navbar" title="Fab" leftArrow />
 <view class="demo-title">Fab 悬浮按钮</view>
 <view class="demo-desc">当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布</view>
 <t-demo title="01 组件类型" desc="纯图标悬浮按钮">

src/fab/_example/skyline/fab.less

@@ -1,5 +1,5 @@
 page {
-  background-color: #fff;
+  background-color: var(--td-bg-color-container);
 }
 
 .wrapper {

src/footer/_example/footer.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/footer/_example/footer.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Footer" leftArrow />
+<t-navbar class="demo-navbar" title="Footer" leftArrow />
 <view class="demo-title">Footer 页脚</view>
 <view class="demo-desc">用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。</view>
 <t-demo title="01 类型" desc="基础页脚">

src/footer/_example/skyline/footer.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/footer/_example/skyline/footer.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="block" title="Footer" left-arrow />
+  <t-navbar class="block demo-navbar" title="Footer" left-arrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo-title">Footer 页脚</view>
     <view class="demo-desc">用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。</view>

src/guide/_example/guide.less

@@ -1,3 +1,3 @@
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/guide/_example/guide.wxml

@@ -1,6 +1,5 @@
-<view class="custom-navbar">
-  <t-navbar title="Guide" leftArrow />
-</view>
+<t-navbar class="demo-navbar" title="Guide" leftArrow />
+
 <view class="demo">
   <view class="demo-title">Guide 引导</view>
   <view class="demo-desc">逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。</view>

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 {

src/icon/_example/icon.less

@@ -1,5 +1,5 @@
 @import './iconfont.wxss';
 
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }

src/icon/_example/icon.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Icon" leftArrow />
+<t-navbar class="demo-navbar" title="Icon" leftArrow />
 <view class="demo">
   <view class="demo-title">Icon 图标</view>
   <view class="demo-desc"

src/icon/_example/skyline/icon.less

@@ -1,5 +1,5 @@
 @import '../iconfont.wxss';
 
 page {
-  background: #fff;
+  background-color: var(--td-bg-color-container);
 }