Catppuccin for Youtube Music

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

Youtube Music Desktop App (th-ch)

1. Download a CSS file with your desired flavor from src e.g. mocha.css (NOT youtubemusic.user.css).
2. Open the app, click Options > Visual Tweaks > Theme > Import custom CSS file, and choose the downloaded CSS file.

Youtube Music Desktop App (ytmdesktop)

1. Download a CSS file with your desired flavor from src e.g. mocha.css (NOT youtubemusic.user.css).
2. Navigate to Settings > Appearance and enable Custom CSS
3. In Custom CSS file path, choose the CSS file you created.

Changing the accent

/* find the --ctp-accent variable in the file and change it to your desired color in hex -
   or use one of the predefined colors with var(--ctp-'color') - e.g. --ctp-accent: var(--ctp-maroon) !important; */
html:not(.style-scope) {
/*...*/
    --ctp-accent: #f5e0dc !important; /* example */
/*...*/
}

Stylus

1. Install Stylus extension for Firefox, Chrome or Opera
2. Then install with Stylus (click on the link):

• 🎧 Catppuccin for Youtube Music

3. Choose your flavor and accent color in the Configure window in Stylus Options

Overriding Colors

If you wish to change the default colors to something different, like an OLEDpuccin variant, replace them in the CSS file within html:not(.style-scope):

html:not(.style-scope) {
/*...*/
    --ctp-base: #020202 !important;
    --ctp-crust: #010101 !important;
    --ctp-mantle: #000 !important;
/*...*/
}
/* OLEDpuccin */

All of the colors available for change are in the beginning of the CSS file.

💝 Thanks to

Current maintainer

• kerichdev

Contributions

• Anubis
• OceanicSquirrel
• Sofiedotcafe

Previous maintainer

• rubyowo

 

Copyright © 2021-present Catppuccin Org