feat:add theme switch

Author: biantao.shuaxin

demo/Single.js

@@ -387,6 +387,33 @@ export default class Single extends Component {
               Square
             </p>
           </div>
+          {/* Theme */}
+          <div className="field">
+            Theme
+          </div>
+          <div className="opts">
+            <p
+              className={
+              classnames("opt", { active: config.theme === "light" })}
+              onClick={this.updateConfig.bind(this, "theme", "light")}
+              >
+              Light
+            </p>
+            <p
+              className={
+              classnames("opt", { active: config.theme === "dark" })}
+              onClick={this.updateConfig.bind(this, "theme", "dark")}
+              >
+              Dark
+            </p>
+            <p
+              className={
+              classnames("opt", { active: config.theme === "system" })}
+              onClick={this.updateConfig.bind(this, "theme", "system")}
+              >
+              Follow System
+            </p>
+          </div>
         </div>
       </div>
     );

demo/app.js

@@ -31,7 +31,7 @@ export default class App extends Component {
     const { currentTab, config } = this.state;
 
     return (
-      <div className="app">
+      <div className={classnames("app", { appDark: config.theme === "dark", appSystemDark: config.theme === "system" })}>
         <a className="iconfont icon-github" href="https://github.com/chilllab/react-nice-avatar" />
 
         <header className="header">

demo/app.scss

@@ -365,3 +365,37 @@ $headerHeight: 6rem;
     margin-top: 1rem;
   }
 }
+
+// Dark Mode
+.appDark{
+  .header,
+  .appContent {
+    background: #000;
+    color: #ffffffc2;
+
+  }
+  .singleSection {
+    .info {
+      .opts {
+        .opt {
+          border: 1px solid #b9bcc06b;
+          color: #ffffffc2;
+        }
+        .active{
+          color: $blue-purple;
+          border-color: $blue-purple;
+        }
+      }
+    }
+  }
+  .application {
+    background-color: #fff;
+  }
+}
+
+// follow system
+@media (prefers-color-scheme: dark) {
+  .appSystemDark{
+    @extend .appDark;
+  }
+}

src/index.js

@@ -200,5 +200,8 @@ export const genConfig = (userConfig = {}) => {
   // Background color
   response.bgColor = userConfig.bgColor || _pickRandomFromList(bgColor, { avoidList: [response.hairColor, response.shirtColor] });
 
+  // Theme
+  response.theme = userConfig.theme || "light";
+
   return response;
 };