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.activeBackground#003229
  • activityBar.background#000000
  • activityBar.border#28ff0044
  • activityBar.foreground#14ffe9
  • activityBar.inactiveForeground#85eec7
  • activityBarBadge.background#042a25
  • activityBarBadge.foreground#30ff05
  • badge.background#1b7536
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#7af9a6cc
  • button.background#032e22
  • button.foreground#ffffff
  • button.hoverBackground#2c4528
  • button.secondaryBackground#032e26
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2c3d29
  • checkbox.background#000000
  • checkbox.border#e03e3e00
  • checkbox.foreground#14ff9c
  • debugExceptionWidget.background#051619
  • debugExceptionWidget.border#474747
  • debugToolBar.background#051619
  • debugToolBar.border#474747
  • diffEditor.border#e25b5b
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#000000
  • dropdown.border#e03e3e00
  • dropdown.foreground#14ff9c
  • editor.background#000000
  • editor.findMatchBackground#ffffff00
  • editor.findMatchBorder#14ffbd
  • editor.findMatchHighlightBackground#39ff1444
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#183b1566
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#1b71394d
  • editor.foreground#c5fff7
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#1b1c1d
  • editor.lineHighlightBackground#0c1f19
  • editor.lineHighlightBorder#173814
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#27ad7b
  • editor.selectionBackground#59665644
  • editor.selectionHighlightBackground#14ffa744
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#3d3d3db8
  • editor.wordHighlightStrongBackground#03321cb8
  • editorBracketMatch.background#047301
  • editorBracketMatch.border#15360e
  • editorCodeLens.foreground#83f5b0
  • editorCursor.background#000000
  • editorCursor.foreground#36ff10
  • editorError.background#f2281f83
  • editorError.border#ff0000b1
  • editorError.foreground#ff2f2f
  • editorGroup.border#00cf9e
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.border#14ffde44
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#4f6d11
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#61e8db
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#61e8db
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#0a2224
  • editorHoverWidget.border#21b2a4
  • editorHoverWidget.foreground#a0ff7d
  • editorIndentGuide.activeBackground#8884ff
  • editorIndentGuide.background#98ffb2
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#02ffdb
  • editorLineNumber.foreground#a6ffead7
  • editorLink.activeForeground#4cffa2
  • editorMarkerNavigation.background#001d15
  • editorMarkerNavigationError.background#a39a9a
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#bcb389
  • editorOverviewRuler.background#054326
  • editorOverviewRuler.border#ffffff4d
  • editorRuler.foreground#304039
  • editorSuggestWidget.background#020f0a
  • editorSuggestWidget.border#4f6b62
  • editorSuggestWidget.foreground#84cb96
  • editorSuggestWidget.highlightForeground#42e25b
  • editorSuggestWidget.selectedBackground#003826
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cc8f00
  • editorWhitespace.foreground#ffffff10
  • editorWidget.background#00150b
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#39ff1444
  • foreground#14ffde
  • gitDecoration.addedResourceForeground#9cd1a6
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#bebebe
  • gitDecoration.modifiedResourceForeground#88ff8f
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#4fff2a
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#14ffde
  • input.background#000000
  • input.border#e03e3e00
  • input.foreground#14ff9c
  • input.placeholderForeground#14ff91
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#14ff5a44
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#14ffde44
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#161d14
  • list.focusBackground#36628270
  • list.focusForeground#00ff4c
  • list.highlightForeground#3e9990
  • list.hoverBackground#23800944
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#14ffd344
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#13413d76
  • listFilterWidget.noMatchesOutline#3bbe00
  • listFilterWidget.outline#39ff1444
  • menu.background#020c0d
  • menu.border#ffffff44
  • menu.foreground#b1ffcf
  • menu.selectionBackground#14ff9c44
  • menu.selectionBorder#e4727200
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#14ffb244
  • menubar.selectionBackground#0e2c1d
  • menubar.selectionBorder#ffffff
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#191919
  • merge.commonHeaderBackground#303030
  • merge.currentContentBackground#192e2a
  • merge.currentHeaderBackground#1f473e
  • merge.incomingContentBackground#172332
  • merge.incomingHeaderBackground#1a304b
  • minimap.background#000000
  • minimap.errorHighlight#ff2f2f
  • minimap.findMatchHighlight#ffffff00
  • minimap.selectionHighlight#59665644
  • minimap.warningHighlight#cc8f00
  • minimapGutter.addedBackground#4f6d11
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#4d4b4b
  • notificationCenterHeader.background#0b2c08
  • notificationCenterHeader.foreground#38ff00
  • notifications.background#031b01
  • notifications.border#303031
  • notifications.foreground#8cffe4b3
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#01ffcf
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#08ff00
  • panel.background#000000
  • panel.border#14ffd344
  • panelSection.border#14e9ff44
  • panelTitle.activeBorder#14ff4f
  • panelTitle.activeForeground#14ff65
  • panelTitle.inactiveForeground#ffffff
  • peekView.border#4087b6
  • peekViewEditor.background#0a1308
  • peekViewEditor.matchHighlightBackground#202c1e99
  • peekViewEditor.matchHighlightBorder#348823
  • peekViewEditorGutter.background#0a1308
  • peekViewResult.background#131313
  • peekViewResult.fileForeground#69ff88
  • peekViewResult.lineForeground#13f700
  • peekViewResult.matchHighlightBackground#6099884d
  • peekViewResult.selectionBackground#47ad8733
  • peekViewResult.selectionForeground#70cfb0
  • peekViewTitle.background#111f0b
  • peekViewTitleDescription.foreground#87ffddb3
  • peekViewTitleLabel.foreground#57e8b2
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#14ffde
  • progressBar.background#14ffd3
  • scrollbar.shadow#54c24438
  • scrollbarSlider.activeBackground#a3b8af66
  • scrollbarSlider.background#4a5a5e66
  • scrollbarSlider.hoverBackground#314545b3
  • selection.background#86804d54
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#14ffde
  • sideBar.background#000000
  • sideBar.border#14ffde44
  • sideBar.dropBackground#161d14
  • sideBar.foreground#14e9ff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#61fff88d
  • sideBarSectionHeader.foreground#86fff4
  • sideBarTitle.foreground#43c7b4
  • statusBar.background#07150b
  • statusBar.border#39ff1444
  • statusBar.debuggingBackground#ff141444
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#14f4ff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#39ff1444
  • statusBarItem.remoteBackground#09150f
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#20a36644
  • tab.activeBorder#14ff65
  • tab.activeBorderTop#14ff6500
  • tab.activeForeground#ffffff
  • tab.border#14ff8644
  • tab.hoverBackground#1e7d3a44
  • tab.hoverBorder#2eff7644
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#39ff14
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#14e9ff44
  • terminal.foreground#01ff70
  • terminal.selectionBackground#14ff7b44
  • terminalCursor.background#39ff1444
  • terminalCursor.foreground#ffffff
  • textLink.foreground#ffffff
  • titleBar.activeBackground#071710
  • titleBar.activeForeground#c5fff1
  • titleBar.border#14ffd344
  • titleBar.inactiveBackground#00000099
  • titleBar.inactiveForeground#ffffffa3
  • tree.indentGuidesStroke#14ffd344
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4e7669italic
variable, string constant.other.placeholder#ffffff
constant.other.color#a5f4e9
invalid, invalid.illegal#91a3ff
keyword, storage.type, storage.modifier#00ffe7
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ffffff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#0cfff3
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a5fe9bitalic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#a2cace
entity.other.attribute-name.class#9dff91
source.sass keyword.control#557fc8
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#58d796
meta.block variable.other#02ff1b
support.other.variable, string.other.link#aafafa
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#00ff4c
string, 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#6db069
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#86a9fc
support.type#a2faf7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#acfff1
variable.language#a1fff2italic
entity.name.method.js#0f97ffitalic
entity.other.attribute-name#7af6a2
meta.class-method.js entity.name.function.js, variable.function.constructor#acfcac
string.regexp#86fff3
constant.character.escape#98ff91
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0b3b02italic
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#bcf5aeitalic
markup.inserted#f5d5ff
markup.deleted#d791ff
markup.changed#eaa6ff
source.json meta.structure.dictionary.json support.type.property-name.json#d389f6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#05f3ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#caa9ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bfffbd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9eae
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffdbe1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffe96e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b6f6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c7bbff
text.html.markdown, punctuation.definition.list_item.markdown#bc8dff
text.html.markdown markup.inline.raw.markdown#a6beff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ff9aab
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffbcad
markup.italic#c7ffb9italic
markup.bold, markup.bold string#d6ffd4bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e9ffd0bold
markup.underline#ffe2b7underline
markup.quote punctuation.definition.blockquote.markdown#ffcbd4
markup.quoteitalic
string.other.link.title.markdown#c5c4ff
string.other.link.description.title.markdown#d3ffc5
constant.other.reference.link.markdown#ffe0cd
markup.raw.block#ffcff7
markup.raw.block.fenced.markdown#fff3f5
punctuation.definition.fenced.markdown#ff9fcc
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#ffb381
variable.language.fenced.markdown#ffb9e8
meta.separator#d6ffc5bold
markup.table#f5ffbb

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...