Skip to content

Commit 4ff2443

Browse files
alan345alan345
committed
better dark mode
1 parent 6740452 commit 4ff2443

File tree

3 files changed

+49
-24
lines changed

3 files changed

+49
-24
lines changed

‎client/src/index.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,34 +46,34 @@ button:disabled:hover {
4646
}
4747

4848
h1 {
49-
@apply text-2xl font-bold text-gray-700 mt-2 mb-2;
49+
@apply text-2xl font-bold text-gray-700 dark:text-gray-200 mt-2 mb-2;
5050
}
5151
h2 {
52-
@apply text-2xl font-semibold text-gray-700;
52+
@apply text-2xl font-semibold text-gray-700 dark:text-gray-200;
5353
}
5454

5555
h3 {
56-
@apply text-xl font-semibold text-gray-700;
56+
@apply text-xl font-semibold text-gray-700 dark:text-gray-200;
5757
}
5858
th {
59-
@apply px-2 py-2;
59+
@apply px-2 py-2 dark:text-gray-200;
6060
}
6161
td {
62-
@apply whitespace-nowrap px-2 py-2 overflow-hidden text-ellipsis;
62+
@apply whitespace-nowrap px-2 py-2 overflow-hidden text-ellipsis dark:text-gray-200;
6363
}
6464

6565
table {
6666
@apply min-w-full table-fixed w-full;
6767
}
6868

6969
thead {
70-
@apply border-b border-neutral-200 dark:border-white/10 text-left;
70+
@apply border-b border-neutral-200 dark:border-gray-700 text-left;
7171
}
7272
tr {
73-
@apply border-b border-neutral-200 dark:border-white/10;
73+
@apply border-b border-neutral-200 dark:border-gray-700;
7474
}
7575
tbody tr {
76-
@apply hover:bg-gray-50 h-20;
76+
@apply hover:bg-gray-50 dark:hover:bg-gray-800 h-20;
7777
}
7878

