Hur man ändrar stilegenskaper för GNOME-skalteman

GNOME-skal (GS) -teman beror starkt på CSS för att utforma olika delar av skalet. En typisk CSS-fil som ingår i ett GS-tema kan ha tusentals egenskaper. Den här artikeln kommer att täcka några begrepp som du kan använda för att finjustera befintliga GS-teman genom att skapa ett nytt tema som ärver värden från de ursprungliga teman. Om du är lite bekant med hur CSS fungerar kan du bygga på exemplen som nämns nedan för att ändra nästan alla aspekter av ett GS-tema.

Aktivera anpassade GNOME-skalteman

Ubuntu, tillsammans med många andra GNOME-baserade distributioner, tillåter inte som standard användardefinierade teman. För att ladda användarteman måste ett GS-tillägg och ett dolt tweaks-verktyg installeras. Du kan installera det nödvändiga tillägget och GNOME-tweak-verktyget i Ubuntu genom att köra följande kommando:

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

Starta appen "Tweaks" från applikationsstartaren och gå till fliken "Extensions" i sidofältet. Aktivera tillägget "Användarteman", som visas på skärmdumpen nedan. Se till att växeln "Extensions" är aktiverad högst upp.

När du är klar med det här steget, stäng och starta om Tweaks-appen. Nu kommer du att kunna ändra GS-temat från fliken "Utseende".

Skapa nödvändiga filer för temananpassning

För att anpassa ett befintligt tema måste du skapa ett nytt GS-tema som bygger på det ursprungliga temat. På detta sätt kan du bara ändra valda delar av temat utan att ändra hela temat. Varje orörd del av det ursprungliga temat behålls som det är. Genom att köra kommandona nedan skapas ett nytt anpassat tema med namnet “mytheme” i din $ HOME-katalog.

$ mkdir -p ~ /.teman / myteme / gnome-shell /
$ touch ~ /.teman / myteme / gnome-shell / gnome-shell.css

Du kan använda vilken textredigerare som helst för att ange dina egna anpassningar i “gnome-shell.css ”-fil skapad genom att köra kommandot ovan. När du har angett önskad kod kan du välja temat "Mytheme" i rullgardinsmenyn i Tweaks-appen, som förklaras i första avsnittet i den här artikeln. Observera att du måste logga ut och logga in igen för att ändringarna ska träda i kraft. Alternativt kan du också trycka på och mata in “r” i popup-inmatningsrutan för att ladda om GNOME-skalet.

Hitta basfil CSS

Om du vill använda den ursprungliga CSS-filen som referens måste du hitta och extrahera den först. Tredjeparts teman kan direkt innehålla ett ”gnome-shell.css ”-fil, vilket gör det enkelt att använda som bas för CSS-anpassning. Standardsystemfiler kan dock innehålla “gnome-shell-theme.gresource ”-filer istället. Du hittar standard GS-temat för systemet som finns i sökvägen "/ usr / share / gnome-shell / theme". Inne i den här katalogen hittar du gresource-filen under en annan mapp med samma namn som standardsystemtema. I den senaste versionen av Ubuntu hittar du gresource-filen i sökvägen "/ usr / share / gnome-shell / theme / Yaru". Kopiera gresource-filen till en annan mapp och kör följande kommando:

$ gresource list gnome-shell-theme.gresource

När du har angett kommandot ovan får du följande utdata:

/ 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
..
..
..

Den fjärde raden i utgången ovan ger rätt sökväg till CSS-filen. För att extrahera det, kör ett kommando i följande format:

$ gresource extract gnome-shell-theme.gresource / org / gnome / shell / theme / Yaru / gnome-shell.css
> utdata.css

Du kan nu hänvisa till “output.css ”-fil som erhållits ovan och använder den som bas för anpassning. Några exempel på CSS-anpassning nämns nedan. Dessa exempel täcker inte alla användningsfall men ger dig en grundläggande idé för hur du ska gå vidare. Observera att ingen förklaring kommer att ges för CSS-reglerna som nämns nedan, eftersom de ligger utanför tillämpningsområdet för denna artikel. Du kan hänvisa till CSS-referensdokumentationen från W3Schools eller Mozilla för mer information.

Ändra teckensnittsegenskaper för systemtema

Följande kod ändrar teckensnittsegenskaperna för standardsystemtemat. Teckensnittsstilen ändras till Noto Sans och teckensnittsstorleken ändras till 12 punkter.

skede
font-family: Noto Sans, sans-serif;
font-storlek: 12pt;

Om du använder ett GS-tema från tredje part kan du behöva importera dess CSS-fil först genom att ange hela sökvägen, som visas i exemplet nedan:

@import url ("sökväg / till / tema.css ");
skede
font-family: Noto Sans, sans-serif;
font-storlek: 12pt;

Om en CSS-fil inte är tillgänglig för import kan du extrahera den från gresource-filen, som förklarats ovan.

Ändra panelens bakgrundsfärg

För att ändra panelens bakgrundsfärg till röd, använd följande kod:

#panel
bakgrundsfärg: röd;

Ändra vippbrytarens bredd

Använd koden nedan för att ändra bredden på växlingsknapparna:

.brytare
bredd: 100px;

Slutsats

Med viss kunskap om CSS-regler och egenskaper kan du enkelt anpassa nästan alla aspekter av ett GS-tema. Det är dock viktigt att hitta rätt bas CSS-fil för att använda den som referens och undvika mycket gissningar.