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.

  • activityBarBadge.background#F15FB4
  • banner.background#9f517e
  • button.background#FF7AB3
  • button.hoverBackground#fe8bbc
  • checkbox.border#6B6B6B
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionBackground#444242
  • editor.selectionHighlightBackground#ADD6FF26
  • editorBracketHighlight.foreground1#dfb976
  • editorBracketHighlight.foreground2#5caeef
  • editorBracketHighlight.foreground3#c172d9
  • editorBracketHighlight.foreground4#4fb1bc
  • editorBracketHighlight.foreground5#97c26c
  • editorBracketHighlight.foreground6#abb2c0
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • focusBorder#cf307f
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#e143aaa9
  • list.activeSelectionIconForeground#FFF
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.separatorBackground#454545
  • ports.iconRunningProcessForeground#369432
  • selection.background#4B2F31
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#F15FB4
  • statusBarItem.remoteBackground#8C1A4A
  • statusBarItem.remoteForeground#FFF
  • tab.lastPinnedBorder#ccc3
  • terminal.inactiveSelectionBackground#3A3D41
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D4D4D4
emphasisitalic
strongbold
header#000080
comment#af678d
constant.language#F695C6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#cec4a8
constant.regexp#646695
entity.name.tag#F695C6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d7ba7d
invalid#e83c92
markup.underlineunderline
markup.bold#F695C6bold
markup.heading#F695C6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#cec4a8
markup.deleted#e99a9a
markup.changed#F695C6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#e99a9a
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#F695C6
meta.preprocessor.string#e99a9a
meta.preprocessor.numeric#cec4a8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#F695C6
storage#F695C6
storage.type#F695C6
storage.modifier, keyword.operator.noexcept#F695C6
string, meta.embedded.assembly#e99a9a
string.tag#e99a9a
string.value#e99a9a
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#F695C6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#c0caf5
keyword#d1b7f1
keyword.control#d1b7f1
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#F695C6
keyword.other.unit#cec4a8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#F695C6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#cec4a8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#F695C6
keyword.control.state-theme.ds#e83c92
support.type.property-name.q.ds#F695C6
support.type.property-name.answer.ds#d1b7f1
support.type.property-name.qa.ds#9cdcfe
support.type.property-name.reaction.ds#d1b7f1
string.unquoted.answer-text.ds#cec4a8
keyword.other.go.ds#d7ba7d
keyword.other.go-immediate.ds#e83c92bold
keyword.other.action.ds#d7ba7d
keyword.other.button.ds#F695C6
keyword.control.flow.ds#9cdcfe
keyword.control.if-else.ds#e83c92italic
keyword.other.integration.ds#9cdcfe
keyword.other.modifier.ds#d7ba7d
support.type.property-name.data.ds#F695C6
keyword.other.form.ds#d1b7f1
punctuation.definition.group.begin.ds#e83c92
punctuation.definition.group.end.ds#e83c92
meta.group.alternatives.ds#e83c92
punctuation.definition.optional.begin.ds#d1b7f1
punctuation.definition.optional.end.ds#d1b7f1
meta.group.optional.ds#d1b7f1
punctuation.definition.permutation.begin.ds#d7ba7d
punctuation.definition.permutation.end.ds#d7ba7d
meta.group.permutation.ds#d7ba7d
keyword.operator.wildcard.ds#e83c92
keyword.operator.wildcard.suffix.ds#5ad4e6
keyword.operator.wildcard.prefix.ds#5ad4e6
punctuation.separator.path.ds#3a5fa8
string.other.path.segment-1.ds#6796e6
string.other.path.segment-2.ds#88aeec
string.other.path.segment-3.ds#a9c6f2
string.other.path.segment-4.ds#c0d1f5
keyword.operator.fromstate.ds#9cdcfe
comment.line.number-sign.ds#af678ditalic
constant.numeric.state-number.ds#d7ba7d
variable.other.named-pattern.ds#e83c92
variable.other.answer.ds#cec4a8
support.class.data-object.ds#9cdcfe
string.quoted.ds#cec4a8
constant.character.escape.ds#e83c92
punctuation.separator.pipe.ds#d7ba7d
meta.embedded.block.ds-script#c9a870
support.class.data-object.script.ds#f0c060bold
Dialogue Scenario by Ivan Gusev - VS Code Theme