chore: dark site style (#21246)

* fix: dark site style

* fix: format

* fix: update snapshot

* fix: site params

* fix: site style

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -155,9 +155,8 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
 >
   <span
     aria-label="frown"
-    class="anticon anticon-frown"
+    class="anticon anticon-frown icon-wrapper-active"
     role="img"
-    style="color:rgba(0, 0, 0, .45)"
   >
     <svg
       aria-hidden="true"
@@ -205,7 +204,6 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
     aria-label="smile"
     class="anticon anticon-smile"
     role="img"
-    style="color:"
   >
     <svg
       aria-hidden="true"

components/slider/demo/icon-slider.md

@@ -30,13 +30,13 @@ class IconSlider extends React.Component {
     const { max, min } = this.props;
     const { value } = this.state;
     const mid = ((max - min) / 2).toFixed(5);
-    const preColor = value >= mid ? '' : 'rgba(0, 0, 0, .45)';
-    const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
+    const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
+    const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
     return (
       <div className="icon-wrapper">
-        <FrownOutlined style={{ color: preColor }} />
+        <FrownOutlined className={preColorCls} />
         <Slider {...this.props} onChange={this.handleChange} value={value} />
-        <SmileOutlined style={{ color: nextColor }} />
+        <SmileOutlined className={nextColorCls} />
       </div>
     );
   }
@@ -61,6 +61,10 @@ ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
   color: rgba(0, 0, 0, 0.25);
 }
 
+.icon-wrapper .icon-wrapper-active {
+  color: rgba(0, 0, 0, .45);
+}
+
 .icon-wrapper .anticon:first-child {
   left: 0;
 }
@@ -69,3 +73,12 @@ ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
   right: 0;
 }
 ```
+
+<style>
+  [data-theme="dark"] .icon-wrapper .anticon {
+    color: rgba(255, 255, 255, 0.25);
+  }
+  [data-theme="dark"] .icon-wrapper .icon-wrapper-active {
+    color: rgba(255, 255, 255, .45);
+  }
+</style>

package.json

@@ -73,6 +73,7 @@
     "start": "rimraf _site && mkdir _site && cross-env NODE_ENV=development concurrently \"node ./scripts/generateColorLess.js\" \"bisheng start -c ./site/bisheng.config.js\"",
     "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
     "test": "jest --config .jest.js --no-cache",
+    "test:update": "jest --config .jest.js --no-cache --update-snapshot",
     "test-all": "./scripts/test-all.sh",
     "test-node": "jest --config .jest.node.js --no-cache",
     "tsc": "tsc",

scripts/generateColorLess.js

@@ -12,6 +12,7 @@ genCss(
       fileName: './_site/dark.css',
       modifyVars: {
         ...dark,
+        '@site-text-color': '@heading-color',
         '@site-markdown-code-bg': '@input-bg',
       },
     },

site/theme/static/dark.less

@@ -52,17 +52,6 @@
     &-debug {
       border-color: @purple-3;
     }
-    .code-box-title {
-      &,
-      a {
-        color: fade(@white, 65%);
-      }
-    }
-    .code-box-description {
-      p {
-        color: fade(@white, 65%);
-      }
-    }
 
     &-expand-trigger {
       position: relative;