style(calendar): update text colors for improved readability and consistency

Author: sajjadmrx

src/layouts/calendar/calendar.tsx

@@ -50,20 +50,20 @@ export const PersianCalendar: React.FC = () => {
 		<div className="grid gap-4 md:grid-cols-5" dir="rtl">
 			<div className="p-4 md:col-span-3 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900 rounded-xl backdrop-blur-sm lg:h-96">
 				<div className="flex items-center justify-between mb-4">
-					<h3 className="text-xl font-medium text-gray-200">
+					<h3 className="text-xl font-medium text-gray-500 dark:text-gray-100">
 						{PERSIAN_MONTHS[currentDate.jMonth()]} {currentDate.jYear()}
 					</h3>
 					<div className="flex gap-2">
 						<button
 							onClick={() => changeMonth(-1)}
-							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-400 rounded-lg hover:text-gray-200 hover:bg-gray-700/50"
+							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-500 rounded-lg dark:text-gray-200 hover:text-gray-200 hover:bg-gray-700/50"
 						>
 							ماه قبل
 							<FaChevronRight />
 						</button>
 						<button
 							onClick={() => changeMonth(1)}
-							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-400 rounded-lg hover:text-gray-200 hover:bg-gray-700/50"
+							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-500 rounded-lg dark:text-gray-200 hover:text-gray-200 hover:bg-gray-700/50"
 						>
 							<FaChevronLeft />
 							ماه بعد
@@ -73,7 +73,10 @@ export const PersianCalendar: React.FC = () => {
 
 				<div className="grid grid-cols-7 gap-2">
 					{WEEKDAYS.map((day) => (
-						<div key={day} className="py-2 text-xs text-center text-gray-400">
+						<div
+							key={day}
+							className="py-2 text-xs text-center text-gray-500 dark:text-gray-200"
+						>
 							{day}
 						</div>
 					))}
@@ -99,7 +102,7 @@ export const PersianCalendar: React.FC = () => {
 			</div>
 
 			<div className="p-4 md:col-span-2 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900 rounded-xl backdrop-blur-sm">
-				<h3 className="mb-4 text-xl font-medium text-gray-200">
+				<h3 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-100">
 					{PERSIAN_MONTHS[selectedDate.jMonth()]} {selectedDate.jDate()}
 				</h3>
 
@@ -117,7 +120,7 @@ const CalendarLayout = () => {
 	return (
 		<section className="p-2 mx-1 overflow-y-auto  rounded lg:mx-4 max-h-[calc(100vh-4rem)]">
 			<div className="flex items-center justify-between w-full px-1 mb-4">
-				<h2 className="text-lg font-semibold text-gray-200 font-[balooTamma]">
+				<h2 className="text-lg font-semibold dark:text-gray-200 font-[balooTamma]">
 					📅 Calender
 				</h2>
 				<div

src/layouts/calendar/components/day.tsx

@@ -42,7 +42,7 @@ export function DayItem({
 			onClick={() => setSelectedDate(cellDate)}
 			className={`
 					relative p-2 rounded-lg text-sm transition-colors
-					${isHoliday ? 'text-red-400' : 'text-gray-300'}
+					${isHoliday ? 'text-red-400' : 'text-gray-600 dark:text-gray-300'}
 					${isSelected ? 'bg-blue-500/20' : 'hover:bg-gray-700/50'}
 					${todayShamsiEvent || hasTodo ? 'font-bold' : ''}
 					${isToday(cellDate) ? 'ring-2 ring-blue-500' : ''}

src/layouts/calendar/components/events/event.tsx

@@ -33,7 +33,7 @@ export function Events({ events, currentDate }: Prop) {
 
 	return (
 		<div>
-			<h4 className="mb-2 text-lg text-gray-300">رویدادها</h4>
+			<h4 className="mb-2 text-lg text-gray-500 dark:text-gray-400">رویدادها</h4>
 			<div className="h-40 space-y-3 overflow-y-auto lg:h-32">
 				{selectedEvents.length > 0 ? (
 					selectedEvents.map((event, index) => (

src/layouts/calendar/components/todos/todo-input.tsx

@@ -22,7 +22,7 @@ export function TodoInput({ onAdd }: Prop) {
 				value={text}
 				onChange={(e) => setText(e.target.value)}
 				placeholder="یادداشت جدید..."
-				className="flex-1 px-3 py-2 text-gray-200 placeholder-gray-400 rounded-lg bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				className="flex-1 px-3 py-2 text-gray-600 placeholder-gray-500 rounded-lg bg-gray-300/50 dark:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 "
 			/>
 			<button
 				type="submit"

src/layouts/calendar/components/todos/todo.item.tsx

@@ -10,16 +10,16 @@ export function TodoItem({ todo, deleteTodo, toggleTodo }: Prop) {
 	return (
 		<div
 			key={todo.id}
-			className="flex items-center gap-2 p-3 rounded-lg bg-gray-700/30 group"
+			className="flex items-center gap-2 p-3 rounded-lg bg-gray-300/80 dark:bg-neutral-800/50 group"
 		>
 			<input
 				type="checkbox"
 				checked={todo.completed}
 				onChange={() => toggleTodo(todo.id)}
-				className="w-4 h-4 border-gray-500 rounded"
+				className="w-4 h-4 border-gray-500 rounded "
 			/>
 			<span
-				className={`flex-1 text-gray-200 ${todo.completed ? 'line-through text-gray-400' : ''}`}
+				className={`flex-1 text-gray-600 dark:text-gray-300 ${todo.completed ? 'line-through text-gray-400' : ''}`}
 			>
 				{todo.text}
 			</span>

src/layouts/calendar/components/todos/todos.tsx

@@ -17,7 +17,7 @@ export function Todos({ currentDate }: TodoProp) {
 
 	return (
 		<div className="mb-6">
-			<h4 className="mb-2 text-lg text-gray-300">یادداشت‌های روز</h4>
+			<h4 className="mb-2 text-lg text-gray-500 dark:text-gray-200">یادداشت‌های روز</h4>
 			<TodoInput onAdd={(text) => addTodo(text, selectedDateStr)} />
 			<div className="h-40 space-y-2 overflow-y-auto lg:h-32">
 				{selectedDateTodos.map((todo) => (