Dynamic Background

A features rich and highly customizable YouTube Music theme featuring dynamic backgrounds and glassmorphism. Available for Better Lyrics Extension and Pear Desktop.

Table of Contents

• Features
• Installation
• Previews
• Configuration
• Compatibility
• Development
• License
• Credits

Features

• Full site-wide theme for YouTube Music
• Dynamic backgrounds that change with the current song, or use static colors/images
• Highly customizable
• Modern glassmorphism UI with blur and rounded corners
• Smooth, configurable animations that can be adjusted or disabled

Toggleable player enhancements:

• Centered player controls
• Increment skip buttons

Note: The animations may affect performance and can be disabled in the settings.

Installation

Better Lyrics (Extension)

Install Better Lyrics Extension For Youtube Music.

Known Limitations

• Background transitions don’t work in Firefox yet.

Method 1: Marketplace (Recommended for auto-updates)

• Open Theme Marketplace → Search for "Dynamic Background" → Click Install.

Method 2: Built-in

• Open extension settings → Themes → Click Change → Select Dynamic Background.

Pear Desktop (App)

The Album Color Theme plugin is required for dynamic background functionality.

Known Limitations

• Dynamic backgrounds behave differently from the Better Lyrics version, as Pear Desktop does not provide a variable for fetching the song’s album cover. This implementation relies on the Album Color Theme plugin as a workaround.

Installation

1. Download pear-ytm.css
2. Open the app menu → Options → Visual Tweaks → Theme → Import custom CSS file
3. Select the downloaded pear-ytm.css
4. Restart the app

Previews

Lyrics blur: from focused, to partial, to off.

Preset

Three available presets: default, light, dark

Layout

Corner: Theme Default

Center: Better Lyrics Default

Custom Background

Custom Image: NASA

Static Color: #212121

Pear Desktop

Configuration

Detailed informations about confirguration here.

All variables are defined at the top of the CSS/RICS file.

• Edit values to customize colors, fonts, layout, and animations
• Supports standard CSS formats (rgb, rgba, hex, etc.)
• Custom fonts must be installed on your system

Animations

• Better Lyrics: uses true / false toggles
• Pear Desktop: set duration to 0s to disable

Notes

• Dynamic backgrounds on Pear require the Album Color Theme plugin
• Better Lyrics includes presets (default, light, dark) as quick starting styles. You can still override any value manually
• Pear Desktop uses CSS variables (--cfg-*) and comment-based toggles

Compatibility

• Better Lyrics v2.2.0 and later
• Pear Desktop 3.12.0

Development

Dynamic Background for Better Lyrics is written in rics, an in-house CSS preprocessor made by the Better Lyrics team. It is essentially a lightweight SCSS-like preprocessor.

For the Pear Desktop port, the theme is written in plain CSS and uses PostCSS to compile smaller chunks into a single final stylesheet.

Getting Started

Install the rics extension from the VSCode marketplace for syntax highlighting. If you use a different editor or IDE, masking the file as SCSS could work as well.

The rics extension is not required for Pear Desktop development.

Clone this repo and install the necessary modules:

git clone https://github.com/chengggit/YouTube-Music-Dynamic-Theme.git
cd YouTube-Music-Dynamic-Theme
npm install

Development commands:

# Better Lyrics
npm run dev # watch & hot-reload from code editor/IDE
npm run build-rics  # build once
npm run watch-rics  # watch for changes

# Pear Desktop
npm run build-pear  # build once
npm run watch-pear  # watch for changes

Hot Reload (Better Lyrics)

1. Run npm run dev to start the WebSocket server on localhost:8080 and watch for changes.
2. Open YouTube Music in your browser and apply any theme inside Better Lyrics except "Default". This creates a #blyrics-custom-style style tag that we inject the compiled CSS into.
3. Open DevTools and go to the Console. Paste the contents of client.js to connect to the WebSocket server.
4. Changes from your editor will reflect in the browser instantly on save.

If you need to reconnect, just repaste client.js in the console again. It will automatically close the previous connection and reconnect.

How does it work

npm run dev runs build-rics.js to watch for changes in src/better-lyrics/, concatenate them into style.rics, and compile to a temporary src/rics-dev.css that's broadcast to your browser in real-time via WebSocket. This is separate from style.rics in root, which is the actual theme file used by the extension, src/rics-dev.css is just a dev preview and is gitignored.

License

This theme is licensed under the MIT License, allowing you to use, modify, and redistribute it. If you reuse or fork any part of the theme, please credit the original project and preserve this license notice. Any code snippets borrowed from other themes are already credited within this repository.

Credits

• walm-git's Modern YouTube Music Theme, which served as the base CSS for this theme.

Snippets used in this theme:

• Background Fix: Mixcraftio's Customisable Youtube Music Theme V3
• Search Box and Song Timestamp: zgoly's YouTube Music Frosted Glass

The theme is also heavily inspired by “Even Better Lyrics Plus” by Noah & BetterLyrics for Better Lyrics extension.

Thank You ❤️

This CSS started from a theme made by walm-git, and over time I’ve rebuilt nearly every part of it. It’s now mostly my own work. I’m really proud of how it turned out and have learned a lot from this project alone.

Thanks to everyone who uses this theme. I hope you enjoy using it as much as I do. And thank you to everyone who supported the project from the beginning and to those who left feedback, shared kind words, and the people credited above.

Thank you.