Overview
A few spots in the app are missing dark mode styling, so the text can be hard to read when dark mode is toggled on. Would be great to bring these in line with the rest of the app.
Community page
-
src/app/community/page.tsx (line 39): The heading uses text-black-500 with no dark variant. Should follow the pattern the rest of the app uses, something like text-slate-800 dark:text-slate-200.
-
src/app/community/communityEvents.tsx (lines 19, 64, 84): The "no events" and "no clubs" empty state text uses text-slate-500 without a dark: variant. Adding dark:text-slate-400 would keep it readable.
Events empty state
src/app/events/EventsNone.tsx (line 25): Same situation, text-slate-500 without a dark: counterpart.
How to fix
Add the appropriate dark: text color classes alongside the existing ones. Look at nearby components for reference on which dark mode colors we use.
Good to know
You'll see how we use Tailwind's dark: prefix throughout the app.
Overview
A few spots in the app are missing dark mode styling, so the text can be hard to read when dark mode is toggled on. Would be great to bring these in line with the rest of the app.
Community page
src/app/community/page.tsx(line 39): The heading usestext-black-500with no dark variant. Should follow the pattern the rest of the app uses, something liketext-slate-800 dark:text-slate-200.src/app/community/communityEvents.tsx(lines 19, 64, 84): The "no events" and "no clubs" empty state text usestext-slate-500without adark:variant. Addingdark:text-slate-400would keep it readable.Events empty state
src/app/events/EventsNone.tsx(line 25): Same situation,text-slate-500without adark:counterpart.How to fix
Add the appropriate
dark:text color classes alongside the existing ones. Look at nearby components for reference on which dark mode colors we use.Good to know
You'll see how we use Tailwind's
dark:prefix throughout the app.