黑暗模式

This commit is contained in:
Blackberry009
2025-06-13 18:23:27 +08:00
parent d8db32d71a
commit c8c7769e9a
8 changed files with 23 additions and 25 deletions

View File

@@ -19,7 +19,7 @@ module.exports = {
BUNDLE_ANALYZER: process.env.ANALYZE === 'true' || false, // 是否展示编译依赖内容与大小
VERSION: (() => {
try {
// 优先使用环境变量否则从package.json中获取版本号
// 优先使用环境变量,否则从 package.json 中获取版本号
return (
process.env.NEXT_PUBLIC_VERSION || require('../package.json').version
)

View File

@@ -15,9 +15,7 @@ export const BlogItem = props => {
const showPreview =
siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post.blockMap
return (
<div
key={post.id}
className='h-42 my-6 pb-7'>
<div key={post.id} className='h-42 my-6 pb-7'>
{/* 文章标题 */}
<div className='flex'>
@@ -39,7 +37,7 @@ export const BlogItem = props => {
<h2 className='mb-2'>
<Link
href={post.href}
className='text-xl underline decoration-2 font-bold text-[var(--primary-color)]'>
className='text-xl underline decoration-2 font-bold text-[var(--primary-color)] dark:text-white dark:hover:bg-white dark:hover:text-[var(--primary-color)] px-2 duration-200 transition-all rounded-sm'>
{siteConfig('POST_TITLE_ICON') && (
<NotionIcon icon={post.pageIcon} />
)}
@@ -99,7 +97,6 @@ export const BlogItem = props => {
</main>
</article>
</div>
</div>
)
}

View File

@@ -35,7 +35,7 @@ export default function BlogListPage(props) {
.replace('.html', '')
return (
<div className='w-full md:pr-8 mb-12'>
<div className='w-full md:pr-8 mb-12 px-5'>
<div id='posts-wrapper'>
{posts?.map((p, index) => (
<div key={p.id}>

View File

@@ -18,19 +18,11 @@ export default function Footer(props) {
<footer>
<DarkModeButton className='pt-4' />
<div className='font-bold text-[var(--primary-color)] py-6 text-sm flex flex-col gap-2 items-center'>
<div className='font-bold text-[var(--primary-color)] dark:text-white py-6 text-sm flex flex-col gap-2 items-center'>
<div>
&copy;{`${copyrightDate}`} {siteConfig('AUTHOR')}.
</div>
<div>All rights reserved.</div>
<div>
Powered by
<a
href='https://github.com/tangly1024/NotionNext'
className=' hover:underline'>
NotionNext {siteConfig('VERSION')}
</a>
</div>
</div>
</footer>
)

View File

@@ -13,7 +13,7 @@ export const MenuItemDrop = ({ link }) => {
<Link
href={link?.href}
target={link?.target}
className=' menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)] dark:text-gray-200 tracking-widest pb-1 font-bold'>
className='dark:hover:text-[var(--primary-color)] dark:hover:bg-white menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)] dark:text-gray-200 tracking-widest pb-1 font-bold'>
{link?.name}
</Link>
</div>

View File

@@ -14,19 +14,19 @@ import Link from 'next/link'
export default function NavBar(props) {
return (
<div className='flex flex-col justify-between md:mt-20 md:h-[70vh]'>
<header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] hover:text-white ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4'>
<header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 dark:md:border-white dark:text-white md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] dark:hover:bg-white hover:text-white dark:hover:text-[var(--primary-color)] ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4 mb-2'>
<Link href='/'>
<div className='flex flex-col-reverse md:flex-col items-center md:items-start'>
<div className='font-bold text-4xl text-center' id='blog-name'>
活版印字
</div>
<div className='font-bold text-xl text-center' id='blog-name-en'>
Typography
山野
</div>
{/* <div className='font-bold text-xl text-center' id='blog-name-en'>
Blog
</div> */}
</div>
</Link>
</header>
<nav className='md:pt-0 z-20 dark:border-hexo-black-gray dark:bg-black flex-shrink-0'>
<nav className='md:pt-0 z-20 flex-shrink-0'>
<div id='nav-bar-inner' className='text-sm md:text-md'>
<MenuList {...props} />
</div>

View File

@@ -71,7 +71,7 @@ const LayoutBase = props => {
<ThemeGlobalSimple.Provider value={{ searchModal }}>
<div
id='theme-typography'
className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-black overflow-hidden`}>
className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-[#232222] overflow-hidden`}>
<Style />
{siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}

View File

@@ -27,7 +27,7 @@ const Style = () => {
}
// 底色
.dark body {
background-color: black;
background-color: rgb(35, 34, 34);
}
// 文本不可选取
.forbid-copy {
@@ -36,6 +36,15 @@ const Style = () => {
-ms-user-select: none;
}
.dark #theme-typography {
background-image: linear-gradient(
to right,
rgb(255 255 255 / 0.04) 1px,
transparent 1px
),
linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
}
#theme-typography {
--primary-color: #2e405b;
background-color: rgb(255 255 255) / 1;