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#2f333d
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#98c37930
  • diffEditor.removedTextBackground#e06c7530
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#282c34
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383e4a
  • editor.selectionBackground#484e5b
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#e06c75
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#98c379c0
  • editorGutter.deletedBackground#e06c75c0
  • editorGutter.modifiedBackground#56b5c2c0
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedForeground#98c37980
  • editorOverviewRuler.deletedForeground#e06c7580
  • editorOverviewRuler.modifiedForeground#56b5c280
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.modifiedResourceForeground#56b5c2
  • gitDecoration.untrackedResourceForeground#98c379
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • peekViewEditor.background#21252b
  • peekViewEditor.matchHighlightBackground#314365
  • peekViewResult.background#21252b
  • peekViewResult.matchHighlightBackground#314365
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252b
  • statusBar.debuggingBackground#21252b
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2c313a
  • tab.border#181a1f
  • tab.inactiveBackground#21252b
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#2e8ccf
  • terminal.ansiGreen#98c379
  • terminal.ansiRed#e06c75
  • terminal.ansiYellow#B4881D
  • terminal.foreground#C8C8C8
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F848Eitalic
comment#7F848Eitalic
string.quoted.docstring.multi.python#7F848E
comment markup.link#7F848E
markup.inserted.diff#98c379
markup.deleted.diff#e06c75
keyword.control.cpp#e5c07b
punctuation.separator.key-value#bbbbbb
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.superitalic
variable.language.super.js#61afef
keyword.operator.expression.import#61afef
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.jsdoc#bbbbbb
meta.embedded.line.js,meta.embedded.line.ts#bbbbbb
storage.type.annotation.java#e5c07b
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#e06c75
support.constant.property-value.scss,support.constant.property-value.css#d19a66
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#d19a66
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e06c75
support.module.node,support.type.object.module,support.module.node#e5c07b
support.constant.json#d19a66
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#c678dd
support.type.object.console#e06c75
support.variable.property.process#d19a66
entity.name.function,support.function.console#61afef
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
variable.parameter.function.python#D18C4E
meta.function-call.generic.python#61afef
punctuation.definition.comment#7F848E
none#A6B2C0
keyword#c678dd
import.storage.java#e5c07b
token.package.keyword#c678dd
entity.name.function, meta.require, support.function.any-method#61afef
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
keyword.control#c678dd
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#61afef
storage#c678dd
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#C678DD
token.storage.type.java#e5c07b
support.constant.font-name#d19a66
string#98c379
entity.other.inherited-class#e5c07b
constant.numeric#d19a66
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afef
entity.other.attribute-name.class.css#d19a66
meta.selector#c678dd
none#D2945D
markup.headingbold
markup.heading punctuation.definition.heading, entity.name.section
keyword.other.unit#d19a66
markup.bold,todo.boldbold
emphasis md#c678dd
markup.inline.raw.markdown, markup.inline.raw.string.markdown#7F848E
beginning.punctuation.definition.list.markdown#E06C75
markup.quote.markdown#7F848Eitalic
markup.underline.link.markdown,markup.underline.link.image.markdownitalic
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#E06C75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#98C379
entity.name.function.decorator.python#61afef
function.parameter#d19a66
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e5c07b
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.other.normal.shell, variable.other.positional.shell#e06c75
entity.name.tag.yaml#bbbbbbff