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}
+        />
+    )
+}