m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 01:25:28 +01:00
Code

theme color tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-09 19:20:39 +01:00
parent 271e216f2a
commit d9547cb6b2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -3,7 +3,7 @@ module.exports = {
siteTitleShort: 'krlc', siteTitleShort: 'krlc',
siteDescription: 'Blog of designer & developer Matthias Kretschmann', siteDescription: 'Blog of designer & developer Matthias Kretschmann',
siteUrl: 'https://kremalicious.com', siteUrl: 'https://kremalicious.com',
themeColor: '#88bec8', themeColor: '#e7eef4',
backgroundColor: '#e7eef4', backgroundColor: '#e7eef4',
pathPrefix: null, pathPrefix: null,
author: { author: {

4
gatsby-config.js
View File

@ -127,13 +127,13 @@ module.exports = {
resolve: 'gatsby-plugin-manifest', resolve: 'gatsby-plugin-manifest',
options: { options: {
name: siteConfig.siteTitle, name: siteConfig.siteTitle,
short_name: siteConfig.siteTitle,
start_url: '/', start_url: '/',
background_color: siteConfig.backgroundColor, background_color: siteConfig.backgroundColor,
theme_color: siteConfig.themeColor, theme_color: siteConfig.themeColor,
icon: 'src/images/apple-touch-icon.png', icon: 'src/images/apple-touch-icon.png',
display: 'standalone', display: 'standalone',
cache_busting_mode: 'name' cache_busting_mode: 'name',
theme_color_in_head: false // dynamically set in ThemeSwitch
} }
}, },
{ {

37
src/components/molecules/ThemeSwitch.tsx
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import Helmet from 'react-helmet'
import useDarkMode from 'use-dark-mode' import useDarkMode from 'use-dark-mode'
import { ReactComponent as Day } from '../../images/day.svg' import { ReactComponent as Day } from '../../images/day.svg'
import { ReactComponent as Night } from '../../images/night.svg' import { ReactComponent as Night } from '../../images/night.svg'
import styles from './ThemeSwitch.module.scss' import styles from './ThemeSwitch.module.scss'
@ -36,20 +36,27 @@ export default function ThemeSwitch() {
classNameLight: 'light' classNameLight: 'light'
}) })
const themeColor = darkMode.value ? '#1d2224' : '#e7eef4'
return ( return (
<aside className={styles.themeSwitch}> <>
<label <Helmet>
htmlFor="toggle" <meta content={themeColor} name="theme-color" />
className={styles.checkbox} </Helmet>
onClick={darkMode.toggle} <aside className={styles.themeSwitch}>
> <label
<span className={styles.label}>Toggle Dark Mode</span> htmlFor="toggle"
<ThemeToggleInput className={styles.checkbox}
isDark={darkMode.value} onClick={darkMode.toggle}
toggleDark={darkMode.toggle} >
/> <span className={styles.label}>Toggle Dark Mode</span>
<ThemeToggle /> <ThemeToggleInput
</label> isDark={darkMode.value}
</aside> toggleDark={darkMode.toggle}
/>
<ThemeToggle />
</label>
</aside>
</>
) )
} }