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.background#20242c
  • activityBar.foreground#CDCDCD
  • activityBarBadge.background#52ACAA
  • activityBarBadge.foreground#222223
  • badge.background#97572B
  • badge.foreground#2e3440
  • button.background#97572B20
  • button.foreground#EFEFE8
  • button.hoverBackground#97572B40
  • diffEditor.insertedTextBackground#008C4E60
  • diffEditor.removedTextBackground#A42A2E20
  • editor.background#20242c
  • editor.findMatchBackground#97572B20
  • editor.findMatchHighlightBackground#97572B40
  • editor.foreground#d9d9d9
  • editor.inactiveSelectionBackground#BBBBBB40
  • editor.lineHighlightBackground#3E425050
  • editor.selectionBackground#BBBBBB20
  • editor.selectionHighlightBackground#EFEFE810
  • editor.wordHighlightBackground#97572B20
  • editor.wordHighlightStrongBackground#97572B40
  • editorCursor.foreground#EFEFE8
  • editorError.border#2e3440
  • editorError.foreground#D02D23
  • editorGutter.addedBackground#008C4E
  • editorGutter.deletedBackground#A42A2E
  • editorGutter.modifiedBackground#F7B718
  • editorHoverWidget.background#3E4250
  • editorHoverWidget.foreground#BBBBBB
  • editorOverviewRuler.addedForeground#008C4E
  • editorOverviewRuler.border#222223
  • editorOverviewRuler.deletedForeground#A42A2E
  • editorOverviewRuler.errorForeground#D02D23
  • editorOverviewRuler.infoForeground#EDF1FF
  • editorOverviewRuler.modifiedForeground#F7B718
  • editorOverviewRuler.warningForeground#F96815
  • editorRuler.foreground#97572B
  • editorWarning.border#2e3440
  • editorWarning.foreground#F96815
  • editorWhitespace.foreground#373B41
  • editorWidget.background#373B41
  • editorWidget.foreground#BBBBBB
  • errorForeground#A6343A
  • extensionButton.prominentBackground#97572B
  • extensionButton.prominentForeground#2A2C2D
  • extensionButton.prominentHoverBackground#864C24
  • focusBorder#704822
  • foreground#CDCDCD
  • gitDecoration.ignoredResourceForeground#676B79
  • list.activeSelectionBackground#97572B25
  • list.activeSelectionForeground#CDCDCD
  • list.focusBackground#373B41
  • list.focusForeground#BBBBBB
  • list.highlightForeground#C6733D
  • list.hoverBackground#3E4250
  • list.hoverForeground#BBBBBB
  • list.inactiveSelectionBackground#97572B15
  • list.inactiveSelectionForeground#CDCDCD
  • merge.currentContentBackground#6F54A140
  • merge.currentHeaderBackground#6F54A190
  • merge.incomingContentBackground#FF911F
  • merge.incomingHeaderBackground#FF911F90
  • progressBar.background#D99B7C
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#3E4250
  • scrollbarSlider.hoverBackground#676B79
  • sideBar.background#2e3440
  • sideBar.foreground#BBBBBB
  • statusBar.background#222223
  • statusBar.debuggingBackground#97572B
  • statusBar.debuggingForeground#757575
  • statusBar.foreground#757575
  • statusBar.noFolderBackground#0D0D0D
  • statusBar.noFolderForeground#757575
  • tab.activeBackground#222223
  • tab.activeBorder#97572B
  • tab.activeForeground#CDCDCD
  • tab.inactiveBackground#373B41
  • tab.inactiveForeground#676B79
  • terminal.ansiBlue#4B81BF
  • terminal.ansiCyan#52ACAA
  • terminal.ansiGreen#9CCF65
  • terminal.ansiMagenta#97572B
  • terminal.ansiRed#A6343A
  • terminal.ansiWhite#EFEFE8
  • terminal.ansiYellow#FFF367
  • terminalCursor.background#2e3440
  • terminalCursor.foreground#d9d9d9
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d9d9d9
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, constant, constant.other, constant.character.escape#C6733D
variable.parameter, variable.parameter.function.language.special#C6733Ditalic
meta.function.parameter, meta.attribute#C6733D
variable.other.constant, variable.other.enummember, variable.language.this, variable.interpolation#D99B7C
entity.name.function, meta.require, support.function.any-method, support.function, support.function.construct#9CCF65
meta.function-call#52ACAA
variable.other.object, support.class, support.type, entity.name, entity.name.class, entity.name.class.type, variable.other.property#52ACAA
keyword, keyword.control, keyword.operator, keyword.operator.new#4B81BF
keyword.operator.logical, keyword.operator.comparison, keyword.operator.misc, keyword.operator.sigil#CE3D66
comment, comment.block, comment.line, string.quoted.docstring#676B79italic
constant.numeric, constant.numeric.float, constant.numeric.octal#52ACAA
entity.name.type#9CCF65italic
string#CDCDCD
invalid.illegal#A6343A
invalid.deprecated#757575
punctuation.definition.template-expression#FF911F
punctuation.separator, punctuation.definition.separator#4B81BF
punctuation.definition.arguments#CE3D66
punctuation.definition.string.begin, punctuation.definition.string.end, keyword.other.interpolation, meta.interpolation#D99B7C
support, support.class, support.function#FF911F
entity.other.inherited-class#4B81BF
entity.name.tag.yaml#FFF367
storage#4B81BF
string.other.link, meta.link#007CB8
string.regexp#BBBBBBitalic
string.regexp keyword.operator#EFEFE8
token.info-token#EDF1FF
token.debug-token#5085C3
token.warn-token#F96815
token.error-token#D02D23
markup.bold#CDCDCDbold
punctuation.definition.bold.markdown#CDCDCDbold
markup.italicitalic
punctuation.definition.italic.markdownitalic
markup.inserted#008C4E
markup.changed#F7B718
markup.deleted#A42A2E
entity.name.section.markdown#D99B7Cbold
punctuation.definition.heading#BBBBBB
markup.quote, markup.inline.raw#FF911Fitalic
beginning.punctuation.definition.list#9CCF65
markup.fenced_code.block.markdown, punctuation.definition.markdown#C6733D
fenced_code.block.language#C6733Ditalic
string.other.link, meta.link.inline.markdown, punctuation.definition.string#007CB8italic
Chevalier by Lucas de Ataides - VS Code Theme