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#bfc6cd
  • activityBar.foreground#353a3f
  • badge.background#329af0
  • badge.foreground#dce0e4
  • breadcrumb.activeSelectionForeground#727981
  • breadcrumb.focusForeground#727981
  • breadcrumb.foreground#939ba4
  • breadcrumbPicker.background#e9ecee
  • button.background#2a8de7
  • button.foreground#e8f7ff
  • button.hoverBackground#2481da
  • debugToolBar.background#dce0e4ff
  • diffEditor.insertedTextBackground#41a9521a
  • diffEditor.removedTextBackground#f5676726
  • dropdown.background#eeeeee
  • dropdown.border#cfd4d9
  • dropdown.foreground#51575e
  • editor.background#eeeeee
  • editor.foreground#51575e
  • editor.inactiveSelectionBackground#adb5bd60
  • editor.lineHighlightBackground#e9ecee
  • editor.selectionBackground#329af060
  • editor.selectionHighlightBackground#b4e2fcff
  • editorCursor.foreground#329af0
  • editorError.foreground#d43b3b
  • editorGroup.border#cfd4d9
  • editorGroupHeader.noTabsBackground#eeeeee
  • editorGroupHeader.tabsBackground#dce0e4
  • editorGutter.addedBackground#6cc77c
  • editorGutter.deletedBackground#fa9595
  • editorGutter.modifiedBackground#5cbbf7
  • editorHint.foreground#2076c9
  • editorInfo.foreground#2076c9
  • editorLineNumber.activeForeground#212529
  • editorLineNumber.foreground#adb5bd
  • editorOverviewRuler.addedForeground#6cc77c
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#fa9595
  • editorOverviewRuler.errorForeground#f56767
  • editorOverviewRuler.infoForeground#329af0
  • editorOverviewRuler.modifiedForeground#5cbbf7
  • editorOverviewRuler.warningForeground#df7b39
  • editorSuggestWidget.background#eeeeeeff
  • editorWarning.foreground#ba5908
  • editorWidget.background#dce0e4ff
  • errorForeground#ee5656
  • focusBorder#329af0
  • foreground#51575e
  • gitDecoration.addedResourceForeground#2b843b
  • gitDecoration.conflictingResourceForeground#d43b3b
  • gitDecoration.deletedResourceForeground#d43b3b
  • gitDecoration.modifiedResourceForeground#2076c9
  • gitDecoration.untrackedResourceForeground#2b843b
  • input.background#eeeeee
  • input.border#cfd4d9
  • input.foreground#51575e
  • input.placeholderForeground#adb5bd
  • list.activeSelectionBackground#329af040
  • list.activeSelectionForeground#212529
  • list.errorForeground#d43b3b
  • list.focusBackground#329af040
  • list.focusForeground#212529
  • list.highlightForeground#2a8de7
  • list.hoverBackground#cfd4d9
  • list.inactiveSelectionBackground#adb5bd4d
  • list.inactiveSelectionForeground#212529
  • list.warningForeground#ba5908
  • panel.border#cfd4d9
  • panelTitle.activeBorder#329af0
  • peekView.border#cfd4d9
  • peekViewEditor.background#cfd4d955
  • peekViewTitle.background#eeeeeeff
  • scrollbar.shadow#2125291a
  • scrollbarSlider.activeBackground#21252926
  • scrollbarSlider.background#21252913
  • scrollbarSlider.hoverBackground#21252926
  • sideBar.background#e9ecee
  • sideBarSectionHeader.background#cfd4d9
  • sideBarTitle.foreground#212529
  • statusBar.background#cfd4d9
  • statusBar.debuggingBackground#cfd4d9
  • statusBar.debuggingForeground#51575e
  • statusBar.foreground#51575e
  • statusBar.noFolderBackground#cfd4d9
  • statusBar.noFolderForeground#51575e
  • tab.activeBackground#eeeeee
  • tab.activeForeground#212529
  • tab.border#cfd4d9
  • tab.inactiveBackground#dce0e4
  • tab.inactiveForeground#727981
  • titleBar.activeBackground#51575e
  • titleBar.activeForeground#e9ecee
  • titleBar.inactiveBackground#939ba4
  • titleBar.inactiveForeground#e9ecee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable#51575e
meta.object-literal.key, meta.object-literal.key entity.name.function#51575e
comment, punctuation.comment, punctuation.definition.comment#939ba4
keyword.operator#212529bold
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#727981
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#212529
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#727981italic
constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language#212529
constant.character, constant.other, entity.name.function, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#212529
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#212529bold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#212529bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx
meta.preprocessor#212529
support.type, support.class, support.function, support.constant#212529
invalid#e24747
invalid.deprecated#e24747
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation#212529
markup.heading, entity.name.section#212529bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code#727981italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline#212529
variable.language.makefile, variable.other.makefile#212529
markup.italicitalic
markup.boldbold
entity.other.attribute-name.class.css#212529
entity.name.tag.css#212529bold
meta.property-name.css#212529
anicode-theme by malvee - VS Code Theme