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#ff5c8d
  • activityBar.background#2C2638
  • activityBar.border#2B2B2B
  • activityBar.foreground#fde3e8
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#ff5c8d
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#ff5c8dcc
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#ff5282
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#ff8ab8
  • checkbox.background#313131
  • checkbox.border#3C3C3C
  • debugToolBar.background#181818
  • descriptionForeground#9D9D9D
  • dropdown.background#2C2638
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#1F1F1F
  • editor.background#353042
  • editor.findMatchBackground#9E6A03
  • editor.foreground#FFF0F5
  • editor.lineHighlightBackground#ff5c8d22
  • editor.selectionBackground#ff5c8d22
  • editor.selectionHighlightBackground#ff5c8d22
  • editor.wordHighlightBackground#ff5c8d22
  • editor.wordHighlightStrongBackground#ff5c8d22
  • editorBracketMatch.border#ffdfa2
  • editorCursor.foreground#ffedf0
  • editorError.foreground#ff62a5
  • editorGroup.background#2C2638
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#2C2638
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#ff5c8d
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#010409
  • editorWarning.foreground#ffdfa2
  • editorWidget.background#202020
  • errorForeground#F85149
  • extensionButton.prominentBackground#ff5c8d
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ff5c8d
  • focusBorder#ffa2d7
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#353042
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#ff6d9482
  • inputOption.activeBorder#ff5c8d
  • keybindingLabel.foreground#CCCCCC
  • list.activeSelectionBackground#ff5c8d88
  • list.errorForeground#ff2929
  • list.focusBackground#ff5c8d88
  • list.highlightForeground#F8F8F0
  • list.hoverBackground#ff5c8d55
  • list.inactiveSelectionBackground#ff5c8d55
  • menu.background#1F1F1F
  • menu.selectionBackground#ff5c8d
  • menu.separatorBackground#ea7599
  • notificationCenter.border#ea7599
  • notificationCenterHeader.background#ea7599
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ff5c8d
  • notifications.background#6d5d72
  • notifications.border#2B2B2B
  • notifications.foreground#ea7599
  • panel.background#181818
  • panel.border#2B2B2B
  • panelInput.border#2B2B2B
  • panelTitle.activeBorder#ff5c8d
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#9D9D9D
  • peekView.border#ff5c8d
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • progressBar.background#ff5c8d
  • quickInput.background#222222
  • quickInput.foreground#CCCCCC
  • scrollbarSlider.activeBackground#ea759988
  • scrollbarSlider.background#ea759988
  • scrollbarSlider.hoverBackground#ea759988
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#2C2638
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#2C2638
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#ea7599
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#ea7599
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#ff5c8d
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ea7599
  • statusBarItem.focusBorder#ff5c8d
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#ff5c8d
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#ff5c8d
  • tab.activeForeground#ff5c8d
  • tab.border#9498a144
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#2C2638
  • tab.inactiveForeground#9498a1
  • tab.selectedBorderTop#ff9198
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.ansiWhite#ffffff
  • terminal.foreground#CCCCCC
  • terminal.tab.activeBorder#ff5c8d
  • textBlockQuote.background#2B2B2B
  • textBlockQuote.border#616161
  • textCodeBlock.background#2B2B2B
  • textLink.activeForeground#ff8eb5
  • textLink.foreground#ff8eb5
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#2C2638
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D
  • welcomePage.progress.foreground#ff5c8d
  • welcomePage.tileBackground#2B2B2B
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#3c0080
comment#857282
constant.language#ff709b
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#c7e4b7
constant.regexp#646695
entity.name.tag#ff709b
entity.name.tag.css, entity.name.tag.less#7db3d7
entity.other.attribute-name#ffbbdd
entity.other.attribute-name.class.css, 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 entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#7db3d7
invalid#f44747
markup.underlineunderline
markup.bold#ff709bbold
markup.heading#ff709bbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#c7e4b7
markup.deleted#ab8fcf
markup.changed#ff709b
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#d86595
markup.inline.raw#ab8fcf
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#ff709b
meta.preprocessor.string#ab8fcf
meta.preprocessor.numeric#c7e4b7
meta.structure.dictionary.key.python#ffbbdd
meta.diff.header#ff709b
storage#ff709b
storage.type#ff709b
storage.modifier, keyword.operator.noexcept#ff709b
string, meta.embedded.assembly#ab8fcf
string.tag#ab8fcf
string.value#ab8fcf
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff709b
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#ffbbdd
keyword#ff709b
keyword.control#ff709b
keyword.operator#d4d4d4
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#ff709b
keyword.other.unit#c7e4b7
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff709b
support.function.git-rebase#ffbbdd
constant.sha.git-rebase#c7e4b7
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff709b
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#ade5ff
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#cc7eff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#cc7eff
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#ffbbdd
variable.other.constant, variable.other.enummember#fc90c2
meta.object-literal.key#ffbbdd
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#ab8fcf
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#ab8fcf
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#ade5ff
keyword.operator.quantifier.regexp#7db3d7
constant.character, constant.other.option#ff709b
constant.character.escape#7db3d7
entity.name.label#C8C8C8
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#3c0080
comment#857282
constant.language#ff709b
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#c7e4b7
constant.regexp#646695
entity.name.tag#ff709b
entity.name.tag.css, entity.name.tag.less#7db3d7
entity.other.attribute-name#ffbbdd
entity.other.attribute-name.class.css, 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 entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#7db3d7
invalid#f44747
markup.underlineunderline
markup.bold#ff709bbold
markup.heading#ff709bbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#c7e4b7
markup.deleted#ab8fcf
markup.changed#ff709b
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#d86595
markup.inline.raw#ab8fcf
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#ff709b
meta.preprocessor.string#ab8fcf
meta.preprocessor.numeric#c7e4b7
meta.structure.dictionary.key.python#ffbbdd
meta.diff.header#ff709b
storage#ff709b
storage.type#ff709b
storage.modifier, keyword.operator.noexcept#ff709b
string, meta.embedded.assembly#ab8fcf
string.tag#ab8fcf
string.value#ab8fcf
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff709b
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#ffbbdd
keyword#ff709b
keyword.control#ff709b
keyword.operator#d4d4d4
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#ff709b
keyword.other.unit#c7e4b7
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff709b
support.function.git-rebase#ffbbdd
constant.sha.git-rebase#c7e4b7
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff709b