Erstellen eines VS Code Themes

Jeder hat besondere und vielleicht auch eigene Vorlieben, wenn es um seinen Code-Editor geht. Es gibt buchstäblich Tausende von Themes, und das aus gutem Grund: Was für den einen eine Schönheit und Produktivitätssteigerung ist, kann für den anderen eine Behinderung sein.

Es stand schon lange auf meiner Wunschliste, mein eigenes Theme zu erstellen. Eines Nachts habe ich sehr spät programmiert, bis in die frühen Morgenstunden hinein. Jeder in meinem Haus schlief, und so war die einzige Beleuchtung wie üblich das Leuchten meines Bildschirms. Ich weiß, dass es nicht unbedingt gesund ist, so zu programmieren, aber das ist buchstäblich die Zeit, in der ich am produktivsten bin: Es gibt minimale Ablenkungen, ich muss mich nicht mit Arbeitskram, Familienkram, Freundeskram oder Welpenkram auseinandersetzen. Ich kann mich konzentrieren.

Ich hatte einige Präferenzen für das Theme, das ich benutzte, und obwohl sie alle für Tageslicht oder Flugreisen gut funktionierten, hatte ich immer das Gefühl, dass bei Late-Night-Coding-Sessions etwas fehlte. Ich beschloss, dass es an der Zeit war, mein eigenes Theme zu kreieren.

Wir werden zuerst über den allgemeinen Prozess der Erstellung eines Themes sprechen, falls Sie selbst eines erstellen möchten, und dann werden wir uns mit einigen der Recherchen und Tests befassen, die speziell für mein Theme durchgeführt wurden, um einen Einblick in den Prozess zu geben.

Los geht's

Bevor Sie irgendetwas tun, müssen Sie vsce (kurz für Visual Studio Code Extensions) installieren und sich als Publisher registrieren. Alle Anweisungen dazu finden Sie hier. Ich weiß, es sieht nach viel aus, aber es dauert nur etwa 5-10 Minuten, und danach müssen Sie es nie wieder tun, für keine Erweiterung, die Sie erstellen.

Nachdem Sie das erledigt haben, sind hier die Schritte, die Sie benötigen, um mit der Arbeit zu beginnen.

Zuerst müssen Sie ausführen

npm install -g yo generator-code

Dadurch wird der Generator global auf Ihrem Rechner verfügbar gemacht (was bedeutet, dass Sie jetzt in jedem Verzeichnis ein Theme erstellen können). Sie können dann diesen Befehl ausführen, um Ihr Theme zu starten

yo code

Sie werden von einem Bildschirm aufgefordert, der wie dieser aussieht

Beachten Sie, dass ich hier die Pfeiltasten verwendet habe, um zur Option „New Color Theme“ zu navigieren. Beachten Sie auch, dass dies der Weg ist, wie Sie jede andere Erweiterung erstellen würden.

Wenn Sie dies auswählen, fragt es, ob es sich um ein neues Theme handelt oder ob wir von einem bestehenden importieren möchten. Wir möchten ein neues erstellen.

Als Nächstes müssen Sie einige weitere Fragen beantworten, darunter:

• Wie heißt die Erweiterung?
• Wie lautet die Kennung? (Ich habe mich einfach für den Namen entschieden, das ist wahrscheinlich typisch.)
• Wie lautet die Beschreibung? (Ich habe anfangs etwas Albernes eingefügt. Keine Sorge, das können Sie später in Ihrer package.json aktualisieren.)
• Wie lautet der Name des Publishers? (Siehe frühere Anweisungen.)
• Welcher Name soll dem Benutzer angezeigt werden? (Ich habe denselben wie der Name der Erweiterung verwendet.)
• Ist dieses Theme dunkel, hell oder kontrastreich?

Es wird Ihnen ein Basisthema eingerichtet, mit dem Sie Ihre Farbpräferenzen anpassen können. Die vollständige Erklärung und alle Details finden Sie hier. Weitere Details zu Themes im Allgemeinen finden Sie hier.

Testfahrt

Wir haben unser Basistheme und einige Konzepte für die Farbpalette. Wie testen wir das aus? Wenn Sie das Verzeichnis mit Ihrem Theme öffnen, können Sie auf Mac fn + F5 (oder auf Windows einfach F5) drücken und ein neues Fenster öffnet sich sofort, in dem Sie Ihr Theme testen können! Im ursprünglichen Theme-Fenster sehen Sie, dass Sie jetzt ein kleines Bedienfeld haben, auf dem Sie neu laden, pausieren und stoppen können. Vergessen Sie nicht, vorher zu speichern!

