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#bce52a
  • activityBar.background#3e3c38
  • activityBar.foreground#ebe8e0
  • activityBarBadge.background#c73842
  • activityBarBadge.foreground#ebe8e0
  • badge.background#3e3c38
  • badge.foreground#ebe8e0
  • breadcrumb.activeSelectionForeground#bce52a
  • button.background#446c74
  • button.foreground#ebe8e0
  • button.hoverBackground#669199
  • dropdown.background#1e1f19
  • dropdown.border#3e3c38
  • dropdown.listBackground#1e1f19
  • editor.background#272a2b
  • editor.findMatchBackground#b34d91
  • editor.findMatchBorder#b34d91
  • editor.findMatchHighlightBackground#b34d9166
  • editor.findMatchHighlightBorder#b34d9166
  • editor.findRangeHighlightBackground#446c7444
  • editor.findRangeHighlightBorder#446c7444
  • editor.foreground#ebe8e0
  • editor.hoverHighlightBackground#998b6666
  • editor.inactiveSelectionBackground#66919966
  • editor.lineHighlightBackground#1e1f19
  • editor.lineHighlightBorder#1e1f19
  • editor.rangeHighlightBackground#ebe8e00b
  • editor.selectionBackground#446c7466
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#998b6666
  • editor.selectionHighlightBorder#998b66
  • editor.wordHighlightBackground#b34d9144
  • editor.wordHighlightBorder#b34d9144
  • editor.wordHighlightStrongBackground#b34d9166
  • editor.wordHighlightStrongBorder#b34d9166
  • editorBracketMatch.background#0000
  • editorBracketMatch.border#e166b8
  • editorCodeLens.foreground#c2baa8
  • editorCursor.background#3e3c38
  • editorCursor.foreground#e2ddcf
  • editorError.foreground#c73842
  • editorGroup.border#3e3c38
  • editorIndentGuide.activeBackground#669199
  • editorIndentGuide.background#446c74
  • editorInfo.foreground#669199
  • editorLineNumber.activeForeground#669199
  • editorLineNumber.foreground#446c74
  • editorLink.activeForeground#3bd8f7
  • editorOverviewRuler.addedForeground#e9ff9999
  • editorOverviewRuler.border#3e3c38
  • editorOverviewRuler.bracketMatchForeground#ebe8e099
  • editorOverviewRuler.commonContentForeground#77757066
  • editorOverviewRuler.currentContentForeground#8e996699
  • editorOverviewRuler.deletedForeground#94393F99
  • editorOverviewRuler.errorForeground#C73842
  • editorOverviewRuler.findMatchForeground#e166b899
  • editorOverviewRuler.incomingContentForeground#ffcb47bb
  • editorOverviewRuler.infoForeground#669199b3
  • editorOverviewRuler.modifiedForeground#3bd8f799
  • editorOverviewRuler.rangeHighlightForeground#1e1f1999
  • editorOverviewRuler.selectionHighlightForeground#998b6699
  • editorOverviewRuler.warningForeground#ffcb47
  • editorOverviewRuler.wordHighlightForeground#85457099
  • editorOverviewRuler.wordHighlightStrongForeground#EAC9DFcc
  • editorPane.background#1e1f19
  • editorRuler.foreground#446c74
  • editorSuggestWidget.highlightForeground#3bd8f7
  • editorSuggestWidget.selectedBackground#446c74
  • editorWarning.foreground#ffcb47
  • editorWhitespace.foreground#446c74
  • editorWidget.background#3E3C38
  • editorWidget.border#1e1f19
  • errorForeground#C73842
  • extensionButton.prominentBackground#bce52a
  • extensionButton.prominentForeground#1e1f19
  • extensionButton.prominentHoverBackground#e9ff99
  • focusBorder#bce52a
  • foreground#ebe8e0
  • gitDecoration.addedResourceForeground#bce52a
  • gitDecoration.conflictingResourceForeground#e166b8
  • gitDecoration.deletedResourceForeground#E28187
  • gitDecoration.ignoredResourceForeground#B2B0AA
  • gitDecoration.modifiedResourceForeground#79b3be
  • gitDecoration.submoduleResourceForeground#b8f3ff
  • gitDecoration.untrackedResourceForeground#8e9966
  • input.background#1e1f19
  • input.border#3e3c38
  • input.foreground#ebe8e0
  • input.placeholderForeground#c2baa8
  • inputValidation.errorBackground#E28187
  • inputValidation.errorBorder#ffb8bd
  • inputValidation.infoBackground#446c74
  • inputValidation.infoBorder#669199
  • inputValidation.warningBackground#998b66
  • inputValidation.warningBorder#ffcb47
  • list.activeSelectionBackground#1e1f19
  • list.activeSelectionForeground#3bd8f7
  • list.dropBackground#383b3d
  • list.errorForeground#E28187
  • list.focusBackground#446c74
  • list.hoverBackground#66919966
  • list.inactiveFocusBackground#66919966
  • list.inactiveSelectionBackground#1e1f19
  • list.warningForeground#ffcb47
  • listFilterWidget.background#854570
  • listFilterWidget.noMatchesOutline#e166b8
  • listFilterWidget.outline#b34d91
  • menu.background#1e1f19
  • menu.foreground#ebe8e0
  • menu.selectionBackground#446c74
  • menu.selectionForeground#ebe8e0
  • menu.separatorBackground#B2B0AA
  • merge.commonContentBackground#76960011
  • merge.commonHeaderBackground#76960088
  • merge.currentContentBackground#0b9ab611
  • merge.currentHeaderBackground#0b9ab688
  • merge.incomingContentBackground#de9f0011
  • merge.incomingHeaderBackground#de9f0088
  • minimap.findMatchHighlight#d38dbc88
  • minimap.selectionHighlight#1e1f1966
  • peekView.border#3bd8f7
  • peekViewEditor.background#1e1f19
  • peekViewEditor.matchHighlightBackground#6C7577
  • peekViewEditorGutter.background#272a2b
  • peekViewResult.fileForeground#ebe8e0
  • peekViewResult.lineForeground#e2ddcf
  • peekViewResult.matchHighlightBackground#3bd8f74d
  • progressBar.background#446c74
  • scrollbar.shadow#08101280
  • scrollbarSlider.activeBackground#998b6666
  • scrollbarSlider.background#998b6622
  • scrollbarSlider.hoverBackground#998b6644
  • selection.background#446c7466
  • settings.numberInputBackground#1e1f19
  • settings.textInputBackground#1e1f19
  • sideBar.background#272a2b
  • sideBar.border#3e3c38
  • sideBar.dropBackground#1e1f19
  • sideBarSectionHeader.background#3e3c38
  • sideBarTitle.foreground#ebe8e0
  • statusBar.background#446c74
  • statusBar.debuggingBackground#94393F
  • statusBar.debuggingForeground#ebe8e0
  • statusBar.foreground#ebe8e0
  • statusBar.noFolderBackground#854570
  • statusBar.noFolderForeground#ebe8e0
  • tab.activeBorderTop#bce52a
  • tab.activeForeground#ebe8e0
  • tab.activeModifiedBorder#669199
  • tab.border#3e3c38
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#d5cebe
  • tab.inactiveModifiedBorder#446c74
  • terminal.ansiBlack#272a2b
  • terminal.ansiBlue#446c74
  • terminal.ansiBrightBlack#c2baa8
  • terminal.ansiBrightBlue#3bd8f7
  • terminal.ansiBrightCyan#b8f3ff
  • terminal.ansiBrightGreen#d3e0a4
  • terminal.ansiBrightMagenta#e166b8
  • terminal.ansiBrightRed#ff857a
  • terminal.ansiBrightWhite#ebe8e0
  • terminal.ansiBrightYellow#ead59f
  • terminal.ansiCyan#669199
  • terminal.ansiGreen#bce52a
  • terminal.ansiMagenta#b34d91
  • terminal.ansiRed#c74438
  • terminal.ansiWhite#d5cebe
  • terminal.ansiYellow#ffcb47
  • terminal.background#272a2b
  • terminal.foreground#d5cebe
  • terminal.selectionBackground#446c7440
  • textCodeBlock.background#1e1f19
  • textLink.activeForeground#3bd8f7
  • textLink.foreground#b8f3ff
  • textPreformat.foreground#bce52a
  • widget.shadow#272a2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4DEE1
