Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#f0f0f0
  • activityBar.border#dfdfdf
  • activityBar.foreground#383a42
  • activityBar.inactiveForeground#9ca0a4
  • activityBarBadge.background#4078f2
  • activityBarBadge.foreground#fafafa
  • breadcrumb.activeSelectionForeground#4078f2
  • breadcrumb.background#fafafa
  • breadcrumb.focusForeground#383a42
  • breadcrumb.foreground#9ca0a4
  • breadcrumbPicker.background#f0f0f0
  • commandCenter.activeBackground#dfdfdf
  • commandCenter.activeForeground#4078f2
  • commandCenter.background#f0f0f0
  • commandCenter.border#dfdfdf
  • commandCenter.foreground#383a42
  • debugToolBar.background#f0f0f0
  • debugToolBar.border#dfdfdf
  • diffEditor.insertedTextBackground#50a14f1a
  • diffEditor.removedTextBackground#e456491a
  • editor.background#fafafa
  • editor.findMatchBackground#a0bcf8
  • editor.findMatchHighlightBackground#dfdfdf
  • editor.foreground#383a42
  • editor.hoverHighlightBackground#f0f0f0
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#f0f0f0
  • editor.selectionBackground#a0bcf8
  • editor.selectionHighlightBackground#e7e7e7
  • editor.wordHighlightBackground#dfdfdf
  • editor.wordHighlightStrongBackground#c6c7c7
  • editorBracketMatch.background#dfdfdf
  • editorBracketMatch.border#9ca0a4
  • editorCodeLens.foreground#9ca0a4
  • editorCursor.background#fafafa
  • editorCursor.foreground#383a42
  • editorError.foreground#e45649
  • editorGutter.addedBackground#50a14f
  • editorGutter.background#fafafa
  • editorGutter.deletedBackground#e45649
  • editorGutter.modifiedBackground#da8548
  • editorHint.foreground#4db5bd
  • editorIndentGuide.activeBackground#c6c7c7
  • editorIndentGuide.background#dfdfdf
  • editorInfo.foreground#4078f2
  • editorLineNumber.activeForeground#1b2229
  • editorLineNumber.foreground#b8bcc8
  • editorOverviewRuler.addedForeground#50a14f
  • editorOverviewRuler.border#dfdfdf
  • editorOverviewRuler.deletedForeground#e45649
  • editorOverviewRuler.errorForeground#e45649
  • editorOverviewRuler.findMatchForeground#4078f2
  • editorOverviewRuler.infoForeground#4078f2
  • editorOverviewRuler.modifiedForeground#da8548
  • editorOverviewRuler.warningForeground#986801
  • editorRuler.foreground#dfdfdf
  • editorWarning.foreground#986801
  • editorWhitespace.foreground#dfdfdf
  • editorWidget.background#f0f0f0
  • editorWidget.border#dfdfdf
  • editorWidget.foreground#383a42
  • editorWidget.resizeBorder#4078f2
  • extensionButton.prominentBackground#50a14f
  • extensionButton.prominentForeground#fafafa
  • extensionButton.prominentHoverBackground#50a14fdd
  • gitDecoration.addedResourceForeground#50a14f
  • gitDecoration.conflictingResourceForeground#b751b6
  • gitDecoration.deletedResourceForeground#e45649
  • gitDecoration.ignoredResourceForeground#9ca0a4
  • gitDecoration.modifiedResourceForeground#da8548
  • gitDecoration.submoduleResourceForeground#4078f2
  • gitDecoration.untrackedResourceForeground#4db5bd
  • keybindingLabel.background#e7e7e7
  • keybindingLabel.border#c6c7c7
  • keybindingLabel.bottomBorder#9ca0a4
  • keybindingLabel.foreground#383a42
  • list.activeSelectionBackground#dfdfdf
  • list.activeSelectionForeground#383a42
  • list.dropBackground#a0bcf8
  • list.errorForeground#e45649
  • list.focusBackground#dfdfdf
  • list.focusForeground#383a42
  • list.highlightForeground#4078f2
  • list.hoverBackground#f0f0f0
  • list.hoverForeground#383a42
  • list.inactiveFocusBackground#e7e7e7
  • list.inactiveSelectionBackground#e7e7e7
  • list.inactiveSelectionForeground#383a42
  • list.invalidItemForeground#e45649
  • list.warningForeground#986801
  • menu.background#f0f0f0
  • menu.border#dfdfdf
  • menu.foreground#383a42
  • menu.selectionBackground#dfdfdf
  • menu.selectionBorder#c6c7c7
  • menu.selectionForeground#383a42
  • menu.separatorBackground#dfdfdf
  • merge.border#c6c7c7
  • merge.commonContentBackground#98680120
  • merge.commonHeaderBackground#98680140
  • merge.currentContentBackground#50a14f20
  • merge.currentHeaderBackground#50a14f40
  • merge.incomingContentBackground#4078f220
  • merge.incomingHeaderBackground#4078f240
  • notificationCenter.border#dfdfdf
  • notificationCenterHeader.background#e7e7e7
  • notificationCenterHeader.foreground#383a42
  • notificationLink.foreground#4078f2
  • notifications.background#f0f0f0
  • notifications.border#dfdfdf
  • notifications.foreground#383a42
  • notificationToast.border#dfdfdf
  • panel.background#fafafa
  • panel.border#dfdfdf
  • panel.dropBorder#4078f2
  • panelTitle.activeBorder#4078f2
  • panelTitle.activeForeground#383a42
  • panelTitle.inactiveForeground#9ca0a4
  • peekView.background#f0f0f0
  • peekView.border#4078f2
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#a0bcf8
  • peekViewResult.background#f0f0f0
  • peekViewResult.fileForeground#383a42
  • peekViewResult.lineForeground#9ca0a4
  • peekViewResult.matchHighlightBackground#a0bcf8
  • peekViewResult.selectionBackground#dfdfdf
  • peekViewResult.selectionForeground#383a42
  • peekViewTitle.background#e7e7e7
  • peekViewTitleDescription.foreground#9ca0a4
  • peekViewTitleLabel.foreground#383a42
  • pickerGroup.border#dfdfdf
  • pickerGroup.foreground#4078f2
  • quickInput.background#f0f0f0
  • quickInput.foreground#383a42
  • settings.checkboxBackground#f0f0f0
  • settings.checkboxBorder#dfdfdf
  • settings.checkboxForeground#383a42
  • settings.dropdownBackground#f0f0f0
  • settings.dropdownBorder#dfdfdf
  • settings.dropdownForeground#383a42
  • settings.headerForeground#383a42
  • settings.modifiedItemIndicator#4078f2
  • settings.numberInputBackground#f0f0f0
  • settings.numberInputBorder#dfdfdf
  • settings.numberInputForeground#383a42
  • settings.textInputBackground#f0f0f0
  • settings.textInputBorder#dfdfdf
  • settings.textInputForeground#383a42
  • sideBar.background#f0f0f0
  • sideBar.border#dfdfdf
  • sideBar.foreground#383a42
  • sideBarSectionHeader.background#e7e7e7
  • sideBarSectionHeader.border#dfdfdf
  • sideBarSectionHeader.foreground#383a42
  • sideBarTitle.foreground#383a42
  • statusBar.background#e7e7e7
  • statusBar.border#dfdfdf
  • statusBar.debuggingBackground#da8548
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#383a42
  • statusBar.noFolderBackground#a626a4
  • statusBar.noFolderForeground#fafafa
  • statusBarItem.activeBackground#dfdfdf
  • statusBarItem.hoverBackground#f0f0f0
  • statusBarItem.prominentBackground#4078f2
  • statusBarItem.prominentForeground#fafafa
  • statusBarItem.prominentHoverBackground#4078f2dd
  • terminal.ansiBlack#1b2229
  • terminal.ansiBlue#4078f2
  • terminal.ansiBrightBlack#202328
  • terminal.ansiBrightBlue#4078f2
  • terminal.ansiBrightCyan#0184bc
  • terminal.ansiBrightGreen#50a14f
  • terminal.ansiBrightMagenta#a626a4
  • terminal.ansiBrightRed#e45649
  • terminal.ansiBrightWhite#383a42
  • terminal.ansiBrightYellow#986801
  • terminal.ansiCyan#0184bc
  • terminal.ansiGreen#50a14f
  • terminal.ansiMagenta#a626a4
  • terminal.ansiRed#e45649
  • terminal.ansiWhite#c6c7c7
  • terminal.ansiYellow#986801
  • terminal.background#fafafa
  • terminal.foreground#383a42
  • terminal.selectionBackground#a0bcf8
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#383a42
  • titleBar.border#dfdfdf
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#9ca0a4
  • tree.indentGuidesStroke#dfdfdf
  • walkThrough.embeddedEditorBackground#f0f0f0
  • welcomePage.background#fafafa
  • welcomePage.buttonBackground#f0f0f0
  • welcomePage.buttonHoverBackground#e7e7e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9ca0a4italic
