Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VS Code - make it look like Brackets
{
// ==================================
// Make Visual Studio Code look like Brackets
// Anpassungen für das Theme »Hell (Visual Studio)« (english: »Visual Studio Light«)
// (Weitere Infos: html-und-css.de/make-vs-code-look-like-brackets/)
// Die in diesem Gist gespeicherten Anpassungen müssen manuell kopiert und in die settings.json eingefügt werden:
// 1. VS Code starten
// 2. Befehlspalette > Einstellungen: Farbdesign, und das Theme »Hell (Visual Studio)« aktivieren
// 3. Befehlspalette > Einstellungen: Einstellungen öffnen, um die settings.json öffnen
// 4. Gist-Code kopieren und *nach* der vorhandenen öffnenden geschweiften Klammer einfügen
// Autor: Peter Müller (pmueller.de)
// Version: 0.8 (siehe Changelog)
// ----------------------------
// Changelog
// Version 0.8 (2022-03-04)
// - nicht unterstützte CSS-Eigenschaften = lila (meta.property-name.css)
// Version 0.7 (2021-12-06)
// - URL zum Beitrag auf html-und-css.de hinzugefügt
// - Text etwas überarbeitet
// Version 0.6 (2021-10-22)
// - Aufräumen und kurze Installationsanleitung hinzufügen
// Version 0.5 (2021-09-10)
// - !important = blau (wie Selektoren)
// Version 0.4 (2021-07-16)
// - Attributselektoren wie [class] = blau
// - Pseudoklassen und -elemente in Selektoren = blau
// - runde Klammern in Werten = dunkelgrau
// - Kommata in Auflistungen = dunkelgrau
// - CSS-Variablen = dunkelgrau
// - Browser-Präfix in Eigenschaften = lila
// - Browser-Präfix in Werten (-apple-system) = orange
// Version 0.3 (2021-06-26)
// Version 0.2 (2021-06-18)
// Version 0.1 (2021-06-16)
// ==================================
// Der JSON-Code zur Anpassung von VS Code
// Der JSON-Code für die farbliche Anpassung besteht aus zwei großen Abschnitten:
// 1. Arbeitsbereich von Visual Studio Code (workbench.colorCustomizations)
// 2. Syntax-Highlighting für HTML und CSS (editor.tokenColorCustomiatzions)
// Hier die verwendeten Farbwerte von Brackets auf einen Blick:
// - blau: #446fbd
// - grün: #6d8600
// - lila: #8757ad
// - orange: #e88501
// - mittelgrau: #949494
// - dunkelgrau1: #535353
// - dunkelgrau2: #47484b
// - hellgrau: #f5f5f5 (whitesmoke)
// ----------------------------
// 1. Arbeitsbereich von Visual Studio Code farblich anpassen
// (workbench.colorCustomizations)
//
// Einführung: https://code.visualstudio.com/docs/getstarted/themes
// Liste der Namen: https://code.visualstudio.com/api/references/theme-color
"workbench.colorCustomizations": {
"[Visual Studio Light]": {
// Dunkle Titelleiste wie bei Brackets
// Mit den Tabs darunter ist die helle Titelleiste vom Theme vielleicht besser
// (ist fast egal, denn im Vollbild ist diese Titelleiste nicht zu sehen ...)
"titleBar.activeBackground": "#3b3f41",
"titleBar.activeForeground": "#f5f5f5",
// Hintergrund im Editor
"editor.background": "#f8f8f8",
// Aktivitätsleiste ganz links
"activityBar.background": "#47484b",
"activityBar.foreground": "#f5f5f5",
// Zeilennummerierung im Editor
"editorLineNumber.foreground": "#949494",
// Hervorhebung von Tags und Klammern
"editorBracketMatch.background": "#e7e7e7",
"editorBracketMatch.border": "#e7e7e7",
// Statuszeile ganz unten
"statusBar.border": "#e7e7e7",
"statusBar.background": "#f5f5f5",
"statusBar.foreground": "#535353",
// Statuszeile, wenn im Editor nur eine einzelne Datei geöffnet ist
"statusBar.noFolderBackground": "#446fbd",
"statusBar.noFolderForeground": "#f5f5f5",
},
},
// ----------------------------
// 2. Syntax-Highlighting für HTML und CSS farblich anpassen
// (editor.tokenColorCustomiatzions)
// Sehr nützlich zur Identifizierung der Tokens ist dieses integrierte Tool:
// Befehlspalette (F1) > Developer: Inspect Editor Tokens and Scopes
"editor.tokenColorCustomizations": {
"[Visual Studio Light]": {
"comments": "#949494",
"textMateRules": [
{
"scope": [
// HTML - Anfangs-Tag, Name und Ende-Tag
"punctuation.definition.tag.begin.html",
"entity.name.tag.html",
"punctuation.definition.tag.end.html",
// CSS - Selektoren: Element, Klassen, IDs und Universal
"entity.name.tag.css",
"entity.other.attribute-name.css",
"entity.other.attribute-name.class.css",
"entity.other.attribute-name.id.css",
"entity.name.tag.wildcard.css",
// CSS - Pseudoklassen und -elemente
"entity.other.attribute-name.pseudo-class.css",
"entity.other.attribute-name.pseudo-element.css",
// !important
"keyword.other.important.css",
],
"settings": {
"foreground": "#446fbd"
},
},
{
"scope": [
// HTML-Attribute
"entity.other.attribute-name.html",
// CSS - numerische Werte
"constant.numeric.css",
"keyword.other.unit.em.css",
"keyword.other.unit.rem.css",
"keyword.other.unit.px.css",
"keyword.other.unit.percentage.css",
],
"settings": {
"foreground": "#6d8600"
},
},
{
"scope": [
// HTML - Werte in Anführungstrichen und Sonderzeichen
"string.quoted.double.html",
"string.quoted.single.html",
"constant.character.entity.named.mdash.html",
"constant.character.entity.named.nbsp.html",
// CSS - Werte in Anführungsstrichen, Eigenschaften und Schriftnamen
"string.quoted.double.css",
"string.quoted.single.css",
"support.constant.property-value.css",
"support.constant.font-name.css",
// Eigenschaften mit Browser-Präfix
"support.constant.vendored.property-value.css",
// z. B. Roboto als unbekannte font-family hat diesen Token
"meta.property-value.css",
],
"settings": {
"foreground": "#e88501"
},
},
{
"scope": [
// CSS - Eigenschaften und @-Regeln
"support.type.property-name.css",
"meta.property-name.css",
"keyword.control.at-rule.media.css",
"keyword.control.at-rule.import.css",
"keyword.control.at-rule.supports.css",
// Eigenschaften mit Brower-Präfix
"support.type.vendored.property-name.css",
],
"settings": {
"foreground": "#8757ad"
},
},
{
"scope": [
// HTML - Text zwischen den Tags
"text.html.derivative",
// CSS - geschweifte Klammern
"punctuation.section.property-list.begin.bracket.curly.css",
"punctuation.section.property-list.end.bracket.curly.css",
// Komma als Trennzeichen, z. B. in min(55rem, 100%)
"punctuation.separator.list.comma.css",
// CSS - Semikolon am Ende der Anweisungen
"punctuation.terminator.rule.css",
// runde Klammer um Werte
"punctuation.section.function.begin.bracket",
"punctuation.section.function.end.bracket",
// CSS-Variablen definieren (dunkelgrau, nicht lila wie CSS-Eigenschaften)
"variable.css",
// CSS-Variablen in Werten
"variable.argument.css",
],
"settings": {
"foreground": "#535353"
},
},
{
"scope": [
// CSS - unbekannte Selektoren etc.
"entity.name.tag.custom.css",
],
"settings": {
"foreground": "#dc232f"
},
},
]
},
},
// Ende von JSON-Code für "Make Visual Studio Code look like Brackets"
// ===========================================================================
// ===========================================================================
// Ab hier speichert VS Code seine allgemeinen Einstellungen (macOS: cmd + komma)
// Die folgenden Anweisungen stammen von Visual Studio Code
"workbench.colorTheme": "Visual Studio Light",
"breadcrumbs.enabled": false,
"editor.minimap.enabled": false,
"editor.fontSize": 16,
"editor.fontFamily": "'Source Code Pro', Menlo, Monaco, 'Courier New', monospace",
"editor.links": false,
"editor.renderWhitespace": "none",
"[html]": {
"editor.suggest.insertMode": "replace"
},
"workbench.startupEditor": "newUntitledFile",
"security.workspace.trust.untrustedFiles": "open",
}
@pmmueller
Copy link
Author

pmmueller commented Oct 22, 2021

Visual Studio Code - make it look like Brackets

Der Code aus dem Gist ändert VS Code und das Theme Hell (Visual Studio) (aka Visual Studio Light) in zwei Bereichen:

  1. Arbeitsbereich von Code
  2. Syntax-Highlighting für HTML und CSS

vscode-brackets-html

vscode-brackets-css

Installation:

  1. VS Code starten
  2. Befehlspalette > Einstellungen: Farbdesign - Theme Hell (Visual Studio) aktivieren
  3. Befehlspalette > Einstellungen: Einstellungen öffnen - settings.json öffnen
  4. Code vom Gist kopieren und nach der vorhandenen öffnenden geschweiften Klammer einfügen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment