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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Light Pink Theme - Coding Theme