feat: dark mode & primary color

compsci-adl · Oct 6, 2024 · 613078e · 613078e
1 parent 8f1c153
commit 613078e
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -11,14 +11,14 @@
 		<link rel="icon" href="/favicon.ico" sizes="48x48" />
 		<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-		<meta name="theme-color" content="#FFFFFF" />
+		<meta name="theme-color" content="#FC8500" />
 		<script
 			defer
 			src="https://umami.csclub.org.au/script.js"
 			data-website-id="%VITE_UMAMI_WEBSITE_ID%"
 		></script>
 	</head>
-	<body>
+	<body class="bg-background text-foreground dark:dark">
 		<div id="root"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>

diff --git 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
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,7 @@ export const App = () => {
 	return (
 		<>
 			<Header />
-			<main className="mx-auto my-4 max-w-screen-xl space-y-4 px-2">
+			<main className="mx-auto max-w-screen-xl space-y-4 px-2 py-4">
 				<HelpModal />
 				<ZoomButtons />
 				<SearchForm />

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -144,7 +144,7 @@ const CalendarHeader = ({
 		},
 	];
 	return (
-		<div className="sticky top-0 z-50 flex items-center justify-between bg-white py-1">
+		<div className="sticky top-0 z-50 flex items-center justify-between bg-background py-1">
 			<h2 className="text-3xl mobile:text-2xl">
 				<span className="mr-2 font-bold">
 					{/* 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 (
-		<div className="-z-50 grid grid-cols-[2.5rem_repeat(5,_minmax(0,_1fr))] grid-rows-[2.5rem_repeat(30,_minmax(0,_1fr))] border-apple-gray-300">
-			<div className="sticky top-12 z-50 col-span-full col-start-2 grid grid-cols-subgrid border-b-1 bg-white">
+		<div className="-z-50 grid grid-cols-[2.5rem_repeat(5,_minmax(0,_1fr))] grid-rows-[2.5rem_repeat(30,_minmax(0,_1fr))]">
+			<div className="sticky top-12 z-50 col-span-full col-start-2 grid grid-cols-subgrid border-b-1 border-apple-gray-300 bg-background">
 				{WEEK_DAYS.map((day, i) => (
 					<div
 						key={day}
@@ -210,7 +210,7 @@ const CalendarBg = ({ currentWeek }: { currentWeek: dayjs.Dayjs }) => {
 					<div
 						key={i}
 						className={clsx(
-							'border-r-1',
+							'border-r-1 border-apple-gray-300',
 							[5, 6, 7, 8, 9].includes(i % 10) && 'border-b-1',
 						)}
 						style={{ height: blockHeight / 2 + 'rem' }}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -14,6 +14,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { LANGUAGES } from '../constants/languages';
+import { useDarkMode } from '../helpers/dark-mode';
 import { useHelpModal } from '../helpers/help-modal';
 
 const DEFAULT_LANGUAGE = LANGUAGES[0];
@@ -35,8 +36,15 @@ export const Header = () => {
 
 	const [isChangeLanguageOpen, setIsChangeLanguageOpen] = useState(false);
 
+	const { isDarkMode, toggleIsDarkMode } = useDarkMode();
+
 	return (
-		<Navbar isBordered maxWidth="xl" position="static">
+		<Navbar
+			isBordered
+			maxWidth="xl"
+			position="static"
+			classNames={{ wrapper: 'px-4' }}
+		>
 			<NavbarBrand>
 				<img src="/favicon.svg" alt="Logo" className="mr-2 w-6" />
 				<h1 className="font-bold text-inherit">MyTimetable</h1>
@@ -60,6 +68,13 @@ export const Header = () => {
 						</Button>
 					</Tooltip>
 				</NavbarItem>
+				<NavbarItem>
+					<Tooltip content={t('header.toggle-dark-mode')} size="sm">
+						<Button {...HEADER_BUTTON_PROPS} onClick={toggleIsDarkMode}>
+							{isDarkMode ? '🌚' : '🌞'}
+						</Button>
+					</Tooltip>
+				</NavbarItem>
 				<NavbarItem>
 					<Popover
 						isOpen={isChangeLanguageOpen}
@@ -84,7 +99,10 @@ export const Header = () => {
 									key={language.code}
 									fullWidth
 									variant="light"
-									onClick={() => i18n.changeLanguage(language.code)}
+									onClick={() => {
+										i18n.changeLanguage(language.code);
+										setIsChangeLanguageOpen(false);
+									}}
 								>
 									<span>{language.name} </span>
 									<span className="font-noto-emoji">{language.flag}</span>

diff --git 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"
 				>
-					➕
+					<FaPlus />
 				</Button>
 			</Tooltip>
 			<Tooltip content={t('zoom.zoom-out')} placement="left">
@@ -31,7 +32,7 @@ export const ZoomButtons = () => {
 					isIconOnly
 					size="sm"
 				>
-					➖
+					<FaMinus />
 				</Button>
 			</Tooltip>
 		</div>

diff --git a/src/helpers/dark-mode.ts 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
@@ -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
@@ -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
@@ -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
@@ -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',