Merge pull request #18 from SHUAXINDIARY/main

feat:add theme switch

Author: wwayne

demo/Single.js

@@ -397,6 +397,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,42 @@ $headerHeight: 6rem;
     margin-top: 1rem;
   }
 }
+
+// define Dark Mode css
+@mixin dark {
+  .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;
+    }
+  }
+}
+
+// use Dark Mode css
+@include dark;
+
+// follow system
+@media (prefers-color-scheme: dark) {
+  .appSystemDark{
+      @include dark;
+  }
+}

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