Share
Ce veți creaAtom, noul editor de coduri lansat de GitHub, este unul din apariția unor aplicații care permit tehnologiilor web cum ar fi LESS, JavaScript și HTML să ruleze nativ într-un mediu desktop. Atom se instalează și rulează ca o aplicație desktop "obișnuită", dar odată ce se deschide, se comportă într-un mod pe care orice dezvoltator web îl va găsi.
Atom este o "variantă specializată de Chromium" și atunci când rulează în modul dezvoltator oferă acces la aceleași "Instrumente de dezvoltare" pe care s-ar putea să fii obișnuit cu Chrome. Deci, la fel cum ati putea cu orice aplicatie web online, veti putea inspecta codul in spatele oricarui element al interfetei aplicatiei si sa vedeti ce face sa bifeze:
Ce înseamnă acest lucru în practică este faptul că oricine a experimentat designul și dezvoltarea web va găsi imediat cunoștințe cu privire la felul în care funcționează Atom și probabil va fi mult mai confortabil în crearea de modificări și modificări decât în cazul programelor comparabile. Stilul vizual al lui Atom este condus de CSS, generat de LESS, astfel încât să puteți modifica aspectul său în același mod în care ar fi orice site web LESS.
Atom are două tipuri de "teme" responsabile pentru stilul său de prezentare:
Sintaxa temelor controlează totul în spațiul interior al editorului, adică jgheabul, numerele de linie și zona de cod.
Temele UI controlează totul, adică filele, bara laterală, butoanele, suprapunerile, mesajele etc..
În acest tutorial veți învăța cum să creați ambele tipuri de teme, producându-le în tandem, astfel încât întreaga interfață să fie restabilită uniform. Sa incepem!
În momentul de față, Atom este numai Mac, iar în timpul fazei beta accesul este prin invitație. Dacă nu aveți încă o invitație, sugestia mea este să trimiteți o cerere pe Twitter sau la forumul Atom și cineva este obligat să vă trimită unul. Descărcați și instalați-l ca în orice altă aplicație.
Dezvoltarea temelor va implica o utilizare specifică a liniei de comandă Atom, deci primul lucru pe care trebuie să-l faceți este să instalați pachetele care permit aceste comenzi. După ce ați lansat Atom pentru prima dată, mergeți la și selectați Atom> Instalarea comenzilor Shell, care instalează atom și apm (administratorul pachetului de atomi).
De asemenea, vă sugerăm să utilizați o aplicație care vă va permite să deschideți un terminal din orice folder pe care îl vedeți în Finder, deoarece va facilita rularea comenzilor în locația potrivită. Eu personal folosesc XtraFinder-ul gratuit pentru a adăuga o opțiune "New Terminal Here" în meniul contextual Finder.
Procesul de bază pentru crearea unei noi teme Atom UI este de a distribui unul dintre cele două teme implicite disponibile de la GitHub, de a le oferi propriul nume și de a edita fișierele incluse.
Pentru a face acest lucru, începeți prin a vă asigura că aveți atât un cont la GitHub, cât și GitHub pentru Mac (dacă nu preferați să utilizați linia de comandă) instalate. Apoi, mergeți la depozit pentru tema Atom Dark UI sau tema Atom Light UI. În acest tutorial vom folosi o paletă de culori închise, așa că vom elimina tema implicită întunecată.
În colțul din dreapta sus al spațiului de stocare inițial, faceți clic pe butonul "Furcă":
Acest lucru va crea un duplicat al repo-ului în cont propriu, adică. youraccount / atom-dark-ui. Următorul lucru pe care trebuie să-l faceți este să-i dați numele reputației. În bara laterală dreaptă a repozitorului cu furcă, dați clic pe elementul din meniu "Setări".
În partea de sus a paginii "Setări" veți vedea un câmp pentru numele repozitorului. Introduceți un nou nume la alegere (în cazul meu "nuance-dark-ui"), în acest câmp, păstrând cu siguranță "-ui" la sfârșit, apoi faceți clic pe "Redenumiți":
Acum sunteți gata să descărcați tema în mediul offline pentru a putea începe să o editați. Pentru a face acest lucru, reveniți la pagina principală a repozitorului, apoi localizați și faceți clic pe butonul "Clona în desktop" din bara laterală:
"GitHub pentru Mac"va descărca depozitul pentru dvs., în locația dvs. implicită GitHub. Din lista dvs. de depozituri din "GitHub for Mac", faceți clic dreapta pe tema dvs. UI nou clonată și selectați "Afișați în Finder":
O fereastră Finder se va deschide afișând dosarul tematic UI din interiorul dosarului GitHub. Faceți dublu clic pe acesta pentru a intra în dosarul real și pentru a vizualiza conținutul acestuia.
Deschideți un nou terminal în această locație, apoi executați comanda atom - dev
Această comandă va deschide Atom în modul dezvoltator, arătând structura fișierului și a folderului temei în bara laterală. În această bara laterală, faceți clic pe fișierul "package.json" pentru al deschide pentru editare, apoi schimbați numele, numărul versiunii și descrierea. Din nou, asigurați-vă că păstrați "-ui" la sfârșitul numelui temei, apoi salvați:
În cele din urmă, trebuie să lăsați Atom să știe cum să acceseze folderul tematic din dosarul său local GitHub. Reveniți la terminalul dvs., care ar trebui să fie încă în dosarul temei și executați comanda link-ul apm
Acum du-te înapoi la Atom și apăsați cmd-alt-ctrl-L sau selectați Vizualizare> Reîncărcare din meniul de sus pentru a reîncărca interfața, care va reîmprospăta lista de teme UI disponibile, permițând selectarea dvs..
Din meniul de sus, selectați Atom> Setăripentru a deschide pagina de setări și faceți clic pe "Teme" din bara laterală stângă a panoului. Ar trebui să vă vedeți tema în lista numită "Teme UI", așa că continuați și selectați-o:
Noua dvs. temă UI este acum activă și pregătită pentru editare, totuși, înainte de a continua, vom genera și o temă de sintaxă, astfel încât să puteți edita ambele în același timp, ținând cont de modul în care acestea lucrează împreună.
Crearea unei noi teme de sintaxă este un proces mai ușor decât pentru o temă UI.
În Atom, apăsați cmd-Shift-P pentru a afișa paleta de comandă, începeți să tastați "Generați tema sintaxei". Cand vezi Generator de pachete: Generați tema sintaxei apare clic pe el pentru a executa comanda:
Va apărea o fereastră în care puteți introduce calea și numele pentru tema dvs. de sintaxă. Indiferent cum decideți să vă numiți tema, ar trebui să se termine în "-syntax". Dat fiind că tema mea de utilizator a fost numită "nuanță-întuneric-ui" am numit tema mea de sintaxă "nuanța-întuneric-sintaxă".
După ce introduceți calea și numele temei, apăsați introduce a inainta, a merge mai departe.
Atom va genera o nouă sintaxă pentru tine și o va deschide în bara laterală. Acum ar trebui să puteți merge la Atom> Setări din nou și alegeți noua temă de sintaxă de lângă Tema sintaxei eticheta:
Întrucât vom lucra atât la temele UI, cât și la cele de sintaxă, dorim să putem accesa ambele fișiere din bara laterală. De asemenea, dorim să fim în "Dev Mode" în timp ce edităm aceste fișiere, deoarece acest lucru va însemna că Atom va reîmprospăta automat aspectul său ori de câte ori ne salvăm schimbările.
Urmați acești pași pentru a deschide ambele teme în modul dev și utilizați în același timp același proces în viitor, trebuie să reveniți și să editați teme.
Mergi la Atom> Preferințe pentru a deschide pagina de setări.
Clic Deschideți ~ / .atom în partea de jos a setărilor bara laterală din stânga pentru a deschide dosarul local Atom în bara laterală Atom:
În bara laterală Atom, faceți clic dreapta pe tema sintaxei sau pe folderul cu tematică UI și alegeți Afișați în Finder:
Închideți Atom pentru a închide instanța existentă (nu este în modul dev, așa că nu avem nevoie de ea), apoi în fereastra Finder care afișează folderele tematice deschideți un nou terminal:
Rulați comanda atom - dev pentru a deschide directorul în Atom în modul dev. Ar trebui să vedeți acum ambele dosare tematice în bara laterală:
Deoarece suntem în modul dev, putem deschide acum orice fișier tematic din bara laterală, iar schimbările vor deveni automat vizibile în interfața Atom.
Acum suntem gata să începem procesul de proiectare!
S-ar putea să găsiți că este nevoie de un mic amendament pentru a obține culorile temei așa cum doriți, astfel încât proiectarea direct în cod nu este probabil cea mai eficientă abordare.
În fișierele sursă atașate acestui tutorial veți găsi un PSD numit "colormockup.psd", care conține suficiente elemente de interfață și simulări de cod pentru a facilita selecția paletei de culori. Utilizați acest PSD pentru a vizualiza culorile pe care doriți să le utilizați în temele dvs. de interfață și sintaxă.
Îmi plac personal culorile în pământ, lumina scăzută și contrastul scăzut, care nu-mi arde ochii, așa că am ajuns cu asta:
Aceasta este preferința mea personală, dar, desigur, puteți merge cu orice stil care funcționează pentru dvs..
Când macheta dvs. este terminată, sunteți gata să începeți să transferați valorile culorilor pe codul LESS al temelor. Vom începe cu tema sintaxei datorită faptului că este mai simplă, folosind mai puține variabile decât tema UI.
În bara laterală Atom, extindeți folderul temei sintaxei și deschideți-l stiluri> culori. Ar trebui să vedeți acest lucru:
Dacă modificați valoarea oricăreia dintre aceste variabile, apoi salvați fișierul, trebuie să vedeți instantaneu actualizarea zonei de sintaxă. De exemplu, dacă modificați valoarea @gri închis la # F00 ar trebui să vedeți schimbarea culorii fondului de jgheab:
Mmm frumosCulorile listate în acest fișier sunt, la rândul lor, mapate la diferite aspecte ale sintaxei prin fișierele "sintaxă-variabilă" și "fără bază". Deschideți aceste fișiere în sus și faceți o clipă pentru a le arunca o privire rapidă. În fișierul "sintaxă-variabilă" veți vedea variabilele preluate din fișierul "colors.less". Cu toate acestea, în fișierul "base.less" veți vedea variabile din fișierul "colors.less" și "syntax-variablesless".
Pe măsură ce adăugăm noua noastră schemă de culoare în această temă, vom schimba valoarea variabilelor în "colors.less" într-un mod care înseamnă că numele lor nu mai reflectă culoarea pe care o conțin. De exemplu, în cazul în care variabila @Violet a fost folosit, vom folosi în schimb o nuanță de verde.
Pentru a fi amănunțit, ați crea în mod ideal noi nume de variabile care nu reflectă noua schemă de culori, cu toate acestea în scopul acestui tutorial nu vreau să vă trec prin a trebui să înlocuiți fiecare instanță a vechilor nume de variabile în " variabilă "și" fără bază ".
Deci, chiar dacă s-ar părea un pic ciudat, vom aloca doar culorile noii noastre scheme direct în raport cu numele de variabile existente în "colors.less". În acest fel, trebuie doar să editați un singur fișier pentru a crea tema sintaxei.
Pentru a vă ajuta să înțelegeți care variabile influențează aspectele schemelor de culori, înlocuiți codul complet al fișierului "colors.less" cu acest:
// Aceste culori sunt specifice temei. Nu folosiți într-un pachet! // Text simplu și numere de linie @ foarte deschis-gri: # c5c8c6; // Comentarii @ light-gray: # 969896; // Creste linia curenta @gray: # 373b41; // Gutter background @ gri-închis: # 282a2e; // Suprafața codului fundal @ foarte închis-gri: # 1d1f21; @cyan: # 8abeb7; @ albastru: # 81a2be; @purple: # b294bb; @ verde: # b5bd68; @red: # cc6666; @orange: # de935f; @ lumină-portocalie: # f0c674;
Comentariile adăugate la prima secțiune vă indică unde sunt utilizate variabilele de culoare "gri" în zona de sintaxă.
A doua secțiune cu cele șapte variabile de culoare este puțin mai complicată, deoarece fiecare efectuează un alt tip de cod. Pentru a obține o idee grosolană despre modul în care vor apărea aceste variabile, creați un nou fișier PHP și lipiți în acesta:
Accentsconagua
(@red, 10%) / * Comentarii> @ light-gray * / // function = .storage> @purple // function_name = .identity.name.function> @blue function function_name () // return =. keyword.control> @purple // array = .support.funcție> @cyan // string = .string> @ array return verde ('string' => 'string'); // $ = .punctuation.definition.variable> @ very-light-gray // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ light-orange / / true = .constant> @orange $ var_name = nou SUPPORT_CLASS (adevărat); ?> Notă: acest fișier este de asemenea inclus în fișierele sursă.
Când vizualizați codul de mai sus în Atom, veți vedea exemple despre cum arată fiecare dintre cele șapte variabile de culoare atunci când este aplicată sintaxei. Același cod este folosit în colorația "colormockup.psd" astfel încât să puteți vedea cum se corelează culorile.
Consultați comentariile incluse pentru o descriere a variabilelor de culoare care sunt asociate cu fiecare element al codului. Puteți utiliza acest cod împreună cu PSD pentru a vă ajuta să aflați ce variabile trebuie să fie cartografiate în culorile pe care le-ați ales în fișierul "colors.less".
Vom începe prin a transporta culorile "gri" de pe macheta dvs. PSD.
Prima variabilă listată în "colors.less" este @ Foarte ușor gri pe care o cunoaștem (din comentariile pe care tocmai le-ați adăugat), este folosit în "Numere text și linii simple". Mergeți la PSD-ul dvs. și copiați hexazocul culorii pe care ați ales-o pentru numerele de linie. Lipiți valoarea respectivă, care este în acest caz # 9b836a, în "colors.less" pentru a înlocui valoarea implicită pentru @ Foarte ușor gri.
Apoi, obțineți codul de culoare pe care l-ați ales pentru textul de comentariu și adăugați-l în raport cu variabila @gri deschis. Continuați în acest mod până când toate cele cinci variabile "gri" sunt actualizate. Pentru tema "nuanță-întuneric-sintaxă" am folosit:
// Numere text și linii simple @ foarte deschis-gri: # 9b836a; // Comentarii @ light-gray: # 624e3b; // Creste linia curenta @gray: # 352b22; // Gutter background @ gri-gri: # 28211a; // Suprafața codului fundal @ foarte închis-gri: # 1f1913;
Salvați fișierul "colors.less" și ar trebui să vedeți imediat zona dvs. de sintaxă arătând destul de diferită:
Acum, să transportați cele șapte variabile de culoare în a doua secțiune.
Prima dintre aceste variabile este @cyan, iar conținutul fișierului PHP pe care l-am creat mai devreme conține comentariul array = .support.function> @cyan, spunându-ne că această culoare este folosită la cuvântul "matrice". Accesați PSD-ul și copiați hexadecimul pe care l-ați aplicat cuvântului "array" acolo. În tema "nuanță" acest lucru a fost # 446675.
Repetați același proces de găsire a fiecărui nume de variabilă în comentariile fișierului dvs. PHP pentru a vedea ce tip de cod se aplică, apoi copiați culoarea pe care ați ales-o de la PSD-ul dvs..
Pentru tema "nuanță" am folosit:
@cyan: # 446675; @ albastru: # 40796b; @purple: # 6a7c02; @ verde: # 93a14a; @red: # a55027; @orange: # a56b32; @ lumină-portocalie: # b5a163;
După salvare, luați o altă privire la fișierul dvs. PHP și ar trebui să vedeți toate culorile noi reflectate în el, potrivite pentru PSD:
Tema dvs. de sintaxă este acum completă! Acum este momentul să treceți la tema UI.
Adăugarea schemei de culori în tema UI este puțin mai dificilă decât tema sintaxei, deoarece folosește mult mai multe variabile. În plus, nu toate culorile din tema prestabilită sunt definite ca variabile, deci în unele cazuri va trebui să editați stilurile reale.
Majoritatea culorilor folosite în tema UI sunt definite în fișierul "ui-variablesless". Mergeți mai departe și extindeți dosarul pentru temele de sintaxă și deschideți fișierul pentru editare din dosarul "stiluri".
Atom livrează un ghid stilistic foarte util, care vă oferă o previzualizare a tuturor elementelor UI influențate de tema dvs. Deschide-l prin a merge la Pachete> Ghid de stil> Afișare.
În cea mai mare parte veți găsi numele variabilelor din fișierul "ui-variablesless" pentru a fi descriptive și pentru a corela, în ordine, cu elementele UI enumerate în ghidul de stil. De exemplu, primele mai multe variabile sunt prefixate @culoarea textului și se corelează cu prima secțiune a ghidului de stil, denumită "clase de text".
Dacă nu sunteți sigur care variabilă va afecta ceea ce, nu vă fie frică să modificați variabilele aleatoriu pentru a vedea care aspecte ale ghidului de stil sunt modificate.
Nu toate culorile din tema implicită a interfeței UI au asociate variabile mai mici în fișierul "ui-variablesless". Unele culori sunt codate direct în alte fișiere LESS din temă.
Dacă nu sunteți sigur de proveniența unei culori UI și nu pare să aveți o variabilă asociată, utilizați inspectorul de elemente din zona în cauză pentru a găsi numele de clasă responsabil pentru culoare. Apoi, executați o căutare în Finder pentru acel nume de clasă pentru a încerca și a determina care dintre fișierele LESS ale temei conține clasa.
De exemplu, bara laterală are un hexacol de culoare de # 303030 în tema implicită, care nu este definită în "ui-variablesless". Inspectarea elementului arată că hexecolul vine din clasă .focalizabil-panou.
Rularea unei căutări Finder în folderul UI pentru "panou cu focalizare" arată că această clasă este cuprinsă în fișierul "tree-view.less".
Fișierul poate fi apoi editat, plasând o variabilă din fișierul "ui-variablesless" în loc de o valoare hexagonală hex.
Uneori, căutarea dvs. nu va da rezultate, indiferent de motiv, și este posibil să trebuiască să faceți lucrurile greu și să treceți manual prin fiecare fișier tematic UI până când veți găsi clasa pe care doriți să o schimbați.
Tema UI nu poate accesa variabilele de culoare definite de tema sintaxei, însă dorim să folosim aceleași culori în ambele teme, astfel încât acestea să se potrivească. Ca atare, va trebui să duplicăm variabilele de culoare din tema noastră de sintaxă în tema noastră UI.
În partea de sus a temei "ui-variablesless" în toate variabilele din tema sintaxei:
@ foarte-light-gri: # 9b836a; @ light-gray: # 624e3b; @gray: # 352b22; @ gri-închis: # 28211a; @ foarte închis-gri: # 1f1913; @cyan: # 446675; @ albastru: # 40796b; @purple: # 6a7c02; @ verde: # 93a14a; @red: # a55027; @orange: # a56b32; @ lumină-portocalie: # b5a163;
Pe lângă aceste variabile, există și alte cinci variabile personalizate pe care le-am definit pentru a transfera toate culorile de la mockup-ul meu, de asemenea lipite în partea de sus a fișierului "ui-variablesless":
// BG fișierului selectat în bara laterală @n_selected: # 2b231b; // BG din bara laterală @ n_defaultbg: # 241d17; // BG din bara de instrumente inferioară și panoul "Find" @n_darkerbg: # 191613; // Culoarea textului selectat în bara laterală @n_highlight: # a37748; // Culoarea frontală a filelor @n_tabborder: # 372d26;
Aceste variabile vor fi utilizate în mai multe locații, dar comentariile incluse vă oferă un exemplu de utilizare a fiecăruia, ceea ce vă va ajuta să determinați ce coduri de culoare să copiați din PSD-ul dvs. De asemenea, ori de câte ori este posibil, straturile din PSD au fost denumite cu referire la variabila pe care o efectuează.
Așa cum am menționat mai sus, unele dintre valorile culorii implicite ale temei sunt greu codate, în loc să fie accesibile ca variabile. În unele cazuri variabilele sunt definite, dar în alte fișiere decât fișierul principal "ui-variablesless". Pentru a facilita aplicarea schemelor de culori centralizate prin fișierul "ui-variablesless", vom defini câteva variabile suplimentare și vom face unele ajustări pentru câteva fișiere tematice.
Inserați următorul cod în "ui-variables.less" sub variabilele de culoare pe care le-ați adăugat în etapa anterioară:
// CULOARE CUVANT / VARS ADĂUȚIT LA MAI MULTE FILME //tree-view.less @ tree-view-selected-bg: @n_selected; // new> rândul 8 @sidebar: @n_defaultbg; // new> linia 15 @ focus sidebar: focalizare (@ n_defaultbg, 0.5%); // new> rândul 19 //tabs.less @ tab-default-bg: @n_defaultbg; // new> line 45 // tooltips.less @ tip-fundal-culoare: lumina (@ foarte deschis-gri, 10%); // variabilele scoase din tooltips.less și plasate aici pentru acces @ tip-text-color: @ foarte-întuneric-gri; // variabilele extrase din tooltips.less și plasate aici pentru acces
Luați notă de comentariile incluse să țineți evidența fișierelor care urmează să fie modificate și pe ce linie pentru a utiliza aceste variabile.
Cu ajutorul noilor variabile, puteți efectua următoarele modificări în fișierele tematice:
tree-view.less> linia 8: schimba in fundal: @ tree-view-selected-bg;
tree-view.less> linia 15: schimba in fundal: @sidebar;
tree-view.less> linia 19: schimba in fundal: @ sidebar-focus;
tabs.less> linia 45: schimba in:
fundal-imagine: -webkit-linear-gradient (top, lighten (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> șterge liniile 4 și 5:
@ tip-fundal-culoare: #fff; @ tip-text-culoare: # 333;
Aceste două linii sunt șterse din "tooltips.less", deoarece variabilele sunt acum definite în fișierul "ui-variablesless" principal.
Acum am făcut toate ajustările necesare pentru a merge împreună cu variabilele noastre noi definite, dar există încă câteva modificări pentru a înlocui culorile codate greu și pentru a obține toate fișierele tematice care funcționează bine cu variabilele noastre.
utilities.less> linia 6: schimba in fundal: întunecat (@ buton-fundal-culoare, 5%);
tree-view.less> linia 29: schimba in culoare: lumina (@ foarte-light-gri, 15%) important!
panouri.less> linia 50: schimba in
fundal-imagine: -webkit-gradient liniar (@ panel-heading-background-color, darken (@ panel-heading-background-color, 5%));
... face ca gradientul să fie mai subtil pentru a se potrivi noilor noastre culori.
tooltips.less> linia 11: schimba in culoare: saturat (întunecat (@red, 10%), 5%);
Acum avem toate culorile din macheta PSD definită ca variabile și toate fișierele tematice sunt gata să răspundă definițiilor din "ui-variablesless".
Singurul lucru pe care l-am lăsat acum este de a mapa variabilele noastre personalizate de culoare față de variabilele implicite care au fost deja în vigoare atunci când am deschis pentru prima dată fișierul "ui-variablesless". Nu este necesar să modificați valoarea fiecărei variabile implicite, deoarece unii dintre ei își valorifică valorile de la alții din același fișier. De exemplu, avem @ text-color-highlight: #fff; iar această valoare este susținută pe linia următoare @ text-color-selectat: @ text-color-highlight;.
Înlocuiți întregul cod între comentariu // Culori și comentariul // Dimensiuni cu acest cod:
@ text-culoare: @ foarte-light-gri; // schimbat @ text-color-subtil: @ light-gri; // modificat @ text-color-highlight: @n_highlight; // schimbat @ text-color-selectat: @ text-color-highlight; @ text-color-info: @ cyan; // schimbat @ text-color-success: @blue; // schimbat @ text-color-warning: lighten (@orange, 15%); // modificat @ text-color-error: saturate (lighten (@red, 10%), 10%); // schimbat @ text-color-ignorat: @ text-color-subtil; @ text-color-added: @ text-color-success; @ text-color-redenumit: @ text-color-info; @ text-color-modified: @ text-color-warning; @ text-color-eliminat: @ text-color-error; @ background-color-info: @ cyan; // schimbat @ fundal-culoare-succes: @ albastru; // schimbat @ background-color-warning: lighten (@orange, 15%); // schimbat @ fundal-culoare-eroare: saturate (lighten (@red, 10%), 10%); // modificat @ background-color-highlight: rgba (255, 255, 255, 0.07); @ background-color-selected: @n_selected; // schimbat @ app-background-color: # 333; @ bază-fundal-culoare: lumina (@ tool-panel-background-color, 5%); @ bază-frontieră-culoare: @ n_darkerbg; @ pane-item-background-color: @ bază-fundal-culoare; @ panou-item-border-color: @n_darkerbg; // schimbat @ input-background-color: @ dark-gray; // schimbat @ input-border-color: @ base-border-color; @ tool-panel-background-color: @n_darkerbg; // schimbat @ tool-panel-border-color: @ base-border-color; @ inset-panel-background-color: @ n_defaultbg; // schimbat @ inset-panel-border-color: @ base-border-color; @ panel-heading-background-color: @gray; // modificat @ panoul-heading-border-color: fadein (@ base-border-color, 10%); @ overlay-background-color: @ gri-închis; // schimbat @ overlay-border-color: @ background-color-highlight; @ button-background-color: @gray; // schimbat @ button-background-color-hover: lumina (@ buton-background-color, 5%); @ button-background-color-selectat: @ dark-gray; // schimbat @ butonul-border-color: @ base-border-color; @ tab-bar-background-color: @ foarte-închis-gri; // schimbat @ tab-bar-border-color: întunecat (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // schimbat @ tab-background-color-active: @ foarte-închis-gri; // schimbat @ tab-border-color: @n_tabborder; // schimbat @ tree-view-background-color: @ tool-panel-background-color; @ tree-view-border-color: @ tool-panel-border-color; @ scrollbar-background-color: @ foarte-închis-gri; // modificat @ scrollbar-color: @gray; // schimbat @ ui-site-color-1: @ fundal-culoare-succes; // verde @ ui-site-color-2: @ fundal-culoare-info; // albastru @ ui-site-color-3: @ background-color-warning; // portocaliu @ ui-site-color-4: @purple; // schimbat @ ui-site-color-5: @red; // modificat
Ar fi puțin excesiv să explici fiecare rând din acest cod, dar căutați comentariul // modificat la sfârșitul unei linii pentru a vedea unde variabilele personalizate de culoare au fost mapate în funcție de variabilele implicite ale temei.
Rețineți că, dacă nu sunteți sigur unde se aplică aceste variabile, puteți verifica corelația lor cu ghidul de stil, așa cum este descris mai sus.
După salvarea fișierului dvs. "ui-variablesless" (și al celor pe care l-ați editat), interfața dvs. ar trebui să arate astfel:
Dacă apăsați Ctrl-Shift-P pentru a aduce paleta de comandă ar trebui să arate:
Și dacă apăsați ctrl-F panoul "găsi" din partea de jos a editorului ar trebui să arate astfel:
Puteți descărca terminalele UI și sintaxă completate "Nuance" la GitHub:
Și le puteți instala direct în Atom, mergând la Atom> Preferințe> Teme și tastați "Nuance" în câmpul de filtrare.
După ce ați terminat propria temă de sintaxă și / sau interfață personalizată, aveți opțiunea de a o distribui altor utilizatori Atom ca pachet. Pentru a face acest lucru, va trebui să aveți un depozit GitHub actualizat pentru fiecare. Pentru instrucțiuni despre cum să publicați un pachet Atom, consultați Atom Docs: Publicarea unui pachet
În acest tutorial am păstrat cât mai mult codul de fișier LESS neschimbat, concentrându-ne pe lucrul cu variabilele. Acestea fiind spuse, dacă doriți să vă aruncați mai adânc în codul temei, puteți controla prezentarea practic a oricărui aspect al sintaxei și al interfeței utile, de la forma filelor până la culoarea acoladelor și operatorilor.
Dacă vă dați seama că o bucată de cod sau un element UI au fost diferite, deschideți Atom în modul dev și folosiți inspectorul element pentru a vedea dacă există o clasă pe care să o puteți viza. Ca regulă generală, puteți personaliza aproape totul.
Deja, chiar și în modul beta, Atom arată extrem de promițătoare în capacitatea sa de a face personalizarea accesibilă pentru oricine are un background în tehnologiile web. Încercați-vă mâna la lucrul cu Atom, veți fi suflă departe de ceea ce puteți face!
