Sistemi Operativi

Mint 20: creare un nuovo tema per Xed

Uso da poco Mint 20 e per manutenere questo mio sito uso Editor di testo (Xed) come editor HTML, ma i temi proposti (menù Modifica->Preferenze->Tema) per la colorazione del codice, non mi piacciono molto, ed è per questo che mi sono chiesto come fare per crearne uno personale che si adattasse alle mie esigenze.

Icona Xed

Ho pensato che potevo aprire un file contenente un tema specifico e poi modificarlo opportunamente per avere i colori che più si adattano ai miei gusti estetici

Al momento della stesura di questo articolo, (Agosto 2022), per questo editor di testo è previsto l'uso di GTK 4 e i file dei temi proposti da Xed sono contenuti nella cartella /usr/share/gtksourceview-4/styles. Li ho aperti tutti, uno alla volta cercando di capire quali fossero le voci per cambiare i colori del codice HTML, e un pò alla volta sono riuscito ad isolare quelli utili a creare un nuovo tema.

ATTENZIONE: nelle prime righe vi sono alcune variabili, "id", "_name", "author" e "_description", che devono essere modificate ogni volta che si crea un nuovo stile. In particolare, "id" e "_name" devono corrispondere al nome del file .xml del tema.

In pratica per creare un nuovo stile grafico in Xed, per i nostri file HTML, CSS o XML, è sufficiente copiare il codice sottostante in un file di testo vuoto e assegnargli il nome che vogliamo abbia il nuovo tema (esempio: arcobaleno.xml); quindi impostiamo id=arcobaleno e _name=arcobaleno, poi passiamo ad aggiornare il nome dell'autore e modifichiamo la descrizione in modo da illustrare quale sarà l'apetto grafico finale.

Personalmente mi sono creato una cartella TEMI nella home, nella quale ho inserito quelli creati da me. Per caricarli nell'editor basta andare in (menù Modifica->Preferenze->Tema)), premere sul tasto "+" e selezionare un tema fra quelli creati da noi stessi.

<?xml version="1.0" encoding="UTF-8"?>

	<style-scheme id="montagna" _name="montagna" version="1.0">
	<author>Gandalfrank</author>
	<_description>Tema con i colori della montagna</_description>

	<!-- Elenco Colori -->
	<color name="quasi_nero"               value="#141414"/>
	<color name="cielo_nuvoloso"           value="#607391"/>
	<color name="quasi_bianco"             value="#f7f7f7"/>
	<color name="giallo_pesca"             value="#fdcc02"/>
	<color name="arancio_marrone"          value="#ca7841"/>
	<color name="giallo_chiaro"            value="#f9ee98"/>
	<color name="avana_scuro"              value="#d6bb6d"/>
	<color name="verde_oliva"              value="#709067"/>
	<color name="grigio_piombo"            value="#777777"/>
	<color name="grigio_scuro"             value="#303030"/>


	<!-- Sfondo della linea attualmente selezionata -->
	<style name="current-line"             background="grigio_scuro"/>


	<!-- Sfondo del numero di linea attualmente selezionata -->
	<style name="current-line-number"      background="grigio_scuro"/>


	<!-- Colori dei numeri linea -->
	<style name="line-numbers"             foreground="quasi_bianco" background="arancio_marrone"/>


	<!-- Testo selezionato -->
	<style name="selection"                foreground="quasi_nero" background="quasi_bianco"/>


	<!-- Parentesi accoppiate -->
	<style name="bracket-match"            foreground="giallo_pesca" background="arancio_marrone"/>


	<!-- Termine trovato in seguito ad una ricerca -->
	<style name="search-match"             foreground="quasi_nero" background="giallo_pesca"/>


	<!-- Colore di primo piano dei commenti HTML  -->
	<style name="def:comment"              foreground="grigio_piombo"/>


	<!-- Colore di primo piano del cursore -->
	<style name="cursor"                   foreground="quasi_bianco"/>


	<!-- Colore di primo piano degli attributi in HTML (class, name, href, type, src, alt...) -->
	<style name="def:type"                 foreground="avana_scuro"/>


	<!-- Colore di primo piano del valore degli attributi in HTML (testo fra virgolette) -->
	<style name="def:string"               foreground="verde_oliva"/>


	<!-- Colore di primo piano dei tag HTML -->
	<style name="def:identifier"           foreground="cielo_nuvoloso"/>


	<!-- Colore di primo piano delle proprietà dei CSS -->
	<style name="def:statement"            foreground="arancio_marrone"/>


	<!-- Colori testo da visualizzare nel sito e i nomi dei font nei CSS  -->
	<style name="text"                     foreground="quasi_bianco" background="quasi_nero"/>


	<!-- Colore delle costanti numeriche in HTML e valore delle proprietà nei CSS  -->
	<style name="def:constant"             foreground="giallo_chiaro"/>


</style-scheme>