Cara Memodifikasi Properti Gaya Tema Shell GNOME

Tema GNOME Shell (GS) sangat bergantung pada CSS untuk menata berbagai elemen shell. File CSS tipikal yang disertakan dalam tema GS dapat memiliki ribuan properti. Artikel ini akan membahas beberapa konsep yang dapat Anda gunakan untuk mengubah tema GS yang ada dengan membuat tema baru yang mewarisi nilai dari tema aslinya. Jika Anda sedikit familiar dengan cara kerja CSS, Anda dapat membuat contoh yang disebutkan di bawah ini untuk mengubah hampir semua aspek tema GS.

Mengaktifkan Tema Shell GNOME Kustom

Ubuntu, bersama dengan banyak distribusi berbasis GNOME lainnya, tidak mengizinkan tema kustom buatan pengguna secara default. Untuk memuat tema pengguna, ekstensi GS dan utilitas tweak tersembunyi perlu diinstal. Anda dapat menginstal ekstensi yang diperlukan dan alat tweak GNOME di Ubuntu dengan menjalankan perintah berikut:

$ sudo apt install gnome-shell-extensions gnome-tweaks

Luncurkan aplikasi "Tweaks" dari peluncur aplikasi dan buka tab "Ekstensi" di bilah sisi. Aktifkan ekstensi "Tema Pengguna", seperti yang ditunjukkan pada tangkapan layar di bawah ini. Pastikan sakelar "Ekstensi" diaktifkan di bagian atas.

Setelah Anda selesai dengan langkah ini, tutup dan luncurkan kembali aplikasi Tweaks. Sekarang, Anda dapat mengubah tema GS dari tab "Penampilan".

Membuat File yang Diperlukan untuk Kustomisasi Tema

Untuk menyesuaikan tema yang ada, Anda perlu membuat tema GS baru yang dibangun di atas tema asli. Dengan cara ini, Anda hanya dapat mengubah bagian tema yang dipilih, tanpa mengubah seluruh tema. Setiap bagian yang tidak tersentuh dari tema asli akan disimpan apa adanya. Menjalankan perintah di bawah ini akan membuat tema kustom baru bernama "mytheme" di direktori $HOME Anda.

$ mkdir -p ~/.theme/mytheme/gnome-shell/
$ sentuh ~/.theme/mytheme/gnome-shell/gnome-shell.css

Anda dapat menggunakan editor teks apa pun untuk memasukkan penyesuaian Anda sendiri di “gnome-shell.css" file yang dibuat dengan menjalankan perintah di atas. Setelah Anda memasukkan kode yang diperlukan, Anda dapat memilih tema "Mytheme" di menu tarik-turun di aplikasi Tweaks, seperti yang dijelaskan di bagian pertama artikel ini. Perhatikan bahwa Anda harus keluar dan masuk kembali agar perubahan diterapkan. Atau, Anda juga dapat menekan dan masukkan "r" di kotak input popup untuk memuat ulang shell GNOME.

Menemukan File CSS Dasar

Jika Anda ingin menggunakan file CSS asli sebagai referensi, Anda harus mencari dan mengekstraknya terlebih dahulu. Tema pihak ketiga dapat secara langsung menyertakan "gnome-shell".css”, membuatnya mudah digunakan sebagai dasar untuk kustomisasi CSS. Namun, file sistem default mungkin menyertakan "gnome-shell-theme".gresource” sebagai gantinya. Anda dapat menemukan tema GS sistem default yang terletak di jalur "/usr/share/gnome-Shell/theme". Di dalam direktori ini, Anda akan menemukan file gresource di bawah folder lain yang sama dengan nama tema sistem default. Di Ubuntu versi terbaru, Anda akan menemukan file gresource di jalur “/usr/share/gnome-Shell/theme/Yaru”. Salin file gresource ke folder lain dan jalankan perintah berikut:

$ daftar gresource gnome-shell-theme.sumber daya

Setelah memasukkan perintah di atas, Anda akan menerima output berikut:

/org/gnome/shell/theme/Yaru-dark/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru-dark/gnome-shell.css
/org/gnome/shell/theme/Yaru/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru/gnome-shell.css
…
…
…

Baris keempat pada output di atas memberikan jalur yang benar ke file CSS. Untuk mengekstraknya, jalankan perintah dalam format berikut:

$ gresource ekstrak gnome-shell-theme.gresource /org/gnome/shell/theme/Yaru/gnome-shell.css
> keluaran.css

Anda sekarang dapat merujuk ke "keluaran".css” yang diperoleh di atas dan menggunakannya sebagai dasar untuk penyesuaian. Beberapa contoh kustomisasi CSS disebutkan di bawah ini. Contoh-contoh ini tidak mencakup semua kasus penggunaan tetapi akan memberi Anda ide dasar tentang cara melanjutkan. Perhatikan bahwa tidak ada penjelasan yang akan diberikan untuk aturan CSS yang disebutkan di bawah ini, karena aturan tersebut berada di luar cakupan artikel ini. Anda dapat merujuk ke dokumentasi referensi CSS dari W3Schools atau Mozilla untuk informasi lebih lanjut.

Mengubah Properti Font dari Tema Sistem

Kode berikut akan mengubah properti font dari tema sistem default. Gaya font akan diubah menjadi Noto Sans dan ukuran font akan diubah menjadi 12 pt.

panggung
font-family: Noto Sans, sans-serif;
ukuran font: 12pt;

Jika Anda menggunakan tema GS pihak ketiga, Anda mungkin perlu mengimpor file CSS-nya terlebih dahulu dengan menentukan path lengkapnya, seperti yang ditunjukkan pada contoh di bawah ini:

@import url("jalur/ke/tema.css");
panggung
font-family: Noto Sans, sans-serif;
ukuran font: 12pt;

Jika file CSS tidak tersedia untuk diimpor, Anda dapat mengekstraknya dari file gresource, seperti yang dijelaskan di atas.

Mengubah Warna Latar Belakang Panel

Untuk mengubah warna latar belakang panel menjadi merah, gunakan kode berikut:

#panel
warna latar: merah;

Mengubah Lebar Sakelar Toggle

Gunakan kode di bawah ini untuk mengubah lebar tombol sakelar:

.sakelar-sakelar
lebar: 100 piksel;

Kesimpulan

Dengan beberapa pengetahuan tentang aturan dan properti CSS, Anda dapat dengan mudah menyesuaikan hampir semua aspek tema GS. Namun, penting untuk menemukan file CSS dasar yang benar untuk menggunakannya sebagai referensi dan menghindari banyak dugaan.