Fukasawa适配夜间模式

This commit is contained in:
tangly1024
2022-03-03 16:03:22 +08:00
parent fe4007bbca
commit 7df84fa0dc
5 changed files with 10 additions and 10 deletions

View File

@@ -9,7 +9,7 @@ import Catalog from './Catalog'
function AsideLeft (props) { function AsideLeft (props) {
const { tags, currentTag, categories, currentCategory, post } = props const { tags, currentTag, categories, currentCategory, post } = props
return <div className='w-72 bg-white min-h-screen px-10 py-14 hidden lg:block'> return <div className='w-72 bg-white dark:bg-gray-800 min-h-screen px-10 py-14 hidden lg:block'>
<Logo /> <Logo />
<section className='flex flex-col text-gray-600'> <section className='flex flex-col text-gray-600'>
@@ -22,8 +22,8 @@ function AsideLeft (props) {
<SearchInput {...props}/> <SearchInput {...props}/>
</section> </section>
<section className='flex flex-col'> <section className='flex flex-col dark:text-gray-300'>
<hr className='w-12 my-8 ' /> <hr className='w-12 my-8' />
{ BLOG.DESCRIPTION } { BLOG.DESCRIPTION }
</section> </section>

View File

@@ -51,7 +51,7 @@ const Catalog = ({ toc }) => {
}, throttleMs)) }, throttleMs))
return <div> return <div>
<div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div> <div className='w-full dark:text-gray-300'><i className='mr-1 fas fa-stream' /> 目录</div>
<nav className='font-sans overflow-y-auto scroll-hidden text-black'> <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
@@ -59,7 +59,7 @@ const Catalog = ({ toc }) => {
<a <a
key={id} key={id}
href={`#${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} `} notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
> >
<span <span

View File

@@ -24,10 +24,10 @@ function GroupMenu ({ customNav }) {
if (link.show) { if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to) const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={`${link.to}`} title={link.to} href={link.to} > return <Link key={`${link.to}`} title={link.to} href={link.to} >
<a className={'py-0.5 duration-500 justify-between text-gray-500 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' + <a className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')} > (selected ? 'text-black' : ' ')} >
<div className='my-auto items-center justify-center flex '> <div className='my-auto items-center justify-center flex '>
<div className={ 'text-gray-500 hover:text-black'}>{link.name}</div> <div className={ 'hover:text-black'}>{link.name}</div>
</div> </div>
{link.slot} {link.slot}
</a> </a>

View File

@@ -4,7 +4,7 @@ import Link from 'next/link'
function Logo () { function Logo () {
return <section className='flex'> return <section className='flex'>
<Link href='/'> <Link href='/'>
<a className='hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer font-black'>{BLOG.TITLE}</a> <a className='hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>{BLOG.TITLE}</a>
</Link> </Link>
</section> </section>
} }

View File

@@ -62,9 +62,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
defaultValue={searchKey} defaultValue={searchKey}
/> />
<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(searchKey) }}> onClick={() => { handleSearch(searchKey) }}>
<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 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
</div> </div>
{(searchKey && searchKey.length && {(searchKey && searchKey.length &&