Custom Themes

Custom Theme Guide (SCSS)

The Custom CSS theme system is ready out of the box.

By default, Custom CSS is enabled and a starter custom theme file is automatically created on first launch.

Requirements

• YTMDesktop with Custom CSS support
• A .scss or .sass file

Open Custom CSS Settings

Go to:

• Settings
• Custom CSS

Available options:

• Enable Custom CSS
• Update on Changes (optional, recommended for live updates)
• SCSS File (choose your .scss / .sass file)

Default SCSS File Location

On first launch, if no custom file exists, the app creates one automatically at:

• Windows: C:\Users\<your-user>\Documents\ytmdesktop\custom.scss
• macOS/Linux: <Documents>/ytmdesktop/custom.scss

The generated file includes a default starter theme so you can edit immediately.

Quick Start Theme Example

Replace or extend your custom.scss with this:

$playerBarBg: #101216;
$accent: #7dd3fc;
$panelBg: rgba(0, 0, 0, 0.85);

ytmusic-app {
  --ytmusic-player-bar-background: #{$playerBarBg};
  --paper-slider-active-color: #{$accent};
  --paper-slider-knob-color: #{$accent};
}

#player-bar-background.ytmusic-app-layout {
  background-color: $panelBg !important;
  backdrop-filter: blur(10px);
}

ytmusic-player-page.ytmusic-app {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
}

ytmusic-player-queue-item {
  border-radius: 8px;
  opacity: 0.85;

  &:hover:not([selected]) {
    background-color: rgba(255, 255, 255, 0.06);
    opacity: 1;
  }
}