feat: dark/light theming with emotion

src/App.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import styled from "@emotion/styled";
+import { ThemeProvider } from "emotion-theming";
 
-import logo from "./logo.svg";
 import "./App.css";
+import theme from "./styles/theme";
 import Navbar from "./components/Navbar";
 import Day from "./components/screens/Day";
 import Month from "./components/screens/Month";
@@ -21,23 +22,28 @@ const RouteLayout = styled.div`
 
 class App extends Component {
   state = {
-    authUser: JSON.parse(localStorage.getItem("authUser"))
+    authUser: JSON.parse(localStorage.getItem("authUser")),
+    selectedTheme: "LIGHT"
   };
 
   render() {
-    const { authUser } = this.state;
+    const { authUser, selectedTheme } = this.state;
+
+    const currentTheme = theme[selectedTheme];
     return (
-      <Router>
-        <Navbar />
-        <RouteLayout>
-          <Route path="/:year(\d+)" component={Year} />
-          <Route path="/:year(\d+)/:month(\d+)" component={Month} />
-          <Route path="/:year(\d+)/:month(\d+)/:day(\d+)" component={Day} />
-          <Route path="/user" component={User} />
-          <Route path="/login" component={Login} />
-          <Route path="/register" component={Register} />
-        </RouteLayout>
-      </Router>
+      <ThemeProvider theme={currentTheme}>
+        <Router>
+          <Navbar />
+          <RouteLayout>
+            <Route path="/:year(\d+)" component={Year} />
+            <Route path="/:year(\d+)/:month(\d+)" component={Month} />
+            <Route path="/:year(\d+)/:month(\d+)/:day(\d+)" component={Day} />
+            <Route path="/user" component={User} />
+            <Route path="/login" component={Login} />
+            <Route path="/register" component={Register} />
+          </RouteLayout>
+        </Router>
+      </ThemeProvider>
     );
   }
 }

src/components/Icon/Icon.js

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Book, Calendar, Circle, User } from "react-feather";
+
+const IconBase = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: none;
+  border-radius: 12px;
+  padding: 5px;
+  transition: 0.1s all ease-in-out;
+  &:hover {
+    background-color: yellow;
+  }
+`;
+
+const Icon = ({ name }) => (
+  <IconBase>
+    {name === "Book" && <Book />}
+    {name === "Calendar" && <Calendar />}
+    {name === "Circle" && <Circle />}
+    {name === "User" && <User />}
+  </IconBase>
+);
+
+export default Icon;

src/components/Icon/index.js

@@ -0,0 +1,2 @@
+import Icon from "./Icon";
+export default Icon;

src/components/Navbar/Navbar.js

@@ -1,14 +1,17 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import styled from "@emotion/styled";
+import { compose } from "recompose";
+import { withTheme } from "emotion-theming";
 
-import { todayUrl, yearUrl, urls } from "../../utils/date";
+import { todayUrl, yearUrl } from "../../utils/date";
 
+import Icon from "../Icon";
 import SignOut from "../SignOut";
 import { withAuthentication } from "../session";
 
 const Header = styled.div`
-  background-color: #fafbfc;
+  background-color: ${props => props.theme.colors.background};
   height: 60px;
   display: grid;
   grid-template-areas: "... nav ...";
@@ -32,7 +35,7 @@ const NavIcons = styled.div`
   }
 `;
 
-const Navbar = ({ authUser }) => (
+const Navbar = ({ authUser, theme }) => (
   <Header>
     <Nav>
       <Logo>Logo</Logo>
@@ -42,6 +45,7 @@ const Navbar = ({ authUser }) => (
             <Link to={yearUrl()}>Year</Link>
             <Link to={todayUrl()}>Today</Link>
             <Link to={"/user"}>Account</Link>
+            <Icon name="Book" />
             <SignOut />
           </React.Fragment>
         ) : (
@@ -56,4 +60,7 @@ const Navbar = ({ authUser }) => (
   </Header>
 );
 
-export default withAuthentication(Navbar);
+export default compose(
+  withAuthentication,
+  withTheme
+)(Navbar);

src/components/Seek/Seek.js

@@ -8,13 +8,15 @@ const SeekHeader = styled.header`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-top: ${SIZES.normal};
 `;
 const SeekH1 = styled.h1`
   display: block;
   font-size: ${SIZES.normal};
 `;
 const SeekArrows = styled.div``;
+const SeekHr = styled.hr`
+  margin: 0;
+`;
 
 const Seek = ({ title = "", prev = "", next = "" }) => (
   <React.Fragment>
@@ -22,7 +24,7 @@ const Seek = ({ title = "", prev = "", next = "" }) => (
       <SeekH1>{title}</SeekH1>
       <SeekArrows>asdf</SeekArrows>
     </SeekHeader>
-    <hr />
+    <SeekHr />
   </React.Fragment>
 );
 

src/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
@@ -7,7 +8,6 @@ import Firebase, { FirebaseContext } from "./components/firebase";
 
 ReactDOM.render(
   <FirebaseContext.Provider value={new Firebase()}>
-    {" "}
     <App />
   </FirebaseContext.Provider>,
   document.getElementById("root")

src/styles/theme.js

@@ -0,0 +1,22 @@
+const theme = {
+  LIGHT: {
+    colors: {
+      primary: "#2E3136",
+      secondary: "#999",
+      tertiary: "#C4C4C4",
+      quarternary: "#EAEAEA",
+      background: "#FAFBFC"
+    }
+  },
+  DARK: {
+    colors: {
+      primary: "#F3F6F8",
+      secondary: "#9Ba3B0",
+      tertiary: "#6F7682",
+      quarternary: "#3E4B62",
+      background: "#2E3136"
+    }
+  }
+};
+
+export default theme;