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.activeBackground#000000
  • activityBar.activeBorder#707070
  • activityBar.background#000000
  • activityBar.border#707070
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#ffffff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#044289
  • button.foreground#dcffe4
  • button.hoverBackground#0366d6
  • checkbox.background#444d56
  • checkbox.border#1b1f23
  • contrastBorder#707070
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#0d1117
  • dropdown.border#1b1f23
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#24292e
  • editor.background#0a0d12
  • editor.findMatchBackground#ffffff3e
  • editor.findMatchBorder#0366d6
  • editor.findMatchHighlightBackground#d1cfcf3e
  • editor.focusedStackFrameHighlightBackground#bb880088
  • editor.foldBackground#282e33
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#707070
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#fb863283
  • editor.selectionBackground#d1d5da
  • editor.selectionHighlightBackground#17e5e633
  • editor.selectionHighlightBorder#17e5e600
  • editor.stackFrameHighlightBackground#aa770077
  • editor.wordHighlightBackground#17e5e600
  • editor.wordHighlightBorder#17e5e699
  • editor.wordHighlightStrongBackground#17e5e600
  • editor.wordHighlightStrongBorder#17e5e666
  • editorBracketMatch.background#17e5e650
  • editorBracketMatch.border#17e5e600
  • editorCursor.foreground#c8e1ff
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#2f363d
  • editorInlayHint.background#2b3036
  • editorInlayHint.foreground#959da5
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#1b1f23
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1f2428
  • errorForeground#f97583
  • focusBorder#79c0ff
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#000000
  • input.border#707070
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#39414a
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#044289
  • list.hoverBackground#282e34
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#171e27
  • list.inactiveSelectionForeground#e1e4e8
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#000
  • notifications.border#1b1f23
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • notificationToast.border#586069
  • panel.background#000000
  • panel.border#707070
  • panelInput.border#2f363d
  • panelTitle.activeBorder#79c0ff
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#0366d6
  • quickInput.background#040507
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • selection.background#008000
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#040507
  • sideBar.border#707070
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1b1f23
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#000000
  • statusBar.border#707070
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#24292e
  • statusBarItem.prominentBackground#282e34
  • tab.activeBackground#000000
  • tab.activeBorder#24292e
  • tab.activeBorderTop#79c0ff
  • tab.activeForeground#e1e4e8
  • tab.border#707070
  • tab.hoverBackground#24292e
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • terminal.background#040507
  • terminal.border#707070
  • terminal.foreground#d1d5da
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56
  • window.activeBorder#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#FFFFFF
emphasisitalic
strongbold
meta.diff.header#000080
comment#8b949e
constant.language#79b8ff
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#85e89d
constant.regexp#B46695
constant.character#79b8ff
entity.name.tag#79b8ff
entity.name.tag.css#fff5b1
entity.other.attribute-name#c8e1ff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#fff5b1
invalid#ea4a5a
markup.underlineunderline
markup.boldbold
markup.heading#5aa4f9bold
markup.italicitalic
markup.inserted#85e89d
markup.deleted#ffac70d3
markup.changed#79b8ff
punctuation.definition.tag#808080
meta.preprocessor#79b8ff
meta.preprocessor.string#ffac70d3
meta.preprocessor.numeric#85e89d
meta.structure.dictionary.key.python#c8e1ff
storage#79b8ff
storage.type#79b8ff
storage.modifier#79b8ff
string#ffac70d3
string.tag#ffac70d3
string.value#ffac70d3
string.regexp#ea4a5a
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#79b8ff
meta.template.expression#FFFFFF
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ffffffd9
keyword#79b8ff
keyword.control#79b8ff
keyword.operator#ffffffd9
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#79b8ff
keyword.other.unit#85e89d
support.function.git-rebase#ffffffd9
constant.sha.git-rebase#85e89d
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ffffffd9
variable.language.this#79b8ff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member#fff5b1
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator#d2a8ff
variable, meta.definition.variable.name, support.variable#c8e1ff
meta.object-literal.key#c8e1ff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#ffac70d3
meta.resultLinePrefix.contextLinePrefix.search#CBEDCB
token.info-token#2188ff
token.warn-token#28a745
token.error-token#ea4a5a
token.debug-token#8a63d2