Skip to main content
Coding Theme

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.activeBorder#ffffffff
  • activityBar.background#181818ff
  • activityBar.dropBorder#ffffffff
  • activityBar.foreground#ffffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#0277bdff
  • activityBarBadge.foreground#ffffffff
  • badge.background#424242ff
  • badge.foreground#ffffffff
  • banner.background#0d47a1ff
  • banner.foreground#ffffffff
  • banner.iconForeground#2196f3ff
  • breadcrumb.activeSelectionForeground#e0e0e0ff
  • breadcrumb.background#212121ff
  • breadcrumb.focusForeground#e0e0e0ff
  • breadcrumb.foreground#bdbdbdcc
  • breadcrumbPicker.background#212121ff
  • button.background#01579bff
  • button.foreground#ffffffff
  • button.hoverBackground#0277bdff
  • button.secondaryBackground#424242ff
  • button.secondaryForeground#ffffffff
  • button.secondaryHoverBackground#424242ff
  • charts.blue#2196f3ff
  • charts.foreground#bdbdbdff
  • charts.green#81c784ff
  • charts.lines#bdbdbd80
  • charts.orange#fb8c00ff
  • charts.purple#9575cdff
  • charts.red#ef5350ff
  • charts.yellow#fbc02dff
  • checkbox.background#424242ff
  • checkbox.border#424242ff
  • checkbox.foreground#eeeeeeff
  • descriptionForeground#bdbdbdb3
  • diffEditor.diagonalFill#bdbdbd33
  • diffEditor.insertedLineBackground#8bc34a33
  • diffEditor.insertedTextBackground#8bc34a33
  • diffEditor.removedLineBackground#e64a1933
  • diffEditor.removedTextBackground#e64a1966
  • disabledForeground#bdbdbd80
  • dropdown.background#424242ff
  • dropdown.border#424242ff
  • dropdown.foreground#eeeeeeff
  • editor.background#1c1c1cff
  • editor.findMatchBackground#455a64ff
  • editor.findMatchHighlightBackground#e6510055
  • editor.findRangeHighlightBackground#42424266
  • editor.foreground#bdbdbdff
  • editor.hoverHighlightBackground#01579b40
  • editor.inactiveSelectionBackground#01579b80
  • editor.selectionBackground#01579bff
  • editor.selectionHighlightBackground#bbdefb26
  • editor.snippetFinalTabstopHighlightBorder#616161ff
  • editor.snippetTabstopHighlightBackground#7575754d
  • editorError.foreground#ef5350ff
  • editorGroup.border#424242ff
  • editorGroup.dropBackground#61616180
  • editorGroup.dropIntoPromptBackground#212121ff
  • editorGroup.dropIntoPromptForeground#bdbdbdff
  • editorGroupHeader.noTabsBackground#181818ff
  • editorGroupHeader.tabsBackground#181818ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#212121ff
  • editorHoverWidget.border#424242ff
  • editorHoverWidget.foreground#bdbdbdff
  • editorHoverWidget.statusBarBackground#212121ff
  • editorIndentGuide.activeBackground1#757575ff
  • editorInfo.foreground#2196f3ff
  • editorInlayHint.background#42424299
  • editorInlayHint.foreground#ffffffcc
  • editorInlayHint.parameterBackground#42424299
  • editorInlayHint.parameterForeground#ffffffcc
  • editorInlayHint.typeBackground#42424299
  • editorInlayHint.typeForeground#ffffffcc
  • editorLightBulb.foreground#ffca28ff
  • editorLightBulbAutoFix.foreground#64b5f6ff
  • editorLink.activeForeground#2196f3ff
  • editorOverviewRuler.commonContentForeground#61616166
  • editorOverviewRuler.currentContentForeground#4db6ac80
  • editorOverviewRuler.findMatchForeground#fb8c007e
  • editorOverviewRuler.incomingContentForeground#42a5f580
  • editorOverviewRuler.selectionHighlightForeground#9e9e9ecc
  • editorPane.background#212121ff
  • editorWarning.foreground#fbc02dff
  • editorWidget.background#212121ff
  • editorWidget.border#424242ff
  • editorWidget.foreground#bdbdbdff
  • errorForeground#ff8a65ff
  • extensionBadge.remoteBackground#0277bdff
  • extensionBadge.remoteForeground#ffffffff
  • focusBorder#1e88e5ff
  • foreground#bdbdbdff
  • icon.foreground#bdbdbdff
  • input.background#424242ff
  • input.foreground#bdbdbdff
  • input.placeholderForeground#9e9e9eff
  • inputOption.activeBackground#1e88e566
  • inputOption.activeBorder#0277bd00
  • inputOption.activeForeground#ffffffff
  • inputOption.hoverBackground#61616180
  • inputValidation.errorBackground#4e342eff
  • inputValidation.errorBorder#bf360cff
  • inputValidation.infoBackground#263238ff
  • inputValidation.infoBorder#0277bdff
  • inputValidation.warningBackground#212121ff
  • inputValidation.warningBorder#9e9d24ff
  • keybindingLabel.background#7575752b
  • keybindingLabel.border#42424299
  • keybindingLabel.bottomBorder#42424299
  • keybindingLabel.foreground#bdbdbdff
  • list.activeSelectionBackground#0d47a1ff
  • list.activeSelectionForeground#ffffffff
  • list.activeSelectionIconForeground#ffffffff
  • list.deemphasizedForeground#9e9e9eff
  • list.dropBackground#424242ff
  • list.errorForeground#ff8a65ff
  • list.filterMatchBackground#e6510055
  • list.focusHighlightForeground#42a5f5ff
  • list.focusOutline#1e88e5ff
  • list.highlightForeground#42a5f5ff
  • list.hoverBackground#212121ff
  • list.inactiveSelectionBackground#424242ff
  • list.invalidItemForeground#9e9d24ff
  • list.warningForeground#fbc02dff
  • listFilterWidget.background#212121ff
  • listFilterWidget.noMatchesOutline#bf360cff
  • listFilterWidget.outline#00000000
  • menu.background#212121ff
  • menu.foreground#bdbdbdff
  • menu.selectionBackground#0d47a1ff
  • menu.selectionForeground#ffffffff
  • menu.separatorBackground#616161ff
  • menubar.selectionBackground#61616150
  • menubar.selectionForeground#bdbdbdff
  • merge.commonContentBackground#61616129
  • merge.commonHeaderBackground#61616166
  • merge.currentContentBackground#4db6ac33
  • merge.currentHeaderBackground#4db6ac80
  • merge.incomingContentBackground#42a5f533
  • merge.incomingHeaderBackground#42a5f580
  • minimap.errorHighlight#f44336b3
  • minimap.findMatchHighlight#fb8a0080
  • minimap.foregroundOpacity#000000ff
  • minimap.selectionHighlight#01589b80
  • minimap.selectionOccurrenceHighlight#61616180
  • minimap.warningHighlight#fbc02dff
  • minimapSlider.activeBackground#bdbdbd33
  • minimapSlider.background#75757533
  • minimapSlider.hoverBackground#6161615a
  • notificationCenterHeader.background#212121ff
  • notificationLink.foreground#2196f3ff
  • notifications.background#212121ff
  • notifications.border#212121ff
  • notifications.foreground#bdbdbdff
  • notificationsErrorIcon.foreground#ef5350ff
  • notificationsInfoIcon.foreground#2196f3ff
  • notificationsWarningIcon.foreground#fbc02dff
  • panel.background#212121ff
  • panel.border#75757559
  • panel.dropBorder#eeeeeeff
  • panelSection.border#75757559
  • panelSection.dropBackground#61616180
  • panelSectionHeader.background#75757533
  • panelTitle.activeBorder#eeeeeeff
  • panelTitle.activeForeground#eeeeeeff
  • panelTitle.inactiveForeground#eeeeee99
  • pickerGroup.border#424242ff
  • pickerGroup.foreground#2196f3ff
  • ports.iconRunningProcessForeground#388e3cff
  • problemsErrorIcon.foreground#ef5350ff
  • problemsInfoIcon.foreground#2196f3ff
  • problemsWarningIcon.foreground#fbc02dff
  • progressBar.background#1976d2ff
  • quickInput.background#212121ff
  • quickInput.foreground#bdbdbdff
  • quickInputList.focusBackground#0d47a1ff
  • quickInputList.focusForeground#ffffffff
  • quickInputTitle.background#ffffff1b
  • sash.hoverBorder#1e88e5ff
  • scrollbar.shadow#000000ff
  • scrollbarSlider.activeBackground#bdbdbd66
  • scrollbarSlider.background#75757566
  • scrollbarSlider.hoverBackground#616161b3
  • searchEditor.findMatchBackground#e6510038
  • sideBar.background#181818ff
  • sideBar.border#303030ff
  • sideBar.dropBackground#61616180
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#bdbdbd33
  • sideBarTitle.foreground#bdbdbdff
  • sideBySideEditor.horizontalBorder#424242ff
  • sideBySideEditor.verticalBorder#424242ff
  • statusBar.background#181818ff
  • statusBar.border#303030ff
  • statusBar.focusBorder#ffffffff
  • statusBar.foreground#ffffffff
  • statusBar.noFolderBackground#6a1b9aff
  • statusBar.noFolderForeground#ffffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.compactHoverBackground#ffffff33
  • statusBarItem.errorBackground#bf360cff
  • statusBarItem.errorForeground#ffffffff
  • statusBarItem.focusBorder#ffffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#1f1f1fff
  • statusBarItem.remoteForeground#ffffffff
  • statusBarItem.warningBackground#827717ff
  • statusBarItem.warningForeground#ffffffff
  • tab.activeBackground#303030ff
  • tab.activeBorderTop#303030ff
  • tab.activeForeground#ffffffff
  • tab.activeModifiedBorder#039be5ff
  • tab.border#303030ff
  • tab.inactiveBackground#181818ff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#039be580
  • tab.lastPinnedBorder#bdbdbd33
  • tab.unfocusedActiveBackground#212121ff
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedActiveModifiedBorder#039be580
  • tab.unfocusedInactiveBackground#212121ff
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#039be540
  • textBlockQuote.background#7575751a
  • textBlockQuote.border#0277bd80
  • textCodeBlock.background#00000066
  • textLink.activeForeground#2196f3ff
  • textLink.foreground#2196f3ff
  • textPreformat.foreground#ffcc80ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#181818ff
  • titleBar.activeForeground#bdbdbdff
  • titleBar.border#303030ff
  • titleBar.inactiveBackground#42424299
  • titleBar.inactiveForeground#bdbdbd99
  • toolbar.activeBackground#61616150
  • toolbar.hoverBackground#61616150
  • tree.indentGuidesStroke#616161ff
  • tree.tableColumnsBorder#bdbdbd20
  • tree.tableOddRowsBackground#bdbdbd0a
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e0e0e0ff
emphasisitalic
strongbold
header#311b92ff
comment#828282ff
constant.language#2196f3ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#a5d6a7ff
constant.regexp#5c6bc0ff
entity.name.tag#2196f3ff
entity.name.tag.css#ffcc80ff
entity.other.attribute-name#81d4faff
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#ffcc80ff
invalid#ef5350ff
markup.underlineunderline
markup.bold#2196f3ffbold
markup.heading#2196f3ffbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#a5d6a7ff
markup.deleted#ffab91ff
markup.changed#2196f3ff
punctuation.definition.quote.begin.markdown#689f38ff
punctuation.definition.list.begin.markdown#2196f3ff
markup.inline.raw#ffab91ff
punctuation.definition.tag#757575ff
meta.preprocessor, entity.name.function.preprocessor#2196f3ff
meta.preprocessor.string#ffab91ff
meta.preprocessor.numeric#a5d6a7ff
meta.structure.dictionary.key.python#81d4faff
meta.diff.header#2196f3ff
storage#2196f3ff
storage.type#2196f3ff
storage.modifier, keyword.operator.noexcept#2196f3ff
string, meta.embedded.assembly#ffab91ff
string.tag#ffab91ff
string.value#ffab91ff
string.regexp#e57373ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#2196f3ff
meta.template.expression#e0e0e0ff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#81d4faff
keyword#2196f3ff
keyword.control#2196f3ff
keyword.operator#e0e0e0ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#2196f3ff
keyword.other.unit#a5d6a7ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#2196f3ff
support.function.git-rebase#81d4faff
constant.sha.git-rebase#a5d6a7ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#e0e0e0ff
variable.language#2196f3ff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#f0f4c3ff
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, 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#1de9b6ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4db6acff
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ce93d8ff
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#81d4faff
variable.other.constant, variable.other.enummember#4fc3f7ff
meta.object-literal.key#81d4faff
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#ffab91ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#ffab91ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#e57373ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#f0f4c3ff
keyword.operator.quantifier.regexp#ffcc80ff
constant.character#2196f3ff
constant.character.escape#ffcc80ff
entity.name.label#bdbdbdff
entity.name.namespace#00bfa5
punctuation.definition.comment#828282
punctuation.definition.string.begin.python#ff8d33
punctuation.definition.string.end.python#ff8d33
string.quoted.docstring.multi.python#ff8d33
string.quoted.docstring.raw.multi.python#ff8d33
keyword.codetag.notation.python#FFFF00bold
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.comment, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.docstring.multi.python, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function.language.special.self.python
Dark+ Material - Funky by funkymunky - VS Code Theme