Share
Cosa starai creandoAtom, il nuovo editor di codice rilasciato da GitHub, è uno degli aspetti emergenti delle app che consentono alle tecnologie web come LESS, JavaScript e HTML di essere eseguite in modo nativo in un ambiente desktop. Atom si installa e funziona come un'app desktop "normale", ma una volta aperta si comporta in modo che qualsiasi sviluppatore web trovi familiare.
Atom è una "variante specializzata di Chromium" e quando viene eseguita in modalità sviluppatore consente di accedere agli stessi "Strumenti per sviluppatori" a cui potresti essere abituato da Chrome. Quindi, proprio come con qualsiasi applicazione web online, puoi esaminare il codice dietro qualsiasi elemento dell'interfaccia dell'applicazione e vedere cosa lo rende ineccepibile:
Ciò che significa in termini pratici è che chiunque abbia esperienza con il web design e lo sviluppo troverà immediatamente familiarità con il modo in cui Atom funziona, e sarà probabilmente molto più comodo creare modifiche e ritocchi rispetto a programmi simili. Lo stile visivo di Atom è guidato dai CSS, generati da LESS, quindi puoi modificarne l'aspetto allo stesso modo in cui utilizzeresti qualsiasi sito web con tecnologia LESS.
Atom ha due tipi di "temi" responsabili del suo stile di presentazione:
Temi di sintassi controlla tutto nello spazio interno dell'editor, cioè la grondaia, i numeri di riga e l'area del codice.
Temi dell'interfaccia utente controlla tutto il resto, cioè schede, barra laterale, pulsanti, sovrapposizioni, messaggi ecc.
In questo tutorial imparerai come creare entrambi questi tipi di temi, producendoli in tandem in modo che l'intera interfaccia sia uniformemente ridisegnata. Cominciamo!
Al momento Atom è solo Mac, e durante la sua fase beta l'accesso avviene tramite invito. Se non hai ancora un invito, il mio suggerimento è di mandare una richiesta su Twitter o sul forum Atom e qualcuno è obbligato a inviarne una a modo tuo. Scaricalo e installalo come faresti con qualsiasi altra app.
Lo sviluppo di temi comporterà un utilizzo da riga di comando specifico di Atom, quindi la prima cosa che devi fare è installare i pacchetti che abilitano questi comandi. Dopo aver eseguito Atom per la prima volta, vai e seleziona Atom> Installa i comandi della shell, che installa il atomo e APM (gestore pacchetti atom).
Ti suggerisco inoltre di utilizzare un'app che ti consentirà di aprire un terminale da qualsiasi cartella visualizzata nel Finder, poiché renderà più semplice l'esecuzione dei comandi nella posizione corretta. Personalmente utilizzo XtraFinder gratuito per aggiungere un'opzione "Nuovo terminale qui" al mio menu di scelta rapida del Finder.
Il processo di base per la creazione di un nuovo tema per l'interfaccia utente di Atom consiste nel posizionare uno dei due temi predefiniti disponibili da GitHub, assegnargli il proprio nome e modificare i file inclusi.
Per fare questo, inizia assicurandoti di avere sia un account su GitHub, sia GitHub per Mac (a meno che tu preferisca usare la riga di comando) installato. Quindi vai al repository per il tema Atom Dark UI o Atom Light UI. In questo tutorial utilizzeremo una tavolozza di colori scuri, quindi utilizzeremo il tema predefinito scuro.
Nell'angolo in alto a destra del repository UI originale fai clic sul pulsante "Forcella":
Questo creerà un duplicato del repository sotto il tuo account, ad es. youraccount / atom-dark-ui. La prossima cosa che devi fare è dare al repository il tuo nome. Nella barra laterale destra del tuo repository biforcuto fai clic sulla voce di menu "Impostazioni".
Nella parte superiore della pagina "Impostazioni" vedrai un campo per il nome del repository. Digita un nuovo nome di tua scelta, (nel mio caso "nuance-dark-ui), in questo campo assicurandoti di conservare" -ui "alla fine, quindi fai clic su" Rinomina ":
Ora sei pronto per scaricare il tuo tema nel tuo ambiente offline in modo da poter iniziare a modificarlo. Per fare ciò, torna alla pagina principale del tuo repository quindi individua e fai clic sul pulsante "Clona nel desktop" nella barra laterale:
"GitHub per Mac"quindi scaricherà il repository per te, nella posizione predefinita di GitHub. Dal tuo elenco di repository in "GitHub per Mac", fai clic con il pulsante destro del mouse sul tema dell'interfaccia utente appena clonato e seleziona "Mostra nel Finder":
Si aprirà una finestra del Finder che mostra la cartella del tema dell'interfaccia utente all'interno della cartella GitHub. Fare doppio clic per andare nella cartella attuale e visualizzare il contenuto all'interno.
Aprire un nuovo terminale in questa posizione, quindi eseguire il comando atom --dev
Questo comando aprirà Atom in modalità sviluppatore, mostrando la struttura del file e delle cartelle del tema nella barra laterale. In questa barra laterale, fai clic sul file "package.json" per aprirlo per la modifica, quindi cambia il nome, il numero di versione e la descrizione. Di nuovo, assicurati di conservare "-ui" alla fine del nome del tema, quindi salva:
Infine, devi far sapere ad Atom come accedere alla tua cartella dei temi dalla sua cartella GitHub locale. Torna al tuo terminale, che dovrebbe essere ancora nella cartella del tuo tema ed esegui il comando collegamento APM
Ora torna ad Atom e premi cmd-alt-ctrl-L o selezionare Visualizza> Ricarica dal menu in alto per ricaricare l'interfaccia, che aggiornerà l'elenco dei temi dell'interfaccia utente disponibili, consentendo di selezionare il tuo.
Dal menu in alto, selezionare Atom> Impostazioniper aprire la pagina delle impostazioni e fare clic su "Temi" nella barra laterale sinistra del pannello. Dovresti vedere il tuo tema nell'elenco con l'etichetta "Temi interfaccia utente" quindi procedi e selezionalo:
Il tuo nuovo tema dell'interfaccia utente è ora attivo e pronto per essere modificato, tuttavia prima di procedere genereremo anche un tema di sintassi per poterli modificare contemporaneamente, tenendo d'occhio il modo in cui lavorano insieme.
La creazione di un nuovo tema di sintassi è un processo più semplice rispetto a un tema dell'interfaccia utente.
In Atom, premere cmd-shift-P per visualizzare la palette dei comandi, quindi iniziare a digitare "Genera tema di sintassi". Quando vedi Generatore di pacchetti: Genera tema di sintassi appare cliccarlo per eseguire il comando:
Apparirà una finestra in cui è possibile inserire il percorso e il nome per il tema della sintassi. Qualunque cosa tu decida di nominare il tuo tema, dovrebbe terminare con "-syntax". Dato che il tema del mio UI è stato chiamato "nuance-dark-ui" ho chiamato il mio tema di sintassi "nuance-dark-syntax".
Dopo aver inserito il percorso e il nome del tema, premere accedere procedere.
Atom genererà un nuovo tema di sintassi per te e lo aprirà nella barra laterale. Ora dovresti essere in grado di andare a Atom> Impostazioni di nuovo e scegli il tuo nuovo tema di sintassi accanto al Sintassi Tema etichetta:
Poiché lavoreremo sia sull'interfaccia utente sia sui temi di sintassi, desideriamo poter accedere a entrambi i file dalla barra laterale. Vogliamo anche essere in "Dev Mode" mentre stiamo modificando questi file poiché questo significherà che Atom aggiornerà automaticamente il suo aspetto ogni volta che salveremo le nostre modifiche.
Segui questi passaggi per aprire entrambi i temi in modalità dev e usa lo stesso processo in qualsiasi momento in futuro per tornare e modificare i tuoi temi.
Vai a Atom> Preferenze per aprire la pagina delle impostazioni.
Clic Aprire ~ / .atom nella parte inferiore della barra laterale sinistra delle impostazioni per aprire la cartella Atom locale nella barra laterale Atom:
Nella barra laterale Atom, fai clic con il pulsante destro del mouse sul tema della sintassi o sulla cartella del tema dell'interfaccia utente e scegli Mostra nel Finder:
Esci da Atom per chiudere l'istanza esistente (non è in modalità dev, quindi non ne abbiamo bisogno), quindi nella finestra del Finder che mostra le cartelle dei temi apri un nuovo terminale:
Esegui il comando atom --dev per aprire la cartella in Atom in modalità dev. Ora dovresti vedere entrambe le cartelle dei temi nella barra laterale:
Dato che siamo in modalità dev, ora possiamo aprire qualsiasi file di tema dalla barra laterale e le modifiche diventeranno automaticamente visibili nell'interfaccia di Atom.
Ora siamo pronti per iniziare il processo di progettazione!
Potresti scoprire che è necessario un piccolo aggiustamento per ottenere i colori del tuo tema proprio come li vuoi, quindi progettare direttamente nel codice non è probabilmente l'approccio più efficiente.
Nei file sorgente allegati a questo tutorial troverai una PSD denominata "colormockup.psd", che contiene abbastanza elementi di interfaccia e simulazioni di codice per facilitare la selezione della tavolozza dei colori. Usa questo PSD per visualizzare i colori che desideri utilizzare nell'interfaccia utente e nei temi di sintassi.
A me personalmente piacciono i colori della terra, poca luce e basso contrasto che non mi bruciano gli occhi, quindi ho finito con questo:
Questa è la mia preferenza personale, ma puoi ovviamente andare con qualsiasi stile che funzioni per te.
Quando il tuo mockup è pronto, sei pronto per iniziare a trasferire i tuoi valori di colore nel codice LESS dei tuoi temi. Inizieremo con il tema della sintassi perché è più semplice, utilizzando un numero inferiore di variabili rispetto al tema dell'interfaccia utente.
Nella barra laterale Atom, espandere la cartella del tema della sintassi e aprirla fogli di stile> colors.less. Dovresti vedere questo:
Se si modifica il valore di una di queste variabili, quindi si salva il file, è necessario visualizzare immediatamente l'aggiornamento dell'area di sintassi. Ad esempio, se si modifica il valore di @grigio scuro a # F00 dovresti vedere lo sfondo della grondaia cambiare colore:
Mmm carinoI colori elencati in questo file sono a loro volta associati a vari aspetti della sintassi tramite i file "syntax-variables.less" e "base.less". Apri questi file e prenditi un momento per guardarli rapidamente. Nel file "syntax-variables.less" vedrai le variabili prese dal file "colors.less". Tuttavia nel file "base.less" vedrai le variabili dal file "colors.less" e "syntax-variables.less".
Mentre aggiungiamo la nostra nuova combinazione di colori in questo tema, cambieremo il valore delle variabili in "colors.less" in un modo che significa che i loro nomi potrebbero non riflettere più il colore che contengono. Ad esempio, dove la variabile @viola è stato usato, utilizzeremo invece una tonalità di verde.
Per essere accurato, idealmente crei nuovi nomi di variabili che riflettono la nuova combinazione di colori, tuttavia per gli scopi di questo tutorial non voglio metterti a dover sostituire ogni istanza dei vecchi nomi di variabili nella "sintassi". variables.less "e" base.less ".
Quindi, anche se potrebbe sembrare un po 'strano, assegneremo i colori del nostro nuovo schema direttamente ai nomi delle variabili esistenti in "colors.less". In questo modo devi solo modificare un singolo file per creare il tuo tema di sintassi.
Per aiutarti a capire quali variabili influenzano quali aspetti della combinazione di colori, sostituisci il codice completo del file "colors.less" con questo:
// Questi colori sono specifici per il tema. Non usare in un pacchetto! // Testo normale e numeri di linea @ grigio molto chiaro: # c5c8c6; // Comments @ light-gray: # 969896; // Evidenzia linea attuale @gray: # 373b41; // Gutter background @ dark-gray: # 282a2e; // Area di codice background @ very-dark-gray: # 1d1f21; @cyan: # 8abeb7; @blue: # 81a2be; @purple: # b294bb; @green: # b5bd68; @rosso: # cc6666; @orange: # de935f; @ arancione chiaro: # f0c674;
I commenti aggiunti alla prima sezione indicano dove ciascuna delle variabili di colore "grigie" viene utilizzata nell'area della sintassi.
La seconda sezione con le sette variabili di colore è un po 'più complicata in quanto ognuna produce un diverso tipo di codice. Per avere un'idea approssimativa di come appariranno queste variabili, crea un nuovo file PHP e incolla questo:
Accentsconagua
darken (@red, 10%) / * Commenti> @ light-gray * / // function = .storage> @purple // function_name = .entity.name.function> @blue function function_name () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green return array ('string' => 'stringa'); // $ = .punctuation.definition.variable> @ very-light-gray // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ light-orange / / true =. conststant> @orange $ var_name = new SUPPORT_CLASS (true); ?> Nota: questo file è anche incluso nei file sorgente.
Quando visualizzi il codice sopra in Atom, vedrai esempi di come appaiono ciascuna delle sette variabili di colore quando applicate alla sintassi. Lo stesso codice è utilizzato nel "colormockup.psd" fornito in modo da poter vedere come i colori sono correlati.
Controlla i commenti inclusi per una descrizione di quali variabili di colore sono associate a ciascun elemento del codice. Puoi utilizzare questo codice insieme al PSD per aiutarti a capire quali variabili devono essere mappati i colori che hai scelto nel tuo file "colors.less".
Inizieremo portando i colori "grigi" dal tuo mockup PSD.
La prima variabile elencata in "colors.less" è @ Molto-grigio chiaro che sappiamo, (dai commenti che hai appena aggiunto), è usato su "Testo normale e numeri di linea". Vai al tuo PSD e copia il codice esadecimale del colore che hai scelto per i tuoi numeri di linea. Incolla quel valore, che in questo caso è # 9b836a, in "colors.less" per sostituire il valore predefinito per @ Molto-grigio chiaro.
Successivamente, ottieni il codice esadecimale a colori che hai scelto per il testo del commento e aggiungilo alla variabile @grigio chiaro. Continua in questo modo finché tutte e cinque le variabili "grigie" non vengono aggiornate. Per il tema "nuance-dark-syntax" ho usato:
// Testo normale e numeri di linea @ grigio molto chiaro: # 9b836a; // Commenti @ grigio chiaro: # 624e3b; // Evidenzia linea attuale @gray: # 352b22; // Gutter background @ dark-gray: # 28211a; // Area di codice background @ very-dark-gray: # 1f1913;
Salva il file "colors.less" e dovresti immediatamente vedere la tua area di sintassi molto diversa:
Ora per riportare le sette variabili di colore nella seconda sezione.
La prima di queste variabili è @cyan, e il contenuto del file PHP che abbiamo creato in precedenza contiene il commento array = .support.function> @cyan, dicendoci che questo colore è usato sulla parola "array". Vai al tuo PSD e copia il codice esadecimale che hai applicato alla parola "array" lì. Questo era il tema della "sfumatura" # 446.675.
Ripeti la stessa procedura per trovare il nome di ciascuna variabile nei commenti del tuo file PHP per vedere quale tipo di codice applica, quindi copia il colore che hai scelto dal tuo PSD.
Per il tema "nuance" ho usato:
@cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @ verde: # 93a14a; @rosso: # a55027; @orange: # a56b32; @ arancione chiaro: # b5a163;
Dopo aver salvato, dai un'occhiata al tuo file PHP e dovresti vedere tutti i tuoi nuovi colori riflessi in esso, facendo corrispondere il tuo PSD:
Il tuo tema di sintassi è ora completo! Ora è il momento di passare al tema dell'interfaccia utente.
Aggiungere la combinazione di colori al tema dell'interfaccia utente è un po 'più complicato del tema della sintassi poiché utilizza molte più variabili. Inoltre, non tutti i colori nel tema predefinito sono definiti come variabili, quindi in alcuni casi sarà necessario modificare gli stili effettivi.
La maggior parte dei colori utilizzati nel tema dell'interfaccia utente sono definiti nel file "ui-variables.less". Vai avanti ed espandi la cartella dei temi di sintassi e apri il file per la modifica dalla cartella "stylesheets".
Atom viene fornito con una "Styleguide" molto utile che ti dà un'anteprima di tutti gli elementi dell'interfaccia utente influenzati dal tuo tema. Aprilo andando su Pacchetti> Styleguide> Mostra.
Per la maggior parte troverete i nomi delle variabili nel file "ui-variables.less" per essere descrittivi e per correlare, in ordine, con gli elementi dell'interfaccia utente elencati nella Styleguide. Ad esempio, le prime diverse variabili sono prefissate @colore del testo e correlare con la prima sezione della Styleguide, etichettata "Classi di testo".
Se non sei sicuro di quale variabile influirà su cosa, non aver paura di cambiare le variabili casualmente per vedere quali aspetti della Styleguide sono alterati.
Non tutti i colori nel tema dell'interfaccia utente predefinito hanno associato le variabili LESS nel file "ui-variables.less". Alcuni colori sono codificati direttamente in altri file LESS nel tema.
Se non sei sicuro di quale sia il colore dell'interfaccia utente e non sembra avere una variabile associata, utilizza l'ispettore elemento nell'area in questione per trovare il nome della classe responsabile del colore. Quindi esegui una ricerca in Finder per quel nome classe per cercare di determinare quale dei file LESS del tema contiene la classe.
Ad esempio, la barra laterale ha un codice esadecimale di colore # 303030 nel tema predefinito che non è definito da nessuna parte in "ui-variables.less". Ispezionare l'elemento mostra che l'hexcode proviene dalla classe .attivabile pannello.
L'esecuzione di una ricerca del Finder all'interno della cartella dell'interfaccia utente per "focusable-panel" rivela che questa classe è contenuta nel file "tree-view.less".
Il file può quindi essere modificato, inserendo una variabile dal file "ui-variables.less" invece di un valore esadecimale codificato.
A volte la tua ricerca non produrrà alcun risultato, per qualsiasi motivo, e potresti dover fare le cose nel modo più duro e passare manualmente attraverso ogni file del tema dell'interfaccia utente fino a trovare la classe che desideri modificare.
Il tema dell'interfaccia utente non può accedere alle variabili di colore definite dal tema della sintassi, tuttavia vogliamo utilizzare gli stessi colori su entrambi i temi in modo che corrispondano. Pertanto, dovremo duplicare le variabili di colore dal nostro tema di sintassi nel nostro tema dell'interfaccia utente.
Nella parte superiore del tema "ui-variables.less" incolla tutte le variabili dal tema della sintassi:
@ very-light-gray: # 9b836a; @ grigio chiaro: # 624e3b; @gray: # 352b22; @ grigio scuro: # 28211a; @ very-dark-gray: # 1f1913; @cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @ verde: # 93a14a; @rosso: # a55027; @orange: # a56b32; @ arancione chiaro: # b5a163;
Oltre a queste variabili, ci sono altre cinque variabili personalizzate che ho definito per riportare tutti i colori del mio mockup, incollati anche nella parte superiore del file "ui-variables.less":
// BG del file selezionato nella barra laterale @n_selected: # 2b231b; // BG della barra laterale @n_defaultbg: # 241d17; // BG della barra degli strumenti in basso e pannello "trova" @n_darkerbg: # 191613; // Colore del testo selezionato nella barra laterale @n_highlight: # a37748; // Colore del bordo delle schede @n_tabborder: # 372d26;
Queste variabili verranno utilizzate in più posizioni, ma i commenti inclusi ti forniranno un esempio dell'uso di ciascuna di esse, che ti aiuterà a determinare quali codici colore dovresti copiare dal tuo PSD. Inoltre, laddove possibile, i livelli nel PSD sono stati nominati con riferimento alla variabile che hanno effetto.
Come accennato in precedenza, alcuni dei valori cromatici del tema predefinito sono codificati in modo rigido anziché essere accessibili come variabili. In alcuni casi le variabili sono definite, ma in file diversi dal file "ui-variables.less" principale. Per semplificare l'applicazione centralizzata della nostra combinazione di colori tramite il file "ui-variables.less", definiremo alcune variabili extra e apporteremo alcune modifiche ad alcuni file di temi.
Incolla il seguente codice nel tuo "ui-variables.less" sotto le variabili di colore che hai aggiunto nel passaggio precedente:
// CUSTOM COLORS / VARS AGGIUNTI A MENO FILES //tree-view.less @ tree-view-selected-bg: @n_selected; // new> line 8 @sidebar: @n_defaultbg; // new> line 15 @ sidebar-focus: lighten (@n_defaultbg, 0.5%); // new> line 19 //tabs.less @ tab-default-bg: @n_defaultbg; // new> line 45 //tooltips.less @ tip-background-color: lighten (@ very-light-grey, 10%); // variabili prese da tooltips.less e poste qui per access @ tip-text-color: @ very-dark-gray; // variabili estratte da tooltips.less e poste qui per l'accesso
Prendere nota dei commenti inclusi tenere traccia di quali file devono essere modificati e su quale riga per utilizzare queste variabili.
Con le nuove variabili in atto, ora puoi apportare le seguenti modifiche ai tuoi file tema:
tree-view.less> riga 8: cambiare a sfondo: @ tree-view-selected-bg;
tree-view.less> riga 15: cambia in sfondo: @sidebar;
tree-view.less> riga 19: cambiare a sfondo: @ sidebar-focus;
tabs.less> riga 45: cambia in:
background-image: -webkit-linear-gradient (in alto, schiarisci (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> elimina le righe 4 e 5:
@ tip-background-color: #fff; @ tip-text-color: # 333;
Queste due righe vengono eliminate da "tooltips.less" poiché le variabili ora sono definite nel file "ui-variables.less" principale.
Ora abbiamo apportato tutte le modifiche necessarie per andare avanti con le nostre variabili appena definite, ma ci sono alcuni aggiustamenti per sostituire i colori hard coded e ottenere che tutti i file dei temi funzionino bene con le nostre variabili.
utilities.less> line 6: cambiare a sfondo: scurire (@ button-background-color, 5%);
tree-view.less> riga 29: cambiare a colore: schiarire (@ molto grigio chiaro, 15%)! importante;
pannelli.less> riga 50: cambiare a
background-image: -webkit-linear-gradient (@ panel-heading-background-color, darken (@ panel-heading-background-color, 5%));
... rende il gradiente più sottile per adattarsi ai nostri nuovi colori.
tooltips.less> riga 11: cambiare a colore: saturo (scurisci (@rosso, 10%), 5%);
Ora abbiamo tutti i colori del nostro mockup PSD definiti come variabili e tutti i file del tema pronti a rispondere alle definizioni in "ui-variables.less".
L'unica cosa che rimane adesso è di mappare le nostre variabili cromatiche personalizzate rispetto alle variabili predefinite che erano già presenti quando abbiamo aperto il file "ui-variables.less". Non è necessario modificare il valore di ogni singola variabile di default, perché alcuni di essi riportano i loro valori da altri nello stesso file. Ad esempio abbiamo @ text-color-highlight: #fff; e questo valore è piggy backed nella riga successiva in @ text-color-selected: @ text-color-highlight;.
Sostituisci tutto il codice tra il commento // Colori e il commento // Dimensioni con questo codice:
@ text-color: @ very-light-grey; // cambiato @ text-color-thin: @ light-gray; // cambiato @ text-color-highlight: @n_highlight; // cambiato @ text-color-selected: @ text-color-highlight; @ text-color-info: @cyan; // cambiato @ text-color-success: @blue; // changed @ text-color-warning: lighten (@orange, 15%); // changed @ text-color-error: saturate (lighten (@red, 10%), 10%); // changed @ text-color-ignored: @ text-color-subtle; @ text-color-added: @ text-color-success; @ text-color-rinominato: @ text-color-info; @ text-color-modified: @ text-color-warning; @ text-color-removed: @ text-color-error; @ background-color-info: @cyan; // changed @ background-color-success: @blue; // changed @ background-color-warning: lighten (@orange, 15%); // changed @ background-color-error: saturazione (schiarisci (@rosso, 10%), 10%); // changed @ background-color-highlight: rgba (255, 255, 255, 0,07); @ background-color-selected: @n_selected; // changed @ app-background-color: # 333; @ base-background-color: alleggerire (@ tool-panel-background-color, 5%); @ base-border-color: @n_darkerbg; @ pane-item-background-color: @ base-background-color; @ pane-item-border-color: @n_darkerbg; // cambiato @ input-background-color: @ dark-grey; // cambiato @ input-border-color: @ base-border-color; @ tool-panel-background-color: @n_darkerbg; // cambiato @ tool-panel-border-color: @ base-border-color; @ inset-panel-background-color: @n_defaultbg; // changed @ inset-panel-border-color: @ base-border-color; @ panel-heading-background-color: @gray; // cambiato @ panel-heading-border-color: fadein (@ base-border-color, 10%); @ overlay-background-color: @ grigio scuro; // cambiato @ overlay-border-color: @ background-color-highlight; @ button-background-color: @gray; // modificato @ button-background-color-hover: lighten (@ button-background-color, 5%); @ button-background-color-selected: @ dark-grey; // cambiato @ button-border-color: @ base-border-color; @ tab-bar-background-color: @ very-dark-grey; // changed @ tab-bar-border-color: darken (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // cambiato @ tab-background-color-active: @ very-dark-grey; // cambiato @ tab-border-color: @n_tabborder; // cambiato @ tree-view-background-color: @ tool-panel-background-color; @ tree-view-border-color: @ tool-panel-border-color; @ scrollbar-background-color: @ very-dark-grey; // changed @ scrollbar-color: @gray; // cambiato @ ui-site-color-1: @ background-color-success; // green @ ui-site-color-2: @ background-color-info; // blue @ ui-site-color-3: @ background-color-warning; // orange @ ui-site-color-4: @purple; // changed @ ui-site-color-5: @red; // cambiato
Sarebbe un po 'eccessivo spiegare ogni riga di questo codice, ma cerca il commento // cambiato alla fine di una riga per vedere dove sono state mappate le nostre variabili cromatiche personalizzate rispetto alle variabili predefinite del tema.
Ricorda, se non sei sicuro di dove si applicano queste variabili, puoi verificare la loro correlazione con Styleguide, come descritto sopra.
Dopo aver salvato il tuo file "ui-variables.less", (e gli altri che hai modificato), la tua interfaccia dovrebbe ora assomigliare a questa:
Se si preme ctrl-shift-P per far apparire la palette dei comandi dovrebbe apparire come:
E se premi Ctrl-F il pannello "trova" nella parte inferiore dell'editor dovrebbe essere simile a:
Puoi scaricare l'interfaccia utente "Nuance" e i temi della sintassi completati su GitHub:
E puoi installarli direttamente in Atom andando a Atom> Preferenze> Temi e digitando "Nuance" nel campo filtro.
Dopo aver completato la sintassi personalizzata e / o il tema dell'interfaccia utente, hai la possibilità di condividerlo con altri utenti di Atom come pacchetto. Per fare questo è necessario disporre di un repository GitHub aggiornato per ciascuno. Per istruzioni su come pubblicare un pacchetto Atom, vedere Atom Docs: Publishing a Package
In questo tutorial abbiamo mantenuto il codice del file LESS esistente invariato il più possibile, concentrandoci sul lavoro con le variabili. Detto questo, se vuoi approfondire il codice del tema puoi controllare la presentazione di praticamente qualsiasi aspetto della sintassi e dell'interfaccia utente, dalla forma delle schede al colore delle parentesi graffe e degli operatori.
Se ti accorgi che desideri che parte del codice o elemento dell'interfaccia utente siano diversi, apri Atom in modalità dev e utilizza l'ispettore elementi per verificare se è disponibile una classe che puoi scegliere come target. Come regola generale, puoi personalizzare praticamente tutto.
Già, anche in modalità beta, Atom sembra estremamente promettente nella sua capacità di rendere la personalizzazione accessibile a chiunque abbia esperienza nelle tecnologie web. Prova a lavorare con Atom, sarai spazzato via da ciò che puoi fare!
