Membuat Tampilan Aplikasi GTK dan QT Seragam di GNOME 45

Hal yang selalu saya lakukan saat baru menginstall sebuah distro Linux adalah membuat tampilan aplikasi-aplikasi yang saya gunakan menjadi seragam. Bagaimana tidak, saat ini di Linux terdapat berbagai macam UI Toolkit yang biasa digunakan dalam pembuatan sebuah aplikasi. Dua toolkit yang paling populer dan sering digunakan adalah GTK dan QT.

Jika kita menggunakan Desktop Environment KDE Plasma, hampir semua aplikasi dalam ekosistemnya akan menggunakan QT sebagai UI Toolkit-nya. Sedangkan bagi pengguna Desktop Environment GNOME, kita akan disuguhkan berbagai macam aplikasi yang dibuat dengan menggunakan Toolkit GTK dan widget library barunya, Libadwaita.

Jika kita menggunakan aplikasi yang menggunakan QT di GNOME, aplikasi itu akan menimbulkan “rasa” yang berbeda. Contohnya, sebagian besar pengguna GNOME akan memasang VLC sebagai pemutar medianya. VLC sendiri sampai saat ini dibuat menggunakan QT5 Sebagai UI Toolkit-nya.

Oleh karena itu, saya akan membahas bagaimana cara membuat tampilan aplikasi-aplikasi yang sering kita gunakan menjadi seragam. Karena menggunakan GNOME 45, kita akan menjadikan style Adwaita di GTK 4 sebagai standarnya. Disini saya menggunakan Arch Linux sebagai distronya. Jika anda menggunakan distro lain, seharusnya anda juga akan dapat dengan mudah mengikuti tutorial ini.

Mengubah Tampilan Aplikasi GTK 3

GTK 4 menghadirkan perubahan yang cukup mencolok pada tampilan widget-widgetnya. Belum lagi hadirnya libadwaita yang membuat aplikasi-aplikasi keluarga GNOME menjadi lebih kompleks (lebih susah untuk diatur tampilannya, khususnya bagi pengguna KDE Plasma).

Disini saya tidak akan membahas hal itu, kita akan berfokus pada tampilan aplikasi GTK 3 yang saat ini terlihat berbeda dengan aplikasi GTK 4 di GNOME 45.

Untungnya, ada yang sudah membuat CSS untuk GTK 3 agar tampilannya mirip dengan Adwaita di GTK 4:

GitHub - lassekongo83/adw-gtk3: The theme from libadwaita ported to GTK-3

The theme from libadwaita ported to GTK-3. Contribute to lassekongo83/adw-gtk3 development by creating an account on GitHub.

github.com

Langkah pertama yang harus kita lakukan adalah memasang aplikasi GNOME Tweaks untuk membantu kita dalam mengatur tampilan aplikasi GTK 3. Nama package-nya hampir sama di semua distro, yaitu gnome-tweaks.

sudo pacman -Syu gnome-tweaks

Selanjutnya, kita harus mendapatkan tema dari adw-gtk3. Bagi pengguna Arch Linux tidak perlu bersusah-susah, bisa langsung menggunakan package AUR yang sudah tersedia:

Anda bisa menggunakan bantuan yay ataupun paru (biasanya pengguna Manjaro akan menggunakan ini) sehingga tema ini juga akan terupdate secara otomatis ketika mengupdate package lain.

yay -Syu adw-gtk3

Bagi anda yang tidak menggunakan distro keluarga Arch Linux, silahkan unduh tarball adw-gtk3 dari halaman rilisnya. Lalu ekstrak archive tar tersebut ke ~/.local/share/themes/ atau ke /usr/share/themes jika anda ingin membuat tema ini tersedia untuk semua pengguna.

Selanjutnya, silahkan atur tema GTK 3 di GNOME Tweaks (Appearance -> Legacy Applications) menjadi Adw-gtk3 atau Adw-gtk3-dark untuk tema dengan mode gelap.

Aplikasi-aplikasi yang masih menggunakan GTK 3 kini akan memiliki tampilan yang sama dengan aplikasi-aplikasi libadwaita di GTK 4.

Mengubah Tampilan Aplikasi QT5 dan QT6

Selanjutnya, kita akan mengubah tampilan aplikasi-aplikasi yang menggunakan QT5 dan QT6 sebagai library-nya. Aplikasi seperti VLC, qBittorrent, dan VirtualBox akan terpengaruh setelah kita mengatur tema ini.

Kita akan menggunakan tema KvLibadwaita untuk membuat aplikasi-aplikasi QT kita menjadi mirip dengan GTK.

GitHub - GabePoel/KvLibadwaita: Libadwaita style theme for Kvantum. Based on Colloid-kde.

Libadwaita style theme for Kvantum. Based on Colloid-kde. - GabePoel/KvLibadwaita

github.com

Untuk menggunakan tema ini, kita memerlukan Kvantum Engine. Silahkan install Kvantum di perangkat anda:

sudo pacman -Syu kvantum

