theme color tweaks

config.js

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

gatsby-config.js

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

src/components/molecules/ThemeSwitch.tsx

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