diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx
index 1168654..63c5712 100644
--- a/src/components/molecules/ThemeSwitch.jsx
+++ b/src/components/molecules/ThemeSwitch.jsx
@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
+import Helmet from 'react-helmet'
import { FadeIn } from '../atoms/Animations'
import { ReactComponent as Day } from '../../images/day.svg'
import { ReactComponent as Night } from '../../images/night.svg'
@@ -11,7 +12,7 @@ class ThemeSwitch extends PureComponent {
this.state = { dark: false }
}
- componentWillMount() {
+ componentDidMount() {
const now = new Date().getHours()
if (now >= 19 || now <= 7) {
@@ -19,52 +20,43 @@ class ThemeSwitch extends PureComponent {
}
}
- componentDidMount() {
- this.toggleTheme()
- }
-
- componentDidUpdate() {
- this.toggleTheme()
- }
-
isDark = () => this.state.dark === true
handleChange = () => {
this.setState({ dark: !this.isDark() })
}
- toggleTheme = () => {
- document
- .getElementsByClassName('app')[0]
- .classList.toggle('dark', this.state.dark)
- }
-
render() {
return (
-
-
-
+
+
+
+
+
+
+
+
)
}
}
diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx
index b0a374f..03a0934 100644
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.jsx
@@ -44,7 +44,7 @@ class Footer extends PureComponent {
FileSaver.saveAs(blob, this.generateFileName())
}
- handleAddressbookClick = (e) => {
+ handleAddressbookClick = e => {
e.preventDefault()
this.constructVcard()
}
diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx
index 9b0fdc2..c87409c 100644
--- a/src/layouts/index.jsx
+++ b/src/layouts/index.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
@@ -24,15 +24,9 @@ const Main = ({ children }) => {children}
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 (
-
+
@@ -48,7 +42,7 @@ const TemplateWrapper = ({ data, location, children }) => {
-
+
)
}
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index 4bfde24..a1175fd 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -107,14 +107,14 @@ svg {
margin: 0;
}
-.app {
+#___gatsby {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $body-background-color;
- transition: background .2s ease-out;
+ transition: .6s $easing;
- &.dark {
+ .dark & {
background: $body-background-color--dark;
color: $text-color--dark;
}
diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx
index b15f94b..3ff84e3 100644
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@@ -18,7 +18,7 @@ class Project extends Component {
const description = this.props.data.projectsYaml.description
this.state = {
- descriptionWithLineBreaks: description.split('\n').join('\n\n')
+ descriptionWithLineBreaks: description.split('\n').join('\n\n'),
}
}