feat: 完善暗色主题移动端适配 meta theme color

2026-07-13 16:00:44 +08:00
parent 36b04537b4
commit ba14074509
5 changed files with 15 additions and 5 deletions
--- 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;
  }

--- 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;
  }

--- 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 = () => {
--- 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 />
--- 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;
 }