chore: use dark-vars.js

.antd-tools.config.js

@@ -1,8 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
-const lessToJs = require('less-vars-to-js');
 const packageInfo = require('./package.json');
+const darkVars = require('./scripts/dark-vars');
 
 // We need compile additional content for antd user
 function finalizeCompile() {
@@ -70,20 +70,10 @@ function finalizeDist() {
     console.log('Built a entry less file to dist/antd.dark.less');
 
     // Build dark.js: dist/dark-theme.js, for less-loader
-    const stylePath = path.join(process.cwd(), 'components', 'style');
-
-    const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
-    const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
-    const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
-
-    const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
-      stripPrefix: true,
-      resolveVariables: false,
-    });
 
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'dark-theme.js'),
-      `module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
+      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
     );
 
     // eslint-disable-next-line

scripts/dark-vars.js

@@ -0,0 +1,20 @@
+/**
+ * convert dark.less into js vars
+ *
+ * const darkVars = require('./dark-vars');
+ */
+const fs = require('fs');
+const path = require('path');
+const lessToJs = require('less-vars-to-js');
+
+const stylePath = path.join(__dirname, '..', 'components', 'style');
+const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
+const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
+const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
+
+const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
+  stripPrefix: true,
+  resolveVariables: false,
+});
+
+module.exports = darkPaletteLess;

site/theme/static/common.less

@@ -12,6 +12,7 @@ body {
   font-size: 14px;
   font-family: @font-family;
   line-height: 1.5;
+  background: #fff;
   transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
@@ -22,6 +23,7 @@ a {
 .main-wrapper {
   position: relative;
   padding: 40px 0 0;
+  background: #fff;
 }
 
 .main-container {
@@ -29,6 +31,7 @@ a {
   min-height: 500px;
   padding: 0 170px 144px 64px;
   overflow: hidden;
+  background: #fff;
 }
 
 .main-menu {

site/theme/static/toc.less

@@ -53,6 +53,7 @@ ul.toc > li {
     max-height: ~'calc(100vh - 16px)';
     overflow-x: hidden;
     overflow-y: auto;
+    background: #fff;
   }
 }
 
@@ -60,4 +61,7 @@ ul.toc > li {
   position: absolute;
   right: 20px;
   bottom: 88px;
+  .ant-affix {
+    background: #fff;
+  }
 }

site/theme/template/Layout/index.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { enquireScreen } from 'enquire-js';
 import { IntlProvider } from 'react-intl';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import classNames from 'classnames';
 import 'moment/locale/zh-cn';
 import { ConfigProvider } from 'antd';
 import LogRocket from 'logrocket';
@@ -122,7 +121,7 @@ export default class Layout extends React.Component {
 
   render() {
     const { children, helmetContext = {}, ...restProps } = this.props;
-    const { appLocale, theme } = this.state;
+    const { appLocale } = this.state;
     const title =
       appLocale.locale === 'zh-CN'
         ? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
@@ -131,7 +130,6 @@ export default class Layout extends React.Component {
       appLocale.locale === 'zh-CN'
         ? '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。'
         : 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
-    const wrapperCls = classNames('page-wrapper', `page-theme-${theme}`);
     return (
       <HelmetProvider context={helmetContext}>
         <Helmet encodeSpecialCharacters={false}>
@@ -152,7 +150,7 @@ export default class Layout extends React.Component {
         </Helmet>
         <IntlProvider locale={appLocale.locale} messages={appLocale.messages} defaultLocale="en-US">
           <ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
-            <div className={wrapperCls}>
+            <div className="page-wrapper">
               <Header {...restProps} />
               {children}
             </div>

webpack.config.js

@@ -2,10 +2,10 @@
 // This config is for building dist files
 const fs = require('fs');
 const path = require('path');
-const lessToJs = require('less-vars-to-js');
 const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
 const PacktrackerPlugin = require('@packtracker/webpack-plugin');
 const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
+const darkVars = require('./scripts/dark-vars');
 
 const { webpack } = getWebpackConfig;
 
@@ -66,18 +66,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
     config.module.rules.forEach(rule => {
       // filter less rule
       if (rule.test instanceof RegExp && rule.test.test('.less')) {
-        const stylePath = path.join(process.cwd(), 'components', 'style');
-        const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
-        const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
-        const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
-
-        rule.use[rule.use.length - 1].options.modifyVars = lessToJs(
-          `${colorLess}${defaultLess}${darkLess}`,
-          {
-            stripPrefix: true,
-            resolveVariables: false,
-          },
-        );
+        rule.use[rule.use.length - 1].options.modifyVars = darkVars;
       }
     });