nakada0907/n-daisuke897-blog
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement dark mode support

Browse source 
- Introduce CSS variables for theming in `global.css`
- Add `ThemeIcon` component for toggling light/dark modes
- Integrate theme initialization script in `BaseLayout` to prevent FOUC
- Update navigation, buttons, and tag styles for dark mode compatibility
- Configure Shiki for dual-theme syntax highlighting in `astro.config.mjs`
- Adjust link colors to accessible blue shades for both themes
This commit is contained in:
Daisuke Nakahara 2026-02-11 13:15:03 +09:00
parent e357f2ed68
commit 62aa324e16
11 changed files with 218 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/BaseLayout.astro
View file

@ -12,6 +12,22 @@ const { pageTitle } = Astro.props;
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle + " | Naputo"}</title>
<script is:inline>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
})();
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
<body>
<Header />

11
src/layouts/MarkdownPostLayout.astro
View file

@ -30,7 +30,11 @@ const optionsForDate = {
<style>
a {
color: #00539f;
color: #3b82f6;
}
:global(.dark) a {
color: #60a5fa;
}
.tags {
@ -47,6 +51,11 @@ const optionsForDate = {
background-color: #f8fcfd;
}
:global(.dark) .tag {
background-color: #1e293b;
border-color: #475569;
}
.markdown-content {
font-family: sans-serif;
font-size: 1.1rem;