[Task] Integrate dynamic tailwind variables for dark/light theme

[wlee261]

Task Description:
Parts of the gallery web application are not compatible with the theming set up in tailwind config. We want to use the dynamic variables set up in tailwind.config to style text and background colors so that those components will be responsive to app theme changes.

• navbar
• buttons in the home page
• about page

We should find a way to preserve the work done in dark theme for these portions of the web app while also refactoring them to be compatible with the way dark/light theme is set up in this app. (see additional context section)

Deliverable(s):
Have all pages of the app have a distinct light and dark theme mode that displays all content clearly.

Additional Context:
In tailwind.config, there is a section of variables named accent-50 through accent-950. These variables are set to be responsive to theme changes (theme can be changed in the navbar). The text and background colors that we want to change with the theme should use these variables as classNames. In the below example, the second button would respond to theme changes while the first would not.

<button className="text-black">I don't respond to theme changes :D</button>
<button className="text-accent-950">I will respond to theme changes :D</button>

Start in dark theme and replace static tailwind classes e.g. text-black and replace them with the dynamic classes text-accent-[x] such that the feel of the page is preserved. Then check that the styles also make sense when the app is switched to light theme. You can refer to the themes page and the home page code as an example that uses the dynamic tailwind classes.

Reminders:

• Assign task to a project (required)
• Assign task to a sprint (required)
• Assign task to a developer (optional)