WIP: impl change mode switch

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -37,6 +37,21 @@ const PersonalDropdown = (props) => {
         <a className="dropdown-item" href={`/user/${user.username}#user-draft-list`}><i className="icon-fw icon-docs"></i>{ t('List Drafts') }</a>
         <a className="dropdown-item" href="/trash"><i className="icon-fw icon-trash"></i>{ t('Deleted Pages') }</a>
         <div className="dropdown-divider"></div>
+        <div>
+          Light
+          <div className="custom-control custom-switch checkbox-secondary">
+            <input
+              className="custom-control-input"
+              type="checkbox"
+              checked={appContainer.state.isDarkMode}
+              onChange={(e) => {
+                appContainer.changeColorScheme(e.target.checked);
+              }}
+            />
+          </div>
+          Dark
+        </div>
+        <div className="dropdown-divider"></div>
         <a className="dropdown-item" type="button" onClick={logoutHandler}><i className="icon-fw icon-power"></i>{ t('Sign out') }</a>
       </div>
     </>

src/client/js/services/AppContainer.js

@@ -31,6 +31,7 @@ export default class AppContainer extends Container {
 
     this.state = {
       editorMode: null,
+      isDarkMode: false,
     };
 
     const body = document.querySelector('body');
@@ -340,6 +341,10 @@ export default class AppContainer extends Container {
     targetComponent.launchDrawioModal(beginLineNumber, endLineNumber);
   }
 
+  changeColorScheme(isDarkMode) {
+    this.setState({ isDarkMode });
+  }
+
   async apiGet(path, params) {
     return this.apiRequest('get', path, { params });
   }