Okay, jetzt, wo Sie das andere Fenster geöffnet haben, drücken Sie Command + Shift + P, um den Befehls-Explorer zu öffnen. Geben Sie dort „Developer: Inspect TM Scopes“ ein, und Sie sehen eine Eingabeaufforderung, die es Ihnen ermöglicht, alle Tags und Attribute durchzusehen: Sie erfahren ihre Farbe, ihre Schriftstile und wie Sie sie ansprechen müssen.

Es gibt jedoch ein Problem. Es gibt viele Dinge im Editor, die Sie nicht ansprechen können, da VS Code dies als Versuch interpretieren würde, den Rest des Editors (d. h. die Dateiansicht, das Terminal und die Suchfelder) zu steuern. Hier sind die beiden Möglichkeiten, wie ich die restlichen Scopes herausgefunden habe

• Diese Seite ist äußerst hilfreich, um einige der grundlegenden Dinge zu verstehen, die Sie konfigurieren müssen. Tatsächlich sollten Sie vielleicht mit einigen davon beginnen.
• Es gibt DevTools! Sie können sie auf dieselbe Weise öffnen wie in Chrome: Command + Option + I. Was ich tat, war, die Farbe in den berechneten Stilen zu suchen und sie im Texteditor nachzuschlagen, um sie anzusprechen. Sie werden feststellen, dass die Standardeinstellung in den DevTools RGBA ist. Sie müssen also Shift + auf die Farbe klicken, um ihr Format zu ändern, bis Sie die äquivalenten Hex-Werte erhalten. Ich konnte dann durch die übereinstimmenden Farben in meiner Theme-JSON scannen, bis ich den übereinstimmenden Wert gefunden und geändert habe.

Noch ein kleiner Tipp!

Als ich anfing, das Theme zu entwickeln, dachte ich, ich würde versuchen, das Theme eines anderen als Ausgangspunkt zu nehmen. Ich habe Wes Bos' Cobalt Two ausprobiert. Obwohl ich es am Ende nicht verwendet habe, hatte er etwas, das ich wertvoll fand: ein Demos-Verzeichnis mit Beispielen für eine ganze Reihe verschiedener Sprachen. Ich begann damit, seins zu übernehmen, erkannte aber schnell, dass die Dateien für meine Testanforderungen nicht lang genug waren. Also erstellte ich meine eigenen. Im Zuge der Behebung von Problemen, die Leute meldeten, erstellte ich auch eine React stateless functional component, ein Ruby-Beispiel und natürlich eine .vue Single-File-Komponente 😀 Das ist auch bei der Wartung hilfreich, denn wenn Leute ein Problem mit einem Dateityp sehen, den ich zuvor nicht getestet hatte, können sie die Datei in das Demo-Verzeichnis einbringen, und ich kann sehen, was sie sehen. Das macht Duplizierung und Tests sehr einfach.

Recherche

Recherche für ein Code-Theme? Ist das nicht übertrieben? Wahrscheinlich! Aber ich war wirklich neugierig: Was wäre für die Lesbarkeit der überwiegenden Mehrheit der Leute am besten geeignet und gleichzeitig etwas, das mir gefällt?

Farbe und Kontrast

Der erste Schritt war, die Barrierefreiheit zu berücksichtigen. Ich mochte immer, wie Solarized Themes die Lesbarkeit zu einem zentralen Thema ihrer Paletten machten. Ich habe über Farbwiedererkennung und Barrierefreiheit gelesen, und es stellt sich heraus, dass Männer eine sehr hohe Inzidenz von Farbenblindheit haben (etwa 8 % bei Männern, 1 % bei Frauen). Die Mehrheit der Programmierer sind Männer, also war es, obwohl ich nicht farbenblind bin, ein Kinderspiel, das Theme zumindest teilweise um die Einbeziehung von Menschen mit Farbenblindheit herum zu gestalten. Die häufigste ist Rot-Grün-Schwäche, daher habe ich einige gute Möglichkeiten gefunden, mit meinem Favoriten zu testen, der, komischerweise, ein wenig manuell ist.

Ich begann ursprünglich damit, zufällige Bilder zu testen, um zu sehen, ob ich ein Muster erkennen konnte, das ich abgleichen konnte. Eine Sache, die ich beim Testen bemerkte, war, dass komplementäre Farben bei allen Tests am besten zu funktionieren schienen. Wenn jedoch drei Farben gleichzeitig getestet werden mussten, lieferte eine triadische Farbkomposition ebenfalls gute Ergebnisse.

