Share
Wat je gaat creërenAtom, de nieuwe coderedacteur uitgegeven door GitHub, is een van de opkomende smaak van apps waarmee webtechnologieën zoals LESS, JavaScript en HTML native kunnen worden uitgevoerd in een desktopomgeving. Atom wordt geïnstalleerd en wordt uitgevoerd als een "normale" desktop-app, maar zodra het wordt geopend, gedraagt het zich op een manier die een webontwikkelaar vertrouwd zal vinden.
Atom is een "gespecialiseerde variant van Chromium" en geeft in de ontwikkelaarsmodus toegang tot dezelfde "Developer Tools" die u wellicht van Chrome gewend bent. Dus, net als bij elke online webtoepassing, kunt u de code achter elk element van de app-interface inspecteren en zien wat er aan tikt:
Wat dit in praktische termen betekent, is dat iemand die ervaring heeft met webontwerp en -ontwikkeling onmiddellijk vertrouwd zal raken met de manier waarop Atom werkt en waarschijnlijk veel comfortabeler zal zijn bij het maken van wijzigingen en aanpassingen dan bij vergelijkbare programma's. De visuele stijl van Atom wordt aangestuurd door CSS, gegenereerd op basis van LESS, zodat je het uiterlijk op dezelfde manier kunt aanpassen als elke mindere website met een machtiging.
Atom heeft twee soorten "thema's" die verantwoordelijk zijn voor de presentatiestijl:
Syntaxis-thema's controle over alles in de binnenruimte van de redacteur, dat wil zeggen de goot, regelnummers en codegebied.
UI-thema's controle over al het andere, dat wil zeggen tabbladen, zijbalk, knoppen, overlays, berichten enz.
In deze zelfstudie leer je hoe je beide soorten thema's kunt maken door ze achter elkaar te maken, zodat de hele interface uniform wordt gerestyled. Laten we beginnen!
Op dit moment is Atom alleen Mac en tijdens de bètafase is toegang via uitnodiging. Als je nog geen uitnodiging hebt, is mijn suggestie om een verzoek in te dienen op Twitter of op het Atom-forum en iemand is verplicht om er een op jouw manier naartoe te sturen. Download en installeer het zoals u elke andere app zou doen.
Voor het ontwikkelen van thema's is een aantal Atom-specifieke opdrachtregels nodig, dus het eerste dat u moet doen, is de pakketten installeren die deze opdrachten mogelijk maken. Nadat u Atom voor de eerste keer hebt gebruikt, gaat u naar en selecteert u Atom> Shell-opdrachten installeren, welke de atoom en apm (atom package manager) -opdrachten.
Ik stel ook voor om een app te gebruiken waarmee je een terminal vanuit elke map die je bekijkt in Finder kunt openen, omdat dit het gemakkelijker maakt om opdrachten op de juiste locatie uit te voeren. Ik gebruik persoonlijk de gratis XtraFinder om een "Nieuwe terminal hier" -optie toe te voegen aan mijn Finder-contextmenu.
Het basisproces voor het maken van een nieuw Atom UI-thema is om een van de twee beschikbare standaardthema's te garen vanuit GitHub, het een eigen naam te geven en de opgenomen bestanden te bewerken..
Om dit te doen, moet je er eerst voor zorgen dat je zowel een account hebt op GitHub als GitHub voor Mac (tenzij je liever de commandoregel gebruikt) geïnstalleerd. Ga vervolgens naar de repository voor ofwel het Atom Dark UI-thema of het Atom Light UI-thema. In deze tutorial gebruiken we een donker kleurenpalet, dus we vatten het donkere standaardthema in.
Klik in de rechterbovenhoek van de oorspronkelijke UI-repository op de knop "Vork":
Hierdoor wordt een duplicaat van de repo gecreëerd onder uw eigen account, d.w.z.. youraccount / atom-dark-ui. Het volgende dat u moet doen is de repository uw eigen naam geven. Klik in de rechterzijbalk van uw gevorkte opslagplaats op het menu-item "Instellingen".
Bovenaan de pagina "Instellingen" ziet u een veld voor de naam van de repository. Typ een nieuwe naam naar keuze, (in mijn geval "nuance-dark-ui), in dit veld en zorg ervoor dat u de" -ui "aan het einde behoudt en klik vervolgens op" Naam wijzigen ":
U bent nu klaar om uw thema in uw offline omgeving te downloaden, zodat u het kunt bewerken. Hiervoor gaat u terug naar de hoofdpagina van uw repository en zoekt u vervolgens in de zijbalk naar de knop 'Kloon in bureaublad':
"GitHub voor Mac"zal dan de repository voor u downloaden naar uw standaard GitHub-locatie. Klik vanuit uw lijst met opslagplaatsen in "GitHub voor Mac" met de rechtermuisknop op uw nieuw gekloonde gebruikersinterface-thema en selecteer "Weergeven in Finder":
Er verschijnt een Finder-venster met uw UI-themamap in uw GitHub-map. Dubbelklik erop om in de werkelijke map te gaan en de inhoud erin te bekijken.
Open een nieuwe terminal op deze locatie en voer de opdracht uit atoom --dev
Deze opdracht opent Atom in de ontwikkelaarsmodus en toont de bestands- en mapstructuur van uw thema in de zijbalk. Klik in deze zijbalk op het bestand "package.json" om het te openen voor bewerking en wijzig vervolgens de naam, het versienummer en de beschrijving. Nogmaals, zorg ervoor dat u de "-ui" aan het einde van de themanaam bewaart en sla op:
Ten slotte moet je Atom laten weten hoe je je themamap kunt openen vanuit de lokale GitHub-map. Ga terug naar je terminal, die nog steeds in de map van je thema zou moeten staan, en voer de opdracht uit apm link
Ga nu terug naar Atom en druk op cmd-alt-ctrl-L of selecteer Bekijken> Opnieuw laden in het hoofdmenu om de interface opnieuw te laden, waardoor de lijst met beschikbare UI-thema's wordt vernieuwd, zodat u deze kunt selecteren.
Selecteer in het bovenste menu Atoom> Instellingenom de instellingenpagina te openen en klik op "Thema's" in de linkerzijbalk van het paneel. Je zou je thema in de lijst met "UI-thema's" moeten zien, dus ga je gang en selecteer het:
Uw nieuwe UI-thema is nu actief en klaar om te worden bewerkt, maar voordat we verder gaan, zullen we ook een syntaxthema genereren, zodat u beide tegelijkertijd kunt bewerken en in de gaten kunt houden hoe ze samen werken.
Het maken van een nieuw syntaxthema is een eenvoudiger proces dan voor een UI-thema.
Druk in Atoom op cmd-shift-P om het commandopalet tevoorschijn te halen, en typ vervolgens "Generate Syntax Theme". Als je het ziet Pakketgenerator: Syntaxthema genereren verschijnen klik erop om de opdracht uit te voeren:
Er verschijnt een venster waarin u het pad en de naam van uw syntaxthema kunt invoeren. Wat u ook beslist om uw thema een naam te geven, het moet eindigen in "-syntax". Gezien mijn UI-thema "nuance-dark-ui" heette, noemde ik mijn syntaxthema "nuance-dark-syntax".
Nadat u uw pad en de naam van het thema hebt ingevoerd, drukt u op invoeren verder gaan.
Atom genereert een nieuw syntaxthema voor u en opent het in de zijbalk. Je zou nu naar toe kunnen gaan Atoom> Instellingen opnieuw en kies uw nieuwe syntaxisthema naast de Syntax Thema label:
Omdat we samen aan de UI- en syntaxthema's werken, willen we beide bestanden vanuit de zijbalk kunnen openen. We willen ook in de "Dev-modus" zijn terwijl we deze bestanden bewerken, want dit betekent dat Atom automatisch wordt vernieuwd wanneer we onze wijzigingen opslaan.
Volg deze stappen om beide thema's in de ontwikkelaarsmodus te openen en gebruik hetzelfde proces wanneer u in de toekomst terugkomt om uw thema's te bewerken.
Ga naar Atoom> Voorkeuren om de instellingenpagina te openen.
Klik Open ~ / .atom onderaan de linker zijbalk van de instellingen om uw lokale Atom-map te openen in de zijbalk van het Atom:
Klik in de zijbalk Atom met de rechtermuisknop op uw syntaxthema of UI-themamap en kies Weergeven in Finder:
Sluit Atom af om het bestaande exemplaar te sluiten (het bevindt zich niet in de dev-modus, dus we hebben het niet nodig), en vervolgens in het Finder-venster waarin uw themamappen een nieuw eindstation openen:
Voer het commando uit atoom --dev om de map in Atom te openen in de dev-modus. U zou nu beide themamappen in de zijbalk moeten zien:
Omdat we in de modus Dev zijn, kunnen we nu elk themabestand openen vanuit de zijbalk en worden wijzigingen automatisch zichtbaar in de Atom-interface.
Nu zijn we klaar om het ontwerpproces te starten!
Misschien vind je het een beetje tweaken om de kleuren van je thema precies zo te krijgen als je wilt, dus ontwerpen in de code is waarschijnlijk niet de meest efficiënte methode.
In de bronbestanden die bij deze zelfstudie zijn gevoegd, vindt u een PSD met de naam "colormockup.psd", die voldoende interface-elementen en codesimulaties bevat om uw selectie van kleurenpaletten te vergemakkelijken. Gebruik deze PSD om de kleuren te visualiseren die u wilt gebruiken in uw gebruikersinterface en syntaxisthema's.
Ik houd persoonlijk van aardse kleuren, weinig licht en weinig contrast dat mijn ogen niet verbranden, dus ik eindigde hiermee:
Dit is mijn persoonlijke voorkeur, maar je kunt natuurlijk kiezen voor elke stijl die voor jou werkt.
Wanneer je mockup klaar is, ben je klaar om je kleurwaarden over te zetten naar de MINDER code van je thema's. We beginnen met het syntaxthema omdat het eenvoudiger is, met minder variabelen dan het UI-thema.
Breid in je Atom-zijbalk de map van je syntaxthema uit en open stylesheets> colors.less. Je zou dit moeten zien:
Als u de waarde van een van deze variabelen wijzigt en vervolgens het bestand opslaat, moet u onmiddellijk de update van het syntaxisgebied zien. Bijvoorbeeld als u de waarde van @donkergrijs naar # F00 je zou de achtergrondkleur van de goot moeten zien veranderen van kleur:
Mmm lekkerDe kleuren in dit bestand worden op hun beurt toegewezen aan verschillende aspecten van de syntaxis via de bestanden "syntax-variables.less" en "base.less". Open deze bestanden en neem even de tijd om ze snel te bekijken. In het bestand "syntax-variables.less" ziet u de variabelen uit het bestand "colors.less". In het bestand "base.less" ziet u echter variabelen van zowel het bestand "colors.less" als "syntax-variables.less".
Naarmate we ons nieuwe kleurenschema toevoegen aan dit thema, veranderen we de waarde van variabelen in "colors.less" op een manier waardoor hun namen mogelijk niet langer de kleur weergeven die ze bevatten. Bijvoorbeeld, waar de variabele @Purper werd gebruikt, gebruiken we in plaats daarvan een schaduw van groen.
Om grondig te zijn, zou je idealiter nieuwe variabelenamen maken die het nieuwe kleurenschema weerspiegelen, maar voor het doel van deze tutorial wil ik je niet helpen om elke instantie van de oude variabelenamen te vervangen in de "syntaxis- variables.less "en" base.less "bestand.
Dus hoewel het misschien een beetje vreemd lijkt, zullen we de kleuren van ons nieuwe schema gewoon toewijzen aan de bestaande variabelenamen in "colors.less". Op deze manier hoeft u slechts één bestand te bewerken om uw syntaxthema te maken.
Om u te helpen begrijpen welke variabelen van invloed zijn op welke aspecten van het kleurenschema, vervangt u de volledige code van het bestand "colors.less" door dit:
// Deze kleuren zijn specifiek voor het thema. Niet gebruiken in een pakket! // Alleen tekst en regelnummers @ very-light-gray: # c5c8c6; // Opmerkingen @ lichtgrijs: # 969896; // Huidige regel markeer @gray: # 373b41; // Rugmarge achtergrond @ donkergrijs: # 282a2e; // Codegebiedachtergrond @ very-dark-grey: # 1d1f21; @cyan: # 8abeb7; @blue: # 81a2be; @purple: # b294bb; @green: # b5bd68; @red: # cc6666; @orange: # de935f; @ lichtoranje: # f0c674;
De opmerkingen die aan het eerste deel zijn toegevoegd, vertellen u waar elk van de "grijze" kleurvariabelen in het syntaxisgebied wordt gebruikt.
Het tweede gedeelte met de zeven kleurvariabelen is iets gecompliceerder omdat elk een ander type code beïnvloedt. Om een globaal beeld te krijgen van hoe deze variabelen zullen verschijnen, maakt u een nieuw PHP-bestand en plakt u dit:
Accentsconagua
donkerder (@red, 10%) / * Opmerkingen> @ lichtgrijs * / // 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' => 'string'); // $ = .punctuation.definition.variable> @ very-light-grey // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ light-orange / / true = .constant> @orange $ var_name = nieuw SUPPORT_CLASS (true); ?> Notitie: dit bestand is ook opgenomen in de bronbestanden.
Wanneer u de bovenstaande code in Atom weergeeft, ziet u voorbeelden van hoe elk van de zeven kleurvariabelen eruit zien wanneer ze worden toegepast op de syntaxis. Dezelfde code wordt gebruikt in de opgegeven "colormockup.psd", zodat u kunt zien hoe de kleuren correleren.
Bekijk de bijgevoegde opmerkingen voor een beschrijving van welke kleurvariabelen bij elk element van de code horen. U kunt deze code samen met de PSD gebruiken om te achterhalen welke variabelen de kleuren die u kiest moeten worden toegewezen aan uw "colors.less" -bestand.
We beginnen met het overnemen van de "grijze" kleuren van uw PSD-mockup.
De eerste variabele die wordt vermeld in "colors.less" is @ Zeer-lichtgrijze wat we weten, (uit de opmerkingen die je zojuist hebt toegevoegd), wordt gebruikt bij "Plain text and line numbers". Ga naar je PSD en kopieer de hexcode van de kleur die je hebt gekozen voor je regelnummers. Plak die waarde, wat in dit geval is # 9b836a, in "colors.less" om de standaard voor te vervangen @ Zeer-lichtgrijze.
Kies vervolgens de kleur hexcode die u hebt gekozen voor commentaartekst en voeg deze toe aan de variabele @lichtgrijs. Ga door op deze manier totdat alle vijf "grijze" variabelen zijn bijgewerkt. Voor het thema "nuance-dark-syntaxis" dat ik heb gebruikt:
// Alleen tekst en regelnummers @ very-light-grey: # 9b836a; // Opmerkingen @ lichtgrijs: # 624e3b; // Huidige regel markeer @gray: # 352b22; // Rugmarge achtergrond @ donkergrijs: # 28211a; // Codegebiedachtergrond @ very-dark-grey: # 1f1913;
Sla het bestand "colors.less" op en u zou onmiddellijk uw syntaxisgebied er heel anders uit moeten zien zien:
Nu om de zeven kleurvariabelen in het tweede gedeelte over te dragen.
De eerste van deze variabelen is @cyan, en de inhoud van het PHP-bestand dat we eerder hebben gemaakt, bevat de opmerking array = .support.function> @cyan, ons te vertellen dat deze kleur wordt gebruikt op het woord "array". Ga naar je PSD en kopieer daar de hexcode die je op het woord 'array' hebt toegepast. In het thema "nuance" was dit # 446675.
Herhaal hetzelfde proces voor het vinden van elke variabelenaam in de opmerkingen van je PHP-bestand om te zien voor welk type code het van toepassing is, kopieer vervolgens over de kleur die je hebt gekozen uit je PSD.
Voor het "nuance" -thema dat ik heb gebruikt:
@cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ lichtoranje: # b5a163;
Na het opslaan, kijk nogmaals naar je PHP-bestand en je zou al je nieuwe kleuren erin moeten weerspiegelen, passend bij je PSD:
Uw syntaxisthema is nu voltooid! Nu is het tijd om door te gaan naar het UI-thema.
Het toevoegen van uw kleurenschema aan het UI-thema is een beetje lastiger dan het syntaxthema omdat het vrij veel meer variabelen gebruikt. Bovendien zijn niet alle kleuren in het standaardthema gedefinieerd als variabelen, dus in sommige gevallen moet u de eigenlijke stijlen bewerken.
De meeste kleuren die in het UI-thema worden gebruikt, worden gedefinieerd in het bestand "ui-variables.less". Ga je gang en breid je map met syntaxthema's uit en open het bestand voor bewerking in de map "stylesheets".
Atom wordt geleverd met een zeer nuttige "Styleguide" die u een voorbeeld geeft van alle UI-elementen die zijn beïnvloed door uw thema. Open het door naar Pakketten> Styleguide> Tonen.
Voor het grootste deel zul je de namen van de variabelen in het bestand "ui-variables.less" als beschrijvend beschouwen en in volgorde met de UI-elementen in de Styleguide correleren. De eerste verschillende variabelen zijn bijvoorbeeld voorafgegaan @tekst kleur en correleren met het eerste gedeelte van de Styleguide, met het label "Tekstklassen".
Als u niet zeker weet welke variabele van invloed is op wat, wees dan niet bang om variabelen willekeurig te wijzigen om te zien welke aspecten van de Styleguide zijn gewijzigd.
Niet alle kleuren in het standaard UI-thema hebben geassocieerde MINDER-variabelen in het bestand "ui-variables.less". Sommige kleuren zijn rechtstreeks gecodeerd in andere MINDER-bestanden in het thema.
Als u niet zeker weet waar een UI-kleur vandaan komt en deze geen bijbehorende variabele lijkt te hebben, gebruikt u de elementinspector in het betreffende gebied om de klassennaam te vinden die verantwoordelijk is voor de kleur. Voer vervolgens in Finder een zoekopdracht uit voor die klassennaam om te proberen te bepalen welke van de MINDER-bestanden van het thema de klasse bevat.
De zijbalk heeft bijvoorbeeld een hexcode in kleur van # 303030 in het standaardthema dat nergens in "ui-variables.less" is gedefinieerd. Het inspecteren van het element toont dat de hexcode uit de klas komt .focusable-panel.
Een Finder-zoekopdracht uitvoeren in de map van de UI voor "focusable panel" onthult dat deze klasse is opgenomen in het bestand "tree-view.less".
Het bestand kan vervolgens worden bewerkt door een variabele uit het bestand "ui-variables.less" te plaatsen in plaats van een hex-waarde met harde code.
Soms levert je zoekopdracht om welke reden dan ook geen resultaten op en moet je dingen op de harde manier doen en handmatig door elk UI-themabestand gaan tot je de klas vindt die je wilt wijzigen.
Het UI-thema heeft geen toegang tot de kleurvariabelen die zijn gedefinieerd door het syntaxthema, maar we willen dezelfde kleuren voor beide thema's gebruiken, zodat ze overeenkomen. Daarom moeten we de kleurvariabelen van ons syntaxthema dupliceren in ons UI-thema.
Bovenaan het thema "ui-variables.less" plakken in alle variabelen uit uw syntaxisthema:
@ very-light-gray: # 9b836a; @ lichtgrijs: # 624e3b; @gray: # 352b22; @ donkergrijs: # 28211a; @ very-dark-grey: # 1f1913; @cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ lichtoranje: # b5a163;
Naast deze variabelen zijn er nog eens vijf aangepaste variabelen die ik heb gedefinieerd om alle kleuren uit mijn mockup over te dragen, ook geplakt aan de bovenkant van het bestand "ui-variables.less":
// BG van geselecteerd bestand in zijbalk @ n_geselecteerd: # 2b231b; // BG van zijbalk @n_defaultbg: # 241d17; // BG van de onderste werkbalk en "find" -venster @n_darkerbg: # 191613; // Kleur van geselecteerde tekst in zijbalk @n_highlight: # a37748; // Randkleur van tabbladen @n_tabborder: # 372d26;
Deze variabelen worden op meerdere locaties gebruikt, maar de opmerkingen bevatten een voorbeeld van het gebruik van elk, zodat u kunt bepalen welke kleurcodes u van uw PSD moet kopiëren. Ook zijn waar mogelijk de lagen in de PSD benoemd met verwijzing naar de variabele die ze beïnvloeden.
Zoals ik hierboven al zei, zijn sommige kleurwaarden van het standaardthema hard gecodeerd in plaats van toegankelijk als variabelen. In sommige gevallen worden variabelen gedefinieerd, maar in andere bestanden dan het hoofdbestand "ui-variables.less". Om het gemakkelijker te maken om ons kleurenschema centraal toe te passen via het bestand "ui-variables.less", zullen we enkele extra variabelen definiëren en enkele aanpassingen aanbrengen aan een aantal themabestanden.
Plak de volgende code in je "ui-variables.less" onder de kleurvariabelen die je in de vorige stap hebt toegevoegd:
// AANGEPASTE KLEUREN / VARS TOEGEVOEGD AAN MINDER BESTANDEN //tree-view.less @ tree-view-selected-bg: @n_selected; // nieuw> regel 8 @sidebar: @n_defaultbg; // nieuw> regel 15 @ zijbalk-focus: lichter (@n_defaultbg, 0,5%); // nieuw> regel 19 //tabs.less @ tab-default-bg: @n_defaultbg; // nieuw> regel 45 //tooltips.less @ tip-achtergrondkleur: lichter (@ zeer lichtgrijs, 10%); // variabelen uit tooltips.less verwijderd en hier geplaatst voor toegang @ tip-tekstkleur: @ zeer donker grijs; // variabelen uit tooltips.less verwijderd en hier geplaatst voor toegang
Noteer de opmerkingen om bij te houden welke bestanden moeten worden gewijzigd en op welke regel om deze variabelen te gebruiken.
Met je nieuwe variabelen op zijn plaats, kun je nu de volgende bewerkingen aanbrengen in je themabestanden:
tree-view.less> regel 8: veranderen naar achtergrond: @ tree-view-selected-bg;
tree-view.less> regel 15: veranderen naar achtergrond: @sidebar;
tree-view.less> regel 19: veranderen naar achtergrond: @ sidebar-focus;
tabs.loos> regel 45: veranderen naar:
achtergrondafbeelding: -webkit-lineair-verloop (boven, lichter (@ tab-standaard-bg, 7%), @ tab-standaard-bg);
tooltips.less> verwijder regels 4 en 5:
@ tip-achtergrondkleur: #fff; @ tip-text-colour: # 333;
Deze twee regels worden verwijderd uit "tooltips.less" omdat de variabelen nu worden gedefinieerd in het hoofdbestand "ui-variables.less".
We hebben nu alle vereiste aanpassingen gemaakt om mee te gaan met onze nieuw gedefinieerde variabelen, maar er zijn een paar meer aanpassingen om hard gecodeerde kleuren te vervangen en alle themabestanden goed te laten werken met onze variabelen.
utilities.less> regel 6: veranderen naar achtergrond: donkerder (@ knop-achtergrondkleur, 5%);
tree-view.less> regel 29: veranderen naar kleur: lichter (@ zeer lichtgrijs, 15%)! belangrijk;
panels.less> regel 50: veranderen naar
background-image: -webkit-linear-gradient (@ panel-heading-background-color, darken (@ panel-heading-background-colour, 5%));
... maakt het verloop subtieler om aan te passen aan onze nieuwe kleuren.
tooltips.less> regel 11: veranderen naar kleur: verzadigd (donkerder (@rood, 10%), 5%);
We hebben nu alle kleuren uit onze PSD mockup gedefinieerd als variabelen en alle themabestanden klaar om te reageren op de definities in "ui-variables.less".
Het enige dat nu overblijft is om onze aangepaste kleurvariabelen in kaart te brengen met de standaardvariabelen die al aanwezig waren toen we voor het eerst het bestand "ui-variables.less" openden. Het is niet nodig om de waarde van elke afzonderlijke standaardvariabele te wijzigen, omdat sommige ervan hun waarden van anderen in hetzelfde bestand piggy-back geven. We hebben bijvoorbeeld @ tekstkleurmarkering: #fff; en deze waarde wordt in de volgende regel in een piggy-positie weergegeven @ text-color-selected: @ text-color-highlight;.
Vervang alle code tussen de opmerking // Kleuren en de opmerking // Maten met deze code:
@ tekstkleur: @ zeer lichtgrijs; // gewijzigd @ tekstkleur subtiel: @ lichtgrijs; // gewijzigd @ tekstkleurmarkering: @n_highlight; // gewijzigd @ tekstkleur geselecteerd: @ tekstkleurmarkering; @ text-color-info: @cyan; // veranderd @ tekstkleur succes: @blue; // veranderde @ tekstkleur waarschuwing: lichter (@orange, 15%); // veranderde @ text-colour-error: verzadigd (lichter (@red, 10%), 10%); // gewijzigd @ text-color-genegeerd: @ text-color-subtle; @ text-colour-added: @ text-colour-success; @ text-color-hernoemd: @ text-colour-info; @ tekstkleur gewijzigd: @ tekstkleur waarschuwing; @ text-colour-removed: @ text-colour-error; @ background-color-info: @cyan; // veranderd @ achtergrondkleur succes: @blue; // veranderd @ achtergrondkleur waarschuwing: lichter (@orange, 15%); // gewijzigd @ achtergrondkleurfout: verzadigen (lichter (@rood, 10%), 10%); // gewijzigd @ achtergrondkleurmarkering: rgba (255, 255, 255, 0,07); @ background-color-selected: @n_selected; // veranderde @ app-achtergrondkleur: # 333; @ base-background-color: lichter (@ tool-panel-background-colour, 5%); @ base-border-colour: @n_darkerbg; @ pane-item-background-color: @ base-background-color; @ pane-item-border-color: @n_darkerbg; // gewijzigd @ invoer-achtergrondkleur: @ donkergrijs; // gewijzigd @ invoer-randkleur: @ basis-randkleur; @ tool-panel-background-color: @n_darkerbg; // gewijzigd @ tool-panel-border-color: @ base-border-color; @ inzet-paneel-achtergrondkleur: @n_defaultbg; // gewijzigd @ inzet-paneel-randkleur: @ basis-randkleur; @ panel-heading-background-color: @gray; // gewijzigd @ panel-heading-border-colour: fadein (@ base-border-colour, 10%); @ overlay-achtergrondkleur: @ donkergrijs; // gewijzigd @ overlay-border-color: @ background-color-highlight; @ button-background-color: @gray; // veranderde @ button-background-color-hover: lichter (@ button-background-colour, 5%); @ knop-achtergrond-kleur geselecteerd: @ donkergrijs; // gewijzigd @ button-border-colour: @ base-border-colour; @ tab-bar-background-color: @ very-dark-grey; // gewijzigd @ tab-bar-border-color: donkerder (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // gewijzigd @ tabblad-achtergrondkleur actief: @ zeer donker grijs; // gewijzigd @ tab-border-color: @n_tabborder; // veranderde @ tree-view-background-color: @ tool-panel-background-color; @ tree-view-border-colour: @ tool-panel-border-colour; @ scrollbar-background-color: @ very-dark-grey; // gewijzigd @ schuifbalkkleur: @grijs; // veranderde @ 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; // veranderde @ ui-site-color-5: @red; // veranderd
Het zou een beetje overdreven zijn om elke regel van deze code uit te leggen, maar zoek naar de opmerking // veranderd aan het einde van een regel om te zien waar onze aangepaste kleurvariabelen zijn toegewezen aan de standaardvariabelen van het thema.
Onthoud dat als u niet zeker weet waar deze variabelen van toepassing zijn, u hun correlatie met de Styleguide kunt controleren, zoals hierboven beschreven.
Na het opslaan van je "ui-variables.less" bestand (en de anderen die je hebt bewerkt), zou je interface er nu als volgt uit moeten zien:
Als u op drukt ctrl-shift-P om het commandopalet weer te geven, zou het eruit moeten zien:
En als u op drukt ctrl-F het "find" -venster onderaan de editor ziet er als volgt uit:
Je kunt de voltooide "Nuance" UI en syntaxthema's downloaden op GitHub:
En je kunt ze rechtstreeks in Atom installeren door naar Atoom> Voorkeuren> Thema's en typ "Nuance" in het filterveld.
Nadat u uw eigen aangepaste syntaxis en / of UI-thema hebt voltooid, kunt u deze als pakket delen met andere Atom-gebruikers. Hiervoor moet je een bijgewerkte GitHub-repository hebben voor elk. Zie Atom Docs: Publishing Package voor instructies over het publiceren van een Atom-pakket
In deze tutorial hebben we de bestaande LESS-bestandscode zoveel mogelijk ongewijzigd gehouden, met de nadruk op het werken met variabelen. Dat gezegd hebbende, als u dieper wilt ingaan op de themacode, kunt u de presentatie van vrijwel elk aspect van de syntaxis en gebruikersinterface regelen, van de vorm van uw tabbladen tot de kleur van uw accolades en operatoren.
Als je merkt dat een code of UI-element anders is, open dan Atom in dev-modus en gebruik de elementinspecteur om te zien of er een klasse is die je kunt targeten. Over het algemeen kun je vrijwel alles aanpassen.
Al in de betamodus ziet Atom er veelbelovend uit in zijn vermogen om maatwerk toegankelijk te maken voor iedereen met een achtergrond in webtechnologieën. Probeer eens te werken met Atom, je zult versteld staan van wat je kunt doen!
