Catppuccin for Youtube Music
- Create a new css file with one of the flavour imports below.
- 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.
- Create a new css file with one of the flavour imports below.
- Navigate to Settings > Appearance and enable Custom CSS
- In Custom CSS file path, choose the CSS file you created.
/* 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;
}
- Choose your flavor and accent color in the Configure window in Stylus Options
If you wish to change the default colors, do the following:
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.
Β
Copyright Β© 2021-present Catppuccin Org