Skip to content

feat: Dark Mode (closes #23)#25

Merged
egrace479 merged 3 commits intomainfrom
feature/issue-23/dark-mode
Dec 18, 2025
Merged

feat: Dark Mode (closes #23)#25
egrace479 merged 3 commits intomainfrom
feature/issue-23/dark-mode

Conversation

@EmersonFras
Copy link
Copy Markdown
Contributor

@EmersonFras EmersonFras commented Dec 16, 2025

Summary

Implements a dark mode toggle to the page. The page will initially be set to the user's system preferences, otherwise a toggle button in the upper left hand corner can be used to toggle between the modes.

Changes Implemented

  • Updated index.html: Added a toggle switch for light/dark mode. Adds dark themes to all background colorings and texts that are needed.
  • Updated main.js: Adds event listener for the light/dark mode toggle switch.
  • Updated style.css: Adds custom styling for a dark mode loading skeleton and the tags section scrollbar. Both these items had existing styling in this file hence for dark mode we needed to add additional css rather then just tailwind.

Testing

Below are pictures in light mode and dark mode. Note the button is fixed so it stays there while scrolling.

image image

Closes #23

@egrace479 egrace479 added the design UX or presentation needs attention label Dec 16, 2025
Copy link
Copy Markdown
Member

@egrace479 egrace479 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

@egrace479 egrace479 merged commit 670d20a into main Dec 18, 2025
@egrace479 egrace479 deleted the feature/issue-23/dark-mode branch December 18, 2025 22:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design UX or presentation needs attention

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add dark mode option

2 participants