Medium 适配夜间模式

This commit is contained in:
tangly1024
2022-03-03 16:27:51 +08:00
parent 066c7d5c1c
commit e8a8ef3b89
8 changed files with 16 additions and 16 deletions

View File

@@ -23,7 +23,7 @@ const LayoutBase = props => {
const router = useRouter()
return (
<div className='bg-white w-full h-full min-h-screen justify-center'>
<div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
<CommonHead meta={meta} />
<main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
{/* 桌面端左侧菜单 */}
@@ -39,7 +39,7 @@ const LayoutBase = props => {
</div>
{/* 桌面端右侧 */}
<div className='hidden xl:block border-l w-96'>
<div className='hidden xl:block border-l dark:border-gray-500 w-96'>
<Tabs className='py-14 px-6 sticky top-0'>
{slotRight}
<div key={locale.NAV.ABOUT}>

View File

@@ -83,7 +83,7 @@ export const LayoutSlug = props => {
showInfoCard={true}
slotRight={slotRight}
>
<h1 className="text-4xl pt-12 font-sans">{post?.title}</h1>
<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>
<>

View File

@@ -62,7 +62,7 @@ const Catalog = ({ toc }) => {
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
>
<span

View File

@@ -17,8 +17,8 @@ const InfoCard = () => {
className='rounded-full'
/>
</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.BIO}</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
<SocialButton/>
</div>
</div>

View File

@@ -6,7 +6,7 @@ export default function LogoBar () {
<div className='flex mx-auto w-full justify-between '>
<div className='space-x-3 flex items-center'>
<Link href='/'>
<a className='text-2xl'>{BLOG.TITLE}</a>
<a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
</Link>
</div>
</div>

View File

@@ -74,14 +74,14 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
defaultValue={currentSearch}
/>
<div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
onClick={handleSearch}>
<i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
<i className={`hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
</div>
{(showClean &&
<div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
<i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
<div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
<i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
</div>
)}
</div>

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-50 ' + className}>
<div className='flex w-full h-12 shadow bg-white px-5 items-between'>
<div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
<LogoBar />
{/* 顶部菜单 */}
@@ -21,8 +21,8 @@ export default function TopNavBar (props) {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
<a className={'px-5 duration-300 text-base justify-between hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600 ')} >
<a className={'px-5 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
<div className='items-center justify-center flex '>
<i className={link.icon} />
<div className='ml-4 whitespace-nowrap'>{link.name}</div>

View File

@@ -5,5 +5,5 @@
// export * from './Empty' // 空主题
export * from './NEXT'
// export * from './Fukasawa'
export * from './Hexo'
// export * from './Medium'
// export * from './Hexo'
export * from './Medium'