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#1f4240
  • activityBar.foreground#5d8373
  • activityBarBadge.background#4d6959
  • activityBarBadge.foreground#eeffe1
  • badge.background#4d6959
  • badge.foreground#eeffe1
  • button.background#ffd580
  • button.foreground#1f4240
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#1f4240
  • debugExceptionWidget.border#253c3f
  • debugToolBar.background#1f4240
  • diffEditor.insertedTextBackground#d8eb9a25
  • diffEditor.removedTextBackground#f27c7425
  • dropdown.background#244442
  • dropdown.border#244442
  • dropdown.foreground#eeffe1
  • editor.background#1f4240
  • editor.findMatchBackground#ffd58022
  • editor.findMatchBorder#ffd580
  • editor.findMatchHighlightBackground#ffd58022
  • editor.findMatchHighlightBorder#ffd58033
  • editor.findRangeHighlightBackground#283543
  • editor.findRangeHighlightBorder#1f424000
  • editor.foreground#eeffe1
  • editor.inactiveSelectionBackground#2c4d3f
  • editor.lineHighlightBackground#202f316c
  • editor.rangeHighlightBackground#202f316c
  • editor.selectionBackground#345c4c
  • editor.selectionHighlightBackground#345c4c6e
  • editor.selectionHighlightBorder#345c4c6e
  • editor.wordHighlightBackground#4b7e69
  • editor.wordHighlightStrongBackground#ffd58033
  • editorBracketMatch.background#9c9b57aa
  • editorBracketMatch.border#9c9b57aa
  • editorCursor.foreground#ffd580
  • editorError.foreground#ff3333
  • editorGroup.border#eeffe107
  • editorGroup.emptyBackground#1f4240
  • editorGroupHeader.noTabsBackground#1f4240
  • editorGroupHeader.tabsBackground#1f4240
  • editorGroupHeader.tabsBorder#eeffe107
  • editorGutter.addedBackground#d8eb9a
  • editorGutter.deletedBackground#f27c74
  • editorGutter.modifiedBackground#5ccfe6
  • editorHoverWidget.background#284246
  • editorHoverWidget.border#284246
  • editorIndentGuide.activeBackground#dbddc5a8
  • editorIndentGuide.background#dbddc52f
  • editorLineNumber.activeForeground#4d6959c2
  • editorLineNumber.foreground#4d69595d
  • editorLink.activeForeground#ffd580
  • editorMarkerNavigation.background#1f4240
  • editorOverviewRuler.addedForeground#d8eb9a
  • editorOverviewRuler.border#253c3f
  • editorOverviewRuler.deletedForeground#f27c74
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.warningForeground#ffd580
  • editorRuler.foreground#eeffe107
  • editorSuggestWidget.background#1f4240
  • editorSuggestWidget.border#121824
  • editorSuggestWidget.highlightForeground#ffd580
  • editorSuggestWidget.selectedBackground#1b3533
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#39424e
  • editorWidget.background#1f4240
  • extensionButton.prominentBackground#ffd580
  • extensionButton.prominentForeground#1f4240
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#1f4240
  • foreground#eeffe1
  • gitDecoration.deletedResourceForeground#f27c74bb
  • gitDecoration.ignoredResourceForeground#444d5a
  • gitDecoration.modifiedResourceForeground#5ccfe6bb
  • gitDecoration.submoduleResourceForeground#d4bfffbb
  • gitDecoration.untrackedResourceForeground#d8eb9abb
  • input.background#1f4240
  • input.border#1f4240
  • input.foreground#eeffe1
  • input.placeholderForeground#eeffe188
  • inputOption.activeBorder#ffd580
  • inputValidation.errorBackground#1f4240
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#1f4240
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f4240
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#202f316c
  • list.activeSelectionForeground#eeffe1
  • list.focusBackground#202f316c
  • list.focusForeground#eeffe188
  • list.highlightForeground#ffd580
  • list.hoverBackground#202f316c
  • list.hoverForeground#eeffe1
  • list.inactiveSelectionBackground#202f316c
  • list.inactiveSelectionForeground#eeffe1
  • list.invalidItemForeground#515c69
  • panel.background#1f4240
  • panel.border#eeffe107
  • panelTitle.activeBorder#ffd580
  • panelTitle.activeForeground#eeffe19a
  • panelTitle.inactiveForeground#eeffe14f
  • peekView.border#1f4240
  • peekViewEditor.background#1f4240
  • peekViewEditor.matchHighlightBackground#ffd58033
  • peekViewResult.background#1f4240
  • peekViewResult.fileForeground#eeffe188
  • peekViewResult.matchHighlightBackground#ffd58033
  • peekViewTitle.background#1f4240
  • peekViewTitleDescription.foreground#eeffe188
  • peekViewTitleLabel.foreground#eeffe188
  • pickerGroup.border#253c3f
  • pickerGroup.foreground#444d5a
  • progressBar.background#ffd580
  • scrollbar.shadow#161c2711
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#293847fd
  • sideBar.background#1f4240
  • sideBar.border#eeffe107
  • sideBarSectionHeader.background#1f4240
  • sideBarSectionHeader.foreground#eeffe188
  • sideBarTitle.foreground#eeffe188
  • statusBar.background#1f4240
  • statusBar.border#1f4240
  • statusBar.debuggingBackground#f27c74
  • statusBar.debuggingForeground#1f4240
  • statusBar.foreground#eeffe188
  • statusBar.noFolderBackground#1f4240
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#253c3f
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#1f4240
  • tab.activeBorder#ffd580
  • tab.activeForeground#cedbd4
  • tab.border#1f4240
  • tab.inactiveBackground#1f4240
  • tab.inactiveForeground#eeffe188
  • tab.unfocusedActiveBorder#eeffe188
  • tab.unfocusedActiveForeground#eeffe188
  • tab.unfocusedInactiveForeground#eeffe188
  • terminal.ansiBlack#253c3f
  • terminal.ansiBlue#36a3d9
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#a6fde1
  • terminal.ansiBrightGreen#cbe645
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#ffc44c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdf80
  • terminal.ansiCyan#86f3f3
  • terminal.ansiGreen#d8eb9a
  • terminal.ansiMagenta#d4bfff
  • terminal.ansiRed#ffc44c
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#ffd580
  • terminal.background#1f4240
  • terminal.foreground#cedbd4
  • textBlockQuote.background#1f4240
  • textLink.activeForeground#ffd580
  • textLink.foreground#ffd580
  • textPreformat.foreground#cedbd4
  • titleBar.activeBackground#1f4240
  • titleBar.activeForeground#eeffe188
  • titleBar.inactiveBackground#1f4240
  • titleBar.inactiveForeground#eeffe188
  • walkThrough.embeddedEditorBackground#1f4240
  • widget.shadow#161c27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#adffc2
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ff6b70
constant.language.boolean#fff2a8
constant.numeric#adffc2
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#feffde
variable.parameter, meta.parameter#fff2a8
keyword, modifier, variable.language.this, support.type.object, constant.language#ff6b70
entity.name.function, support.function#8ab9ff
storage.type, storage.modifier#ff6b70
support.module, support.node#feffdeitalic
support.type, entity.name.type, entity.other.inherited-class#ff6b70
comment#a2e2be88italic
entity.name.type.class#fff2a8
variable.object.property meta.field.declaration entity.name.function#fff2a8
meta.definition.method entity.name.function#fff2a8
meta.function entity.name.function#8ab9ff
punctuation.accessor, punctuation.definition.tag#ff6b70
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff6b70
meta.embedded, source.groovy.embedded, meta.template.expression#efefef
entity.name.tag.yaml#feffde
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#feffde
constant.language.json#ff6b70
entity.other.attribute-name.class#ff6b70
entity.other.attribute-name.id#adffc2
source.css entity.name.tag#fff2a8
meta.tag, punctuation.definition.tag#ff6b70
entity.name.tag#feffde
entity.other.attribute-name#8ab9ff
markup.heading#ff6b70
text.html.markdown meta.link.inline, meta.link.reference#feffde
text.html.markdown markup.quote#c0c0c0
text.html.markdown beginning.punctuation.definition.list#ff6b70
markup.italic#feffdeitalic
markup.bold#feffdebold
markup.bold markup.italic, markup.italic markup.bold#feffdeitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#adffc2
markup.inline.raw.string.markdown#adffc2
keyword.other.definition.ini#feffde
entity.name.section.group-title.ini#ff6b70
source.cs meta.class.identifier storage.type#fff2a8underline
source.cs meta.method.identifier entity.name.function#fff2a8
source.cs meta.method-call meta.method, source.cs entity.name.function#8ab9ff
source.cs storage.type#ff6b70
source.cs meta.method.return-type#ff6b70
source.cs meta.preprocessor#a2e2be88
source.cs entity.name.type.namespace#efefef
mononoke by Fannar Freyr Kristinsson - VS Code Theme