feat: implement dark mode (#27)

* feat: implement dark mode

* feat: update data table dark mode style

* chore: update
This commit is contained in:
boojack
2023-04-12 11:05:25 +08:00
committed by GitHub
parent 2783bca24d
commit c4de3b0d6f
28 changed files with 243 additions and 85 deletions

View File

@ -22,11 +22,11 @@ const Header = (props: Props) => {
<div
className={`${
className || ""
} w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b z-1 transition-all duration-300`}
} w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b dark:border-zinc-700 z-1 transition-all duration-300`}
>
<div className="ml-2 flex justify-start items-center">
<button
className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100"
className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700"
onClick={() => layoutStore.toggleSidebar()}
>
<Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
@ -38,7 +38,7 @@ const Header = (props: Props) => {
<div className="mr-2 sm:mr-3 relative flex flex-row justify-end items-center">
<a
href="https://www.bytebase.com?source=sqlchat"
className="flex flex-row justify-center items-center h-10 px-3 py-1 rounded-md whitespace-nowrap hover:bg-gray-100"
className="flex flex-row justify-center items-center h-10 px-3 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-zinc-700"
target="_blank"
>
<img className="h-5 sm:h-6 w-auto" src="/craft-by-bytebase.webp" alt="" />