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#97C100
  • activityBar.background#e2ddcf
  • activityBar.foreground#272a2b
  • activityBarBadge.background#E28187
  • activityBarBadge.foreground#272a2b
  • badge.background#e2ddcf
  • badge.foreground#272a2b
  • breadcrumb.activeSelectionForeground#0b9ab6
  • button.background#79b3be
  • button.foreground#272a2b
  • button.hoverBackground#3bd8f7
  • dropdown.background#E1DFDA
  • dropdown.border#e2ddcf
  • dropdown.listBackground#E1DFDA
  • editor.background#FFFEFA
  • editor.findMatchBackground#d38dbc55
  • editor.findMatchBorder#e166b8
  • editor.findMatchHighlightBackground#b34d9166
  • editor.findMatchHighlightBorder#b34d91aa
  • editor.findRangeHighlightBackground#b8f3ff44
  • editor.findRangeHighlightBorder#b8f3ff88
  • editor.foreground#272a2b
  • editor.hoverHighlightBackground#ffcb4766
  • editor.inactiveSelectionBackground#66919966
  • editor.lineHighlightBackground#fff
  • editor.lineHighlightBorder#b8f3ff44
  • editor.rangeHighlightBackground#ebe8e00b
  • editor.selectionBackground#b8f3ff66
  • editor.selectionForeground#1e1f19
  • editor.selectionHighlightBackground#ffcb4766
  • editor.selectionHighlightBorder#ffcb47
  • editor.wordHighlightBackground#E2818744
  • editor.wordHighlightBorder#d38dbc
  • editor.wordHighlightStrongBackground#E2818766
  • editor.wordHighlightStrongBorder#e166b8
  • editorBracketMatch.background#EAC9DF66
  • editorBracketMatch.border#e166b8
  • editorCodeLens.foreground#6C7577
  • editorCursor.background#e2ddcf
  • editorCursor.foreground#3e3c38
  • editorError.foreground#B83840
  • editorGroup.border#e2ddcf
  • editorHoverWidget.background#EEEDE9
  • editorHoverWidget.border#e2ddcf
  • editorIndentGuide.activeBackground#79b3be
  • editorIndentGuide.background#D4DEE1
  • editorInfo.foreground#669199
  • editorLineNumber.activeForeground#669199
  • editorLineNumber.foreground#79b3be
  • editorLink.activeForeground#0b9ab6
  • editorOverviewRuler.addedForeground#72920099
  • editorOverviewRuler.border#e2ddcf
  • editorOverviewRuler.bracketMatchForeground#B2B0AA99
  • editorOverviewRuler.commonContentForeground#77757066
  • editorOverviewRuler.currentContentForeground#3bd8f799
  • editorOverviewRuler.deletedForeground#94393F99
  • editorOverviewRuler.errorForeground#C73842
  • editorOverviewRuler.findMatchForeground#e166b899
  • editorOverviewRuler.incomingContentForeground#ffcb47bb
  • editorOverviewRuler.infoForeground#669199bb
  • editorOverviewRuler.modifiedForeground#3bd8f799
  • editorOverviewRuler.rangeHighlightForeground#1e1f1999
  • editorOverviewRuler.selectionHighlightForeground#998b6699
  • editorOverviewRuler.warningForeground#DE9F00
  • editorOverviewRuler.wordHighlightForeground#85457099
  • editorOverviewRuler.wordHighlightStrongForeground#EAC9DFcc
  • editorPane.background#fcfbf7
  • editorRuler.foreground#79b3be
  • editorSuggestWidget.background#EEEDE9
  • editorSuggestWidget.border#e2ddcf
  • editorSuggestWidget.highlightForeground#446c74
  • editorSuggestWidget.selectedBackground#b8f3ff
  • editorWarning.foreground#DE9F00
  • editorWhitespace.foreground#79b3be
  • editorWidget.background#EEEDE9
  • editorWidget.border#e2ddcf
  • errorForeground#C73842
  • extensionButton.prominentBackground#729200
  • extensionButton.prominentForeground#fcfbf7
  • extensionButton.prominentHoverBackground#bce52a
  • focusBorder#97C100
  • foreground#272a2b
  • gitDecoration.addedResourceForeground#729200
  • gitDecoration.conflictingResourceForeground#b34d91
  • gitDecoration.deletedResourceForeground#E28187
  • gitDecoration.ignoredResourceForeground#777570
  • gitDecoration.modifiedResourceForeground#446c74
  • gitDecoration.submoduleResourceForeground#669199
  • gitDecoration.untrackedResourceForeground#597100
  • gitlens.gutterUncommittedForegroundColor#729200
  • input.background#E1DFDA
  • input.border#e2ddcf
  • input.foreground#272a2b
  • input.placeholderForeground#6C7577
  • inputValidation.errorBackground#ffb8bd
  • inputValidation.errorBorder#c73842
  • inputValidation.infoBackground#b8f3ff
  • inputValidation.infoBorder#669199
  • inputValidation.warningBackground#ffcb47
  • inputValidation.warningBorder#DE9F00
  • list.activeSelectionBackground#0b9ab666
  • list.activeSelectionForeground#fff
  • list.dropBackground#383b3d
  • list.errorForeground#C73842
  • list.focusBackground#b8f3ff66
  • list.hoverBackground#0b9ab633
  • list.inactiveFocusBackground#b8f3ff44
  • list.inactiveSelectionBackground#66919944
  • list.warningForeground#DE9F00
  • listFilterWidget.background#EAC9DF
  • listFilterWidget.noMatchesOutline#e166b8
  • listFilterWidget.outline#d38dbc
  • menu.background#E1DFDA
  • menu.foreground#272a2b
  • menu.selectionBackground#79b3be
  • menu.selectionForeground#1e1f19
  • menu.separatorBackground#777570
  • merge.commonContentBackground#72920033
  • merge.commonHeaderBackground#72920088
  • merge.currentContentBackground#0b9ab633
  • merge.currentHeaderBackground#0b9ab688
  • merge.incomingContentBackground#de9f0033
  • merge.incomingHeaderBackground#de9f0088
  • minimap.findMatchHighlight#d38dbc88
  • minimap.selectionHighlight#b8f3ff88
  • notifications.background#e2ddcf
  • notifications.border#bce52a
  • panel.background#ebe8e0
  • peekView.border#0b9ab6
  • peekViewEditor.background#E1DFDA
  • peekViewEditor.matchHighlightBackground#c2baa8
  • peekViewEditorGutter.background#EEEDE9
  • peekViewResult.fileForeground#272a2b
  • peekViewResult.lineForeground#3e3c38
  • peekViewResult.matchHighlightBackground#0b9ab64d
  • progressBar.background#b8f3ff
  • scrollbar.shadow#998b6666
  • scrollbarSlider.activeBackground#66919966
  • scrollbarSlider.background#66919922
  • scrollbarSlider.hoverBackground#66919944
  • selection.background#b8f3ff66
  • settings.numberInputBackground#E1DFDA
  • settings.textInputBackground#E1DFDA
  • sideBar.background#fcfbf7
  • sideBar.border#e2ddcf
  • sideBar.dropBackground#E1DFDA
  • sideBarSectionHeader.background#e2ddcf
  • sideBarTitle.foreground#272a2b
  • statusBar.background#79b3be
  • statusBar.debuggingBackground#E28187
  • statusBar.debuggingForeground#272a2b
  • statusBar.foreground#272a2b
  • statusBar.noFolderBackground#CA7AAF
  • statusBar.noFolderForeground#272a2b
  • tab.activeBorderTop#97C100
  • tab.activeForeground#272a2b
  • tab.activeModifiedBorder#0b9ab6
  • tab.border#e2ddcf
  • tab.inactiveBackground#EEEDE9
  • tab.inactiveForeground#777570
  • tab.inactiveModifiedBorder#b8f3ff
  • terminal.ansiBlack#272a2b
  • terminal.ansiBlue#0b9ab6
  • terminal.ansiBrightBlack#777570
  • terminal.ansiBrightBlue#3bd8f7
  • terminal.ansiBrightCyan#79b3be
  • terminal.ansiBrightGreen#729200
  • terminal.ansiBrightMagenta#e166b8
  • terminal.ansiBrightRed#c74438
  • terminal.ansiBrightWhite#EEEDE9
  • terminal.ansiBrightYellow#DE9F00
  • terminal.ansiCyan#669199
  • terminal.ansiGreen#597100
  • terminal.ansiMagenta#b34d91
  • terminal.ansiRed#B83840
  • terminal.ansiWhite#d5cebe
  • terminal.ansiYellow#998b66
  • terminal.background#fcfbf7
  • terminal.foreground#777570
  • terminal.selectionBackground#446c7440
  • textCodeBlock.background#E1DFDA
  • textLink.activeForeground#0b9ab6
  • textLink.foreground#446c74
  • textPreformat.foreground#729200
  • widget.shadow#998b6644

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#998b66
emphasisitalic
strongbold
header#b34d91
constant.language#0b9ab6
constant.numeric, meta.delimiter.decimal#0b9ab6
entity.other.attribute-name, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#597100
entity.other.attribute-name.class.css#B83840
entity.other.attribute-name.pseudo-class.css#E28187
entity.other.attribute-name.pseudo-element.css#b34d91
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id#e166b8
entity.name.tag.css#669199
markup.underlineunderline
markup.boldbold
markup.heading, markup.heading.setext, punctuation.definition.heading.markdown, entity.name.section.markdown#62542Fbold underline
markup.italicitalic
punctuation.definition.list, punctuation.definition.list.begin.markdown#3e3c38bold
markup.inline.raw, markup.raw.inline, markup.block.raw, markup.raw.block, markup.fenced_code.block#777570
markup.quote, punctuation.definition.quote.begin.markdown#E28187italic
markup.underline.link#0b9ab6underline
markup.other#777570
punctuation.definition.tag#669199
meta.preprocessor, keyword.preprocessor#b34d91
meta.preprocessor.string#e166b8
meta.preprocessor.numeric#CA7AAF
meta.structure.dictionary.key.python#597100
storage, storage.modifier#446c74
storage.type, storage.type.cs#DE9F00
string, string.tag, string.value, string.quoted, string.unquoted, punctuation.definition.string#97C100
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#b34d91
meta.template.expression#6C7577
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#446c74
keyword, keyword.control, keyword.operator, keyword.operator.expression, keyword.operator.ternary, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#DE9F00
keyword.operator.new#446c74
keyword.other.unit#669199
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#79b3be
support.function.git-rebase#b34d91
constant.sha.git-rebase#729200
storage.modifier.import.java, storage.modifier.package.java#777570
variable.language#CA7AAF
entity.name.function, support.function, support.constant.handlebars#E28187
meta.return-type, support.class, support.type, entity.name.type, 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#79b3be
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#79b3be
meta.type_params#94393F
variable, meta.definition.variable.name, support.variable, entity.name.variable#62542F
meta.object-literal.key#597100
constant.character#bce52a
string.regexp, meta.group.regexp, constant.regexp#729200
keyword.control.anchor.regexp#b34d91
keyword.operator.quantifier.regexp#0b9ab6
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#777570
constant.other.character-class.range.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#98bf0e
keyword.operator.or.regexp#DE9F00
constant.character.numeric.regexp#729200
punctuation.definition.group.no-capture.regexp#A3AFB2
meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp, meta.assertion.look-behind.regexp, meta.assertion.negative-look-behind.regexp#E28187
keyword.other.back-reference.regexp#e166b8
keyword.operator.negation.regexp#DE9F00
meta.group.assertion.regexp#94393F
token.info-token#79b3be
token.warn-token#DE9F00
token.error-token#C73842
token.debug-token#729200
keyword - keyword.operator#DE9F00
keyword.control#DE9F00
constant.numeric#0b9ab6
entity.name.type, support.type#62542F
entity.name.class, support.class#62542F
entity.name.function, support.function, meta.decorator, meta.decorator.ts#B83840
text, markup, source, meta#3E3C38
constant.character.escape#e166b8
comment, punctuation.definition.comment#ADB58Fitalic
comment.block.documentation#6C7577italic
punctuation.definition.block.tag.jsdoc, variable.other.jsdoc, storage.type.class.jsdoc#669199bold italic
constant.other.placeholder, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#b34d91
keyword.operator.new#446c74
support.constant, support.class.builtin, support.constant.math, support.constant.property-value, support.constant.font-name#79b3be
constant.other#669199
meta.template.expression#854570
entity.name, entity.name.type, entity.name.class, entity.other.inherited-class, support.class#E28187
entity.name.enum#446c74
entity.name.interface, entity.name.trait#E28187
variable.parameter#3e3c38
entity.name.tag#79b3be
meta.structure.dictionary.json#729200
meta.diff, meta.diff.header#b34d91
markup.deleted#C73842
markup.inserted#729200
markup.changed#0b9ab6
invalid#C73842bold
invalid.deprecated#B83840
storage.type.function.arrow#E28187italic bold
punctuation, meta.generic, meta.tag, punctuation.definition.generic.begin, punctuation.definition.generic.end#777570
punctuation.definition.tag#6C7577
punctuation.section.embedded#854570
meta.brace.round, meta.brace.square, punctuation.definition.block, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.section.brackets.begin, punctuation.section.brackets.end#777570
punctuation.separator.continuation, punctuation.terminator#6C7577
entity.name.label#e166b8
support.type.property-name, meta.object-literal.key#7E9139
meta.attribute#e166b8
keyword.other.important#C73842
entity.name.tag.wildcard#C73842
support.constant.mathematical-symbols#79b3be
support.constant.color, constant.other.color.rgb-value#6C7577
keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss, support.constant.media, punctuation.definition.media-query#DE9F00
variable.css, variable.scss, variable.sass, variable.less, variable.stylus#446c74