🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

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.

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.

/* 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 */
/*...*/
}

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

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.

• kerichdev

• Anubis
• OceanicSquirrel
• Sofiedotcafe

• rubyowo

Copyright © 2021-present Catppuccin Org