emphasisitalic
strongbold
header#d38dbc
constant.language#3bd8f7
constant.numeric, meta.delimiter.decimal#3bd8f7
entity.other.attribute-name#d3e0a4
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#d3e0a4
entity.other.attribute-name.class.css#FFB8BD
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#d38dbc
markup.underlineunderline
markup.boldbold
markup.heading, markup.heading.setext, punctuation.definition.heading.markdown, entity.name.section.markdown#ffcb47underline
markup.italicitalic
punctuation.definition.quote.begin.markdown#FFB8BD
punctuation.definition.list, punctuation.definition.list.begin.markdown#e2ddcfbold
markup.inline.raw, markup.raw.inline, markup.block.raw, markup.raw.block, markup.fenced_code.block#d5cebe
punctuation.definition.tag#c2baa8
meta.preprocessor, keyword.preprocessor#b34d91
meta.preprocessor.string#e166b8
meta.preprocessor.numeric#d38dbc
meta.structure.dictionary.key.python#d3e0a4
storage, storage.modifier#b8f3ff
storage.type, storage.type.cs#ffcb47
string, string.tag, string.value, string.quoted, string.unquoted, punctuation.definition.string#bce52a
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#b34d91
meta.template.expression#c2baa8
support.type.vendored.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#b8f3ff
keyword, keyword.control, keyword.operator, keyword.operator.expression, keyword.operator.ternary, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ffcb47
keyword.operator.new#b8f3ff
keyword.other.unit#D4DEE1
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#79b3be
support.function.git-rebase#b34d91
constant.sha.git-rebase#bce52a
storage.modifier.import.java, storage.modifier.package.java#d5cebe
variable.language#d38dbc
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#FFB8BD
variable, meta.definition.variable.name, support.variable, entity.name.variable#d5cebe
constant.character#e9ff99
meta.object-literal.key#d3e0a4
string.regexp, meta.group.regexp, constant.regexp#bce52a
keyword.control.anchor.regexp#EAC9DF
keyword.operator.quantifier.regexp#3bd8f7
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#d5cebe
keyword.operator.or.regexp#ffcb47
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, constant.other.character-class.range.regexp#e9ff99
constant.character.numeric.regexp#d3e0a4
punctuation.definition.group.no-capture.regexp#B2B0AA
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#ffcb47
meta.group.assertion.regexp#FFB8BD
token.info-token#79b3be
token.warn-token#ffcb47
token.error-token#C73842
token.debug-token#bce52a
keyword - keyword.operator#ffcb47
keyword.control#ffcb47
constant.numeric#3bd8f7
entity.name.type, support.type#ead59f
entity.name.class, support.class#ead59f
entity.name.function, support.function#E28187
text, markup, source, meta#ebe8e0
constant.character.escape#e9ff99
comment, punctuation.definition.comment#8e9966italic
comment.block.documentation#B2B0AAitalic
punctuation.definition.block.tag.jsdoc, variable.other.jsdoc, storage.type.class.jsdoc#c2baa8bold italic
constant.other.placeholder, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#b34d91
keyword.operator.new#b8f3ff
support.constant, support.class.builtin, support.constant.math, support.constant.property-value, support.constant.font-name#79b3be
constant.other#e9ff99
meta.template.expression#EAC9DF
entity.name, entity.name.type, entity.name.class, entity.other.inherited-class, support.class#FFB8BD
entity.name.enum#b8f3ff
entity.name.interface, entity.name.trait#FFB8BD
variable.parameter#e2ddcf
entity.name.tag#79b3be
meta.structure.dictionary.json#bce52a
meta.diff, meta.diff.header#b34d91
markup.deleted#C73842
markup.inserted#bce52a
markup.changed#3bd8f7
invalid#C73842bold
invalid.deprecated#94393F
markup.quote#FFB8BDitalic
markup.underline.link#3bd8f7underline
markup.other#d5cebe
storage.type.function.arrow#E28187italic bold
punctuation, meta.generic, meta.tag, punctuation.definition.generic.begin, punctuation.definition.generic.end#d5cebe
punctuation.definition.tag#c2baa8
punctuation.section.embedded#e9ff99
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#d5cebe
punctuation.separator.continuation, punctuation.terminator#c2baa8
entity.name.label#e166b8
support.type.property-name, meta.object-literal.key#d3e0a4
meta.attribute#e166b8
keyword.other.important#C73842
entity.name.tag.wildcard#C73842
support.constant.mathematical-symbols#D4DEE1
support.constant.color, constant.other.color.rgb-value#b8f3ff
keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss, support.constant.media, punctuation.definition.media-query#ffcb47
variable.css, variable.scss, variable.sass, variable.less, variable.stylus#b8f3ff
Bombyx by y6nH - VS Code Theme