dark mode

frontend/src/Documents/Docs.scss

@@ -24,8 +24,11 @@
             h4 {
                 padding: 1rem;
                 padding-bottom: 1.5rem;
-                border-bottom: 1px $light-gray4 solid;
+                border-bottom: 1px $light-gray2 solid;
                 box-shadow: 0 0 5px $light-gray3;
+                .bp3-dark {
+                    box-shadow: 0 0 5px $dark-gray5;
+                }
             }
             .textPreview {
                 padding: 0.5rem;
@@ -33,4 +36,23 @@
             }
         }
     }
+}
+
+.bp3-dark {
+    #overview {
+        .separator {
+            border-bottom: 1px $dark-gray5 dashed;
+        }
+        .list {
+            .card {
+                h4 {
+                    border-bottom: 1px $dark-gray2 solid;
+                    box-shadow: 0 0 5px $dark-gray3;
+                }
+                .textPreview {
+                    color: $light-gray1;
+                }
+            }
+        }
+    }
 }

frontend/src/Home/Home.scss

@@ -13,4 +13,10 @@
     margin-right: auto;
     margin-top: 3rem;
     max-height: 100%;
+}
+
+#mainContainer.bp3-dark {
+    #MainScreen {
+        background: $dark-gray2;
+    }
 }

frontend/src/Home/Home.tsx

@@ -4,6 +4,7 @@ import {
     Alignment,
     Breadcrumbs,
     Button,
+    Classes,
     IBreadcrumbProps,
     Menu,
     Navbar,
@@ -18,13 +19,18 @@ import { IDocumentJSON } from "~../../src/entity/Document";
 import { IUserJSON } from "~../../src/entity/User";
 import { EditDoc } from "~Documents/EditDoc";
 import { Overview } from "~Documents/Overview";
+import { toggleDarkMode } from "~redux/localSettings/actions";
 import { IAppState } from "~redux/reducers";
 import { logoutUser } from "~redux/user/actions";
 
 interface IHomeProps extends RouteComponentProps {
     allDocs: { [key: number]: IDocumentJSON };
     user: IUserJSON | null;
+
+    darkMode: boolean;
+
     logout: () => void;
+    dispatchToggleDarkMode: () => void;
 }
 
 export class HomeComponent extends React.PureComponent<IHomeProps> {
@@ -54,7 +60,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
 
         return (
             this.props.user && (
-                <>
+                <div id="mainContainer" className={this.props.darkMode && Classes.DARK}>
                     <Navbar fixedToTop={true}>
                         <Navbar.Group align={Alignment.LEFT}>
                             <Navbar.Heading>Writer</Navbar.Heading>
@@ -75,6 +81,25 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                                             text="Logout"
                                             onClick={this.props.logout}
                                         />
+                                        {this.props.darkMode ? (
+                                            <Menu.Item
+                                                icon="flash"
+                                                text="Light Mode"
+                                                onClick={
+                                                    this.props
+                                                        .dispatchToggleDarkMode
+                                                }
+                                            />
+                                        ) : (
+                                            <Menu.Item
+                                                icon="moon"
+                                                text="Dark Mode"
+                                                onClick={
+                                                    this.props
+                                                        .dispatchToggleDarkMode
+                                                }
+                                            />
+                                        )}
                                     </Menu>
                                 }
                             />
@@ -110,18 +135,25 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             )}
                         </Transition>
                     </div>
-                </>
+                </div>
             )
         );
     }
 }
 
 function mapStateToProps(state: IAppState) {
-    return { allDocs: state.docs.all, user: state.user.user };
+    return {
+        allDocs: state.docs.all,
+        user: state.user.user,
+        darkMode: state.localSettings.darkMode,
+    };
 }
 
 function mapDispatchToProps(dispatch: Dispatch) {
-    return { logout: () => dispatch(logoutUser()) };
+    return {
+        logout: () => dispatch(logoutUser()),
+        dispatchToggleDarkMode: () => dispatch(toggleDarkMode()),
+    };
 }
 
 export const Home = withRouter(

frontend/src/redux/localSettings/actions.ts

@@ -0,0 +1,15 @@
+import { Action } from "redux";
+
+export enum LocalSettingsTypes {
+    TOGGLE_DARK_MODE = "TOGGLE_DARK_MODE",
+}
+
+export interface IToggleDarkModeAction extends Action {
+    type: LocalSettingsTypes.TOGGLE_DARK_MODE;
+}
+
+export function toggleDarkMode(): IToggleDarkModeAction {
+    return { type: LocalSettingsTypes.TOGGLE_DARK_MODE };
+}
+
+export type LocalSettingsAction = IToggleDarkModeAction;

frontend/src/redux/localSettings/reducer.ts

@@ -0,0 +1,28 @@
+import { Reducer } from "react";
+
+import { LocalSettingsAction, LocalSettingsTypes } from "./actions";
+
+export interface ILocalSettingsState {
+    darkMode: boolean;
+}
+
+const defaultLocalSettingsState: ILocalSettingsState = {
+    darkMode: false,
+};
+
+export const localSettingsReducer: Reducer<
+    ILocalSettingsState,
+    LocalSettingsAction
+> = (
+    state: ILocalSettingsState = defaultLocalSettingsState,
+    action: LocalSettingsAction,
+) => {
+    switch (action.type) {
+        case LocalSettingsTypes.TOGGLE_DARK_MODE:
+            const { darkMode } = state;
+            return { ...state, darkMode: !darkMode };
+        default:
+            return state;
+            break;
+    }
+};

frontend/src/redux/reducers.ts

@@ -4,12 +4,17 @@ import storage from "redux-persist/lib/storage";
 import { authReducer, IAuthState } from "~redux/auth/reducer";
 
 import { docsReducer, IDocsState } from "./docs/reducer";
+import {
+    ILocalSettingsState,
+    localSettingsReducer,
+} from "./localSettings/reducer";
 import { IUserState, userReducer } from "./user/reducer";
 
 export interface IAppState {
     auth: IAuthState;
     user: IUserState;
     docs: IDocsState;
+    localSettings: ILocalSettingsState;
 }
 
 const authPersistConfig = {
@@ -18,8 +23,17 @@ const authPersistConfig = {
     whitelist: ["jwt"],
 };
 
+const localSettingsPersistConfig = {
+    key: "localSettings",
+    storage,
+};
+
 export const rootReducer = combineReducers({
     auth: persistReducer(authPersistConfig, authReducer),
     user: userReducer,
     docs: docsReducer,
+    localSettings: persistReducer(
+        localSettingsPersistConfig,
+        localSettingsReducer,
+    ),
 });