Skip to content

Instantly share code, notes, and snippets.

  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save pmmueller/d3498632b66776db3fa257c7081ad33c to your computer and use it in GitHub Desktop.
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.9 (siehe Changelog)
// ----------------------------
// Changelog
// Version 0.9 (2022-10-01)
// - Korrekte Einfärbung für @media screen and (min-width: 600px)
// - Schrägstrich in grid-column: 2/3 dieselbe Farbe wie die Werte
// - Pseudoelemente wie ::after in dunkelgrau
// 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",
// @media screen *and* ...
"keyword.operator.logical.and.media.css",
// 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",
// Medium in @media: all | screen | print
"support.constant.media.css",
// 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",
// Der Schrägstrich in grid-column: 1/-1
// aber auch Roboto als unbekannte font-family hat diesen Token
"meta.property-value.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",
// Grid repeat()
"support.function.misc.css",
],
"settings": {
"foreground": "#e88501"
},
},
{
"scope": [
// CSS - Eigenschaften und @-Regeln
"support.type.property-name.css",
"support.type.property-name.media.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",
// Grid repeat() *auto-fit*
"variable.parameter.misc.css",
// Pseudoelemente wie ::after
"entity.other.attribute-name.pseudo-element.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",
"editor.accessibilitySupport": "off",
}
@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