From d804f16b9834107bd00a8cbd2fff9ac7f322edac Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Mon, 11 Sep 2023 13:56:13 +0300 Subject: [PATCH 01/11] feat: test --- src/components/ModeToggle.tsx | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/components/ModeToggle.tsx diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx new file mode 100644 index 00000000..de2ca03e --- /dev/null +++ b/src/components/ModeToggle.tsx @@ -0,0 +1,5 @@ +export default function ModeToggle() { + return ( +
ModeToggle
+ ); +} \ No newline at end of file From 71ae83718f61bfdb903ef2a2117b388362243771 Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 12 Sep 2023 14:27:47 +0300 Subject: [PATCH 02/11] style: add light/dark theme colors --- tailwind.config.js | 54 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 41 insertions(+), 13 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 1bc22080..4ccdc19e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,19 +8,19 @@ module.exports = { daisyui: { themes: [ { - chingu: { + light: { primary: "#40936D", - "primary-focus": "#3A8663", + "primary-focus": "#327355", "primary-content": "#C4DED2", - secondary: "#C2DAE9", + secondary: "#A3CEE9", "secondary-focus": "#B1C6D4", - "secondary-content": "#ECF4F8", - accent: "#A7F3D0", + "secondary-content": "#DAEAF2", + accent: "#6EE7B7", "accent-focus": "#98DDBD", - "accent-content": "#E4FBF0", - neutral: "#757575", - "neutral-focus": "#535353", - "neutral-content": "#919191", + "accent-content": "#D7EDE3", + neutral: "#6B7280", + "neutral-focus": "#4C515B", + "neutral-content": "#9CA1AA", info: "#8FC4E5", "info-content": "#DCEDF7", success: "#14B8A6", @@ -29,10 +29,38 @@ module.exports = { "warning-content": "#FFE5B4", error: "#E6624B", "error-content": "#F7CEC7", - "base-100": "#D4D4D4", - "base-200": "#C0C0C0", - "base-300": "#A3A3A3", - "base-content": "#F1F1F1", + "base-100": "#D1D3D8", + "base-200": "#F5F5F5", + "base-300": "#16171A", + "base-content": "#EEEFF0", + }, + }, + { + dark: { + primary: "#40936D", + "primary-focus": "#82D9B1", + "primary-content": "#7FB79D", + secondary: "#8FB4CC", + "secondary-focus": "#A6D1ED", + "secondary-content": "#697F8C", + accent: "#61CCA2", + "accent-focus": "#6EE7B7", + "accent-content": "#6B9984", + neutral: "#6B7280", + "neutral-focus": "#A0A5AE", + "neutral-content": "#3B3F46", + info: "#84B5D4", + "info-content": "#668BA3", + success: "#43C6B8", + "success-content": "#0E8376", + warning: "#FFBD3D", + "warning-content": "#B57A09", + error: "#EB816F", + "error-content": "#A34635", + "base-100": "#4C515B", + "base-200": "#16171A", + "base-300": "#F5F5F5", + "base-content": "#2D3036", }, }, ], From 7010c92ccead3593a61dab4fd50aeb08b6588f0c Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 12 Sep 2023 14:35:22 +0300 Subject: [PATCH 03/11] feat: add ThemeProvider from "next-themes" --- package.json | 1 + src/app/layout.tsx | 18 ++++++++++++++---- src/components/ThemeProvider.tsx | 11 +++++++++++ src/components/index.ts | 1 + yarn.lock | 5 +++++ 5 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 src/components/ThemeProvider.tsx diff --git a/package.json b/package.json index e0b3948d..094a650e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@reduxjs/toolkit": "^1.9.5", "next": "13.4.12", "next-auth": "^4.22.3", + "next-themes": "^0.2.1", "prisma": "^5.1.1", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f6ee4da7..3e4b51a2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import "./globals.css"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import { StoreProvider, Navbar } from "@/components"; +import { StoreProvider, Navbar, ThemeProvider } from "@/components"; export const metadata: Metadata = { title: "Create Next App", @@ -21,10 +21,20 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + - - {children} + + + {children} + ); diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx new file mode 100644 index 00000000..71bbd00b --- /dev/null +++ b/src/components/ThemeProvider.tsx @@ -0,0 +1,11 @@ +"use client"; + +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { type ThemeProviderProps } from "next-themes/dist/types"; + +function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children}; +} + +export default ThemeProvider; diff --git a/src/components/index.ts b/src/components/index.ts index 8e3e9399..82e16f34 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export { default as StoreProvider } from "./StoreProvider"; export { default as Avatar } from "./Avatar"; export { default as Navbar } from "./navbar/Navbar"; export { default as Button } from "./Button"; +export { default as ThemeProvider } from "./ThemeProvider"; diff --git a/yarn.lock b/yarn.lock index 2da95ee2..42ce0e7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4269,6 +4269,11 @@ next-auth@^4.22.3: preact-render-to-string "^5.1.19" uuid "^8.3.2" +next-themes@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45" + integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A== + next@13.4.12: version "13.4.12" resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df" From a55c957e815342a57b77ad11d23194dd0bf956dd Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 12 Sep 2023 14:36:34 +0300 Subject: [PATCH 04/11] feat: add ModeToggle --- src/components/ModeToggle.tsx | 33 +++++++++++++++++++++++++++++++-- src/components/index.ts | 1 + 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx index de2ca03e..f04444ab 100644 --- a/src/components/ModeToggle.tsx +++ b/src/components/ModeToggle.tsx @@ -1,5 +1,34 @@ +"use client"; + +import { useTheme } from "next-themes"; +import { SunIcon, MoonIcon } from "@heroicons/react/20/solid"; +import { ChangeEvent, useEffect, useState } from "react"; + export default function ModeToggle() { + const [mounted, setMounted] = useState(false); + const { setTheme, theme } = useTheme(); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + const toggleTheme = (e: ChangeEvent) => { + setTheme(e.target.checked === true ? "light" : "dark"); + }; + return ( -
ModeToggle
+ ); -} \ No newline at end of file +} diff --git a/src/components/index.ts b/src/components/index.ts index 82e16f34..1ddb826c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,4 +2,5 @@ export { default as StoreProvider } from "./StoreProvider"; export { default as Avatar } from "./Avatar"; export { default as Navbar } from "./navbar/Navbar"; export { default as Button } from "./Button"; +export { default as ModeToggle } from "./ModeToggle"; export { default as ThemeProvider } from "./ThemeProvider"; From 3724cb13f725b144008073890afa68c95b7c9d53 Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 12 Sep 2023 14:36:58 +0300 Subject: [PATCH 05/11] feat: add Mode Toggle to Navbar --- src/components/navbar/Navbar.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 290403bd..7570e556 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,4 +1,4 @@ -import { Avatar } from "@/components"; +import { Avatar, ModeToggle } from "@/components"; import { Bell, ChinguMenu, DropDown } from "@/components/navbar"; const name = "Yorick"; @@ -6,13 +6,14 @@ const notificationCount = 4; export default function Navbar() { return ( -