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.activeBorder#0F7F77
  • activityBar.background#f4edda
  • activityBar.border#5fb3b322
  • activityBar.dropBackground#1b2b34
  • activityBar.dropBorder#5fb3b3
  • activityBar.foreground#5fb3b3
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#0F7F77
  • activityBarBadge.foreground#FFFBF2
  • badge.background#0F7F77
  • badge.foreground#FFFBF2
  • button.background#0F7F77
  • button.hoverBackground#14a198
  • chat.editedFileForeground#895503
  • chat.requestBubbleBackground#fffbf2
  • chat.slashCommandBackground#d2ecff
  • chat.slashCommandForeground#306ca2
  • checkbox.background#f4edda
  • checkbox.border#cecece
  • descriptionForeground#000
  • diffEditor.unchangedRegionBackground#f4edda
  • dropdown.background#FFFBF2
  • dropdown.border#cecece
  • dropdown.foreground#000
  • dropdown.listBackground#FFFBF2
  • editor.background#fdf6e3
  • editor.foreground#000
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.selectionHighlightBackground#add6ff80
  • editorGroup.border#ddd3b7
  • editorGroupHeader.tabsBackground#f4edda
  • editorGroupHeader.tabsBorder#ddd3b7
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0F7F77
  • editorIndentGuide.activeBackground1#800000
  • editorIndentGuide.background1#d3d3d3
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#ddd3b7
  • editorSuggestWidget.background#f4edda
  • editorWidget.background#f4edda
  • errorForeground#f85149
  • focusBorder#0F7F77
  • foreground#000
  • gitDecoration.addedResourceForeground#587c0c
  • gitDecoration.conflictingResourceForeground#ad0707
  • gitDecoration.deletedResourceForeground#ad0707
  • gitDecoration.ignoredResourceForeground#8e8e90
  • gitDecoration.modifiedResourceForeground#895503
  • gitDecoration.renamedResourceForeground#007100
  • gitDecoration.stageDeletedResourceForeground#ad0707
  • gitDecoration.stageModifiedResourceForeground#895503
  • gitDecoration.submoduleResourceForeground#1258a7
  • gitDecoration.untrackedResourceForeground#007100
  • icon.foreground#000
  • input.background#FFFBF2
  • input.border#cecece
  • input.foreground#000
  • input.placeholderForeground#767676
  • inputOption.activeBackground#bed6ed
  • inputOption.activeBorder#0F7F77
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#000
  • list.activeSelectionBackground#8fa2a033
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#0F7F77
  • list.hoverBackground#8fa2a01f
  • list.inactiveSelectionBackground#8fa2a01f
  • menu.border#cecece
  • menu.selectionBackground#0F7F77
  • menu.selectionForeground#FFFBF2
  • notebook.cellBorderColor#ddd3b7
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#FFFBF2
  • notificationCenterHeader.foreground#000
  • notifications.background#FFFBF2
  • notifications.border#ddd3b7
  • notifications.foreground#000
  • panel.background#f4edda
  • panel.border#ddd3b7
  • panelInput.border#ddd3b7
  • panelTitle.activeBorder#0F7F77
  • panelTitle.activeForeground#000
  • panelTitle.inactiveForeground#000
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#F90004
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ddd3b7
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0F7F77
  • quickInput.background#f4edda
  • quickInput.foreground#000
  • searchEditor.textInputBorder#cecece
  • settings.dropdownBackground#FFFBF2
  • settings.dropdownBorder#cecece
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBar.background#f4edda
  • sideBar.border#ddd3b7
  • sideBar.foreground#000
  • sideBarSectionHeader.background#f4edda
  • sideBarSectionHeader.border#ddd3b7
  • sideBarSectionHeader.foreground#000
  • sideBarTitle.foreground#000
  • statusBar.background#f4edda
  • statusBar.border#ddd3b7
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#0F7F77
  • statusBar.foreground#000
  • statusBar.noFolderBackground#f4edda
  • statusBarItem.compactHoverBackground#cccccc
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#0F7F77
  • statusBarItem.hoverBackground#b8b8b850
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0F7F77
  • statusBarItem.remoteForeground#FFFBF2
  • tab.activeBackground#FFFBF2
  • tab.activeBorder#f4edda
  • tab.activeBorderTop#0F7F77
  • tab.activeForeground#000
  • tab.border#ddd3b7
  • tab.hoverBackground#FFFBF2
  • tab.inactiveBackground#f4edda
  • tab.inactiveForeground#000
  • tab.lastPinnedBorder#d4d4d4
  • tab.selectedBackground#FFFBF2a5
  • tab.selectedBorderTop#0F7F77
  • tab.selectedForeground#000
  • tab.unfocusedActiveBorder#f4edda
  • tab.unfocusedActiveBorderTop#ddd3b7
  • tab.unfocusedHoverBackground#f4edda
  • terminal.foreground#000
  • terminal.inactiveSelectionBackground#e5ebf1
  • terminal.tab.activeBorder#0F7F77
  • terminalCursor.foreground#0F7F77
  • textBlockQuote.background#f4edda
  • textBlockQuote.border#ddd3b7
  • textCodeBlock.background#f4edda
  • textLink.activeForeground#0F7F77
  • textLink.foreground#0F7F77
  • textPreformat.background#0000001f
  • textPreformat.foreground#000
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f4edda
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#ddd3b7
  • titleBar.inactiveBackground#f4edda
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widget.border#ddd3b7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000
emphasisitalic
strongbold
meta.diff.header#000080
comment#008000
constant.language#0000FF
constant.numeric, keyword.other.unit, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b00000
constant.regexp#811F3F
entity.name.tag#800000
entity.name.type.component#298040
entity.name.selector#800000
entity.other.attribute-name, entity.other.attribute-name.class.css#AF00DB
source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#298040
invalid#CD3131
entity.other.attribute-name.pseudo-class.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css#000080
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#098658
markup.deleted#A31515
markup.changed#0451A5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451A5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000FF
meta.preprocessor.string#A31515
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451A5
storage#0000FF
storage.type#0000FF
storage.modifier, keyword.operator.noexcept#0000FF
string, meta.embedded.assembly#A31515
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#1F8237
string.regexp#811F3F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000FF
meta.template.expression#000000
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#000000
source.css variable#0000ED
support.type.property-name.json#0451A5
keyword#0000FF
keyword.control#0000FF
keyword.operator#000000
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000FF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451A5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000FF
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DF0056
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#007F74
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#992626
keyword.operator, keyword.operator.logical, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.relational, punctuation.separator.operator, storage.type.function.arrow#AF00DB
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#AF00DB
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#001080
variable.other.constant, variable.other.enummember#001080
meta.object-literal.key#001080
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#001080
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#B35353
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#811F3F
keyword.operator.quantifier.regexp#000000
keyword.operator.or.regexp, keyword.control.anchor.regexp#EE0000
constant.character, constant.other.option#0000FF
constant.character.escape#E30000
entity.name.label#000000
token.info-token#316BCD
token.warn-token#744C00
token.error-token#CD3131
token.debug-token#800080