add dark mode toggle to account dropdown menu

frontend/css/app/navbar.scss

@@ -303,6 +303,9 @@ nav {
         font-size: 1.2rem;
       }
     }
+    .dark-mode-toggle {
+      padding: 0.5rem 0 0 1rem;
+    }
   }
   .bp5-popover-arrow {
     visibility: hidden;

frontend/nav/__tests__/additional_menu_test.tsx

@@ -1,12 +1,21 @@
+jest.mock("../../config_storage/actions", () => ({
+  setWebAppConfigValue: jest.fn()
+}));
+
 import React from "react";
 import { mount, shallow } from "enzyme";
 import { AdditionalMenu } from "../additional_menu";
 import { AccountMenuProps } from "../interfaces";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { setWebAppConfigValue } from "../../config_storage/actions";
+import { BooleanSetting } from "../../session_keys";
 
 describe("AdditionalMenu", () => {
   const fakeProps = (): AccountMenuProps => ({
     isStaff: false,
     close: jest.fn(),
+    dispatch: jest.fn(),
+    darkMode: false,
   });
 
   it("renders the account menu", () => {
@@ -40,4 +49,12 @@ describe("AdditionalMenu", () => {
     const wrapper = shallow(<AdditionalMenu {...fakeProps()} />);
     wrapper.find("Link").at(2).simulate("click");
   });
+
+  it("toggles dark mode", () => {
+    render(<AdditionalMenu {...fakeProps()} />);
+    const toggle = screen.getByText("🌣");
+    fireEvent.click(toggle);
+    expect(setWebAppConfigValue).toHaveBeenCalledWith(
+      BooleanSetting.dark_mode, true);
+  });
 });

frontend/nav/additional_menu.tsx

@@ -6,6 +6,9 @@ import { t } from "../i18next_wrapper";
 import { ExternalUrl } from "../external_urls";
 import { FilePath, Icon, Path } from "../internal_urls";
 import { logout } from "../logout";
+import { setWebAppConfigValue } from "../config_storage/actions";
+import { BooleanSetting } from "../session_keys";
+import { ToggleButton } from "../ui";
 
 export const AdditionalMenu = (props: AccountMenuProps) => {
   return <div className="nav-additional-menu">
@@ -40,6 +43,17 @@ export const AdditionalMenu = (props: AccountMenuProps) => {
         {t("Logout and destroy token")}
       </a>
     </div>}
+    <div className={"dark-mode-toggle"}>
+      <label>{t("Dark Mode")}</label>
+      <ToggleButton
+        className={"no-float"}
+        toggleValue={props.darkMode}
+        toggleAction={() => {
+          props.dispatch(setWebAppConfigValue(
+            BooleanSetting.dark_mode, !props.darkMode));
+        }}
+        customText={{ textFalse: "🌣", textTrue: "☽" }} />
+    </div>
     <div className="app-version">
       <label>{t("APP VERSION")}</label>:&nbsp;
       <a href={ExternalUrl.webAppRepo} target="_blank" rel={"noreferrer"}>

frontend/nav/index.tsx

@@ -139,7 +139,11 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
             onClick={this.toggle("accountMenuOpen")}>
             {firstName}
           </div>}
-        content={<AdditionalMenu close={this.close} isStaff={this.isStaff} />} />
+        content={<AdditionalMenu
+          close={this.close}
+          dispatch={this.props.dispatch}
+          darkMode={!!this.props.getConfigValue(BooleanSetting.dark_mode)}
+          isStaff={this.isStaff} />} />
     </div>;
   };
 

frontend/nav/interfaces.ts

@@ -86,6 +86,8 @@ export interface NavLinksProps {
 export interface AccountMenuProps {
   isStaff: boolean;
   close: (property: keyof NavBarState) => ToggleEventHandler;
+  dispatch: Function;
+  darkMode: boolean;
 }
 
 export interface EStopButtonProps {