From 613078e902466662c2b8a2d91673a03f81494984 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Mon, 7 Oct 2024 01:14:15 +1030 Subject: [PATCH] feat: dark mode & primary color --- index.html | 4 ++-- package.json | 1 + pnpm-lock.yaml | 12 ++++++++++++ src/App.tsx | 2 +- src/components/Calendar.tsx | 8 ++++---- src/components/Header.tsx | 22 ++++++++++++++++++++-- src/components/ZoomButtons.tsx | 5 +++-- src/helpers/dark-mode.ts | 18 ++++++++++++++++++ src/locales/en-au.json | 3 ++- src/locales/zh-cn.json | 3 ++- tailwind.config.js | 27 ++++++++++++++++++++++----- vite.config.ts | 2 +- 12 files changed, 88 insertions(+), 19 deletions(-) create mode 100644 src/helpers/dark-mode.ts diff --git a/index.html b/index.html index 2e4ca74..4fea173 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,14 @@ - + - +
diff --git a/package.json b/package.json index 7654f43..1d66e15 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "react-i18next": "^15.0.2", + "react-icons": "^5.3.0", "simple-zustand-devtools": "^1.1.0", "sonner": "^1.5.0", "zustand": "^4.5.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec6790f..2e35c49 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: react-i18next: specifier: ^15.0.2 version: 15.0.2(i18next@23.15.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-icons: + specifier: ^5.3.0 + version: 5.3.0(react@18.3.1) simple-zustand-devtools: specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.3)(react@18.3.1)) @@ -3906,6 +3909,11 @@ packages: react-native: optional: true + react-icons@5.3.0: + resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} + peerDependencies: + react: '*' + react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} @@ -9486,6 +9494,10 @@ snapshots: optionalDependencies: react-dom: 18.3.1(react@18.3.1) + react-icons@5.3.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-refresh@0.14.2: {} react-remove-scroll-bar@2.3.6(@types/react@18.3.3)(react@18.3.1): diff --git a/src/App.tsx b/src/App.tsx index 4ccb575..9dcf9ae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,7 +15,7 @@ export const App = () => { return ( <>
-
+
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index 9101445..400db0d 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -144,7 +144,7 @@ const CalendarHeader = ({ }, ]; return ( -
+

{/* Month for Wednesday in the week is more accurate than Monday */} @@ -181,8 +181,8 @@ const CalendarBg = ({ currentWeek }: { currentWeek: dayjs.Dayjs }) => { const blockHeight = useCalendarHourHeight((s) => s.height); return ( -
-
+
+
{WEEK_DAYS.map((day, i) => (
{
{ const [isChangeLanguageOpen, setIsChangeLanguageOpen] = useState(false); + const { isDarkMode, toggleIsDarkMode } = useDarkMode(); + return ( - + Logo

MyTimetable

@@ -60,6 +68,13 @@ export const Header = () => { + + + + + { key={language.code} fullWidth variant="light" - onClick={() => i18n.changeLanguage(language.code)} + onClick={() => { + i18n.changeLanguage(language.code); + setIsChangeLanguageOpen(false); + }} > {language.name} {language.flag} diff --git a/src/components/ZoomButtons.tsx b/src/components/ZoomButtons.tsx index 9ae1a3d..ff9afbc 100644 --- a/src/components/ZoomButtons.tsx +++ b/src/components/ZoomButtons.tsx @@ -1,5 +1,6 @@ import { Button, Tooltip } from '@nextui-org/react'; import { useTranslation } from 'react-i18next'; +import { FaMinus, FaPlus } from 'react-icons/fa'; import { MAX_HOUR_HEIGHT, @@ -21,7 +22,7 @@ export const ZoomButtons = () => { isIconOnly size="sm" > - ➕ + @@ -31,7 +32,7 @@ export const ZoomButtons = () => { isIconOnly size="sm" > - ➖ +
diff --git a/src/helpers/dark-mode.ts b/src/helpers/dark-mode.ts new file mode 100644 index 0000000..9d672cf --- /dev/null +++ b/src/helpers/dark-mode.ts @@ -0,0 +1,18 @@ +import { useState } from 'react'; + +export const useDarkMode = () => { + const [isDarkMode, setIsDarkMode] = useState( + matchMedia('(prefers-color-scheme: dark)').matches, + ); + const toggleIsDarkMode = () => { + document.body.classList.remove('dark:dark'); + if (isDarkMode) { + document.body.classList.remove('dark'); + } else { + document.body.classList.add('dark'); + } + setIsDarkMode((m) => !m); + }; + + return { isDarkMode, toggleIsDarkMode }; +}; diff --git a/src/locales/en-au.json b/src/locales/en-au.json index 134a0f3..7653ebb 100644 --- a/src/locales/en-au.json +++ b/src/locales/en-au.json @@ -10,7 +10,8 @@ "header": { "help": "Help", "feedback": "Feedback", - "change-language": "Change Language" + "change-language": "Change Language", + "toggle-dark-mode": "Toggle Dark Mode" }, "course-modal": { "dates": "Dates", diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json index 0524e0d..a69e26e 100644 --- a/src/locales/zh-cn.json +++ b/src/locales/zh-cn.json @@ -10,7 +10,8 @@ "header": { "help": "帮助", "feedback": "反馈", - "change-language": "切换语言" + "change-language": "切换语言", + "toggle-dark-mode": "切换深色模式" }, "course-modal": { "dates": "日期", diff --git a/tailwind.config.js b/tailwind.config.js index de7f53c..3301704 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,14 +15,31 @@ export default { fontSize: { '2xs': ['0.625rem', { lineHeight: '0.75rem' }], }, - colors: { - 'apple-gray': { 300: '#DFDFDF', 500: '#AFAFAF' }, - }, + colors: {}, fontFamily: { 'noto-emoji': ['"Noto Color Emoji"', 'sans-serif'], }, }, }, - darkMode: 'class', - plugins: [nextui()], + darkMode: 'media', + plugins: [ + nextui({ + themes: { + light: { + colors: { + primary: { DEFAULT: '#FC8500', foreground: '#FFFFFF' }, + 'apple-gray': { 300: '#DFDFDF', 500: '#AFAFAF' }, + }, + }, + dark: { + colors: { + primary: { DEFAULT: '#FC8500', foreground: '#FFFFFF' }, + foreground: '#D5D5D5', + background: '#161718', + 'apple-gray': { 300: '#313131', 500: '#434444' }, + }, + }, + }, + }), + ], }; diff --git a/vite.config.ts b/vite.config.ts index 7452f53..5a12d33 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,7 +16,7 @@ export default defineConfig({ 'A drag-and-drop timetable planner for the University of Adelaide students.', display: 'standalone', background_color: '#FFFFFF', - theme_color: '#FFFFFF', + theme_color: '#FC8500', icons: [ { src: 'pwa-192x192.png',