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#2f3138
  • activityBar.foreground#e2e4e7
  • activityBarBadge.background#41a6d9
  • activityBarBadge.foreground#fafafa
  • badge.background#aaa
  • badge.foreground#fff
  • button.background#ff6a00AA
  • button.foreground#fff
  • button.hoverBackground#ff6a00BB
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#e2e4e7
  • debugToolBar.background#ffffff
  • diffEditor.insertedTextBackground#4dbf9944
  • diffEditor.removedTextBackground#f0717844
  • dropdown.background#ffffff
  • editor.background#fafafa
  • editor.findMatchBackground#FFE610
  • editor.findMatchHighlightBackground#dd08
  • editor.findRangeHighlightBackground#dd03
  • editor.foreground#505050
  • editor.lineHighlightBackground#00A6FF17
  • editor.rangeHighlightBackground#f2f2f2
  • editor.selectionBackground#00A6FF50
  • editor.wordHighlightBackground#ff6a002a
  • editor.wordHighlightStrongBackground#ff6a0033
  • editorBracketMatch.border#d9d8d7
  • editorCursor.foreground#ff6a00
  • editorError.foreground#ff3333
  • editorGroup.border#e2e4e7
  • editorGroup.emptyBackground#ffffff
  • editorGroupHeader.noTabsBackground#fafafa
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#e2e4e7
  • editorGutter.addedBackground#86b300
  • editorGutter.deletedBackground#ff3333
  • editorGutter.modifiedBackground#41a6d9
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e2e4e7
  • editorIndentGuide.background#d9d8d7
  • editorLineNumber.foreground#d9d8d7
  • editorLink.activeForeground#ff6a00
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.border#e2e4e7
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.infoForeground#00aa00
  • editorRuler.foreground#e2e4e7
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e2e4e7
  • editorSuggestWidget.highlightForeground#ff6a00
  • editorSuggestWidget.selectedBackground#f5f5f5
  • editorWarning.foreground#f29718
  • editorWhitespace.foreground#d9d8d7
  • editorWidget.background#ffffff
  • extensionButton.prominentBackground#ff6a00AA
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff6a00BB
  • focusBorder#e2e4e7
  • foreground#828c99
  • input.background#ffffff
  • input.border#ffffff
  • input.foreground#5c6773
  • input.placeholderForeground#828c99
  • inputOption.activeBorder#41a6d9
  • inputValidation.errorBackground#fafafa
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#fafafa
  • inputValidation.infoBorder#41a6d9
  • inputValidation.warningBackground#fafafa
  • inputValidation.warningBorder#f29718
  • list.activeSelectionBackground#e2e4e7
  • list.activeSelectionForeground#5c6773
  • list.focusBackground#f5f5f5
  • list.focusForeground#5c6773
  • list.highlightForeground#ff6a00
  • list.hoverBackground#f5f5f5
  • list.hoverForeground#5c6773
  • list.inactiveSelectionBackground#e2e4e7
  • list.inactiveSelectionForeground#5c6773
  • panel.background#fafafa
  • panel.border#e2e4e7
  • panelTitle.inactiveForeground#828c99
  • peekView.border#e2e4e7
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#ff6a0033
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#828c99
  • peekViewResult.matchHighlightBackground#ff6a0033
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#828c99
  • peekViewTitleLabel.foreground#828c99
  • pickerGroup.border#e2e4e7
  • pickerGroup.foreground#ff6a00
  • progressBar.background#ff6a00
  • sash.hoverBorder#ff741050
  • scrollbar.shadow#a0a0a011
  • scrollbarSlider.activeBackground#00000066
  • scrollbarSlider.background#0000001f
  • scrollbarSlider.hoverBackground#00000044
  • selection.background#00A6FF50
  • sideBar.background#fafafa
  • sideBar.border#e2e4e7
  • sideBarSectionHeader.background#f2f2f2
  • sideBarSectionHeader.foreground#828c99
  • sideBarTitle.foreground#828c99
  • statusBar.background#2f3138
  • statusBar.debuggingBackground#41a6d9
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#fafafa
  • statusBar.noFolderBackground#aaa
  • statusBarItem.activeBackground#888
  • statusBarItem.hoverBackground#555
  • statusBarItem.prominentBackground#77cc00
  • statusBarItem.prominentHoverBackground#ad0
  • tab.activeBackground#ffffff
  • tab.activeForeground#5c6773
  • tab.border#e2e4e7
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#828c99
  • tab.unfocusedActiveForeground#5c6773AA
  • tab.unfocusedInactiveForeground#828c99
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#41a6d9
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#57d9ad
  • terminal.ansiBrightGreen#a3d900
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#d6656a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e7c547
  • terminal.ansiCyan#4dbf99
  • terminal.ansiGreen#77cc00
  • terminal.ansiMagenta#9966cc
  • terminal.ansiRed#f2590c
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f29718
  • terminal.background#1f2226
  • terminal.foreground#eff0f1
  • textBlockQuote.background#ffffff
  • textLink.activeForeground#ff6a00
  • textLink.foreground#ff6a00
  • textPreformat.foreground#5c6773
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#828c99
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#828c99
  • walkThrough.embeddedEditorBackground#ffffff
  • widget.shadow#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#5c6773ff—
comment, punctuation.definition.comment#ABB0B6—
variable#5C6773—
keyword, storage.type, storage.modifier#F2590C—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution#E7C547—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#41A6D9—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level#F29718—
support.other.variable, string.other.link#F07178—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#A37ACC—
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#86B300normal
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#41A6D9—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#41A6D9—
variable.language#41A6D9italic
invalid#FF3333—
invalid.deprecated#FFFFFF—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#41A6D990—
entity.other.attribute-name#F2590C—
markup.inserted#86B300—
markup.deleted#41A6D9—
markup.changed#F2590C—
string.regexp, constant.character.escape#4DBF99—
*url*, *link*, *uri*—underline
constant.numeric.line-number.find-in-files - match#ABB0B6—
entity.name.filename.find-in-files#86B300—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#CCA37Aitalic
source.js constant.other.object.key.js string.unquoted.label.js#41A6D9italic
entity.name.method.js#CCA37A—
meta.class-method.js entity.name.function.js, variable.function.constructor#CCA37A—
markup.italic#F07178italic
markup.bold#F07178bold
markup.underline#A37ACCunderline
markup.strike#CCA37Astrike
markup.quote#E7C547italic
markup.raw.block#F2590C—
markup.table#41A6D9—
text.html.markdown, punctuation.definition.list_item.markdown#5C6773—
text.html.markdown markup.raw.inline#41A6D9—
text.html.markdown meta.dummy.line-break#ABB0B6—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#86B300—
markup.quote, punctuation.definition.blockquote.markdown#E7C547italic
string.other.link.title.markdown#CCA37Aunderline
markup.raw.block.fenced.markdown#5C6773—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#ABB0B6—
variable.language.fenced.markdown#ABB0B6
meta.separator#ABB0B6bold
markup.inline.raw.string.markdown#f29750—
punctuation.definition.list.begin.markdown#41A6D9—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#41A6D9—
acejump.label.blue#FFFFFF—
acejump.label.green#FFFFFF—
acejump.label.orange#FFFFFF—
acejump.label.purple#FFFFFF—
sublimelinter.mark.warning#41A6D9—
sublimelinter.gutter-mark#FFFFFF—
sublimelinter.mark.error#FF3333—
markup.ignored.git_gutter#ABB0B6—
markup.untracked.git_gutter#ABB0B6—
gutter_color#FFFFFF—
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
token.debug-token#800080—
Piattro by Flo Edelmann - VS Code Theme