improve default dark mode loading experience

src/components/molecules/ProjectTechstack.scss

@@ -15,6 +15,7 @@
         padding: $spacer / 4;
         text-align: center;
         background: rgba(#fff, .15);
+        border-radius: .25rem;
         color: $brand-grey-light;
         margin-left: $spacer / 2;
         margin-bottom: $spacer / 2;

src/components/molecules/ThemeSwitch.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { FadeIn } from '../atoms/Animations'
 import { ReactComponent as Day } from '../../images/day.svg'
 import { ReactComponent as Night } from '../../images/night.svg'
 import './ThemeSwitch.scss'
@@ -10,13 +11,15 @@ class ThemeSwitch extends Component {
     this.state = { dark: false }
   }
 
-  componentDidMount() {
+  componentWillMount() {
     const now = new Date().getHours()
 
     if (now >= 19 || now <= 7) {
       this.setState({ dark: true })
     }
+  }
 
+  componentDidMount() {
     this.toggleTheme()
   }
 
@@ -31,33 +34,35 @@ class ThemeSwitch extends Component {
   }
 
   toggleTheme = () => {
-    document.body.classList.toggle('dark', this.state.dark)
+    document.getElementsByClassName('app')[0].classList.toggle('dark', this.state.dark)
   }
 
   render() {
     return (
-      <aside className="themeswitch">
-        <label className="checkbox">
-          <span className="checkbox__label">Toggle Night Mode</span>
-          <input
-            onChange={this.handleChange}
-            type="checkbox"
-            name="toggle"
-            value="toggle"
-            aria-describedby="toggle"
-            checked={this.state.dark}
-          />
-          <span
-            id="toggle"
-            className="checkbox__faux-container"
-            aria-live="assertive"
-          >
-            <Day className={this.state.dark ? 'icon' : 'icon active'} />
-            <span className="checkbox__faux" />
-            <Night className={this.state.dark ? 'icon active' : 'icon'} />
-          </span>
-        </label>
-      </aside>
+      <FadeIn>
+        <aside className="themeswitch">
+          <label className="checkbox">
+            <span className="checkbox__label">Toggle Night Mode</span>
+            <input
+              onChange={this.handleChange}
+              type="checkbox"
+              name="toggle"
+              value="toggle"
+              aria-describedby="toggle"
+              checked={this.state.dark}
+            />
+            <span
+              id="toggle"
+              className="checkbox__faux-container"
+              aria-live="assertive"
+            >
+              <Day className={this.state.dark ? 'icon' : 'icon active'} />
+              <span className="checkbox__faux" />
+              <Night className={this.state.dark ? 'icon active' : 'icon'} />
+            </span>
+          </label>
+        </aside>
+      </FadeIn>
     )
   }
 }

src/components/molecules/ThemeSwitch.scss

@@ -5,15 +5,11 @@
     top: $spacer / 2;
     right: $spacer;
     z-index: 10;
-    opacity: .6;
-
-    .dark & {
-        opacity: .8;
-    }
 
     .icon {
         width: .8rem;
         height: .8rem;
+        margin-top: -.05rem;
         fill: $brand-grey-light;
 
         &:last-child {
@@ -22,16 +18,8 @@
             height: .7rem;
         }
 
-        &.active {
-            fill: $brand-grey;
-        }
-
         .dark & {
             fill: $brand-grey;
-
-            &.active {
-                fill: $brand-grey-light;
-            }
         }
     }
 }
@@ -41,12 +29,15 @@
     align-items: center;
 }
 
+$knob-size: 8px;
+$knob-space: 1px;
+
 .checkbox__faux {
     display: block;
     position: relative;
-    width: 1.15rem;
-    height: .61rem;
-    border: .05rem solid $brand-grey-light;
+    width: ($knob-size + ($knob-space * 2)) * 2;
+    height: $knob-size + ($knob-space * 4);
+    border: 1px solid $brand-grey-light;
     border-radius: 15rem;
     margin-left: $spacer / 3;
     margin-right: $spacer / 3;
@@ -54,20 +45,33 @@
     &::after {
         content: '';
         position: absolute;
-        top: .025rem;
-        left: .05rem;
-        width: .5rem;
-        height: .5rem;
-        background-color: $brand-grey;
+        top: $knob-space;
+        left: $knob-space;
+        width: $knob-size;
+        height: $knob-size;
+        background-color: $brand-grey-light;
         border-radius: 15rem;
         transition: transform .2s $easing;
         transform: translate3d(0, 0, 0);
     }
+
+    .dark & {
+        border-color: $brand-grey;
+
+        &::after {
+            background-color: $brand-grey;
+        }
+    }
 }
 
 .checkbox {
     position: relative;
     cursor: pointer;
+    opacity: .6;
+
+    .dark & {
+        opacity: .8;
+    }
 
     [type="checkbox"],
     .checkbox__label {

src/layouts/index.jsx

@@ -24,9 +24,15 @@ const Main = ({ children }) => <main className="screen">{children}</main>
 const TemplateWrapper = ({ data, location, children }) => {
   const meta = data.dataYaml
   const isHomepage = location.pathname === '/'
+  const now = new Date().getHours()
+  let classes = 'app'
+
+  if (now >= 19 || now <= 7) {
+    classes += ' dark'
+  }
 
   return (
-    <div className="app">
+    <div className={classes}>
       <Head meta={meta} location={location} />
       <Header meta={meta} isHomepage={isHomepage} />
 

src/layouts/index.scss

@@ -19,7 +19,6 @@ html {
 }
 
 body {
-    background: $body-background-color;
     font-family: $font-family-base;
     font-weight: $font-weight-base;
     font-size: $font-size-base;
@@ -29,12 +28,6 @@ body {
     font-feature-settings: 'liga', 'kern';
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    transition: background .2s ease-out;
-
-    &.dark {
-        background: $body-background-color--dark;
-        color: $text-color--dark;
-    }
 }
 
 p,
@@ -118,6 +111,13 @@ svg {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
+    background: $body-background-color;
+    transition: background .2s ease-out;
+
+    &.dark {
+        background: $body-background-color--dark;
+        color: $text-color--dark;
+    }
 }
 
 .screen {

src/styles/_variables.scss

@@ -7,6 +7,7 @@ $easing:                cubic-bezier(.75, 0, .08, 1);
 
 $brand-main:			#015565;
 $brand-cyan:            #43a699;
+$brand-main-light:      #88bec8;
 $brand-light:           #e7eef4;
 
 $brand-grey:			#6b7f88;
@@ -33,6 +34,7 @@ $text-color-light--dark: $brand-grey;
 
 // Typography
 /////////////////////////////////////
+
 $font-size-root             : 18px;
 
 $font-size-base             : 1rem;
@@ -61,7 +63,7 @@ $font-weight-headings       : 400;
 $line-height-headings       : 1.1;
 
 $color-headings:            $brand-main;
-$color-headings--dark:      lighten($color-headings, 10%);
+$color-headings--dark:      $brand-main-light;
 
 // Components spacing
 /////////////////////////////////////