From e863215325b0348573390c9c377564a78e72add7 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 2 Nov 2021 14:50:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=85=88=E5=85=BC=E5=AE=B9Mac?= =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=EF=BC=8C=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=AF=86=E5=BA=A6=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BlogPost.js | 2 +- components/BlogPostList.js | 2 +- components/BlogPostListScroll.js | 2 +- components/DarkModeButton.js | 5 +++-- components/TagsBar.js | 4 ++-- layouts/BaseLayout.js | 2 +- lib/theme.js | 21 ++++++++++++++++----- 7 files changed, 25 insertions(+), 13 deletions(-) diff --git a/components/BlogPost.js b/components/BlogPost.js index dfd1a74a..1e90765b 100644 --- a/components/BlogPost.js +++ b/components/BlogPost.js @@ -4,7 +4,7 @@ import Link from 'next/link' const BlogPost = ({ post }) => { return ( -
+
{/* 封面图 */} {post.page_cover && post.page_cover.length > 1 && ( diff --git a/components/BlogPostList.js b/components/BlogPostList.js index 04e6a824..29c0eab6 100644 --- a/components/BlogPostList.js +++ b/components/BlogPostList.js @@ -56,7 +56,7 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => {
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))} diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index 76a88e9e..f1fd031a 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -69,7 +69,7 @@ const BlogPostListScroll = ({ posts = [], tags }) => { return
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))} diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js index 83232bea..9e433a81 100644 --- a/components/DarkModeButton.js +++ b/components/DarkModeButton.js @@ -3,13 +3,14 @@ import localStorage from 'localStorage' const DarkModeButton = () => { const { theme, changeTheme } = useTheme() + // 用户手动设置主题 const handleChangeDarkMode = () => { const newTheme = (theme === 'light' ? 'dark' : 'light') - changeTheme(newTheme) localStorage.setItem('theme', newTheme) + changeTheme(newTheme) } return
- +
} export default DarkModeButton diff --git a/components/TagsBar.js b/components/TagsBar.js index 901a06f2..f81f4cf4 100644 --- a/components/TagsBar.js +++ b/components/TagsBar.js @@ -1,7 +1,7 @@ import Link from 'next/link' /** - * 标签组 + * 标签组导航条，默认隐藏仅在移动端显示 * @param tags * @param currentTag * @returns {JSX.Element} @@ -10,7 +10,7 @@ import Link from 'next/link' const TagsBar = ({ tags, currentTag }) => { if (!tags) return <> return ( -
+
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js index a9de65ff..d2251e32 100644 --- a/layouts/BaseLayout.js +++ b/layouts/BaseLayout.js @@ -39,7 +39,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe {/* Middle Wrapper */} -
+
{children} diff --git a/lib/theme.js b/lib/theme.js index 64bd2f4a..308cc825 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -3,14 +3,25 @@ import localStorage from 'localStorage' const ThemeContext = createContext() +/** + * 提供日间模式、夜间模式主题的切换 light/dark + * @param children + * @returns {JSX.Element} + * @constructor + */ export function ThemeProvider ({ children }) { - // 初始值 - const defaultTheme = localStorage.getItem('theme') - const [theme, changeTheme] = useState() + // 用户自定义主题设置在变量中 + const userTheme = localStorage.getItem('theme') + const [theme, changeTheme] = useState(userTheme) useEffect(() => { - changeTheme(defaultTheme) + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + if (prefersDarkMode) { + changeTheme('dark') + localStorage.setItem('theme', 'dark') + } else { + changeTheme(userTheme) + } }) - return ( {children} )