beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
21 Guns
2026-07-13 16:00:44 +08:00
parent 36b04537b4
commit ba14074509
5 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BaseFooter.astro
View File

@@ -31,7 +31,7 @@
} }
:global(.dark) footer { :global(.dark) footer {
background: black; background: var(--background);
box-shadow: rgba(255, 255, 255, .3) 0px -1px 3px 0px; box-shadow: rgba(255, 255, 255, .3) 0px -1px 3px 0px;
} }

2
src/components/BaseHeader.astro
View File

@@ -83,7 +83,7 @@ import ThemeIcon from './ThemeIcon.astro'
} }
:global(.dark) header { :global(.dark) header {
background: #000000; background: var(--background);
box-shadow: rgba(255, 255, 255, .3) 0px 1px 2px 0px; box-shadow: rgba(255, 255, 255, .3) 0px 1px 2px 0px;
} }

4
src/components/ThemeIcon.astro
View File

@@ -39,6 +39,8 @@
</style> </style>
<script is:inline> <script is:inline>
const meta = document.querySelector('meta[name="theme-color"]');
const theme = (() => { const theme = (() => {
const localStorageTheme = localStorage?.getItem("theme") ?? ''; const localStorageTheme = localStorage?.getItem("theme") ?? '';
if (['dark', 'light'].includes(localStorageTheme)) { if (['dark', 'light'].includes(localStorageTheme)) {
@@ -56,6 +58,8 @@
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} }
meta.setAttribute('content', theme === 'dark' ? '#0a0a0a' : '#ffffff');
window.localStorage.setItem('theme', theme); window.localStorage.setItem('theme', theme);
const handleToggleClick = () => { const handleToggleClick = () => {

1
src/layouts/Layout.astro
View File

@@ -23,6 +23,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title> <title>{pageTitle}</title>
<meta name="description" content={description}> <meta name="description" content={description}>
<meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<BaseHeader /> <BaseHeader />

11
src/styles/global.css
View File

@@ -3,6 +3,11 @@
:root { :root {
--layout-width: 980px; --layout-width: 980px;
--background: #ffffff;
}
.dark {
--background: #0a0a0a;
} }
html, html,
@@ -12,12 +17,12 @@ body {
font-size: 16px; font-size: 16px;
} }
html{ html {
background: #fafafa; background: #fafafa;
} }
html.dark{ html.dark {
background-color: #000000; background: var(--background);
color: #fff; color: #fff;
} }