[Frontend] Add Themes & Update Stylization

[YuurinBee]

Frontend Updates & Stylization

• Updated icon-color value to reflect changes per theme
• Updated Chat Container (border) to reflect changes per theme
• Updated Apply 'Unread' final styling timestamp color to reflect changes per theme
• Add Rule for Sound Notification Selection (Center Align Text)
• Add Animation Effect for Close Box on Hover
• Minor Stylization Edits for Vector Theme

Added Themes

• Keep it Purple Theme (PIVX)
• Cosmic Theme (GIFverse)

[github-actions]

Claude finished @YuurinBee's task in 1m 17s —— View job

---

Code Review: PR #36 - Add Themes & Update Stylization

I've reviewed the changes in this PR. Overall, this is a solid addition of two new themes (Cosmic/GIFverse and Keep it Purple/PIVX) with consistent styling updates.

---

Summary

Files Changed: 7 files (+1370/-19 lines)

• Added two new theme CSS files (~1340 lines)
• Updated theme selection in HTML and JS
• Minor styling improvements to existing code

---

Findings

CSS Issues

1. Trailing Comma in CSS (Bug) - src/themes/pivx/dark.css:191

.neon-toggle:hover {
  box-shadow: 
    0 0 8px #6202D450,
    inset 0 1px 3px rgba(0, 0, 0, 0.3),  /* <- trailing comma */
}

This trailing comma after the last box-shadow value is invalid CSS and may cause parsing issues in some browsers.

Fix this →

---

2. Missing rgba() function in button:hover - src/themes/vector/dark.css:117

button:hover {
  background-color: (152, 255, 214, 0.5);  /* Missing 'rgba' */
}

This should be rgba(152, 255, 214, 0.5). The missing rgba function will cause this rule to be ignored.

Fix this →

---

Inconsistency

3. Hardcoded color in main.js - src/main.js:8744

The change at line 8744 replaces getComputedStyle(...).getPropertyValue('--icon-color-primary') with a hardcoded #59fcb3:

memberDiv.addEventListener('mouseenter', () => {
    const primaryColor = '#59fcb3';  // Hardcoded instead of theme variable
    bgDiv.style.background = `linear-gradient(to right, ${primaryColor}40, transparent)`;
    ...
});

This is inconsistent with the other changes in this PR that properly use the CSS variable. The group member hover effect won't respect the selected theme.

Fix this →

---

Code Quality (Positive)

• Good: The use of CSS variables (--icon-color-primary, --reply-highlight-border) for theme-specific colors is the right approach
• Good: Consistent structure across theme files makes maintenance easier
• Good: The changes to renderChat() and renderInviteItem() correctly use getComputedStyle() to read theme variables dynamically
• Good: Adding the gifverse-theme class pattern aligns with existing theme handling

---

Suggestions for Improvement

1. Consider adding gifverse-theme to the class removal list in src/js/settings.js:683:

   document.body.classList.remove('vector-theme', 'chatstr-theme', 'pivx-theme');
   // Should also include 'gifverse-theme' for consistency

2. Marketplace hardcoded colors in both new themes: The marketplace section uses hardcoded #59fcb3 (Vector green) colors instead of theme-appropriate colors. Consider using the theme's primary color or creating additional CSS variables for marketplace styling.

---

Verdict

This PR is ready for merge after addressing the CSS bugs (trailing comma and missing rgba()). The hardcoded color in main.js is a minor inconsistency but not blocking.

The new themes are well-structured and follow the existing patterns in the codebase.