fix: revert theme workarounds

src/components/App.js

@@ -21,7 +21,7 @@ import { withAuthentication } from "./components/session"
 import { withFirebase } from "./components/firebase"
 import ThemeTogglerContext from "components/context/theme"
 
-const FullscreenLayout = styled.div`
+const FullscreenBgColor = styled.div`
   background-color: ${props => props.theme.colors.bodyBackground};
 `
 const RouteLayout = styled.div`
@@ -32,7 +32,7 @@ const RouteLayout = styled.div`
   padding: 0 10px;
   max-width: ${SIZES.maxWidth};
   min-height: calc(100vh - 60px);
-  background-color: ${props => props.theme.colors.bodyBackground};
+  background-color: transparent;
 `
 
 class App extends Component {
@@ -64,7 +64,7 @@ class App extends Component {
       <ThemeTogglerContext.Consumer>
         {({ toggle }) => (
           <OnlineContext.Provider value={online}>
-            <FullscreenLayout>
+            <FullscreenBgColor>
               <Navbar toggleTheme={toggle} />
               <RouteLayout>
                 <Router style={{ height: "100%" }}>
@@ -101,7 +101,7 @@ class App extends Component {
                   <Welcome authed={authed} path="/app" exact />
                 </Router>
               </RouteLayout>
-            </FullscreenLayout>
+            </FullscreenBgColor>
           </OnlineContext.Provider>
         )}
       </ThemeTogglerContext.Consumer>

src/components/context/theme.js

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