Mengubah Tampilan dan Tema Spotify Desktop dengan Spicetify

Spotify adalah layanan streaming yang menyediakan akses ke berbagai konten digital seperti musik dan podcast dari hampir seluruh dunia. Layanan tersebut dapat diakses di berbagai platform seperti web, Android, iOS, smart TV, dan desktop/PC.

Saat ini, Spotify secara resmi hanya menggunakan tema gelap (dark theme) untuk user interface-nya. Aplikasinya tidak menyediakan pengaturan kustomisasi UI yang fleksibel, atau bahkan untuk sekadar mengubahnya menjadi tema cerah (light theme). Saya pikir, kalau untuk aplikasi mobile seharusnya minimal memiliki kemampuan untuk mengatur mode UI-nya menjadi light atau dark. Untuk aplikasi desktop, selain yang telah disebutkan, juga setidaknya dapat diatur warna elemennya.

Jujur saja, menurut pengalaman pribadi, saya menjadi bosan melihat tampilan Spotify yang begitu-begitu terus. Waktu itu yang terbesit di pikiran saya adalah “hmmm pengen deh Spotify desktop ini jadi light theme tapi gimana ya caranya?”—berhubung mode user interface Windows di laptop saya sudah saya ubah juga menjadi light theme, jadi supaya cocok lah.

Akhirnya, setelah melakukan riset (baca: googling) ketemulah dengan yang namanya Spicetify.

Memperkenalkan: Spicetify

Logo Spicetify.

Aplikasi yang dikembangkan oleh khanhas ini merupakan tools command-line yang dibuat untuk melakukan kustomisasi pada aplikasi Spotify desktop. Spicetify mendukung kustomisasi player tersebut di sistem operasi Windows, macOS, dan Linux.

Dikutip dari halaman resminya di GitHub, fitur yang dimiliki aplikasi ini adalah sebagai berikut:

Change colors whole UI
Inject CSS for advanced customization
Inject Extensions (Javascript script) to extend functionalities, manipulate UI and control player.
Inject Custom apps
Enable additional, hidden features
Remove bloated components to improve performance
https://github.com/khanhas/spicetify-cli

Kamu mau langsung mencobanya? Yuk, mari~

Catatan: Tulisan ini hanya menjelaskan secara mendetil untuk sistem operasi Windows. Jika kamu ingin melakukannya untuk sistem operasi lainnya, silakan baca di https://github.com/khanhas/spicetify-cli/wiki/Installation.

Persiapan

Supaya kamu bisa menikmati kustomisasi Spicetify, kamu harus mempersiapkan hal berikut ini:

Spotify desktop. Ya iya lah…
Oh iya, kata pembuat aplikasi Spicetify, disarankan aplikasi Spotify yang terinstal adalah versi installer .exe ya, bukan hasil download dari Microsoft Store.
Terhubung ke internet

Instalasi

Instalasi yang dilakukan cukup mudah. Jalankan Windows PowerShell, lalu jalankan command berikut:

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/khanhas/spicetify-cli/master/install.ps1" | Invoke-Expression

Pastikan tidak ada error yang muncul. Jika kamu mengalami masalah download, cobalah jalankan command ini:

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/khanhas/spicetify-cli/master/install_curl.ps1" | Invoke-Expression

Cara kustomisasi

Generate file config dengan menjalankan command berikut. Pastikan tidak ada pesan error yang muncul sebelum lanjut ke command berikutnya.

spicetify

Lakukan backup, sekaligus apply kustomisasi dan enable DevTool:

spicetify backup apply enable-devtool

Lakukan kustomisasi dengan mengubah value warna atau elemen lainnya pada file color.ini dan style CSS pada file user.css.

Catatan: Untuk tema SpicetifyDefault (yang terpasang saat kali pertama instalasi Spicetify), lokasi file kustomisasi tersebut berada di %USERPROFILE%\spicetify-cli\Themes\SpicetifyDefault\.

Setiap kali kamu selesai mengkustomisasi, lakukan update dengan command berikut, lalu jalankan ulang Spotify atau tekan Ctrl Shift R pada Spotify yang berjalan.

spicetify update

Contoh kustomisasi

Sebagai contoh, saya ingin menyembunyikan kolom Date Added pada tampilan playlist lagu.

Tampilan playlist lagu Spotify yang memiliki kolom Date Added di sebelah kanan. — Tampilan playlist lagu Spotify yang memiliki kolom *Date Added* di sebelah kanan.

Pertama, gunakan DevTool untuk mencari elemen mana yang harus dipoles dengan CSS. Caranya, klik kanan pada elemen yang dituju, kemudian pilih Inspect Element (ya, sama seperti yang sering kamu lakukan di browser berbasis Chromium!)

Meng-inspect salah satu elemen pada Spotify desktop.

Selanjutnya, cobalah ubah styling pada kode CSS secara langsung di DevTool untuk melihat apakah kode yang kamu masukkan benar mengubah styling pada elemen yang dituju.

Menyembunyikan icon Date Added pada header tabel playlist. — Menyembunyikan icon *Date Added* pada header tabel playlist.

Menyembunyikan kolom informasi Date Added pada body tabel playlist. — Menyembunyikan kolom informasi *Date Added* pada body tabel playlist.

Jika hasilnya sudah sesuai dengan yang kamu inginkan, masukkan kode CSS tersebut ke file user.css.

/* Hide "date added" from playlist view */
.tl-header .tl-date-added, .tl-header .tl-time-sent {
  display: none;
}
.tl-date-added {
  display: none;
}

Jalankan update Spicetify, lalu refresh Spotify.

Dan inilah hasilnya…

Hasil modifikasi tampilan playlist Spotify yang diterapkan oleh Spicetify setelah menghapus kolom Date Added. — Hasil modifikasi tampilan playlist Spotify yang diterapkan oleh Spicetify setelah menghapus kolom *Date Added*.

Download tema kreasi user

Kalau kamu gak pengen ribet, kamu bisa download theme hasil buatan orang lain yang keren-keren lho! Berikut contoh tema yang menurut saya paling keren di antara yang lainnya:

Ini bukanlah akhir dari semuanya. Kamu bisa mengeksplor lebih dalam lagi untuk mempercantik tampilan Spotify desktop kamu. Sebagai contoh, saya sudah melakukan beberapa perubahan styling seperti memperbesar ukuran font judul lagu pada bagian now playing, mengubah warna background dan foreground pada bagian lyrics, dan lainnya lagi.

Sekian tulisan akan temuan saya mengenai cara mengubah tampilan dan tema Spotify desktop. Semoga bermanfaat buat kamu yang membutuhkannya!