fix: improving theme jank

src/components/App.js

@@ -4,21 +4,21 @@ import { compose } from "recompose"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
-import { SIZES } from "./styles/constants"
+import { SIZES } from "styles/constants"
 
 // import theme from "./styles/theme"
-import Navbar from "./components/Navbar"
 import Day from "routes/Day"
 import Month from "routes/Month"
 import Year from "routes/Year"
 import User from "routes/User"
 import Search from "routes/Search"
 import Welcome from "routes/Welcome"
-import PrivateRoute from "./components/PrivateRoute"
 
-import { OnlineContext } from "./components/context/online"
-import { withAuthentication } from "./components/session"
-import { withFirebase } from "./components/firebase"
+import Navbar from "components/Navbar"
+import PrivateRoute from "components/PrivateRoute"
+import { OnlineContext } from "components/context/online"
+import { withAuthentication } from "components/session"
+import { withFirebase } from "components/firebase"
 import ThemeTogglerContext from "components/context/theme"
 
 const FullscreenBgColor = styled.div`
@@ -32,7 +32,6 @@ const RouteLayout = styled.div`
   padding: 0 10px;
   max-width: ${SIZES.maxWidth};
   min-height: calc(100vh - 60px);
-  background-color: transparent;
 `
 
 class App extends Component {

src/components/container.js

@@ -11,7 +11,6 @@ const Container = styled.div`
   padding: 0 10px;
   max-width: ${SIZES.maxWidth};
   min-height: calc(100vh - 60px);
-  background-color: ${props => props.theme.colors.bodyBackground};
 `
 
 export default Container

src/components/context/theme.js

@@ -17,11 +17,21 @@ class ThemeToggler extends React.Component {
         : "DARK",
   }
 
-  toggle = () => {
+  componentDidMount() {
+    // set the body style property on mount so routes don't flash between transitions
+    const { themeName } = this.state
+    this.toggle(themeName)
+  }
+
+  toggle = newThemeName => {
     const { themeName } = this.state
     const body = document.body
     let newTheme
-    newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT"
+    if (newThemeName) {
+      newTheme = newThemeName
+    } else {
+      newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT"
+    }
     body.style.setProperty(
       "background-color",
       theme[newTheme].colors.bodyBackground

src/pages/app.js

@@ -1,6 +1,6 @@
 import React from "react"
 
-import App from "../App"
+import App from "components/App"
 import Layout from "components/Layout"
 
 /* similar to create-react-app, the App.js is like the