mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-31 09:07:38 +01:00
theme switch tweaks
This commit is contained in:
parent
5018f5c0c5
commit
10e4514de6
@ -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 (
|
||||
<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>
|
||||
<Fragment>
|
||||
<Helmet>
|
||||
<body className={this.state.dark ? 'dark' : null} />
|
||||
</Helmet>
|
||||
<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>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -44,7 +44,7 @@ class Footer extends PureComponent {
|
||||
FileSaver.saveAs(blob, this.generateFileName())
|
||||
}
|
||||
|
||||
handleAddressbookClick = (e) => {
|
||||
handleAddressbookClick = e => {
|
||||
e.preventDefault()
|
||||
this.constructVcard()
|
||||
}
|
||||
|
@ -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 }) => <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={classes}>
|
||||
<Fragment>
|
||||
<Head meta={meta} location={location} />
|
||||
<Header meta={meta} isHomepage={isHomepage} />
|
||||
|
||||
@ -48,7 +42,7 @@ const TemplateWrapper = ({ data, location, children }) => {
|
||||
</TransitionGroup>
|
||||
|
||||
<Footer meta={meta} />
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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'),
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user