MusicFree Theme Customization

A new skin for the MusicFree desktop client in a Wuthering Waves style: gold accent, fully transparent, with the video behind the player showing through.

What I built

• Unpack and repack: extracted app.asar, worked on the real build and packed it back.
• Theme layer: overrode the whole palette through CSS variables — accent to #c9a45c, plus background, divider, list hover and active states, text, mask, shadow and placeholder.
• Transparent background: made body, .app, the sidebar, page containers, header and music bar transparent so the video underneath shows through. The sidebar and music bar backgrounds are handled by pseudo-elements instead, otherwise they would block the video.
• Small details: the original logo is SVG vector text and its paths cannot be changed from CSS, so it is hidden and replaced with text rendered by a pseudo-element.
• Localization: adjusted zh-CN.json alongside the styles.

Stack

CSS variable overrides plus Electron app unpacking and repacking.

Reversible

A full v2.2 backup (app.asar, the stylesheet and the locale file) was taken beforehand, so the original look can be restored at any time.