Add iOS style dark/light theme toggle #118
Conversation
src/components/Bio.js
Outdated
| @@ -4,7 +4,7 @@ import React from 'react' | |||
| import 'typeface-montserrat' | |||
| import 'typeface-merriweather' | |||
|
|
|||
| import profilePic from './profile-pic.jpg' | |||
| import profilePic from '../assets/profile-pic.png' | |||
There was a problem hiding this comment.
here is a comparison between them:
mainly so that the background doesnt show as white in the dark theme. its also higher quality and uses CSS to make it rounded instead of the actual image itself being round.
src/components/Layout.js
Outdated
| {({theme, toggleTheme }) => ( | ||
| <div style={{ | ||
| color: theme.primary.text.normal, | ||
| background: theme.primary.background, |
There was a problem hiding this comment.
Let's add transition: 'color 0.2s ease-out, background 0.2s ease-out'
src/components/Style.js
Outdated
| } | ||
|
|
||
| .react-toggle-track { | ||
| background-color: #b3e5fc; |
src/components/Layout.js
Outdated
| <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}> | ||
| {this.renderHeader(theme)} | ||
| <Toggle | ||
| icons={{checked: <img src={moon}/>, unchecked: <img src={sun}/>}} |
src/components/ThemeContext.js
Outdated
| primary: { | ||
| background: '#000000', | ||
| text: { | ||
| normal: 'rgba(255, 255, 255, 0.8)', |
|
requested changes have been made |
|
Swiping the switch on iOS doesn’t work properly :/ |
|
Let's fix iOS (maybe just fork the toggle and customize it in our own code?) Also first render animates if we "remember" the dark mode from storage. Can first render be sync with correct mode so we don't transition? |
|
Also there's still blue hover — maybe let's make it something like |
|
|
|
Have you considered using Netlify @gaearon? It would be perfect for PRs like this since it automatically builds a preview for each PR. |
|
Maybe. We'll see. |
This is a cleaned up version of #44 with the requested iOS style toggle.
Adds a toggle which allows users to use a dark theme (persists in local storage), for light theme users there should be virtually no change apart from the addition of the toggle.
Live Demo: https://frosty-kirch-4a3ba9.netlify.com/