From d6fe4fd07fec224566e8a716b755d0a819fc33ea Mon Sep 17 00:00:00 2001 From: Rane Gillian Villanueva Date: Mon, 5 Sep 2022 23:38:00 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8C=93NEW:=20Dark=20Mode=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card.tsx | 24 ++++++------ src/components/DarkModeSwitch.tsx | 63 +++++++++++++++++++++++++++++++ src/pages/index.tsx | 8 ++-- tailwind.config.js | 4 ++ 4 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 src/components/DarkModeSwitch.tsx diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 384cd40..e4e950c 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -14,7 +14,7 @@ const Card = ({ directory }: CardProps) => { return (
@@ -27,7 +27,7 @@ const Card = ({ directory }: CardProps) => { className="absolute -top-4 left-8 self-end rounded-2xl" />
-

+

{directory.name}{" "} {directory.verified ? ( sample icon @@ -55,12 +55,12 @@ export function SkeletonCard() { return (

-
+

-
-
-
+
+
+
    -
    -
    -
    {" "} -
    +
    +
    +
    {" "} +
); diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx new file mode 100644 index 0000000..02c483a --- /dev/null +++ b/src/components/DarkModeSwitch.tsx @@ -0,0 +1,63 @@ +import { useEffect, useState } from "react"; +import { TbSun, TbMoon } from "react-icons/tb"; + +const iconDiv = + "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer transition-opacity duration-200"; + +function DarkModeSwitch() { + //Set light theme by default + const [theme, setTheme] = useState("light"); + + useEffect(() => { + //Set theme on device + if (typeof window !== "undefined") { + if ( + localStorage.theme === "dark" || + (!("theme" in localStorage) && + window.matchMedia("(prefers-color-scheme: dark)").matches) + ) { + setTheme("dark"); + document.documentElement.classList.add("dark"); + } else { + setTheme("light"); + document.documentElement.classList.remove("dark"); + } + } + }, [theme]); + + function changeTheme(_theme: string) { + //Set theme on the html tag. + if (_theme === "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + setTheme(_theme); + localStorage.setItem("theme", _theme); + } + + console.log(theme); + + return ( +
+
changeTheme("light")} + > + +
+
changeTheme("dark")} + > + +
+
+ ); +} + +export default DarkModeSwitch; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 556f32f..5de5bbe 100755 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,7 @@ import type { NextPage } from "next"; import { useState } from "react"; import Card, { SkeletonCard } from "@/components/Card"; +import DarkModeSwitch from "@/components/DarkModeSwitch"; import Seo from "@/components/Seo"; import { Directory } from "@/interface"; import { useGetDirectories } from "@/queries"; @@ -19,18 +20,19 @@ const Home: NextPage = () => { } return ( -
+
-

+

Web3 Philippines Directory 📃

+ Submit project diff --git a/tailwind.config.js b/tailwind.config.js index fefb4df..811e8e0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -64,8 +64,12 @@ module.exports = { }, "neutral-dark": "#19202D", "neutral-light": "#6E8098", + "dark-neutral-light": "#e6dfd2", + "light-bg": "#F2F2F2", + "dark-bg": "#0D0D0D", }, }, }, plugins: [require("@tailwindcss/line-clamp")], + darkMode: "class", }; From a8da72e93c07a4a4ac5f12ce557a982e8f7c0d23 Mon Sep 17 00:00:00 2001 From: Rane Gillian Villanueva Date: Tue, 6 Sep 2022 01:26:28 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8TWEAK:=20Dark=20mode=20to=20defaul?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DarkModeSwitch.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx index 02c483a..c2803e2 100644 --- a/src/components/DarkModeSwitch.tsx +++ b/src/components/DarkModeSwitch.tsx @@ -6,16 +6,12 @@ const iconDiv = function DarkModeSwitch() { //Set light theme by default - const [theme, setTheme] = useState("light"); + const [theme, setTheme] = useState("dark"); useEffect(() => { //Set theme on device if (typeof window !== "undefined") { - if ( - localStorage.theme === "dark" || - (!("theme" in localStorage) && - window.matchMedia("(prefers-color-scheme: dark)").matches) - ) { + if (localStorage.theme === "dark" || !("theme" in localStorage)) { setTheme("dark"); document.documentElement.classList.add("dark"); } else { @@ -36,8 +32,6 @@ function DarkModeSwitch() { localStorage.setItem("theme", _theme); } - console.log(theme); - return (
Date: Tue, 6 Sep 2022 17:12:30 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8TWEAK:=20Added=20back=20matchMedia?= =?UTF-8?q?=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DarkModeSwitch.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx index c2803e2..41f1dc6 100644 --- a/src/components/DarkModeSwitch.tsx +++ b/src/components/DarkModeSwitch.tsx @@ -6,18 +6,18 @@ const iconDiv = function DarkModeSwitch() { //Set light theme by default - const [theme, setTheme] = useState("dark"); + const [theme, setTheme] = useState("theme"); useEffect(() => { //Set theme on device if (typeof window !== "undefined") { - if (localStorage.theme === "dark" || !("theme" in localStorage)) { - setTheme("dark"); - document.documentElement.classList.add("dark"); - } else { - setTheme("light"); - document.documentElement.classList.remove("dark"); - } + const _theme = + localStorage.theme === "dark" || + (!("theme" in localStorage) && + window.matchMedia("(prefers-color-scheme: dark)").matches) + ? "dark" + : "light"; + changeTheme(_theme); } }, [theme]); @@ -36,7 +36,7 @@ function DarkModeSwitch() {
changeTheme("light")} > @@ -44,7 +44,7 @@ function DarkModeSwitch() {
changeTheme("dark")} > From 86ebb69868cd635bf10454fa554089764d9f9f3a Mon Sep 17 00:00:00 2001 From: Rane Gillian Villanueva Date: Tue, 6 Sep 2022 17:31:51 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8FFIX:=20Dark=20Mode=20b?= =?UTF-8?q?utton=20position=20on=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3fcc800..ed81633 100755 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -26,18 +26,20 @@ const Home: NextPage = () => {
-

+

Web3 Philippines Directory

- - - Submit project - +
@@ -79,8 +81,8 @@ const Home: NextPage = () => { rel="noopener noreferrer" > Web3 Philippines - - {" "}&{" "} + {" "} + &{" "} Date: Tue, 6 Sep 2022 17:42:25 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8FFIX:=20Center=20cards?= =?UTF-8?q?=20below=20md=20breakpoint=20(760px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index e4e950c..d03e89f 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -14,7 +14,7 @@ const Card = ({ directory }: CardProps) => { return (