深色模式字体

This commit is contained in:
tangly1024
2023-03-25 14:57:26 +08:00
parent 83584ad06a
commit fadf797baa
8 changed files with 11 additions and 11 deletions

View File

@@ -34,7 +34,7 @@ export const MenuItemCollapse = (props) => {
return <>
<div className={ (selected ? 'bg-gray-600 text-white hover:text-white' : 'hover:text-gray-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
{!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex '>
{!hasSubMenu && <Link href={link?.to} className='dark:text-gray-200 py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
@@ -49,7 +49,7 @@ export const MenuItemCollapse = (props) => {
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='whitespace-nowrap
return <div key={sLink.id} className='whitespace-nowrap dark:text-gray-200
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>

View File

@@ -17,7 +17,7 @@ const MenuGroupCard = (props) => {
]
return (
<nav id='nav' className='leading-8 flex justify-center w-full'>
<nav id='nav' className='leading-8 flex justify-center dark:text-gray-200 w-full'>
{links.map(link => {
if (link.show) {
return (

View File

@@ -43,7 +43,7 @@ export const MenuItemCollapse = ({ link }) => {
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='dark:bg-black text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
</Link>

View File

@@ -50,7 +50,7 @@ export const MenuItemCollapse = ({ link }) => {
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='cursor-pointer w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
return <div key={sLink.id} className='cursor-pointer dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm'>{sLink.title}</span>
</Link>

View File

@@ -50,7 +50,7 @@ export const MenuItemCollapse = (props) => {
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>

View File

@@ -41,7 +41,7 @@ export default function TopNavBar(props) {
<div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
{/* 移动端折叠菜单 */}
<Collapse type='vertical'collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>

View File

@@ -26,7 +26,7 @@ export const MenuItemCollapse = (props) => {
<div className='px-5 py-2 w-full text-left duration-200 hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
{!hasSubMenu && <Link
href={link?.to}
className='w-full my-auto items-center justify-between flex '>
className='w-full my-auto items-center justify-between flex dark:text-gray-200 '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
@@ -41,11 +41,11 @@ export const MenuItemCollapse = (props) => {
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='whitespace-nowrap
return <div key={sLink.id} className='whitespace-nowrap dark:text-gray-200
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
<div>{sLink.icon && <div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />}{sLink.title}</div>
</Link>
</div>
})}

View File

@@ -104,7 +104,7 @@ const NavBar = props => {
</ul>
<div><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5'></i>
<Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
<div className=' bg-white rounded border p-2 text-sm'>
<div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
{links.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
</div>
</Collapse>