https://github.com/catppuccin/youtubemusic
🎧 Soothing pastel theme for YouTube Music
https://github.com/catppuccin/youtubemusic
catppuccin dark-theme hacktoberfest userscript
Last synced: 4 months ago
JSON representation
🎧 Soothing pastel theme for YouTube Music
- Host: GitHub
- URL: https://github.com/catppuccin/youtubemusic
- Owner: catppuccin
- License: mit
- Created: 2022-10-23T12:12:07.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-28T13:17:15.000Z (5 months ago)
- Last Synced: 2025-06-28T14:24:15.825Z (5 months ago)
- Topics: catppuccin, dark-theme, hacktoberfest, userscript
- Language: CSS
- Homepage:
- Size: 5.86 MB
- Stars: 136
- Watchers: 2
- Forks: 14
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Catppuccin for Youtube Music
## Previews
🌻 Latte
🪴 Frappé
🌺 Macchiato
🌿 Mocha
## Usage
### [Youtube Music Desktop App (th-ch)](https://github.com/th-ch/youtube-music)
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)](https://github.com/ytmdesktop/ytmdesktop)
1. Create a new css file with one of the flavour imports below.
2. Navigate to Settings > Appearance and enable Custom CSS
3. In Custom CSS file path, choose the CSS file you created.
### The code (flavor imports)
```css
/* 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](https://github.com/openstyles/stylus)
1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
2. Then install with Stylus (click on the link):
- [🎧 Catppuccin for Youtube Music](https://github.com/catppuccin/youtubemusic/raw/main/src/youtubemusic.user.css)
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)](https://github.com/th-ch/youtube-music)
Change the respective colors in the css file you chose to the values you need, for example:
```css
--ctp-base: #020202;
--ctp-crust: #010101;
--ctp-mantle: #000;
/* OLEDpuccin*/
```
#### For [Youtube Music Desktop App (ytmdesktop)](https://github.com/ytmdesktop/ytmdesktop) or Stylus
Paste the modified colors at the end of your theme of choice (ytmdesktop), or within `html:not(.style-scope)` (Stylus):
```css
--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](https://github.com/kerichdev)
### Contributions
- [Anubis](https://github.com/anubisnekhet)
- [OceanicSquirrel](https://github.com/OceanicSquirrel)
- [Sofiedotcafe](https://github.com/sofiedotcafe)
### Previous maintainer
- [rubyowo](https://github.com/rubyowo)
Copyright © 2021-present Catppuccin Org
