color name of track groups in sidebar

very fansey :3

2 files changed, 8 insertions, 2 deletions

diff --git a/src/static/site.css b/src/static/site.css
index 4728410a..c964c512 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -349,9 +349,14 @@ footer > :last-child {
     user-select: none;
 }
 
+.sidebar > details summary .group-name {
+    color: var(--primary-color);
+}
+
 .sidebar > details summary:hover {
     cursor: pointer;
     text-decoration: underline;
+    text-decoration-color: var(--primary-color);
 }
 
 .sidebar > details ul,
diff --git a/src/upd8.js b/src/upd8.js
index 6eea053a..279b0053 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -5772,13 +5772,14 @@ function generateSidebarForAlbum(album, currentTrack, {strings, to, wikiData}) {
                     class: tracks.includes(currentTrack) && 'current'
                 }, [
                     html.tag('summary',
+                        {style: getLinkThemeString(color)},
                         (listTag === 'ol'
                             ? strings('albumSidebar.trackList.group.withRange', {
-                                group: name,
+                                group: `<span class="group-name">${name}</span>`,
                                 range: `${startIndex + 1}&ndash;${startIndex + tracks.length}`
                             })
                             : strings('albumSidebar.trackList.group', {
-                                group: name
+                                group: `<span class="group-name">${name}</span>`
                             }))
                     ),
                     fixWS`