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.background#0c0e10
  • activityBar.foreground#dfdfdf
  • activityBarBadge.background#00b8ff8e
  • activityBarBadge.foreground#dfdfdf
  • badge.background#00b8ff8e
  • badge.foreground#dfdfdf
  • button.background#8a9daf
  • button.foreground#dfdfdf
  • dropdown.background#0c0e10
  • dropdown.border#0c0e10
  • dropdown.foreground#dfdfdf
  • editor.background#101316
  • editor.foreground#dfdfdf
  • editor.hoverHighlightBackground#00b8ff8e
  • editor.lineHighlightBackground#1b2025
  • editor.selectionBackground#00b8ff8e
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorBracketMatch.background#00b8ff8e
  • editorBracketMatch.border#8a9daf
  • editorCursor.foreground#dfdfdf
  • editorGroup.border#3b4651
  • editorGroupHeader.tabsBackground#1b2025
  • editorGutter.addedBackground#b8ff00
  • editorGutter.background#0c0e10
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.activeBackground1#dfdfdf
  • editorIndentGuide.background1#3b4651
  • editorLineNumber.activeForeground#dfdfdf
  • editorLineNumber.foreground#3b4651
  • editorLink.activeForeground#00b8ff8e
  • editorOverviewRuler.addedForeground#b8ff00
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#8a9daf85
  • editorOverviewRuler.infoForeground#dfdfdf
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#101316
  • editorSuggestWidget.foreground#dfdfdf
  • editorSuggestWidget.highlightForeground#00b8ff8e
  • editorSuggestWidget.selectedBackground#3b4651
  • editorWhitespace.foreground#3b4651
  • editorWidget.background#101316
  • editorWidget.border#3b4651
  • extensionButton.prominentBackground#00b8ff8e
  • extensionButton.prominentForeground#dfdfdf
  • extensionButton.prominentHoverBackground#edce72
  • focusBorder#00b8ff8e
  • foreground#dfdfdf
  • gitDecoration.conflictingResourceForeground#dfdfdf
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#3b4651
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#b8ff00
  • input.background#0c0e10
  • input.border#3b4651
  • input.foreground#dfdfdf
  • input.placeholderForeground#3b4651
  • inputOption.activeBorder#8a9daf
  • list.activeSelectionBackground#8a9daf
  • list.activeSelectionForeground#101316
  • list.focusBackground#3b4651
  • list.hoverBackground#1b2025
  • list.inactiveSelectionBackground#242b31
  • notifications.background#1b2025
  • notifications.foreground#dfdfdf
  • panel.background#0c0e10
  • panel.border#3b4651
  • panelTitle.activeBorder#00b8ff8e
  • panelTitle.inactiveForeground#60778c
  • peekView.border#00b8ff8e
  • peekViewEditor.background#07090a
  • peekViewEditor.matchHighlightBackground#8a9daf
  • peekViewEditorGutter.background#0c0e10
  • peekViewResult.background#1b2025
  • peekViewResult.fileForeground#dfdfdf
  • peekViewResult.lineForeground#8a9daf
  • peekViewResult.matchHighlightBackground#8a9daf
  • peekViewResult.selectionBackground#101316
  • peekViewResult.selectionForeground#dfdfdf
  • peekViewTitle.background#0c0e10
  • peekViewTitleDescription.foreground#dfdfdf
  • peekViewTitleLabel.foreground#dfdfdf
  • progressBar.background#dfdfdf
  • scrollbar.shadow#0c0e10
  • scrollbarSlider.activeBackground#00b8ff8e
  • scrollbarSlider.background#3b4651
  • scrollbarSlider.hoverBackground#00b8ff8e
  • sideBar.background#101316
  • sideBar.foreground#dfdfdf
  • sideBarSectionHeader.background#0c0e10
  • sideBarSectionHeader.foreground#dfdfdf
  • statusBar.background#00b8ff8e
  • statusBar.debuggingBackground#f7b83d
  • statusBar.debuggingForeground#dfdfdf
  • statusBar.foreground#dfdfdf
  • statusBar.noFolderBackground#8a9daf
  • tab.activeBackground#00b8ff8e
  • tab.inactiveBackground#1b2025
  • tab.inactiveForeground#60778c
  • terminal.ansiBlack#1b2025
  • terminal.ansiBlue#00b8ff8e
  • terminal.ansiBrightBlack#3b4651
  • terminal.ansiBrightBlue#dfdfdf
  • terminal.ansiBrightCyan#00eeff
  • terminal.ansiBrightGreen#00ff9f
  • terminal.ansiBrightMagenta#edce72
  • terminal.ansiBrightRed#e61f44
  • terminal.ansiBrightWhite#dfdfdf
  • terminal.ansiBrightYellow#dfdfdf
  • terminal.ansiCyan#00c8f0
  • terminal.ansiGreen#00df88
  • terminal.ansiMagenta#9100ae
  • terminal.ansiRed#e61f44
  • terminal.ansiWhite#dfdfdf
  • terminal.ansiYellow#b8ff00
  • terminal.background#0c0e10
  • terminal.foreground#dfdfdf
  • titleBar.activeBackground#07090a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#60778c
string#44e8b0
constant.numeric#00f0dd
constant.language#00df88
constant.character, constant.other#00df88
variable#00df88
keyword#00b8ff
storage#00df88italic
storage.type#00b8ff
entity.name.class#00df88underline
entity.other.inherited-class#00df88
entity.name.function#00f0dd
variable.parameter#dfdfdf
entity.name.tag#00b8ff
entity.other.attribute-name#00df88
support.function#00df88
support.constant#00df88
support.type, support.class#00df88
support.other.variable
invalid#e61f44
invalid.deprecated#e61f44
meta.structure.dictionary.json string.quoted.double.json#00f0dd
meta.diff, meta.diff.header#60778c
markup.deleted#e61f44
markup.inserted#b8ff00
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#b8ff00
entity.name.filename.find-in-files#edce72
keyword.other#8a9daf
meta.property-value, support.constant.property-value, constant.other.color#00f0dd
meta.structure.dictionary.json string.quoted.double.json#00df88
meta.structure.dictionary.value.json string.quoted.double.json#00f0dd
meta.property-name support.type.property-nameitalic
meta.property-value punctuation.separator.key-value#dfdfdf
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#00b8ff
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#00b8ff
variable.other#dfdfdf
variable.parameter.function.coffee#00f0dd
entity.name.section.markdown#00df88
punctuation.definition.heading.markdown#00b8ff
markup.raw.inline.markdown#00f0dd
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#00b8ff
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#00b8ff
punctuation.definition.metadata.markdown#00b8ff
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#00b8ff
markup.bold.markdown, markup.italic.markdown#00b8ff
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#00c8f0
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#b8ff00
markup.changed.git_gutter#f7b83d
meta.template.expression#dfdfdf