Wenn Sie mit Farbbeziehungen nicht vertraut sind, erleichtert Adobe Color CC (früher Kuler) die Visualisierung, und Sie können sogar direkt im Editor eine Farbpalette erstellen.

Es ist äußerst wichtig zu wissen, dass eine Farbe nur eine Farbe in Bezug auf eine andere Farbe ist. Dies ist ein Teil dessen, was die Erstellung eines Farbthemas so schwierig macht. Farbe ist nicht statisch, es geht um Beziehungen. Dies sind Sie wahrscheinlich ein wenig vertraut mit in Bezug auf Barrierefreiheit. Ein helles Grün auf Schwarz mag zugänglich sein, aber wenn Sie es zu einem weißen Hintergrund ändern, ist es das nicht mehr.

Barrierefreiheit in Farben kann mit einer Reihe von Tools gemessen werden. Hier sind einige meiner Favoriten

• Colorable
• Text auf einem Hintergrundbild a11y Check
• Kontrast-A
• Zugängliche Farben

Es ist auch sehr schön, Ihre Palette von Anfang an für Barrierefreiheit einzurichten. Color Safe ist ein großartiges Werkzeug, das dabei hilft.

Weitere Details zu Farben und Wahrnehmung finden Sie in diesem Beitrag: Ein Nerd-Leitfaden zur Farbe im Web.

Farben und Leseverständnis

Ein weiterer Aspekt war die Erforschung, welche Farben, falls überhaupt, einen Einfluss auf das Leseverständnis haben. In einigen Studien wurde gezeigt, dass schwarzer Text auf weißem Hintergrund, wie er in einigen hellen Themes verwendet wird, für das Verständnis schwierig sein kann. Die Theorie besagt, dass die Verwendung von Overlays zur Änderung der Textfarbe die kognitive Wahrnehmung bei vielen verbessert hat, insbesondere bei Menschen mit Legasthenie und Autismus. Diese Studien sind jedoch umstritten und es ist unklar, ob die Overlays bei der Verbesserung des Verständnisses wirksam sind oder lediglich eine Präferenz darstellen.

Es gibt ein Syndrom namens Irlen oder Scotopic Sensitivity Syndrome (SSS), das bekanntermaßen die Fähigkeit beeinträchtigt, Buchstaben und Wörter zu erkennen. Es handelt sich um eine visuelle Wahrnehmungsstörung auf magnocellulärer Ebene – der visuellen Bahn, die beim Scannen und Verstehen helfen kann. Dies wurde mit dem Lesen mit Beeinträchtigung unter bestimmten Lichtarten in Verbindung gebracht, und einige denken, dass es bis zu 50 % der Menschen betreffen kann (auch diese Zahl ist umstritten und nicht schlüssig).

Wir lernen immer noch über SSS, aber es gibt einige Studien, die besagen, dass Farb-Overlays helfen können, die Aufmerksamkeit auf den Text zu lenken und die Augenbelastung zu reduzieren. Die Farben, die bisher die Lesbarkeit und den Kontrast für Menschen mit SSS erhöht haben, sind **Beige, Goldgelb, Grün, Pink und Blau**. Blau hat bisher die stärkste Verbindung für Menschen mit Leseschwäche und Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung gezeigt.

Obwohl diese Studien meiner Meinung nach keine statistische Signifikanz erreicht haben, konnte ich keine Beweise dafür finden, dass es schädlich wäre, sie zu befolgen, und es schien am sichersten, sie bei der Entwicklung des Themes im Hinterkopf zu behalten. Ich habe mich für ein dunkles Theme mit Blau als Hauptfarbe entschieden und die anderen Farben, die gut getestet wurden, in unterstützenden und kontrastierenden Rollen im gesamten Theme verwendet.

Andere Theme-Inspiration

Es gab einige Paletten, die ich mir als Inspiration angesehen habe. Zum Beispiel habe ich eine explorative Studie durchgeführt, welche Art von Ton ich wollte.

• Palenight Material: Die Rottöne und Violetttöne in meinem Theme begannen mit diesem, und ich habe die Violettwerte angepasst.
• Dracula: Die Basis dieses Themes war etwas dunkler und bot einen Kontrast zu den Pastelltönen, die ich in meinem Theme haben wollte.
• Panda: Ich habe die Türkisfarbe übernommen und sie etwas angepasst.

