feat: change theme

components/style/themes/default.less

@@ -767,5 +767,3 @@
 // Notification
 // ---
 @notification-bg: @component-background;
-
-@import './dark.less';

site/theme/static/common.less

@@ -125,6 +125,10 @@ a {
   width: 100%;
   padding: 0;
   overflow: hidden;
+  &.page-theme-dark {
+    @import (inline) '../../../components/style/dark.less';
+    @import (less) '../../../dist/antd.dark.css';
+  }
 }
 
 .drawer-content {
@@ -143,3 +147,13 @@ a {
     color: #fff !important;
   }
 }
+
+.fixed-widgets {
+  position: fixed;
+  z-index: 2147483640;
+  bottom: 102px;
+  right: 30px;
+  & > div {
+    display: block;
+  }
+}

site/theme/template/Content/MainContent.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
-import { Row, Col, Menu, Affix } from 'antd';
+import { Row, Col, Menu, Affix, Button } from 'antd';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -73,6 +73,8 @@ const getSubMenuTitle = menuItem => {
 class MainContent extends Component {
   static contextTypes = {
     isMobile: PropTypes.bool.isRequired,
+    theme: PropTypes.oneOf(['default', 'dark']),
+    setTheme: PropTypes.func,
   };
 
   state = {
@@ -282,8 +284,13 @@ class MainContent extends Component {
     return this.flattenMenu((menu.props && menu.props.children) || menu.children);
   }
 
+  changeTheme = () => {
+    const { theme, setTheme } = this.context;
+    setTheme(theme !== 'dark' ? 'dark' : 'default');
+  };
+
   render() {
-    const { isMobile } = this.context;
+    const { isMobile, theme, setTheme } = this.context;
     const { openKeys } = this.state;
     const { localizedPageData, demos } = this.props;
     const activeMenuItem = this.getActiveMenuItem();
@@ -308,6 +315,7 @@ class MainContent extends Component {
         {menuItems}
       </Menu>
     );
+
     return (
       <div className="main-wrapper">
         <Row>
@@ -330,6 +338,11 @@ class MainContent extends Component {
                 <Article {...this.props} content={localizedPageData} />
               )}
             </section>
+            <div className="fixed-widgets">
+              <div>
+                <Button onClick={this.changeTheme}>{theme}</Button>
+              </div>
+            </div>
             <PrevAndNext prev={prev} next={next} />
             <Footer />
           </Col>

site/theme/template/Layout/index.jsx

@@ -4,6 +4,7 @@ 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';
@@ -60,6 +61,8 @@ export default class Layout extends React.Component {
 
   static childContextTypes = {
     isMobile: PropTypes.bool,
+    theme: PropTypes.oneOf(['default', 'dark']),
+    setTheme: PropTypes.func,
   };
 
   constructor(props) {
@@ -70,12 +73,14 @@ export default class Layout extends React.Component {
     this.state = {
       appLocale,
       isMobile,
+      theme: 'default',
+      setTheme: this.setTheme,
     };
   }
 
   getChildContext() {
-    const { isMobile: mobile } = this.state;
-    return { isMobile: mobile };
+    const { isMobile: mobile, theme, setTheme } = this.state;
+    return { isMobile: mobile, theme, setTheme };
   }
 
   componentDidMount() {
@@ -109,9 +114,15 @@ export default class Layout extends React.Component {
     clearTimeout(this.timer);
   }
 
+  setTheme = theme => {
+    this.setState({
+      theme,
+    });
+  };
+
   render() {
     const { children, helmetContext = {}, ...restProps } = this.props;
-    const { appLocale } = this.state;
+    const { appLocale, theme } = this.state;
     const title =
       appLocale.locale === 'zh-CN'
         ? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
@@ -120,6 +131,7 @@ 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}>
@@ -140,7 +152,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="page-wrapper">
+            <div className={wrapperCls}>
               <Header {...restProps} />
               {children}
             </div>