From 5d46b17eef78126a55e7d4016398596e9bfba29b Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Wed, 29 May 2019 22:36:24 -0600 Subject: [PATCH] fix: style flashes, app start_url, and quotes --- gatsby-config.js | 2 +- src/components/context/theme.js | 15 +++++++++++++-- src/data/quotes.json | 8 ++++++++ 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 97b306a..820c88a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -26,7 +26,7 @@ module.exports = { options: { name: `Sol Journal`, short_name: `Sol Journal`, - start_url: `/`, + start_url: `/app`, background_color: `#FFF`, theme_color: `#FFF`, display: `standalone`, diff --git a/src/components/context/theme.js b/src/components/context/theme.js index d74b899..de03dbf 100644 --- a/src/components/context/theme.js +++ b/src/components/context/theme.js @@ -17,10 +17,21 @@ class ThemeToggler extends React.Component { : "DARK", } - toggle = () => { + componentDidMount() { + // set the body style property on mount so routes don't flash between transitions + const { themeName } = this.state + this.toggle(themeName) + } + + toggle = newThemeName => { const { themeName } = this.state const body = document.body - const newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT" + let newTheme + if (newThemeName) { + newTheme = newThemeName + } else { + newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT" + } body.style.setProperty( "background-color", theme[newTheme].colors.bodyBackground diff --git a/src/data/quotes.json b/src/data/quotes.json index 24073b7..63a5ba3 100644 --- a/src/data/quotes.json +++ b/src/data/quotes.json @@ -62,5 +62,13 @@ { "quote": "A diary is useful during conscious, intentional, and painful spiritual evolutions.", "author": "André Gide" + }, + { + "quote": "Most folks are about as happy as they make up their minds to be.", + "author": "Abraham Lincoln" + }, + { + "quote": "It takes no more time to see the good side of life than it takes to see the bad.", + "author": "Jimmy Buffet" } ]