深色模式调整配色

This commit is contained in:
tangly1024
2022-04-02 10:15:37 +08:00
parent 56be56d002
commit 475e5f6f60
14 changed files with 21 additions and 22 deletions

View File

@@ -35,7 +35,7 @@ export const ArticleDetail = props => {
post?.date?.start_date || post.createdTime,
locale.LOCALE
)
return <>
return <div id='container'>
<h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
<section className="flex py-4 items-center font-sans px-1">
<Link href="/about" passHref>
@@ -98,5 +98,5 @@ export const ArticleDetail = props => {
<ArticleAround prev={prev} next={next} />
<Comment frontMatter={post} />
</section>
</>
</div>
}

View File

@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
const { locale } = useGlobal()
return (
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl '>
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
<div className='lg:p-8 p-4 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
@@ -57,7 +57,6 @@ const BlogPostCard = ({ post, showSummary }) => {
</div>
</div> }
</div>
<hr className='w-full'/>
</div>
)

View File

@@ -2,7 +2,6 @@ import BlogPostCard from './BlogPostCard'
import BLOG from '@/blog.config'
import BlogPostListEmpty from './BlogPostListEmpty'
import PaginationSimple from './PaginationSimple'
import { useRouter } from 'next/router'
/**
* 文章列表分页表格

View File

@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
}, throttleMs))
return <div className='px-3'>
<div className='w-full py-1'>
<div className='w-full mt-2 mb-4'>
<Progress/>
</div>
<div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>

View File

@@ -7,7 +7,7 @@ const Footer = ({ title }) => {
const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
return (
<footer
className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
>
<i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

View File

@@ -10,6 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
const [percent, changePercent] = useState(0)
const scrollListener = () => {
const target = currentRef || document.getElementById('container')
console.log(target)
if (target) {
const clientHeight = target.clientHeight
const scrollY = window.pageYOffset
@@ -27,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [percent])
return (
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}

View File

@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
const router = useRouter()
return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
<div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
<div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
<LogoBar {...props}/>
{/* 顶部菜单 */}