diff --git a/src/components/BaseFooter.astro b/src/components/BaseFooter.astro
index 401d3ce..ad9f3c7 100644
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -31,7 +31,7 @@
   }
 
   :global(.dark) footer {
-    background: black;
+    background: var(--background);
     box-shadow: rgba(255, 255, 255, .3) 0px -1px 3px 0px;
   }
 
diff --git a/src/components/BaseHeader.astro b/src/components/BaseHeader.astro
index 457c29f..472e16d 100644
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -83,7 +83,7 @@ import ThemeIcon from './ThemeIcon.astro'
   }
 
   :global(.dark) header {
-    background: #000000;
+    background: var(--background);
     box-shadow: rgba(255, 255, 255, .3) 0px 1px 2px 0px;
   }
 
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index f3ba9c1..2371e30 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -39,6 +39,8 @@
 </style>
 
 <script is:inline>
+  const meta = document.querySelector('meta[name="theme-color"]');
+
   const theme = (() => {
     const localStorageTheme = localStorage?.getItem("theme") ?? '';
     if (['dark', 'light'].includes(localStorageTheme)) {
@@ -56,6 +58,8 @@
     document.documentElement.classList.add('dark');
   }
 
+  meta.setAttribute('content', theme === 'dark' ? '#0a0a0a' : '#ffffff');
+
   window.localStorage.setItem('theme', theme);
 
   const handleToggleClick = () => {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fa63b43..ec13204 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,6 +23,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
     <meta name="generator" content={Astro.generator} />
     <title>{pageTitle}</title>
     <meta name="description" content={description}>
+    <meta name="theme-color" content="#ffffff">
   </head>
   <body>
     <BaseHeader />
diff --git a/src/styles/global.css b/src/styles/global.css
index f9198de..0c2e865 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,6 +3,11 @@
 
 :root {
   --layout-width: 980px;
+  --background: #ffffff;
+}
+
+.dark {
+  --background: #0a0a0a;
 }
 
 html,
@@ -12,12 +17,12 @@ body {
   font-size: 16px;
 }
 
-html{
+html {
   background: #fafafa;
 }
 
-html.dark{
-  background-color: #000000;
+html.dark {
+  background: var(--background);
   color: #fff;
 }
 
