timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 19:13:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tailwind theme

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-18 10:27:29 -07:00
parent ed1dc91bd7
commit 9422553c9c
6 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/src/app/layout.js
View File

@@ -14,7 +14,7 @@ export const metadata = {
export default function Layout({children}) { export default function Layout({children}) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className="bg-gray-50 dark:bg-slate-800"> <body className="bg-light-background dark:bg-dark-background">
<Theme> <Theme>
<Header /> <Header />
<main> <main>

4
src/web/src/app/page.jsx
View File

@@ -6,6 +6,8 @@ import ThemeToggle from "@/components/theme-toggle";
// Exports // Exports
export default function Index() { export default function Index() {
return ( return (
<ThemeToggle /> <div>
<ThemeToggle />
</div>
); );
} }

2
src/web/src/components/footer.jsx
View File

@@ -1,6 +1,6 @@
const Footer = () => { const Footer = () => {
return ( return (
<div className="dark:bg-red-1">Footer</div> <div>Footer</div>
); );
} }

2
src/web/src/components/header.jsx
View File

@@ -29,7 +29,7 @@ const navItems= [
const Header = () => { const Header = () => {
return ( return (
<div className="text-gray-800 hover:text-blue-500 cursor-pointer"> <div>
Navbar Navbar
</div> </div>
); );

1
src/web/src/components/theme-toggle.jsx
View File

@@ -21,6 +21,7 @@ export default function ThemeToggle() {
alt="Loading Light/Dark Toggle" alt="Loading Light/Dark Toggle"
priority={false} priority={false}
title="Loading Light/Dark Toggle" title="Loading Light/Dark Toggle"
style={{ opacity: 0 }}
/> />
) )

64
src/web/tailwind.config.js
View File

@@ -6,6 +6,70 @@ module.exports = {
darkMode: "class", darkMode: "class",
theme: { theme: {
extend: { extend: {
colors: {
light:{
background: "#fbf1c7",
red: {
1: "#cc241d",
2: "#9d0006"
},
orange: {
1: "#d65d0e",
2: "#af3a03"
},
green: {
1: "#98971a",
2: "#79740e"
},
yellow: {
1: "#d79921",
2: "#b57614"
},
blue: {
1: "#458588",
2: "#076678"
},
purple: {
1: "#b16286",
2: "#8f3f71"
},
aqua: {
1: "#689d6a",
2: "#427b58"
},
},
dark: {
background: "#282828",
red: {
1: "#cc241d",
2: "#fb4934"
},
orange: {
1: "#d65d0e",
2: "#fe8019"
},
green: {
1: "#98971a",
2: "#b8bb26"
},
yellow: {
1: "#d79921",
2: "#fabd2f"
},
blue: {
1: "#458588",
2: "#83a598"
},
purple: {
1: "#b16286",
2: "#d3869b"
},
aqua: {
1: "#689d6a",
2: "#8ec07c"
},
},
},
}, },
}, },
plugins: [], plugins: [],