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#191a19
  • activityBar.foreground#cececa
  • activityBarBadge.background#c59f35
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#4e4c47
  • breadcrumb.background#121213
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cccfc2
  • breadcrumbPicker.background#2e2d2d
  • button.background#ce951c
  • button.foreground#ffffff
  • charts.blue#0059ff
  • charts.foreground#292727
  • charts.green#10ca28
  • charts.lines#e9e7e7
  • charts.orange#f06617
  • charts.purple#9520d8
  • charts.red#c91919
  • charts.yellow#e4c722
  • checkbox.foreground#ffe097
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23da
  • dropdown.border#181A1F
  • dropdown.foreground#ffd375
  • editor.background#18181a
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#4c525e5e
  • editor.selectionBackground#58585867
  • editor.selectionHighlightBackground#474747
  • editorBracketMatch.background#1b1a1a
  • editorBracketMatch.border#69676c
  • editorCursor.background#222222
  • editorCursor.foreground#ffd375
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#2e2f30
  • editorGroupHeader.tabsBackground#181b1f
  • editorGutter.addedBackground#4780CB60
  • editorGutter.deletedBackground#60FFAA60
  • editorGutter.modifiedBackground#CFDF3760
  • editorHint.border#222222
  • editorHint.foreground#948ae3
  • editorHoverWidget.background#16181b
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#4e4e4e
  • editorLineNumber.activeForeground#c4c7d1
  • editorLineNumber.foreground#525053
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#1c1f24
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • foreground#E4DFCE
  • gitDecoration.addedResourceForeground#7bd88f
  • gitDecoration.conflictingResourceForeground#fd9353
  • gitDecoration.deletedResourceForeground#fc618d
  • gitDecoration.ignoredResourceForeground#525053
  • gitDecoration.modifiedResourceForeground#fce566
  • gitDecoration.stageDeletedResourceForeground#fc618d
  • gitDecoration.stageModifiedResourceForeground#fce566
  • gitDecoration.untrackedResourceForeground#fd9353
  • icon.foreground#ebb25d
  • input.background#1d1f23
  • input.border#FFF66C10
  • input.foreground#ffd87ed5
  • inputValidation.errorBackground#1d1f23e7
  • inputValidation.errorBorder#ff0000b4
  • inputValidation.errorForeground#ff0000b7
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#acaaaa
  • list.hoverBackground#1e2125
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#242629
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#1b1818e7
  • menu.foreground#d8d8d7
  • menu.selectionForeground#ebd65d
  • menubar.selectionForeground#ffd375
  • minimap.background#1a1919
  • minimap.errorHighlight#ff0000
  • notifications.background#21252b
  • progressBar.background#dfac40
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4e5666c7
  • scrollbarSlider.hoverBackground#5A637580
  • settings.textInputBorder#ffd87e
  • settings.textInputForeground#ffd375
  • sideBar.background#121213
  • sideBar.border#333232
  • sideBarSectionHeader.background#292c31
  • statusBar.background#121213
  • statusBar.debuggingBackground#7a0505b9
  • statusBar.foreground#ddb966
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#113985
  • statusBarItem.remoteBackground#191919
  • statusBarItem.remoteForeground#7bd88f
  • tab.activeBackground#1d1f20
  • tab.activeBorder#ffd375
  • tab.border#1d1f24
  • tab.inactiveBackground#24272b
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#5272EF
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#5272EF
  • terminal.ansiBrightCyan#4EB1C2
  • terminal.ansiBrightGreen#79C367
  • terminal.ansiBrightMagenta#e5c07b
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#E5B673
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#93E078
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#E4DFCE
  • terminalCursor.foreground#e9c48c
  • textLink.foreground#fce566
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#dce2e0
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D
  • widget.shadow#3F3F3F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#7b787eitalic
markup.underline.link#7bd88f—
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#7b787e—
punctuation#7b787e—
string, string.template#e5c07b—
constant.numeric#c678dd—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#ffffff—
constant.language#56b6c2—
constant.character, constant.other#56b6c2—
variable.language#e06c75—
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75—
keyword.operator#e06c75—
storage#e06c75—
storage.type#64d2e0italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#64d2e0italic
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#ffffff—
variable.other, variable.other.property, variable.other.block#ffffff—
entity.other.inherited-class#98c379—
storage.modifier.import, storage.modifier.package#e0c16citalic
entity.name.function, support.function#7bd88f—
variable.parameter, entity.name.variable.parameter, parameter.variable#fd9353italic
entity.name.function-call#f8f8f8—
function.support.builtin, function.support.core#7bd88f—
entity.name.tag, entity.name.tag.class.js#e06c75—
entity.name.tag.class, entity.name.tag.id#56b6c2—
entity.other.attribute-name#7bd88f—
support.constant#56b6c2—
support.type, support.variable#56b6c2—
support.dictionary.json#56b6c2—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#ffffff—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#56b6c2—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#7bd88f—
variable.css, variable.scss, variable.less, variable.sass#56b6c2—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#fff06d—
unit.css, unit.scss, unit.less, unit.sass#c678dd—
function.css, function.scss, function.less, function.sass#56b6c2—
support.other.variable—
invalid#F8F8F0—
invalid.deprecated#F8F8F0—
support.type.property-name.json#56b6c2—
string.detected-link#7bd88f—
meta.diff, meta.diff.header#75715E—
markup.deleted#e06c75—
markup.inserted#7bd88f—
markup.changed#e5c07b—
constant.numeric.line-number.find-in-files - match#56b6c2A0—
entity.name.filename.find-in-files#e5c07b—
markup.italic, markup.italic.markdown—italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d—
punctuation.definition.italic.markdown—italic
markup.underline.link.markdown#7bd88f—
markup.bold.markdown—bold
markup.heading.markdown#e06c75bold
markup.quote.markdown#7bd88f—
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2—
punctuation.definition.list_item.markdown#ffffffbold