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,20 +36,27 @@ export default function ThemeSwitch() {
     classNameLight: 'light'
   })
 
+  const themeColor = darkMode.value ? '#1d2224' : '#e7eef4'
+
   return (
-    <aside className={styles.themeSwitch}>
-      <label
-        htmlFor="toggle"
-        className={styles.checkbox}
-        onClick={darkMode.toggle}
-      >
-        <span className={styles.label}>Toggle Dark Mode</span>
-        <ThemeToggleInput
-          isDark={darkMode.value}
-          toggleDark={darkMode.toggle}
-        />
-        <ThemeToggle />
-      </label>
-    </aside>
+    <>
+      <Helmet>
+        <meta content={themeColor} name="theme-color" />
+      </Helmet>
+      <aside className={styles.themeSwitch}>
+        <label
+          htmlFor="toggle"
+          className={styles.checkbox}
+          onClick={darkMode.toggle}
+        >
+          <span className={styles.label}>Toggle Dark Mode</span>
+          <ThemeToggleInput
+            isDark={darkMode.value}
+            toggleDark={darkMode.toggle}
+          />
+          <ThemeToggle />
+        </label>
+      </aside>
+    </>
   )
 }