d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

样式微调深色模式适配

Browse Source
This commit is contained in:
tangly1024
2022-05-12 12:24:05 +08:00
parent cf5b0015a6
commit aa9fcb591c
7 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ThemeSwitch.js
View File

@@ -13,7 +13,7 @@ export function ThemeSwitch() {
<div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
<div className="p-2 flex items-center">
<i className="fas fa-palette mr-1 cursor-move" />
<div >{theme} <i className='fas fa-sync text-xs cursor-pointer' onClick={switchTheme} /></div>
<div className='uppercase font-sans' >{theme} <i className='fas fa-sync cursor-pointer border-l pl-2' title='click to change theme' alt='click to change theme' onClick={switchTheme} /></div>
</div>
</div>
</Draggable>

4
themes/example/components/ArticleLock.js
View File

@@ -28,9 +28,9 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>
</div>
<div id='tips'>

2
themes/example/components/Nav.js
View File

@@ -24,7 +24,7 @@ export const Nav = (props) => {
<div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
<div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
{links.map(link => {
return link && <Link href={link.to}>
return link && <Link href={link.to} key={link.to}>
<a className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
{link.name}
</a>

4
themes/fukasawa/components/ArticleAround.js
View File

@@ -11,12 +11,12 @@ export default function ArticleAround ({ prev, next }) {
}
return <section className='text-gray-800 h-28 flex items-center justify-between space-x-5 my-4'>
<Link href={`/article/${prev.slug}`} passHref>
<a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-gray-500 hover:text-white duration-300'>
<a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200 hover:text-white duration-300'>
<i className='mr-1 fas fa-angle-double-left' />{prev.title}
</a>
</Link>
<Link href={`/article/${next.slug}`} passHref>
<a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-gray-500 hover:text-white duration-300'>{next.title}
<a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200 hover:text-white duration-300'>{next.title}
<i className='ml-1 my-1 fas fa-angle-double-right' />
</a>
</Link>

4
themes/fukasawa/components/ArticleDetail.js
View File

@@ -25,7 +25,7 @@ export default function ArticleDetail(props) {
</div>
)}
<article itemScope itemType="https://schema.org/Movie"
className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-32 dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
>
<header className='animate__slideInDown animate__animated'>
@@ -92,7 +92,7 @@ export default function ArticleDetail(props) {
<ArticleAround prev={prev} next={next} />
{/* 评论互动 */}
<div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
<div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
<Comment frontMatter={post} />
</div>
</div>)

10
themes/fukasawa/components/AsideLeft.js
View File

@@ -11,7 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton'
function AsideLeft (props) {
const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props
const router = useRouter()
return <div className='w-72 bg-white dark:bg-gray-800 min-h-screen px-10 py-14 hidden lg:block'>
return <div className='w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'>
<Logo {...props}/>
<section className='flex flex-col text-gray-600'>
@@ -44,15 +44,17 @@ function AsideLeft (props) {
<SiteInfo/>
</section>
<section className='flex justify-center dark:text-gray-200'>
<DarkModeButton/>
</section>
<section className='sticky top-0 pt-12'>
<Catalog toc={post?.toc}/>
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>
<section className='flex justify-center dark:text-gray-200'>
<DarkModeButton/>
</section>
</div>
}

2
themes/fukasawa/components/Card.js
View File

@@ -1,7 +1,7 @@
const Card = ({ children, headerSlot, className }) => {
return <div className={className}>
<>{headerSlot}</>
<section className="shadow mb-4 p-2 bg-white dark:bg-gray-800 hover:shadow-lg duration-200">
<section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
{children}
</section>
</div>