Wie passe ich die Farben und das Theme in WebStorm individuell an?
- Überblick und Vorbereitung
- Theme auswählen oder installieren
- Farben und Schriftarten im Editor anpassen
- Farben einzelner Elemente im Detail anpassen
- Eigene Themes erstellen und exportieren
- Zusätzliche Tipps
Überblick und Vorbereitung
WebStorm bietet umfangreiche Möglichkeiten, das Aussehen der Entwicklungsumgebung an die eigenen Bedürfnisse anzupassen. Dazu zählen vor allem die Farbgestaltung der Benutzeroberfläche, der Editoren und das gesamte Theme. Das Theme in WebStorm steuert primär die Farben und Stile des Editors und der IDE-Oberfläche. Das Anpassen der Farben kann sowohl über vordefinierte Themes als auch durch individuelle Änderungen erfolgen. Im Folgenden wird beschrieben, wie Sie die Farben und das Theme individuell einrichten können.
Theme auswählen oder installieren
Um ein neues Theme auszuwählen oder zu installieren, öffnen Sie zunächst die Einstellungen. Unter Windows und Linux drücken Sie dazu Strg + Alt + S, auf macOS Cmd + ,. Im Einstellungsfenster navigieren Sie zu Appearance & Behavior > Appearance. Dort finden Sie das Dropdown-Menü für das Theme, in dem Sie zwischen vordefinierten Optionen wie IntelliJ Light, Darcula oder eventuell weiteren installierten Themes wählen können. Um zusätzliche Themes zu erhalten, klicken Sie auf den Button Browse Repositories..., suchen Sie nach weiteren Themes (z.B. Material Theme UI) und installieren Sie diese. Nach der Installation ist meist ein Neustart von WebStorm notwendig, damit das neue Theme wirksam wird.
Farben und Schriftarten im Editor anpassen
Das Theme steuert viele allgemeine Farbparameter, aber für eine feinere Individualisierung können Sie die Farb- und Schriftstile spezieller Codeelemente ändern. Das geht im Einstellungsmenü unter Editor > Color Scheme. Hier finden Sie die Farbprofile, mit denen Sie Syntaxfarben, Hintergrundfarben und Schriftarteigenschaften definieren können. Zunächst wählen Sie ein bestehendes Farbprofil aus, welches Sie als Basis verwenden möchten. Um ein neues Schema zu bearbeiten, duplizieren Sie das vorhandene Profil, da die Standard-Farbprofile nicht direkt bearbeitet werden können.
Nach dem Duplizieren können Sie die Farben für viele unterschiedliche Elemente definieren, beispielsweise für Schlüsselwörter, Kommentare, Strings, Variablen, Funktionen und mehr. Zusätzlich können Sie auch die Text- und Hintergrundfarbe, Schriftgröße, Schriftart und weitere Eigenschaften anpassen. Die Änderungen werden sofort am Editor wirksam, sodass Sie direkt sehen können, wie sich die Anpassungen auswirken.
Farben einzelner Elemente im Detail anpassen
Für sehr detaillierte Anpassungen können Sie in der Rubrik Color Scheme > Language Defaults allgemeine Einstellungen für alle Sprachen vornehmen, oder unter Color Scheme > farbspezifische Einstellungen für eine einzelne Programmiersprache treffen. Dort können Sie beispielsweise die Farben von Token, Methoden, Klassen, Variablen, Konstanten und verschiedenen Syntaxelementen individuell einstellen. Auf diese Weise können Sie sowohl die Lesbarkeit verbessern als auch eine für Sie angenehmere Optik schaffen.
Eigene Themes erstellen und exportieren
Wenn Sie Ihr individuelles Farb-Setup als eigenes Theme verwenden möchten, können Sie dieses speichern und gegebenenfalls exportieren, um es auf anderen Installationen oder Rechnern zu benutzen oder mit Kollegen zu teilen. Innerhalb der Color Scheme Einstellungen können Sie die aktuellen Einstellungen sichern und über die Funktion Export Settings exportieren. Alternativ besteht die Möglichkeit, ein komplett neues Theme mittels XML-Dateien zu erstellen, dies erfordert jedoch fortgeschrittene Kenntnisse und ist eher für sehr spezielle Bedürfnisse gedacht.
Zusätzliche Tipps
Bei der Anpassung sollten Sie darauf achten, dass die gewählten Farben eine gute Kontrastwirkung besitzen, um die Lesbarkeit zu erhalten. Gerade bei dunklen oder sehr bunten Themes kann die Lesbarkeit leiden, wenn die Farben nicht gut aufeinander abgestimmt sind. Testen Sie die Änderungen sowohl bei Tageslicht als auch in dunkleren Umgebungen. WebStorm bietet außerdem die Möglichkeit, den Zoom im Editor zu verändern, was ebenfalls die Lesbarkeit verbessern kann.
Zusammenfassend lässt sich sagen, dass WebStorm sehr flexibel bei der Anpassung von Theme und Farben ist. Über die Einstellungen finden Sie eine Vielzahl von Optionen zur Individualisierung, angefangen bei der Auswahl vorgefertigter Themes bis hin zum Erstellen eigener Farbprofile, sodass Sie Ihre Programmierumgebung optimal auf Ihre Vorlieben abstimmen können.