Share
Hva du skal skapeAtom, den nye kodeditoren som er utgitt av GitHub, er en av en fremvoksende smak av programmer som tillater webteknologi som mindre, JavaScript og HTML å kjøre innfødt i et skrivebordsmiljø. Atom installerer og kjører som en "vanlig" desktop app, men når den åpnes oppfører den seg på en måte som en hvilken som helst webutvikler vil finne kjent.
Atom er en "spesialisert variant av krom", og når du kjører i utviklingsmodus, får du tilgang til de samme "Utviklerverktøyene" som du kanskje er vant til fra Chrome. Så, akkurat som du kunne med et nettbasert webprogram, kan du kontrollere koden bak et hvilket som helst element i appens grensesnitt og se hva som gjør det krysset:
Hva dette betyr i praksis er at alle som har erfaring med webdesign og utvikling, umiddelbart vil finne kjennskap til hvordan Atom fungerer, og vil trolig være langt mer behagelig å skape endringer og tweaks enn med sammenlignbare programmer. Atoms visuelle styling er drevet av CSS, generert fra MINDRE, slik at du kan endre utseendet på samme måte som du ville noe mindre drevet nettsted.
Atom har to typer "temaer" ansvarlig for presentasjonsstilen:
Syntaks temaer kontroller alt i redaktørens indre rom, det vil si takruten, linjenumrene og kodeområdet.
UI temaer kontroller alt annet, det vil si faner, sidebar, knapper, overlegg, meldinger osv.
I denne opplæringen lærer du hvordan du oppretter begge disse temaene, produserer dem sammen, så hele grensesnittet blir jevnt restaurert. La oss begynne!
For øyeblikket er Atom bare Mac, og i sin beta-fase er tilgang via invitasjon. Hvis du ikke har en invitasjon, er mitt forslag å sende en forespørsel ut på Twitter eller på Atom forumet, og noen er bundet til å sende en vei. Last ned og installer det som du ville noen annen app.
Utvikle temaer vil innebære noen Atom-spesifikke kommandolinjebruk, så det første du må gjøre er å installere pakkene som aktiverer disse kommandoene. Etter å ha kjørt Atom for første gang, gå til og velg Atom> Installer Shell kommandoer, som installerer atom og apm (atompakkebehandler) kommandoer.
Jeg foreslår også å bruke en app som lar deg åpne en terminal fra hvilken som helst mappe du ser i Finder, da det vil gjøre det enklere å kjøre kommandoer på riktig sted. Jeg bruker personlig XtraFinder til å legge til et "New Terminal Here" -alternativ i Finder-kontekstmenyen.
Den grunnleggende prosessen for å lage et nytt Atom UI-tema er å forkjøre en av de to tilgjengelige standardtemaene fra GitHub, gi det ditt eget navn, og rediger de medfølgende filene.
For å gjøre dette, start med å sørge for at du har både en konto hos GitHub og GitHub for Mac (med mindre du foretrekker å bruke kommandolinjen) installert. Deretter går du til depotet for enten Atom Dark UI-tema eller Atom Light UI-tema. I denne opplæringen bruker vi en mørk fargepalett, slik at vi skal gaffel det mørke standardtemaet.
Øverst til høyre i det opprinnelige brukergrensesnittet klikker du på "Gaffel" -knappen:
Dette vil skape et duplikat av repoen under egen konto, dvs.. youraccount / atom-dark-ui. Det neste du må gjøre er å gi lageret ditt eget navn. I høyre sidepanel på ditt forked-lager klikker du på menyelementet "Innstillinger".
Øverst på siden Innstillinger ser du et felt for depotnavnet. Skriv inn et nytt navn etter eget valg, (i mitt tilfelle "nyanse-mørk-ui), i dette feltet er det sikkert å beholde" -ui "på slutten, og klikk deretter" Rename ":
Du er nå klar til å laste ned temaet ditt i frakoblet miljø, slik at du kan begynne å redigere den. For å gjøre dette, gå tilbake til repositoryets hovedside, og finn deretter og klikk på "Clone in Desktop" -knappen i sidefeltet:
"GitHub for Mac"Deretter laster du ned depotet for deg, til standard GitHub-posisjon. Fra listen over lagre i "GitHub for Mac", høyreklikk på det nylig klonede brukergrensesnittet ditt og velg "Vis i Finder":
Et Finder-vindu åpnes som viser UI-temamappen din i GitHub-mappen. Dobbeltklikk det for å gå inn i den faktiske mappen og se innholdet i.
Åpne en ny terminal på dette stedet, og kjør deretter kommandoen atom - dev
Denne kommandoen åpner Atom i utviklermodus, og viser temaets fil- og mappestruktur i sidefeltet. I denne sidebar klikker du på "package.json" -filen for å åpne den for redigering, og deretter endre navn, versjonsnummer og beskrivelse. Igjen, vær sikker på at du beholder "-ui" på slutten av temaet, og deretter lagre:
Til slutt må du la Atom vite hvordan du får tilgang til temamappen din fra den lokale GitHub-mappen. Gå tilbake til terminalen din, som fortsatt skal være i mappen til temaet ditt, og kjør kommandoen apm link
Gå nå tilbake til Atom og trykk cmd-alt-ctrl-L eller velg Vis> Oppdater fra toppmenyen for å laste inn grensesnittet, som vil oppdatere listen over tilgjengelige UI-temaer, slik at du kan bli valgt.
Fra toppmenyen velger du Atom> Innstillingerfor å åpne innstillingssiden og klikke på "Temaer" i panelets venstre sidefelt. Du bør se temaet ditt i listen merket "UI-temaer", så gå videre og velg det:
Ditt nye UI-tema er nå aktivt og klar til redigering, men før vi fortsetter skal vi lage et syntaksemne også, slik at du kan redigere begge samtidig, holde øye med hvordan de jobber sammen.
Opprette et nytt syntaks tema er en enklere prosess enn for et brukergrensesnitt tema.
I Atom, trykk cmd-shift-P å hente kommandopaletten, og start deretter å skrive "Generer syntaks tema". Når du ser Pakkegenerator: Generer syntaks tema vises klikk på den for å utføre kommandoen:
Et vindu vil dukke opp der du kan skrive inn banen og navnet på syntaxtemaet ditt. Uansett hva du bestemmer deg for å nevne temaet, bør det ende i "-syntax". Gitt mitt brukergrensesnitt tema ble kalt "nuance-dark-ui" Jeg heter mitt syntax tema "nuance-dark-syntax".
Etter å ha tastet inn sti og tema navn, trykk Tast inn å fortsette.
Atom vil generere et nytt syntaks tema for deg og åpne det opp i sidebjelken. Du bør nå kunne gå til Atom> Innstillinger igjen og velg ditt nye syntaks tema ved siden av Syntaks tema merkelapp:
Da vi skal jobbe både på brukergrensesnittet og syntaks temaene, vil vi kunne få tilgang til begge filene fra sidefeltet. Vi vil også være i "Dev Mode" mens vi redigerer disse filene, da dette vil bety at Atom automatisk oppdaterer utseendet når vi lagrer endringene våre.
Følg disse trinnene for å åpne begge temaene i dev-modus, og bruk denne samme prosessen når som helst i fremtiden må du komme tilbake og redigere temaene dine.
Gå til Atom> Preferanser for å åpne innstillingssiden.
Klikk Åpne ~ / .atom nederst i innstillingene, venstre sidefelt for å åpne din lokale Atom-mappe i Atom-sidebjelken:
Høyreklikk på Syntaks-temaet eller UI-temamappen i Atom-sidebjelken, og velg Vis i Finder:
Avslutt Atom for å lukke eksisterende forekomst (det er ikke i dev-modus slik at vi ikke trenger det), og deretter i Finder-vinduet som viser at temamappene dine åpner en ny terminal:
Kjør kommandoen atom - dev for å åpne mappen i Atom i dev-modus. Du bør nå se begge temamappene i sidefeltet:
Som vi er i dev-modus, kan vi nå åpne en temafil fra sidefeltet, og endringene blir automatisk synlige i Atom-grensesnittet.
Nå er vi klare til å starte designprosessen!
Det kan hende du finner det litt å finjustere fargene på temaet akkurat slik du vil ha dem, så det er sannsynligvis ikke den mest effektive tilretteleggen å designe direkte i kode.
I kildefilene som er vedlagt denne opplæringen, finner du en PSD kalt "colormockup.psd", som inneholder nok grensesnittelementer og kodesimuleringer for å lette fargepalettvalget. Bruk denne PSD til å visualisere fargene du vil bruke i brukergrensesnittet og syntaks temaene.
Jeg personlig liker jordiske farger, lite lys og lav kontrast som ikke brenner ut øynene mine, så jeg endte opp med dette:
Dette er min personlige preferanse, men du kan selvfølgelig gå med hvilken som helst stil som fungerer for deg.
Når mockupen din er ferdig, er du klar til å begynne å overføre fargeverdiene dine til dine temaer 'LESS kode'. Vi starter med syntakttemaet fordi det er enklere, med færre variabler enn UI-temaet.
I Atom-sidebjeldet ditt, utvider du mappen for syntaks temaet og åpnes stylesheets> colors.less. Du bør se dette:
Hvis du endrer verdien av noen av disse variablene, lagrer du filen, du bør øyeblikkelig se oppdateringen av syntaksområdet. For eksempel, hvis du endrer verdien av @mørkegrå til # F00 du bør se bakgrunnsendringsfarge på ryggsekken:
Mmm, fintFargene som er oppført i denne filen, er i sin tur kartlagt til ulike aspekter av syntaksen via "syntax-variables.less" og "base.less" -filene. Åpne disse filene opp og ta et øyeblikk for å få et raskt blikk gjennom dem. I filen "syntax-variables.less" vil du se variabler hentet fra filen "colors.less". Men i "base.less" -filen ser du variabler fra både "colors.less" og "syntax-variables.less" -filen.
Når vi legger til vår nye fargevalg i dette temaet, endrer vi verdien av variabler i "farger.frie" på en måte som betyr at navnene deres ikke lenger kan reflektere fargen de inneholder. For eksempel, hvor variabelen @purple ble brukt, vil vi isteden bruke en grønn nyanse.
For å være grundig vil du ideelt opprette nye variabelnavne som gjenspeiler det nye fargevalgssystemet, men i form av denne opplæringen vil jeg ikke sette deg gjennom å måtte erstatte alle forekomster av de gamle variabelenavnene i "syntaks- variables.less "og" base.less "-filen.
Så selv om det kan virke litt rart, vil vi bare tildele fargene til vår nye ordning direkte mot eksisterende variabelnavn i "colors.less". På denne måten må du bare redigere en enkelt fil for å lage ditt syntaks tema.
For å hjelpe deg å forstå hvilke variabler som påvirker hvilke aspekter av fargeskjemaet, erstatt hele koden til "colors.less" -filen med dette:
// Disse fargene er spesifikke for temaet. Ikke bruk i en pakke! // Vanlig tekst og linjenummer @ veldig lysegrå: # c5c8c6; // Kommentarer @ lysegrå: # 969896; // Nåværende linje høyde @gray: # 373b41; // Gutter bakgrunn @ mørkegrå: # 282a2e; // Kodeområde bakgrunn @ veldig mørkegrå: # 1d1f21; @cyan: # 8abeb7; @blå: # 81a2be; @purple: # b294bb; @green: # b5bd68; @red: # cc6666; @orange: # de935f; @ lysorange: # f0c674;
Kommentarene som legges til i det første avsnittet, forteller deg hvor hver av de "grå" fargevariablene brukes i syntaksområdet.
Den andre delen med de syv fargevariablene er litt mer komplisert, da hver og en påvirker en annen type kode. For å få en grov ide om hvordan disse variablene vil vises, opprett en ny PHP-fil og lim inn i dette:
Accentsconagua
mørkere (@red, 10%) / * Kommentarer> @ lysegrå * / // funksjon = .storage> @purple // function_name = .entity.name.function> @blå funksjonfunksjonnavn () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green retur array ('string' => 'string'); // $ = .punctuation.definition.variable> @ veldig-lysegrå // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ lysorange / / true = .constant> @orange $ var_name = nytt SUPPORT_CLASS (true); ?> Merk: Denne filen er også inkludert i kildefilene.
Når du ser på koden ovenfor i Atom, vil du se eksempler på hvordan hver av de syv fargevariablene ser ut når den brukes på syntaks. Den samme koden brukes i den angitte "colormockup.psd", slik at du kan se hvordan fargene korrelerer.
Ta en titt på de medfølgende kommentarene for en beskrivelse av hvilke fargevariabler som er knyttet til hvert element i koden. Du kan bruke denne koden sammen med PSD for å finne ut hvilke variabler farger du valgte, skal kartlegges i din "colors.less" -fil.
Vi begynner med å overføre de "grå" fargene fra PSD-mockupen din.
Den første variabelen som er oppført i "colors.less" er @ Meget lys grå- som vi vet, (fra kommentarene du nettopp har lagt til), brukes på "Vanlig tekst og linjenummer". Gå til din PSD og kopier hexekoden til fargen du valgte for dine linjenumre. Lim inn den verdien, som i dette tilfellet er # 9b836a, inn i "colors.less" for å erstatte standard for @ Meget lys grå-.
Deretter får du fargeheksekoden du valgte for kommentartekst og legger den til variabelen @lysegrå. Fortsett på denne måten til alle fem "grå" variablene er oppdatert. For temaet "Nuance-Dark-Syntax" jeg brukte:
// Vanlig tekst og linjenummer @ veldig lysegrå: # 9b836a; // Kommentarer @ Lysegrå: # 624e3b; // Nåværende linje høyde @gray: # 352b22; // Gutter bakgrunn @ mørkegrå: # 28211a; // Kodeområde bakgrunn @ veldig mørkegrå: # 1f1913;
Lagre filen "colors.less", og du bør umiddelbart se at syntaksområdet ser ganske annerledes ut:
Nå skal du overføre de syv fargevariablene i den andre delen.
Den første av disse variablene er @cyan, og innholdet i PHP-filen vi opprettet tidligere inneholder kommentaren array = .support.function> @cyan, forteller oss denne fargen brukes på ordet "array". Gå til PSD og kopier hexekoden du brukte på ordet "array" der. I "nyanse" -temaet var dette # 446675.
Gjenta den samme prosessen med å finne hvert variabelnavn i kommentarene til PHP-filen din for å se hvilken type kode den gjelder, og kopier deretter fargen du valgte fra PSD-en din.
For temaet "nyanse" jeg brukte:
@cyan: # 446675; @blå: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ lysorange: # b5a163;
Etter å ha lagret, ta en titt på PHP-filen din, og du bør se alle dine nye farger reflektert i den, som matcher PSD-en din:
Syntaks temaet er nå ferdig! Nå er det på tide å gå videre til UI-temaet.
Å legge til fargevalg i UI-temaet er litt vanskeligere enn syntaksetemaet, da det bruker ganske mange flere variabler. I tillegg er ikke alle farger i standardtema definert som variabler, slik at du i noen tilfeller må redigere de aktuelle stilene.
De fleste fargene som brukes i brukergrensesnittet, er definert i filen "ui-variables.less". Gå videre og utvider mappen din syntaksemner og åpne filen for redigering fra mappen "stylesheets".
Atom skip med en veldig nyttig "Styleguide" som gir deg en forhåndsvisning av alle UI-elementene påvirket av temaet ditt. Åpne den ved å gå til Pakker> Styleguide> Show.
For det meste finner du de variable navnene i filen "ui-variables.less" for å være beskrivende og for å korrelere, i rekkefølge, med brukergrensesnittelementene som er oppført i Styleguide. For eksempel er de første flere variablene prefikset @ Tekstfarge og korrelerer med den første delen av Styleguide, merket "Tekstklasser".
Hvis du ikke er sikker på hvilken variabel vil påvirke hva, vær ikke redd for å endre variabler tilfeldig for å se hvilke aspekter av Styleguide som er endret.
Ikke alle farger i standard UI-tema har tilknyttet MINDRE variabler i filen "ui-variables.less". Noen farger er kodet direkte inn i andre mindre filer i temaet.
Hvis du ikke er sikker på hvor en brukerfarge kommer fra, og det ikke ser ut til å ha en tilknyttet variabel, bruk elementinspektøren på det aktuelle området for å finne klassenavnet som er ansvarlig for fargen. Kjør deretter et søk i Finder for det klassenavnet for å prøve å avgjøre hvilket av temaets MINDRE filer som inneholder klassen.
For eksempel har sidefeltet en fargeheksekode på # 303030 i standardtemaet som ikke er definert hvor som helst i "ui-variables.less". Inspeksjon av elementet viser at heksekoden kommer fra klassen .fokuser-panel.
Kjører et Finder-søk i brukergrensesnittets mappe for "fokusable panel" avslører at denne klassen er inneholdt i "tree-view.less" -filen.
Filen kan da redigeres, plasserer en variabel fra filen "ui-variables.less" i stedet for en hardkodet hex-verdi.
Noen ganger vil søket ikke gi noen resultater, uansett grunn, og du må kanskje gjøre ting på den harde måten og manuelt gå gjennom hver UI-temafil til du finner klassen du vil endre.
UI-temaet kan ikke få tilgang til fargevariablene som er definert av syntakttemaet, men vi ønsker å bruke de samme fargene på begge temaene slik at de samsvarer. Som sådan må vi duplisere fargevariablene fra vårt syntakttema i vårt brukergrensesnitt.
Øverst på "ui-variables.less" temapastaen i alle variablene fra ditt syntaks tema:
@ veldig lysgrå: # 9b836a; @ lysgrå: # 624e3b; @gray: # 352b22; @ mørkegrå: # 28211a; @ veldig mørkegrå: # 1f1913; @cyan: # 446675; @blå: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ lysorange: # b5a163;
I tillegg til disse variablene er det ytterligere fem tilpassede variabler jeg har definert for å bære over alle fargene fra min mockup, også klistret øverst i filen "ui-variables.less":
// BG av valgt fil i sidelinjen @n_selected: # 2b231b; // BG i sidebjelken @n_defaultbg: # 241d17; // BG nederst på verktøylinjen og "finn" panel @ n_darkerbg: # 191613; // Farge på valgt tekst i sidelinjen @ n_highlight: # a37748; // Grensefarge på faner @n_tabborder: # 372d26;
Disse variablene vil bli brukt på flere steder, men kommentarene som følger med gir deg et eksempel på bruken av hver, noe som vil hjelpe deg med å finne ut hvilke fargekoder du bør kopiere fra PSD. Også, hvor det er mulig, har lagene i PSD blitt kalt med referanse til variabelen de påvirker.
Som nevnt ovenfor er noen av standardtemaets fargeværdier hardkodede heller enn å være tilgjengelige som variabler. I noen tilfeller er variabler definert, men i andre filer enn hovedfilen "ui-variables.less". For å gjøre det enklere å bruke fargeskjemaet vårt sentralt via filen "ui-variables.less", skal vi definere noen ekstra variabler og gjøre noen tilpasninger til noen temafiler.
Lim inn følgende kode i "ui-variables.less" under fargevariablene du la til i forrige trinn:
// TILLEGG FARGER / VARER TILGJENGET TIL MINDRE FILER //tree-view.less @ tree-view-selected-bg: @n_selected; // ny> linje 8 @ sidebar: @n_defaultbg; // ny> linje 15 @ sidebar-fokus: lyser (@n_defaultbg, 0,5%); // ny> linje 19 //tabs.less @ tab-default-bg: @n_defaultbg; // nytt> linje 45 //tooltips.less @ tip-background-color: lighten (@ veldig lysgrå, 10%); // variabler tatt ut av tooltips.less og plassert her for tilgang @ tips-tekst-farge: @ veldig mørkegrå; // variabler tatt ut av tooltips.less og plassert her for tilgang
Legg merke til kommentarene som følger med, følg med på hvilke filer som skal endres og på hvilken linje for å kunne bruke disse variablene.
Med de nye variablene på plass, kan du nå gjøre følgende endringer i temafilene dine:
tree-view.less> linje 8: endre til bakgrunn: @ tree-view-selected-bg;
tree-view.less> linje 15: endre til bakgrunn: @sidebar;
tree-view.less> linje 19: endre til bakgrunn: @ sidebar-fokus;
tabs.less> linje 45: endre til:
bakgrunnsbilde: -webkit-lineær-gradient (topp, lys (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> slette linjer 4 og 5:
@ tips-bakgrunns-farge: #fff; @ tips-tekst-farge: # 333;
Disse to linjene slettes fra "tooltips.less", da variablene nå er definert i hovedfilen "ui-variables.less" i stedet.
Vi har nå gjort alle nødvendige justeringer for å gå sammen med våre nylig definerte variabler, men det er noen flere tilpasninger for å erstatte hardkodede farger og få alle temafilene til å fungere godt med våre variabler.
utilities.less> linje 6: endre til bakgrunn: mørkere (@ knapp-bakgrunnsfarge, 5%);
tree-view.less> linje 29: endre til farge: lyser (@ veldig lysgrå, 15%)! viktig;
panels.less> linje 50: endre til
bakgrunnsbilde: -webkit-lineær-gradient (@ panel-heading-bakgrunnsfarge, mørkere (@ panel-heading-bakgrunnsfarge, 5%));
... gjør graden mer subtil for å passe til våre nye farger.
tooltips.less> linje 11: endre til farge: mettet (mørkere (@red, 10%), 5%);
Vi har nå alle fargene fra vår PSD mockup definert som variabler, og alle temafiler klar til å svare på definisjonene i "ui-variables.less".
Det eneste som er igjen, er å kartlegge våre tilpassede fargevariabler mot standardvariablene som allerede var på plass da vi først åpnet filen "ui-variables.less". Det er ikke nødvendig å endre verdien av hver enkelt standardvariabel, fordi noen av dem piggy-backer sine verdier fra andre i samme fil. For eksempel har vi @ tekst-farge høydepunkt: #fff; og denne verdien er piggy støttet på neste linje i @ tekstfargevalg: @ tekstfargelys;.
Erstatt all koden mellom kommentaren // Farger og kommentaren // Størrelser med denne koden:
@ tekstfarge: @ veldig lysgrå; // endret @ tekst-farge-subtil: @ lysegrå; // endret @ tekst-farge-høydepunkt: @n_highlight; // endret @ tekstfargevalg: @ tekstfargelys; @ tekst-farge-info: @cyan; // endret @ tekst-fargesuksess: @blue; // endret @ tekstfargevarsel: lyser (@orange, 15%); // endret @ tekstfargebilde: mette (lysere (@red, 10%), 10%); // endret @ tekst-farge ignorert: @ tekst-farge-subtil; @ tekst-fargelagt: @ tekst-fargesuksess; @ tekst-farge-omdøpt: @ tekst-farge-info; @ tekstfargemodifisert: @ tekstfargevarsel; @ tekstfarge-fjernet: @ tekstfargevalg; @ bakgrunnsfarge-info: @cyan; // endret @ bakgrunnsfarge-suksess: @blue; // endret @ bakgrunnsfarvevarsel: lys (@orange, 15%); // endret @ bakgrunnsfarge-feil: mettet (lyser (@red, 10%), 10%); // endret @ bakgrunnsfarger-høydepunkt: rgba (255, 255, 255, 0.07); @ bakgrunnsfarge valgt: @n_selected; // endret @ app-bakgrunnsfarge: # 333; @ base-background-color: lighten (@ verktøy-panel-bakgrunnsfarge, 5%); @ base-border-farge: @n_darkerbg; @ pane-item-background-color: @ base-background-color; @ pane-item-border-farge: @n_darkerbg; // endret @ input-bakgrunnsfarge: @ mørkegrå; // endret @ input-border-farge: @ base-border-farge; @ verktøylinje-bakgrunnsfarge: @n_darkerbg; // endret @ verktøylinje-grense-farge: @ base-border-farge; @ input-panel-background-color: @n_defaultbg; // endret @ innstilt-panel-grense-farge: @ base-border-farge; @ panel-heading-bakgrunnsfarge: @gray; // endret @ paneler-grense-farge: fadein (@ base-border-farge, 10%); @ overlay-bakgrunnsfarge: @ mørkegrå; // endret @ overlay-border-farge: @ bakgrunnsfarge-høydepunkt; @ knapp-bakgrunnsfarge: @gray; // endret @ knapp-bakgrunns-fargepulver: lyser (@ knapp-bakgrunnsfarge, 5%); @ knapp-bakgrunns-fargevalg: @ mørkegrå; // endret @ knapp-grense-farge: @ base-border-farge; @ fanebar-bakgrunnsfarge: @ veldig mørkegrå; // endret @ tabulator-grense-farge: mørkere (@ tab-bakgrunnsfarge-aktiv, 10%); @ tab-bakgrunnsfarge: @n_defaultbg; // endret @ fanebakgrunn-farge-aktiv: @ veldig mørkegrå; // endret @ tab-border-farge: @n_tabborder; // endret @ tree-view-background-color: @ verktøy-panel-bakgrunnsfarge; @ tree-view-border-farge: @ verktøylinje-grense-farge; @ rulleskjerm-bakgrunnsfarge: @ veldig mørkegrå; // endret @ rullefarge: @gray; // endret @ ui-site-color-1: @ bakgrunnsfarge-suksess; // grønn @ ui-site-color-2: @ bakgrunnsfarge-info; // blå @ ui-site-color-3: @ bakgrunnsfargevarsel; // orange @ ui-site-color-4: @purple; // endret @ ui-site-color-5: @red; // endret
Det ville være litt overdrevet å forklare hver linje av denne koden, men se etter kommentaren // endret på slutten av en linje for å se hvor våre tilpassede fargevariabler er kartlagt mot temaets standardvariabler.
Husk at hvis du ikke er sikker på hvor disse variablene gjelder, kan du sjekke deres korrelasjon med Styleguide, som beskrevet ovenfor.
Etter at du lagret filen "ui-variables.less", (og de andre du redigerte), burde grensesnittet nå se slik ut:
Hvis du trykker på ctrl-shift-P for å hente kommandopaletten skal det se ut som:
Og hvis du trykker på ctrl-F "Finn" -panelet nederst på redigeringen bør se ut som:
Du kan laste ned de ferdige "Nuance" brukergrensesnitt og syntaks temaer på GitHub:
Og du kan installere dem direkte i Atom ved å gå til Atom> Innstillinger> Temaer og skriver "Nuance" i filterfeltet.
Når du har fullført ditt eget tilpassede syntaks og / eller UI-tema, har du muligheten til å dele den med andre Atom-brukere som en pakke. For å gjøre dette må du ha et oppdatert GitHub-depot for hver. For instruksjoner om hvordan du publiserer en Atom-pakke, se Atom Docs: Publisere en pakke
I denne opplæringen har vi opprettholdt den eksisterende MINRE filkoden uendret så mye som mulig, med fokus på å jobbe med variabler. Når det er sagt, hvis du vil dykke dypere inn i temakoden, kan du styre presentasjonen av nesten alle aspekter av syntaksen og brukergrensesnittet, fra formen på kategoriene dine til fargen på de krøllete båndene og operatørene.
Hvis du finner deg selv som ønsker at et stykke kode eller UI-element var annerledes, bare åpne Atom i dev-modus og bruk elementinspektøren for å se om det er en klasse på plass som du kan målrette mot. Som en generell regel kan du tilpasse stort sett alt.
Allerede, selv i beta-modus, ser Atom ekstremt lovende ut på sin evne til å gjøre tilpasning tilgjengelig for alle med bakgrunn i webteknologi. Prøv hånden din når du arbeider med Atom, du vil bli blåst bort av det du kan gjøre!