comment.documentation, comment.block.documentation#7d8799italic
invalid.illegal#e45649
invalid.deprecated#e45649
keyword.operator, punctuation.separator.key-value#4078f2
keyword, storage.modifier, storage.type.function.arrow#e45649
storage, storage.type#e45649
storage.type.class, storage.type.enum, storage.type.interface, storage.type.namespace, storage.type.type, entity.name.type, entity.other.inherited-class, support.type#986801
constant.language, support.constant, variable.language#b751b6
variable, support.variable, entity.name.variable#6f42c1
entity.name.function, meta.function-call.generic, support.function.general#a626a4
entity.name.method, meta.method-call, meta.method.declaration#0184bc
entity.name.class, entity.other.inherited-class, support.class#986801
entity.name.exception#e45649
entity.name.sectionbold
constant.numeric, constant.character, constant#da8548
string#50a14f
constant.character.escape#0184bc
string.regexp#0184bc
constant.other.symbol#da8548
punctuation#383a42
punctuation.section.embedded, variable.interpolation#e45649
constant.language, constant.other.caps, support.constant#b751b6
support.function, support.class, support.variable, meta.property-name#a626a4
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#9ca0a4
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#e45649
entity.name.tag#e45649
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#da8548italic
constant.character.entity, punctuation.definition.entity#e45649
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#4078f2
meta.property-name, support.type.property-name#50a14f
meta.property-value, meta.property-value constant.other, support.constant.property-value#da8548
keyword.other.importantbold
markup.changed#da8548
markup.deleted#e45649
markup.italicitalic
markup.error#e45649
markup.inserted#50a14f
meta.link#4078f2
markup.output, markup.raw#9ca0a4
markup.prompt#9ca0a4
markup.heading#e45649bold
markup.boldbold
markup.traceback#e45649
markup.underlineunderline
markup.quote#986801
markup.list#4078f2
markup.bold, markup.italic#50a14f
markup.inline.raw#da8548
meta.diff.range, meta.diff.index, meta.separator#9ca0a4
meta.diff.header.from-file#9ca0a4
meta.diff.header.to-file#9ca0a4
source.json meta.structure.dictionary.json support.type.property-name.json#4078f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a626a4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da8548
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e45649
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#986801
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4078f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a626a4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da8548
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e45649