Ich habe mir auch die Arbeit von Maggie Appleton ziemlich oft angesehen. Besonders gut gefällt mir ihre Arbeit an Egghead.io, die auf jeder Ebene erstaunlich ist.

Diese Grün- und Orangetöne sind der Ausgangspunkt meiner Farbpalette. Ich habe Anpassungen vorgenommen, während ich an der Barrierefreiheit gearbeitet habe. Das schwärzeste Blau-Schwarz, das sich unten rechts im Bild befindet, wurde zur Basis meines Haupt-Hintergrunds.

Entscheidungen, Entscheidungen

An diesem Punkt mussten viele Entscheidungen getroffen werden. Glücklicherweise war meine Recherche abgeschlossen. Denken Sie daran, ich wollte Pastelltöne, ähnlich denen, die in den Material Palenight, Panda und Dracula Dark Themes verwendet werden. Insbesondere wollte ich Beige, Goldgelb, Grün, Pink und Blau verwenden, basierend auf dem, was ich in der Recherchephase gelesen hatte. Aber das Wichtigste für mich war der Kontrast über das Farbspektrum hinweg. Das fehlte meiner Meinung nach einigen der anderen Themes, auch wenn sie die Farben gut beherrschten.

Ich machte mich an die Arbeit und schuf **Blau** und **Gold** als Basisskala für die Arbeit über das Farbspektrum hinweg.

Ich verwendete **Lila** für Schlüsselwörter, die informativ sind, die ich aber nicht so stark hervorheben wollte – wenn Sie Kontrast schaffen wollen, müssen Sie auch überlegen, welche Farben dezent sein sollen, damit die Aufmerksamkeit auf das Wichtigste gelenkt wird. Wenn alles wichtig ist, ist nichts wichtig. Ich wollte auch den flachen Kontrast des Lila ausgleichen, indem ich es auf andere Weise anders gestaltete. Das habe ich durch die Verwendung von Kursivschrift erreicht. Manche Leute mögen das, manche hassen es. Ich entschied mich für eine Schriftart namens Dank Mono, ähnlich wie Operator Mono oder Fira Code (letztere ist die kostenlose Open-Source-Version), teilweise weil mir die Darstellung der kursiven Glyphen gefiel. Sie haben auch Schriftligaturen, die sehr stilvoll sein können. Sie stellen sie in Ihren Benutzereinstellungen mit "editor.fontLigatures": true ein. Manche Leute mögen die Kursivschrift jedoch nicht so sehr, daher habe ich eine Version ohne Kursivschrift erstellt, zu der die Leute wechseln konnten, wenn sie sie störte.

Ich wollte den Status/die Daten stark hervorheben, da sie für mich beim Scannen von Code wichtig sind. Ich begann mit **Rot**, weil ich das in vielen anderen Themes gesehen hatte, aber ich konnte mich nicht davon lösen, dass meine Augen nur dorthin gingen und dass Rot oft mit Fehlerzuständen assoziiert wird. Stattdessen verwendete ich die stärkste Farbe gegen den Hintergrund, den ich gewählt hatte, **Weiß**, und kursivierte sie, um sie noch weiter abzuheben. Sie hat auch den Vorteil, dass sie ein Mittelpunkt zwischen Blau und Gold ist. Die Rot/Orange-Unterscheidung habe ich für React-Komponenten aufgespart, die eine gewisse Trennung von den Standard-HTML-Elementen benötigten.

Kontrast ist ein Nullsummenspiel: Wenn alles wichtig ist, ist nichts wichtig. Ich habe mein Bestes getan, um sicherzustellen, dass Dinge, die konzeptionell ähnlich waren oder zurückfallen konnten, dies auch taten, damit starker Kontrast beabsichtigt war und nicht alles zu einem Regenbogen wurde, denn das beeinträchtigt Ihre Fähigkeit, das Dokument zu scannen.

Eine solche Entscheidung war, den Kontrast der Seitenleiste niedrig zu halten, um den Fokus auf den Editor zu lenken. Ich stellte fest, dass, wenn ich versuchte, den Kontrast in anderen Teilen meines Editors zu erhöhen, *meine Augen tatsächlich anfingen zu schmerzen*. Dies kann eine Herausforderung bei der Barrierefreiheit sein, denn nicht alle Menschen sind gleich, und Dinge wie Farbe und Schrift können zu einem Spektrum statt zu einer harten Regel werden.

