light and dark theme

This commit is contained in:
Takeshi Kimata
2024-02-17 09:49:11 +09:00
parent d889655324
commit ce3cd7ae03
4 changed files with 6 additions and 20 deletions

View File

@@ -38,7 +38,7 @@ export default function RootLayout({
)}
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
<div className="relative flex flex-col h-screen bg-slate-100">
<div className="relative flex flex-col h-screen light:bg-gray-50 dark:bg-gray-900">
<Navbar />
<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
{children}

View File

@@ -1,7 +1,5 @@
import { Link, button as buttonStyles } from "@nextui-org/react";
import { siteConfig } from "@/config/site";
import { title, subtitle } from "@/components/primitives";
import { GithubIcon } from "@/components/icons";
export default function Home() {
return (
@@ -10,7 +8,7 @@ export default function Home() {
<h1 className={title({ color: "pink" })}>Open Source&nbsp;</h1>
<h1 className={title()}>Test Case Management Tool&nbsp;</h1>
<br />
<h2 className={subtitle({ class: "mt-4" })}>
<h2 className={subtitle({ class: "text-inherit mt-4" })}>
Integrate and manage all your software testing.
</h2>
</div>
@@ -26,14 +24,6 @@ export default function Home() {
>
Create first test project
</Link>
<Link
isExternal
className={buttonStyles({ variant: "bordered", radius: "full" })}
href={siteConfig.links.github}
>
<GithubIcon size={20} />
GitHub
</Link>
</div>
</section>
);

View File

@@ -11,7 +11,7 @@ import NextLink from "next/link";
export function ProjectCard({ projectName, projectDetail }) {
return (
<NextLink href={`/projects/${1}`}>
<Card className="w-[250px] h-36 hover:bg-slate-200">
<Card className="w-[250px] h-36 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800">
<CardHeader className="flex gap-3 h-16">
<Image
alt="nextui logo"

View File

@@ -9,7 +9,7 @@ import {
Kbd,
Link,
Input,
link as linkStyles
link as linkStyles,
} from "@nextui-org/react";
import { siteConfig } from "@/config/site";
@@ -44,7 +44,7 @@ export const Navbar = () => {
);
return (
<NextUINavbar maxWidth="xl" position="sticky">
<NextUINavbar maxWidth="xl" position="sticky" className="bg-inherit">
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
<NavbarBrand as="li" className="gap-3 max-w-fit">
<NextLink className="flex justify-start items-center gap-1" href="/">
@@ -61,11 +61,7 @@ export const Navbar = () => {
{siteConfig.navItems.map((item) => (
<NavbarItem key={item.href}>
<NextLink
className={clsx(
linkStyles({ color: "foreground" }),
"data-[active=true]:text-primary data-[active=true]:font-medium"
)}
color="foreground"
className="data-[active=true]:text-primary data-[active=true]:font-medium"
href={item.href}
>
{item.label}