Saat artikel ini ditulis, di Arch Linux kita juga memerlukan package qt6-svg agar Kvantum dapat berfungsi di QT6:

sudo pacman -Syu qt6-svg

Perlu diketahui, untuk saat ini Kvantum dengan dukungan qt6 hanya tersedia di package manager beberapa distro saja, salah satunya di Arch Linux. Di distro lain seperti Fedora, Kvantum belum di-compile untuk dukungan QT6. Anda harus meng-compile Kvantum secara manual di distro-distro tersebut jika ingin memberikan dukungan untuk QT6.

Selanjutnya, kita akan memerlukan tema Kvantum yang sudah saya sebutkan sebelumnya. Jika anda menggunakan Arch Linux, terdapat package AUR yang sudah siap digunakan.

yay -Syu kvantum-theme-libadwaita-git

Jika anda tidak menggunakan distro Arch Linux, silahkan pasang manual tema Kvantum tersebut. Kunjungi repository KvLibadwaita di GitHub, download tarball atau clone repository tersebut. Salin folder src/KvLibadwaita ke folder ~/.config/Kvantum.

Buka aplikasi Kvantum Manager untuk mengatur tema yang baru saja kita pasang. Ubah tema menjadi KvLibadwaita atau KvLibadwaitaDark untuk tema mode gelap.

Jika anda tidak dapat menemukan tema KvLibadwaita, pastikan anda sudah memasang tema dengan benar. Jika anda memasang secara manual, pastikan anda menyalin folder KvLibadwaita ke dalam folder ~/.config/Kvantum.

Selanjutnya, sesuai rekomendasi di dokumentasi Kvantum, kita akan menggunakan style manager untuk mengatur tema qt, disini saya menggunakan qt5ct dan qt6ct.

sudo pacman -Syu qt5ct qt6ct

Agar aplikasi QT dapat menggunakan tema yang sudah diatur oleh qt5ct/qt6ct, kita perlu menambah environment variable di perangkat kita. Yang perlu ditambahkan adalah:

QT_QPA_PLATFORMTHEME=qt5ct

Anda dapat menambahkannya ke file /etc/environment agar pengaturan ini berlaku untuk semua pengguna. Bisa juga diatur di file ~/.bashrc, config.fish atau yang lain sesuai shell yang anda gunakan. Saya akan mengubah environment di /etc/environment menggunakan nano:

sudo nano /etc/environment

Jika anda mengubah file /etc/environment, environment baru di file tersebut tidak akan langsung terbaca, anda perlu me-reboot (restart) device anda.

Setelah restart, silahkan buka aplikasi QT5 Settings untuk mengubah style aplikasi QT5 menjadi Kvantum atau Kvantum-Dark. Ubah juga Standard dialogs menjadi XDG Desktop Portal agar aplikasi-aplikasi QT dapat menggunakan File Picker bawaan GNOME ketika membuka atau menyimpan berkas.

Lakukan hal yang sama untuk aplikasi QT6 dengan mengubahnya di aplikasi QT6 Settings.

Setelah selesai, Aplikasi-aplikasi QT akan memiliki tampilan mirip dengan libadwaita di GTK4.

Memperbaiki Window Decoration di Wayland

Jika anda menggunakan Wayland, anda kemungkinan besar akan menemukan Window Decoration (Title Bar) pada aplikasi QT tidak akan sama seperti aplikasi GTK.

Untuk mengubah CSD (Client Side Decoration) tersebut agar sama dengan aplikasi-aplikasi GTK lain, Kita akan memerlukan package QAdwaitaDecorations.

GitHub - FedoraQt/QAdwaitaDecorations: Qt decoration plugin implementing Adwaita-like client-side decorations

Qt decoration plugin implementing Adwaita-like client-side decorations - GitHub - FedoraQt/QAdwaitaDecorations: Qt decoration plugin implementing Adwaita-like client-side decorations

github.com

Bagi pengguna Arch, silahkan pasang package qadwaitadecorations-qt5 dan qadwaitadecorations-qt6 dari AUR.

yay -Syu qadwaitadecorations-qt5 qadwaitadecorations-qt6

Jika package QAdwaitaDecorations tidak tersedia di package manager anda, silahkan compile manual sesuai instruksi di repository GitHub tersebut.

Agar CSD tersebut dapat berfungsi, kita perlu mengatur environment variable:

QT_WAYLAND_DECORATION=adwaita

Anda dapat mengatur environment variable seperti instruksi sebelumnya. Jangan lupa, jika anda menambahkannya di /etc/environment anda perlu restart device untuk me-reload file environment tersebut.

Jika berhasil, seluruh aplikasi QT di Wayland akan memiliki title bar yang sama dengan GTK.

Setelah semua proses kita lakukan, kita akan mendapati aplikasi GTK 3, GTK 4, QT5, dan QT6 akan memiliki tampilan yang seragam seperti screenshot dibawah ini:

Terima kasih sudah membaca artikel ini, semoga bermanfaat!