Catppuccin for Youtube Music

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

Youtube Music Desktop App (th-ch)

1. Create a new css file with one of the flavour imports below.
2. Assuming you have the latest build with the theme selection menu, open the app, click Options > Visual Tweaks > Theme > Import custom CSS file, and choose the CSS file.

Youtube Music Desktop App (ytmdesktop)

1. Navigate to the settings of the Youtube Music Desktop App.
2. Go to the appearances tab and turn on custom theme.
3. Click on the pencil icon to open up the editor window.
4. Copy and paste in the flavour's css file contents for your flavour and press the save button.

The code

/* latte */
@import url("https://youtubemusic.catppuccin.com/src/latte.css");
/* frappe */
@import url("https://youtubemusic.catppuccin.com/src/frappe.css");
/* macchiato */
@import url("https://youtubemusic.catppuccin.com/src/macchiato.css");
/* mocha */
@import url("https://youtubemusic.catppuccin.com/src/mocha.css");

/* if you want to change the accent color, paste this in aswell and change the hex code - or use one of the predefined colors with var(--ctp-'color') - e.g. var(--ctp-maroon) */
html:not(.style-scope) {
    --ctp-accent: #f5e0dc !important;
}

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, do the following:

For Youtube Music Desktop App (th-ch)

Change the respective colors in the css file you chose to the values you need, for example:

    --ctp-base: #020202;
    --ctp-crust: #010101;
    --ctp-mantle: #000;
/* OLEDpuccin*/

For Youtube Music Desktop App (ytmdesktop) or Stylus

Paste the modified colors at the end of your theme of choice (ytmdesktop), or within html:not(.style-scope) (Stylus):

    --ctp-base: #020202; !important;
    --ctp-crust: #010101; !important;
    --ctp-mantle: #000; !important;
/* OLEDpuccin */

You can find the references to the available colors you can change in the beginning of any theme CSS file.

💝 Thanks to

Current maintainer

• kerichdev

Contributions

• Anubis
• OceanicSquirrel

Previous maintainer

• rubyowo

 

Copyright © 2021-present Catppuccin Org