7979
.move-right {
@@ -86,7 +86,7 @@ tbody tr {
8686
input[type="text"],
8787
input[type="password"],
8888
input[type="number"] {
89-
@apply shadow-sm appearance-none border rounded-sm py-2 px-3 text-gray-700 leading-tight focus:outline-hidden;
89+
@apply shadow-sm appearance-none border rounded-sm py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-700 leading-tight focus:outline-hidden;
9090
}
9191
input[type="checkbox"] {
9292
@apply w-4 h-4 rounded-sm mt-2;
@@ -96,7 +96,7 @@ input[type="checkbox"] {
9696
@apply border-red-500 focus:border-red-500 focus:ring-red-200 focus:ring-2;
9797
}
9898
.input-default {
99-
@apply border-gray-300 focus:border-blue-500 focus:ring-blue-200 focus:ring-2;
99+
@apply border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-200 focus:ring-2;
100100
}
101101

102102
input::-webkit-outer-spin-button,
@@ -111,5 +111,5 @@ input[type="number"] {
111111
}
112112

113113
.link {
114-
@apply text-blue-500 underline hover:text-blue-700;
114+
@apply text-blue-500 underline hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
115115
}

‎client/src/layout/LayoutApp.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import NavLinks from "./NavLinks"
55
import BurgerLogic from "./BurgerLogic"
66
import LogoApp from "./LogoApp"
77
import { Link } from "react-router"
8+
import { useContext } from "react"
9+
import { AppContext } from "../ContextProvider"
810

911
const LayoutApp = () => {
1012
const [sidebarOpen, setSidebarOpen] = React.useState(false)
11-
13+
const { isDarkMode } = useContext(AppContext)
1214
const sidebarRef = useRef<HTMLDivElement>(null)
1315

1416
useEffect(() => {
@@ -26,10 +28,10 @@ const LayoutApp = () => {
2628
}, [sidebarRef])
2729

2830
return (
29-
<div className="flex h-screen text-gray-600">
31+
<div className={`flex h-screen text-gray-600 ${isDarkMode ? "dark" : ""}`}>
3032
<div
3133
ref={sidebarRef} // Reference to the sidebar
32-
className={`fixed z-30 inset-y-0 left-0 w-64 bg-gray-50 transform ${
34+
className={`fixed z-30 inset-y-0 left-0 w-64 bg-gray-50 dark:bg-gray-900 transform ${
3335
sidebarOpen ? "translate-x-0" : "-translate-x-full"
3436
} transition-transform duration-200 ease-in-out md:relative md:translate-x-0`}
3537
>
@@ -40,10 +42,10 @@ const LayoutApp = () => {
4042
</div>
4143

4244
<div className="flex-1 flex flex-col overflow-hidden">
43-
<header className="flex items-center justify-between bg-white border-b border-gray-200 p-4">
45+
<header className="flex items-center justify-between bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
4446
<div className="flex items-center">
4547
<button
46-
className="text-gray-500 focus:outline-hidden md:hidden"
48+
className="text-gray-500 dark:text-gray-400 focus:outline-hidden md:hidden"
4749
onClick={() => setSidebarOpen(!sidebarOpen)}
4850
>
4951
<BurgerLogic sidebarOpen={sidebarOpen} />
@@ -54,7 +56,7 @@ const LayoutApp = () => {
5456
</div>
5557
</header>
5658

57-
<main className="flex-1 overflow-y-auto">
59+
<main className="flex-1 overflow-y-auto dark:bg-gray-900">
5860
<AppRouter />
5961
</main>
6062
</div>

‎client/src/layout/NavLinks.tsx‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
import { NavLink } from "react-router"
2-
import { House, Devices, Users, PencilLine, BeerStein } from "@phosphor-icons/react"
2+
import { House, Devices, Users, PencilLine, BeerStein, Moon, Sun } from "@phosphor-icons/react"
33
import { authClient } from "../lib/auth-client"
4+
import { useContext } from "react"
5+
import { AppContext } from "../ContextProvider"
46

57
type Props = {
68
onClick: () => void
79
}
810

911
const NavLinks = (props: Props) => {
1012
const session = authClient.useSession()
13+
const { isDarkMode, toggleDarkMode } = useContext(AppContext)
14+
1115
return (
1216
<nav className="px-4 py-6">
1317
<NavLink
1418
onClick={props.onClick}
1519
to="/"
1620
className={({ isActive }) =>
17-
`block py-2.5 px-4 rounded-sm transition ${isActive ? "bg-gray-200" : "hover:bg-gray-100"}`
21+
`block py-2.5 px-4 rounded-sm transition ${
22+
isActive ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-800"
23+
}`
1824
}
1925
>
2026
<div className="flex items-center">
@@ -26,7 +32,9 @@ const NavLinks = (props: Props) => {
2632
onClick={props.onClick}
2733
to="/beers"
2834
className={({ isActive }) =>
29-
`block py-2.5 px-4 rounded-sm transition ${isActive ? "bg-gray-200" : "hover:bg-gray-100"}`
35+
`block py-2.5 px-4 rounded-sm transition ${
36+
isActive ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-800"
37+
}`
3038
}
3139
>
3240
<div className="flex items-center">
@@ -39,7 +47,9 @@ const NavLinks = (props: Props) => {
3947
onClick={props.onClick}
4048
to="/users"
4149
className={({ isActive }) =>
42-
`block py-2.5 px-4 rounded-sm transition ${isActive ? "bg-gray-200" : "hover:bg-gray-100"}`
50+
`block py-2.5 px-4 rounded-sm transition ${
51+
isActive ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-800"
52+
}`
4353
}
4454
>
4555
<div className="flex items-center">
@@ -53,7 +63,9 @@ const NavLinks = (props: Props) => {
5363
onClick={props.onClick}
5464
to="/sessions"
5565
className={({ isActive }) =>
56-
`block py-2.5 px-4 rounded-sm transition ${isActive ? "bg-gray-200" : "hover:bg-gray-100"}`
66+
`block py-2.5 px-4 rounded-sm transition ${
67+
isActive ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-800"
68+
}`
5769
}
5870
>
5971
<div className="flex items-center">
@@ -66,17 +78,28 @@ const NavLinks = (props: Props) => {
6678
onClick={props.onClick}
6779
to="/contact"
6880
className={({ isActive }) =>
69-
`block py-2.5 px-4 rounded-sm transition ${isActive ? "bg-gray-200" : "hover:bg-gray-100"}`
81+
`block py-2.5 px-4 rounded-sm transition ${
82+
isActive ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-800"
83+
}`
7084
}
7185
>
7286
<div className="flex items-center">
7387
<PencilLine className="mr-2" />
7488
Contact
7589
</div>
7690
</NavLink>
91+
<button
92+
onClick={toggleDarkMode}
93+
className="block py-2.5 px-4 rounded-sm transition hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left"
94+
>
95+
<div className="flex items-center">
96+
{isDarkMode ? <Sun className="mr-2" /> : <Moon className="mr-2" />}
97+
{isDarkMode ? "Light Mode" : "Dark Mode"}
98+
</div>
99+
</button>
77100
<a
78101
href="https://github.com/alan345/Fullstack-SaaS-Boilerplate"
79-
className="block py-2.5 px-4 rounded-sm transition hover:bg-gray-100"
102+
className="block py-2.5 px-4 rounded-sm transition hover:bg-gray-100 dark:hover:bg-gray-800"
80103
target="_blank"
81104
rel="noopener noreferrer"
82105
>

0 commit comments

Comments
 (0)