From d0e926eb9c29217d2f2ed9ad1bcc6992fe89d833 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Thu, 13 Oct 2022 15:37:47 +0600
Subject: [PATCH] add ThemeColor component

---
 pages/_app.tsx              |  5 +++++
 src/ui/ThemeColor/index.tsx | 17 +++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/ui/ThemeColor/index.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index dbd8ca21..96d55d1f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,6 +9,7 @@ import Head from "next/head"
 import { YMetrika } from "src/components/YMetrika"
 import { GAnalytics } from "src/components/GAnalytics"
 import { Theme } from "@/ui/theme/Theme"
+import { ThemeColor } from "@/ui/ThemeColor"
 
 export default class MyApp extends App {
     render() {
@@ -41,6 +42,10 @@ export default class MyApp extends App {
 
                     <YMetrika account={24027460} />
                     <GAnalytics account={"UA-60209057-1"} />
+                    <ThemeColor
+                        color="white"
+                        darkColor="hsl(240, 10%, 10%)"
+                    />
                 </Head>
                 <Theme>
                     <Component {...pageProps} />
diff --git a/src/ui/ThemeColor/index.tsx b/src/ui/ThemeColor/index.tsx
new file mode 100644
index 00000000..863f8547
--- /dev/null
+++ b/src/ui/ThemeColor/index.tsx
@@ -0,0 +1,17 @@
+import { useDarkTheme } from "@/hooks/useDarkTheme"
+
+export type ThemeColorProps = {
+    color: string
+    darkColor: string
+}
+
+export const ThemeColor: React.FC<ThemeColorProps> = ({ color, darkColor }) => {
+    const dark = useDarkTheme()
+
+    return (
+        <meta
+            name="theme-color"
+            content={dark ? darkColor : color}
+        />
+    )
+}