From 768b4a1aba4971835b0a8ef940cd26bca261fe81 Mon Sep 17 00:00:00 2001 From: yude Date: Sat, 9 Mar 2024 18:43:55 +0900 Subject: [PATCH] Support light mode --- src/App.tsx | 62 +++++++++++++----------- src/components/Card.tsx | 18 +++---- src/components/Chat.tsx | 14 +++--- src/components/HorizontalMenu.tsx | 11 +++-- src/components/Keys.tsx | 8 ++-- src/components/Links.tsx | 40 ++++++++-------- src/components/Mutuals.tsx | 49 ++++++++----------- src/components/Profile.tsx | 25 +++++----- src/components/Services.tsx | 10 ++-- src/components/Spotify.tsx | 2 +- src/components/Theme.tsx | 79 +++++++++++++++++++++++++++++++ src/components/VerticalMenu.tsx | 11 +++-- src/index.css | 7 ++- tailwind.config.js | 1 + 14 files changed, 211 insertions(+), 126 deletions(-) create mode 100644 src/components/Theme.tsx diff --git a/src/App.tsx b/src/App.tsx index f1086d8..042454d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import VerticalMenu from "./components/VerticalMenu" import HorizontalMenu from "./components/HorizontalMenu" import ContentRenderer from "./components/ContentRenderer" import Footer from "./components/Footer" +import { ThemeProvider, ThemeSwitcher } from "./components/Theme" import { useState, useEffect } from 'react'; @@ -58,36 +59,43 @@ export default function App() { return ( -
- -
-
-
-
- + + <> +
+
-
- -
-
-
-
- +
+
+
+ +
-
- -
-
- -
-
+ +
+
+
+
+ +
+
+ +
+
+ +
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+ +
+ + ) } diff --git a/src/components/Card.tsx b/src/components/Card.tsx index e97fd05..35b2d9e 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -54,41 +54,41 @@ export default function Card() {
-

+

{np && np.isPlaying &&

-
+
- {np.artist} + {np.artist}

{np.title}

}

-
+

- {" "} + {" "} i@yude.jp

- {" "} + {" "} +81 70-8909-1949

- {" "} + {" "} @yude_jp

- {" "} + {" "} yude

- {" "} + {" "} yude

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index 9f228d2..990b74d 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -91,23 +91,23 @@ export default function Chat() {
-
-
+ ) +} + +export const ThemeProvider = ({ children }: Props): JSX.Element => { + const setTheme = useSetTheme(); + + useEffect(() => { + const root = window.document.documentElement; + + if (window.localStorage.getItem("theme")) { + root.setAttribute("data-theme", window.localStorage.getItem("theme") || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light")); + setTheme(window.localStorage.getItem("theme") as Theme); + } else { + const initialColorValue = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; + root.setAttribute("data-theme", initialColorValue); + setTheme(initialColorValue as Theme); + window.localStorage.setItem("theme", initialColorValue); + } + }, [setTheme]); + + return ( + <> +