Share
Vad du ska skapaAtom, den nya kodredigeraren som släpptes av GitHub, är en av en framväxande smak av appar som tillåter webbteknik som mindre, JavaScript och HTML att köras inhemskt i en skrivbordsmiljö. Atom installeras och körs som en "vanlig" desktop app, men när den öppnas uppträder den på ett sätt som en webutvecklare kommer att hitta bekant.
Atom är en "specialiserad variant av krom" och när du kör i utvecklarläge ger du tillgång till samma "utvecklarverktyg" som du kanske brukar använda från Chrome. Så, precis som du kan med alla webbapplikationer, kan du inspektera koden bakom något element i appens gränssnitt och se vad som gör det kryssat:
Vad det här innebär i praktiken är att alla som har erfarenhet av webbdesign och utveckling kommer att omedelbart hitta bekantskap med hur Atom fungerar, och kommer sannolikt att vara mycket bekvämare och skapa ändringar och tweaks än med jämförbara program. Atoms visuella styling drivs av CSS, genererad från LESS, så att du kan ändra sitt utseende på samma sätt som du skulle ha en mindre drivlad webbplats.
Atom har två typer av "teman" som är ansvariga för dess presentationsstil:
Syntaks teman kontrollera allt i redaktörens inre utrymme, dvs rännan, radnummer och kodområde.
UI teman kontrollera allt annat, dvs flikar, sidofält, knappar, överlagringar, meddelanden mm.
I denna handledning lär du dig hur du skapar båda dessa typer av teman, producerar dem i tandem så hela gränssnittet är enhetligt återställt. Låt oss börja!
För närvarande är Atom endast Mac, och under sin beta-fas är åtkomst via inbjudan. Om du ännu inte har en inbjudan är mitt förslag att ställa en förfrågan på Twitter eller Atom-forumet och någon är skyldig att skicka en väg. Ladda ner och installera det som du skulle någon annan app.
Utveckla teman kommer att innebära vissa Atom-specifika kommandoradsanvändning, så det första du behöver göra är att installera de paket som möjliggör dessa kommandon. Efter att ha kört Atom för första gången, gå till och välj Atom> Installera Shell-kommandon, som installerar atom och apm (atompaket chef) kommandon.
Jag föreslår också att du använder en app som låter dig öppna en terminal från vilken mapp du tittar i Finder, eftersom det kommer att göra det lättare att köra kommandon på rätt plats. Personligen använder jag den fria XtraFinder-enheten för att lägga till ett "New Terminal Here" -alternativ i min Finder-snabbmeny.
Den grundläggande processen för att skapa ett nytt Atom UI-tema är att gaffla en av de två tillgängliga standardteman från GitHub, ge det ditt eget namn och redigera de medföljande filerna.
För att göra detta, börja med att se till att du har både ett konto hos GitHub och GitHub for Mac (om du inte föredrar att använda kommandoraden) installerad. Gå sedan till förvaret för antingen Atom Dark UI-tema eller Atom Light UI-tema. I denna handledning använder vi en mörk färgpalett, så vi ska gaffla det mörka standardtemat.
Klicka på "Gaffel" -knappen högst upp till höger i det ursprungliga UI-arkivet:
Detta skapar en duplikat av repo på eget konto, dvs. youraccount / atom-dark-ui. Nästa sak du behöver göra är att ge förvaret ditt eget namn. Klicka på menyalternativet "Inställningar" i höger sidofält i ditt gaffelförteckning.
Överst på sidan "Inställningar" visas ett fält för förvarets namn. Skriv ett nytt namn efter eget val, (i mitt fall "nuance-dark-ui), i det här fältet är det säkert att behålla" -ui "i slutet och klicka sedan på" Byt namn ":
Du är nu redo att ladda ner ditt tema i din offline-miljö så att du kan börja redigera den. För att göra detta, gå tillbaka till ditt förrådets huvudsida och hitta sedan och klicka på knappen "Klon i skrivbord" i sidofältet:
"GitHub för Mac"kommer sedan ladda ner förvaret för dig, till din standard GitHub-plats. Från din lista över repositories i "GitHub for Mac", högerklicka på ditt nyklonade användargränssnitt och välj "Show in Finder":
Ett Finder-fönster öppnas som visar din mapp i mappen i din GitHub-mapp. Dubbelklicka på det för att gå in i den faktiska mappen och se innehållet inom.
Öppna en ny terminal på den här platsen och kör sedan kommandot atom - dev
Kommandot öppnar Atom i utvecklarläge, vilket visar ditt temas fil- och mappstruktur i sidofältet. I det här sidofältet klickar du på filen "package.json" för att öppna den för redigering och ändra namn, versionsnummer och beskrivning. Återigen, se till att du behåller "-ui" i slutet av temanamnet och spara sedan:
Slutligen måste du låta Atom veta hur man öppnar tematmappen från sin lokala GitHub-mapp. Gå tillbaka till din terminal, som fortfarande bor i mappen på ditt tema och kör kommandot apm länk
Gå nu tillbaka till Atom och tryck cmd-alt-ctrl-L eller välj Visa> Ladda om från övermenyn för att ladda om gränssnittet, vilket uppdaterar listan över tillgängliga användargränssnitt, så att dina kan väljas.
Från den övre menyn väljer du Atom> Inställningarför att öppna inställningssidan och klicka på "Teman" i panelens vänstra sidofält. Du bör se ditt tema i listan med etiketten "UI-teman" så fortsätt och välj det:
Ditt nya användargränssnitt är nu aktivt och redo för redigering, men innan vi fortsätter kommer vi att skapa ett syntaxtema för att du kan redigera båda samtidigt och hålla ett öga på hur de fungerar tillsammans.
Att skapa ett nytt syntaxtema är en enklare process än för ett användargränssnitt.
I Atom trycker du på cmd-shift-P för att hämta kommandopaletten och börja sedan skriva "Generate Syntax Theme". När du ser Paketgenerator: Generera syntakttema visas klicka på den för att utföra kommandot:
Ett fönster visas där du kan ange sökvägen och namnet på ditt syntaxtema. Vad du än bestämmer för att namnge ditt tema borde det sluta i "-syntax". Med tanke på mitt användargränssnitt var namnet "nuance-dark-ui" jag namngav mitt syntaxtema "nuance-dark-syntax".
Efter att du har skrivit in din sökväg och temat namn trycker du på Stiga på att fortsätta.
Atom kommer att generera ett nytt syntaxtema för dig och öppna det i sidofältet. Du borde nu kunna gå till Atom> Inställningar igen och välj ditt nya syntaxtema bredvid Syntax Tema märka:
Eftersom vi arbetar både med användargränssnitt och syntaxteman tillsammans vill vi ha tillgång till båda filerna från sidofältet. Vi vill också vara i "Dev Mode" medan vi redigerar dessa filer eftersom det kommer att innebära att Atom automatiskt uppdaterar sitt utseende när vi sparar våra ändringar.
Följ dessa steg för att öppna båda teman i dev-läge och använd samma process när som helst i framtiden måste du komma tillbaka och redigera dina teman.
Gå till Atom> Inställningar för att öppna inställningssidan.
Klick Öppna ~ / .atom längst ner i inställningarna vänster sidofält för att öppna din lokala Atom-mapp i Atom sidobalk:
Högerklicka på ditt syntaxtema eller UI-temomapp i Atom-sidfältet och välj Visa i Finder:
Avsluta Atom för att stänga existerande instans (det är inte i dev-läge så vi behöver inte det), och sedan i Finder-fönstret som visar dina tematmappar öppnar en ny terminal:
Kör kommandot atom - dev för att öppna mappen i Atom i dev-läge. Du borde nu se båda temamapporna i sidofältet:
Eftersom vi är i dev-läge kan vi nu öppna en temafil från sidofältet och ändringar kommer automatiskt att synas i Atom-gränssnittet.
Nu är vi redo att starta designprocessen!
Du kanske tycker att det tar lite tweaking för att få färgerna på ditt tema precis hur du vill ha dem, så att designa direkt i kod är förmodligen inte den mest effektiva metoden.
I källfilerna som bifogas denna handledning hittar du en PSD med namnet "colormockup.psd", som innehåller tillräckligt med gränssnittselement och kodsimuleringar för att underlätta ditt val av färgpalett. Använd denna PSD för att visualisera färgerna som du vill använda i dina användargränssnitt och syntaxteman.
Personligen gillar jag jordiska färger, lågt ljus och låg kontrast som inte brinner ut mina ögon, så jag slutade med det här:
Detta är min personliga preferens, men du kan naturligtvis gå med vilken stil som helst som fungerar för dig.
När din mockup är klar är du redo att börja överföra dina färgvärden till dina teman LESS-kod. Vi börjar med syntaxtemat på grund av att det blir enklare, med färre variabler än UI-temat.
I din Atom sidobalk utökar du syntaxtemaets mapp och öppnas stylesheets> colors.less. Du borde se detta:
Om du ändrar värdet för någon av dessa variabler, spara sedan filen, så ska du genast se uppdateringen av syntaxområdet. Om du till exempel ändrar värdet på @mörkgrå till # F00 du bör se bakgrundsändringsfärgen för rännan:
Mmm trevligtFärgerna i denna fil kartläggs i sin tur till olika aspekter av syntaxen via "syntax-variables.less" och "base.less" -filerna. Öppna dessa filer och ta en stund för att få en snabb blick genom dem. I filen "syntax-variables.less" ser du variabler som tagits från filen "colors.less". I filen "base.less" ser du variabler från både "colors.less" och "syntax-variables.less" -filen.
När vi lägger till vårt nya färgschema i detta tema ändrar vi värdet av variabler i "colors.less" på ett sätt som betyder att deras namn kanske inte längre återspeglar den färg de innehåller. Till exempel var variabeln @lila användes, använder vi istället en grön nyans.
För att vara noggrann skulle du helst skapa nya variabla namn som återspeglar det nya färgschemat, men för syftet med denna handledning vill jag inte sätta dig igenom att behöva byta ut varje förekomst av de gamla variabla namnen i "syntax- variabler.lösa "och" base.less "-filen.
Så även om det kan tyckas lite konstigt, fördelar vi bara färgerna på vårt nya system direkt mot befintliga variabla namn i "colors.less". På så sätt behöver du bara redigera en enda fil för att skapa ditt syntaxtema.
För att hjälpa dig att förstå vilka variabler som påverkar vilka aspekter av färgschemat, ersätt den fullständiga koden för "colors.less" -filen med följande:
// Dessa färger är specifika för temat. Använd inte i ett paket! // Enkel text och radnummer @ väldigt ljusgrå: # c5c8c6; // Kommentarer @ ljusgrå: # 969896; // Nuvarande radmarkering @gray: # 373b41; // Gutter bakgrund @ mörkgrå: # 282a2e; // Kodområde bakgrund @ mycket mörkgrå: # 1d1f21; @cyan: # 8abeb7; @blå: # 81a2be; @purple: # b294bb; @green: # b5bd68; @red: # cc6666; @orange: # de935f; @ ljusorange: # f0c674;
De kommentarer som läggs till i det första avsnittet berättar om var och en av de "grå" färgvariablerna används i syntaxområdet.
Den andra sektionen med de sju färgvariablerna är lite mer komplicerad eftersom var och en påverkar en annan typ av kod. För att få en grov uppfattning om hur dessa variabler ska visas skapar du en ny PHP-fil och klistra in i följande:
Accentsconagua
mörkare (@red, 10%) / * Kommentarer> @ ljusgrå * / // funktion = .storage> @purple // function_name = .entity.name.function> @blue function function_name () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green retur array ('string' => 'string'); // $ = .punctuation.definition.variable> @ mycket ljusgrå // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ ljus-orange / / true = .constant> @orange $ var_name = nytt SUPPORT_CLASS (true); ?> Notera: den här filen ingår också i källfilerna.
När du visar ovanstående kod i Atom ser du exempel på hur var och en av de sju färgvariablerna ser ut när de tillämpas på syntax. Samma kod används i den angivna "colormockup.psd" så att du kan se hur färgerna korrelerar.
Kolla in de medföljande kommentarerna för en beskrivning av vilka färgvariabler som är associerade med varje element i koden. Du kan använda den här koden tillsammans med PSD för att hjälpa dig att ta reda på vilka variabler färgerna du valde ska mappas till i din "colors.less" -fil.
Vi börjar med att överföra de "grå" färgerna från din PSD-mockup.
Den första variabeln som anges i "colors.less" är @ Mycket-ljusgrå som vi vet (från de kommentarer du just lagt till), används på "Vanlig text och radnummer". Gå till din PSD och kopiera hexokoden för den färg du valde för dina radnummer. Klistra in det här värdet, vilket i detta fall är # 9b836a, in i "colors.less" för att ersätta standard för @ Mycket-ljusgrå.
Därefter får du den färg hexcode du valde för kommentartext och lägger till den mot variabeln @ljusgrå. Fortsätt på detta sätt tills alla fem "grå" variabler uppdateras. För temaet "nyans-mörk-syntax" som jag använde:
// Enkel text och radnummer @ mycket ljusgrå: # 9b836a; // Kommentarer @ ljusgrå: # 624e3b; // Nuvarande radmarkering @gray: # 352b22; // Gutter bakgrund @ mörkgrå: # 28211a; // Kodområde bakgrund @ mycket mörkgrå: # 1f1913;
Spara filen "colors.less" och du bör genast se din syntaxområde ser ganska annorlunda ut:
Nu för att överföra de sju färgvariablerna i den andra sektionen.
Den första av dessa variabler är @cyan, och innehållet i den PHP-fil som vi skapade tidigare innehåller kommentaren array = .support.function> @cyan, berätta för oss denna färg används på ordet "array". Gå till din PSD och kopiera den hexcode du tillämpade på ordet "array" där. I "nyans" -temat var detta # 446.675.
Upprepa samma process för att hitta varje variabelnamn i kommentarerna i din PHP-fil för att se vilken typ av kod den gäller och kopiera sedan över den färg du valde från din PSD.
För "nyans" -temat jag använde:
@cyan: # 446675; @blå: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ ljusorange: # b5a163;
När du har sparat, ta en titt på din PHP-fil och du bör se alla dina nya färger reflekterade i den, som matchar din PSD:
Ditt syntaxtema är nu klart! Nu är det dags att gå vidare till UI-temat.
Lägga till ditt färgschema i UI-temat är lite svårare än syntakttemat eftersom det använder ganska många fler variabler. Dessutom definieras inte alla färger i standardtemat som variabler, så i vissa fall behöver du redigera de aktuella stilerna.
De flesta av de färger som används i UI-temat definieras i filen "ui-variables.less". Gå vidare och expandera din syntaxtema-mapp och öppna filen för redigering från mappen "stylesheets".
Atomfartyg med en mycket användbar "Styleguide" som ger dig en förhandsgranskning av alla UI-element som påverkas av ditt tema. Öppna den genom att gå till Paket> Styleguide> Show.
För det mesta hittar du de variabla namnen i filen "ui-variables.less" för att vara beskrivande och korrelera i ordning med de UI-element som anges i Styleguide. Till exempel är de första flera variablerna prefixade @text färg och korrelerar med den första delen av Styleguide, märkta "Text klasser".
Om du inte är säker på vilken variabel som påverkar vad, var inte rädd att ändra variabler slumpmässigt för att se vilka aspekter av Styleguide som ändras.
Inte alla färger i standardgränssnittet har associerat LESS-variabler i filen "ui-variables.less". Vissa färger är kodade direkt i andra LÄSTA filer i temat.
Om du inte är säker på hur en UI-färg kommer från och det inte verkar ha en tillhörande variabel, använd elementinspektören i det aktuella området för att hitta det klassnamn som är ansvarigt för färgen. Kör sedan en sökning i Finder för det klassnamnet för att försöka bestämma vilket av tematets MINDRE filer som innehåller klassen.
Till exempel har sidofältet en färg hexcode av # 303030 i standardtemat som inte definieras någonstans i "ui-variables.less". Inspektera elementet visar att hexkoden kommer från klassen .fokuserbar-panel.
Körning av en Finder-sökning i användargränssnittets mapp för "fokuserbar panel" avslöjar att den här klassen finns i filen "tree-view.less".
Filen kan sedan redigeras och placerar en variabel från filen "ui-variables.less" istället för ett hårdkodat hex-värde.
Ibland kommer din sökning inte att ge några resultat, oavsett orsak, och du kan behöva göra saker på den svåra vägen och manuellt gå igenom varje tematfil för UI tills du hittar den klass du vill ändra.
UI-temat kan inte nå de färgvariabler som definieras av syntakttemat, men vi vill använda samma färger över båda teman så att de matchar. Som sådan måste vi duplicera färgvariablerna från vårt syntaxtema i vårt användargränssnitt.
På toppen av "ui-variables.less" temapastan i alla variabler från ditt syntaxtema:
@ väldigt ljusgrå: # 9b836a; @ ljusgrå: # 624e3b; @gray: # 352b22; @ mörkgrå: # 28211a; @ mycket mörkgrå: # 1f1913; @cyan: # 446675; @blå: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ ljusorange: # b5a163;
Förutom dessa variabler finns det ytterligare fem anpassade variabler jag definierade för att överföra alla färgerna från min mockup, klistrade även överst i filen "ui-variables.less":
// BG av vald fil i sidofältet @n_selected: # 2b231b; // BG i sidofältet @n_defaultbg: # 241d17; // BG av nedre verktygsfältet och "hitta" panelen @ n_darkerbg: # 191613; // Färg på vald text i sidofältet @ n_highlight: # a37748; // Gränsfärg på flikar @ n_tabborder: # 372d26;
Dessa variabler kommer att användas på flera platser, men kommentarerna som ingår är ett exempel på användningen av varje, vilket hjälper dig att bestämma vilka färgkoder du ska kopiera från din PSD. Också, om möjligt, har skikten i PSD namnet med hänvisning till variabeln de verkar.
Som jag nämnde ovan är några av standardtematens färgvärden svårkodade snarare än att vara tillgängliga som variabler. I vissa fall definieras variabler, men i andra filer än huvudfilen "ui-variables.less". För att göra det enklare att tillämpa vårt färgschema centralt via filen "ui-variables.less" ska vi definiera några extra variabler och göra vissa justeringar av några temafiler.
Klistra in följande kod i din "ui-variables.less" under de färgvariabler som du lagt till i föregående steg:
// TILLGÄNGLIGA FÄRGER / VAROR SOM ANVÄNDAS TILL MINDRE FILER //tree-view.less @ tree-view-selected-bg: @n_selected; // new> linje 8 @sidebar: @n_defaultbg; // new> line 15 @ sidebar-focus: lätta (@n_defaultbg, 0,5%); // new> linje 19 //tabs.less @ tab-default-bg: @n_defaultbg; // new> linje 45 //tooltips.less @ tip-background-color: ljusare (@ väldigt ljusgrå, 10%); // variabler tagna av verktygstips.lösa och placerade här för åtkomst @ tip-text-färg: @ mycket mörkgrå; // variabler tas ur verktygstips.lösa och placeras här för åtkomst
Notera att kommentaren inkluderade hålla reda på vilka filer som ska ändras och på vilken rad för att använda dessa variabler.
Med dina nya variabler på plats kan du nu göra följande ändringar i dina temafiler:
tree-view.less> linje 8: ändra till bakgrund: @ tree-view-selected-bg;
tree-view.less> linje 15: ändra till bakgrund: @sidebar;
tree-view.less> rad 19: ändra till bakgrund: @ sidebar-fokus;
tabs.less> linje 45: ändra till:
bakgrundsbild: -webkit-linjär-gradient (topp, ljusare (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> radera linjerna 4 och 5:
@ tips-bakgrundsfärg: #fff; @ tips-text-färg: # 333;
Dessa två rader raderas från "tooltips.less" eftersom variablerna nu definieras i huvudfilen "ui-variables.less" i stället.
Vi har nu gjort alla nödvändiga justeringar för att följa med våra nyligen definierade variabler, men det finns några fler tweaks för att ersätta hårdkodade färger och få alla temafiler att fungera bra med våra variabler.
utilities.less> linje 6: ändra till bakgrund: mörkare (@ knapp-bakgrundsfärg, 5%);
tree-view.less> linje 29: ändra till färg: lätta (@ väldigt ljusgrå, 15%)! viktigt;
panels.less> linje 50: ändra till
Bakgrundsbild: -webkit-linjär-gradient (@ paneler-bakgrundsfärg, mörkare (@ paneler-bakgrundsfärg, 5%));
... gör lutningen mer subtil för att passa våra nya färger.
tooltips.less> linje 11: ändra till färg: mättad (mörkare (@red, 10%), 5%);
Vi har nu alla färger från vår PSD-mockup definierad som variabler, och alla temafiler redo att svara på definitionerna i "ui-variables.less".
Det enda som kvarstår är att kartlägga våra anpassade färgvariabler mot standardvariablerna som redan var på plats när vi först öppnade filen "ui-variables.less". Det är inte nödvändigt att ändra värdet för varje enskild standardvariabel eftersom vissa av dem piggy-backar sina värden från andra i samma fil. Till exempel har vi @ text-färgmarkering: #fff; och detta värde är piggy backed på nästa rad i @ text-färgval: @ text-färg-markering;.
Byt all kod mellan kommentaren // Färger och kommentaren // Storlekar med den här koden:
@ textfärg: @ mycket ljusgrå; // ändrad @ textfärg-subtil: @ ljusgrå; // ändrat @ text-färgmarkering: @n_highlight; // ändrat @ text-färgval: @ text-färg-markering; @ text-färg-info: @cyan; // ändrat @ text-färg-framgång: @blue; // ändrat @ text-färg-varning: lätta (@orange, 15%); // ändrat @ text-färgfel: mätta (lätta (@red, 10%), 10%); // ändrad @ text-färg ignorerad: @ text-färg-subtil; @ text-färg-added: @ text-färg-framgång; @ text-color-renamed: @ text-color-info; @ text-färgmodifierad: @ text-färgvarning; @ text-färg-borttagen: @ text-färg-fel; @ bakgrundsfärg-info: @cyan; // ändrat @ bakgrunds-färg-framgång: @blue; // ändrat @ bakgrundsfärgvarning: lätta (@orange, 15%); // ändrat @ bakgrundsfärgfel: mätta (lätta (@red, 10%), 10%); // ändrat @ bakgrundsfärghöjd: rgba (255, 255, 255, 0.07); @ bakgrundsfärgval: @n_selected; // ändrat @ app-bakgrundsfärg: # 333; @ bas-bakgrundsfärg: ljusare (@ verktygspanel-bakgrundsfärg, 5%); @ basgränsfärg: @n_darkerbg; @ pane-item-background-color: @ bas-bakgrundsfärg; @ pan-item-border-color: @n_darkerbg; // ändrat @ input-background-color: @ mörkgrå; // ändrad @ ingångsgränsfärg: @ basgränsfärg; @ verktygspanel-bakgrundsfärg: @n_darkerbg; // ändrad @ verktygspanel-gränsfärg: @ basgränsfärg; @ inmatningspanel-bakgrundsfärg: @n_defaultbg; // ändrad @ inmatningspanel-gränsfärg: @ basgränsfärg; @ panel-heading-bakgrundsfärg: @gray; // ändrad @ paneler-gränsen-färg: fadein (@ basgränsfärg, 10%); @ överlagring-bakgrundsfärg: @ mörkgrå; // ändrat @ överlay-border-color: @ bakgrundsfärg-markera; @ knapp-bakgrundsfärg: @gray; // ändrad @ knapp-bakgrunds-färg-svängare: ljusare (@ knapp-bakgrundsfärg, 5%); @ knapp-bakgrundsfärgval: @ mörkgrå; // ändrad @ knapp-gränsfärg: @ basgränsfärg; @ flikstång-bakgrundsfärg: @ mycket mörkgrå; // ändrad @ flikar-gräns-färg: mörkare (@ flik-bakgrunds-färgaktiv, 10%); @ flik-bakgrundsfärg: @n_defaultbg; // ändrad @ flikbakgrund-färgaktiv: @ mycket mörkgrå; // ändrad @ flikgränsfärg: @n_tabborder; // ändrad @ träd-vy-bakgrundsfärg: @ verktygspanel-bakgrundsfärg; @ Tree-View-border-Color: @ Verktyg-panel-border-färg; @ rullningsbar-bakgrundsfärg: @ mycket mörkgrå; // ändrat @ rullningsfärg: @gray; // ändrat @ ui-site-color-1: @ bakgrunds-färg-framgång; // green @ ui-site-color-2: @ bakgrundsfärg-info; // blue @ ui-site-color-3: @ bakgrundsfärgvarning; // orange @ ui-site-color-4: @purple; // ändrat @ ui-site-color-5: @red; // ändrats
Det skulle vara lite överdrivet att förklara varje rad i den här koden, men leta efter kommentaren // ändrats i slutet av en rad för att se var våra anpassade färgvariabler har kartlagts mot tematets standardvariabler.
Kom ihåg att om du inte är säker på var dessa variabler gäller kan du kontrollera deras korrelation med Styleguide, som beskrivits ovan.
När du har sparat filen "ui-variables.less" (och de andra du redigerat), bör gränssnittet se ut så här:
Om du trycker på ctrl-shift-P för att hämta kommandot paletten ska det se ut:
Och om du trycker på ctrl-F "Sök" -panelen längst ner i redigeraren ska se ut:
Du kan ladda ner de kompletta "Nuance" -bruken och syntaxteman på GitHub:
Och du kan installera dem direkt i Atom genom att gå till Atom> Inställningar> Teman och skriva "Nuance" i filterfältet.
När du har slutfört ditt eget anpassade syntax- och / eller UI-tema har du möjlighet att dela det med andra Atom-användare som ett paket. För att göra detta måste du ha ett uppdaterat GitHub-arkiv för var och en. För instruktioner om hur man publicerar ett Atom-paket, se Atom Docs: Publicera ett paket
I den här handledningen har vi behållit den befintliga LÄSRE filkoden oförändrad så mycket som möjligt, med fokus på att arbeta med variabler. Med det sagt, om du vill dyka djupare in i temakoden kan du styra presentationen av nästan vilken aspekt av syntaxen som användargränssnittet, från formen på dina flikar till färgen på dina lockiga axlar och operatörer.
Om du befinner dig som önskar en del kod eller användargränssnitt var annorlunda, öppna bara Atom i dev-läge och använd elementinspektören för att se om det finns en klass på plats som du kan rikta in. Som en allmän regel kan du anpassa ganska mycket allt.
Redan, även i beta-läget, ser Atom extremt lovande ut på sin förmåga att göra anpassning tillgänglig för alla med bakgrund i webbteknik. Prova din hand när du arbetar med Atom, du kommer att bli blåst bort av vad du kan göra!