Nachdem ich viele Tests durchgeführt hatte, entschied ich mich für einen Kompromiss: Ich behielt das Theme so, wie ich es selbst ohne Belastung verwenden konnte, und aktualisierte das Readme mit den Präferenzen, die ich jemandem empfehlen würde, der sich von mir unterscheidet und höhere Kontraststufen benötigt. Wenn Sie zu Ihren Benutzereinstellungen in VS Code gehen (Code > Einstellungen > Einstellungen), können Sie im rechten Bereich Ihre eigenen Anpassungen vornehmen. Mit Hilfe einiger Leute aus der Community, die Probleme gemeldet haben, weil sie diese Funktion wünschten, sind wir zu diesen möglichen Farbpräferenz-Updates für diejenigen gekommen, die den Kontrast benötigen

"workbench.colorCustomizations": {
  "activityBar.background": "#000C1D",
  "activityBar.border": "#102a44",
  "sideBar.background": "#001122",
  "sideBar.border": "#102a44",
  "sideBar.foreground": "#8BADC1"
},

Sie können hier tatsächlich beliebige Farben einfügen. Dies war nur ein Vorschlag als Ausgangspunkt, basierend auf den vorhandenen Theme-Farben. Diese Workbench-Farbanpassungen sind wirklich praktisch, sie ermöglichen es den Leuten, ein Theme zu verwenden und dann kleine Änderungen vorzunehmen, wie sie es für richtig halten. Wenn Sie ein Theme verwenden, das *fast* perfekt ist, aber nicht ganz, können Sie auf diese Weise immer kleine Änderungen vornehmen.

Es gab Hunderte von anderen kleinen Entscheidungen, die ich während der Erstellung getroffen habe (und immer noch treffe, während ich es pflege), aber nachdem ich eine gute Anzahl von Anpassungen vorgenommen hatte, überprüfte ich meine Arbeit gegen den Farbenblindheits-Simulator. Es war nicht gerade einfach, es in jeder Sprache für jede Einstellung richtig zum Laufen zu bringen, aber ich tat mein Bestes. Hier hat sich der Demo-Ordner als sehr nützlich erwiesen. Jetzt, da es veröffentlicht ist, kann ich, wenn jemand eine bestimmte Sprachunterstützung benötigt, ihn ermutigen, den Ordner zu PRen, damit ich ihn unterstützen kann.

Hier ist ein Beispiel für eine Angular-Datei

…und hier sind einige der Tests, die ich durchgeführt habe, um festzustellen, ob genügend Kontrast vorhanden ist. Denken Sie daran, ich suchte nach Kontrast **über** das Farbspektrum hinweg für sinnvolle Unterscheidungen und geringen Kontrast für Dinge, die weniger Aufmerksamkeit erfordern.

Es brauchte eine gute Anzahl von Tests, um etwas zu bekommen, das nicht monochrom wurde, besonders über verschiedene Sprachen hinweg. Die Anzahl der möglichen Farbkombinationen ist fast endlos, und es ist ziemlich schwierig, etwas zu schaffen, das in jedem Szenario perfekt funktioniert. Deshalb habe ich viel Zeit damit verbracht, den Demo-Ordner zu erstellen und kleine Anpassungen vorzunehmen, um so viel wie möglich abzudecken.

Fehlerbehebungen

Ich habe es veröffentlicht! Alle feiern! 🎉

Das Hilfreichste für mich waren die Beiträge von Leuten, die das Theme nutzten und mir ihre Schwierigkeiten mitteilten, indem sie Issues im GitHub-Repo protokollierten. Es ist schwierig, alle Fehlerszenarien eines Themes zu sehen, und ich hatte bisher 16 nachfolgende Veröffentlichungen, um über 50 Fehler zu beheben, einige mit Hilfe der Community. Je mehr Leute mir mitteilen, was sie sehen, desto besser wird das Theme. Nicht alles wird natürlich übernommen – es gibt Zeiten, in denen Leute Dinge wünschen, die mit anderen Anfragen kollidieren, sodass ich in manchen Fällen eine Entscheidung treffen muss. Dies ist jedoch selten, und die Mehrheit des bisherigen Feedbacks war sehr klar und umsetzbar.

Das war's! Wenn Sie sich das Theme ansehen möchten, ist es hier kostenlos erhältlich. Ich hoffe, Sie fanden das nützlich, entweder als Hintergrundinformationen zum Theme und den getroffenen Entscheidungen oder als Anleitung zur Erstellung Ihres eigenen.