Skip to main content
CodingTheme

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.

  • actionBar.toggledBackground#383a49
  • activityBarBadge.background#007acc
  • checkbox.border#6b6b6b
  • editor.background#1e1e1e
  • editor.findMatchHighlightBackground#bf00ea55
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#3a3d4177
  • editor.lineHighlightBackground#0881e426
  • editor.selectionBackground#02495982
  • editor.selectionHighlightBackground#add6ff26
  • editor.wordHighlightTextBackground#364536b8
  • editorIndentGuide.activeBackground1#3877ff41
  • editorIndentGuide.background1#404040
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • ports.iconRunningProcessForeground#369432
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarTitle.foreground#bbbbbb
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.arrayForeground#569CD6
  • symbolIcon.interfaceForeground#76608e
  • symbolIcon.methodForeground#af74ed
  • symbolIcon.nullForeground#569CD6
  • symbolIcon.numberForeground#2f648f
  • symbolIcon.variableForeground#569CD6
  • tab.lastPinnedBorder#cccccc33
  • terminal.inactiveSelectionBackground#3a3d41
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, string.quoted.single, string.quoted.double#2da42d
comment, comment.block#594f48italic
esl.reserved#a4549d
esl.function#D7BA7D
esl.class#af74ed
esl.control.keyword#569CD6bold
esl.control.section#0589f4italic bold
esl.pricedata#82ac03bold
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#F44747bold
constant.operator#808080
esl.skipwords#ff9e9eitalic
variable.type#8b9500
variable.esl#16bcc4
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css, entity.name.tag.less#D7BA7D
entity.other.attribute-name#9CDCFE
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#569CD6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#CE9178
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#569CD6
storage.type#569CD6
storage.modifier, keyword.operator.noexcept#569CD6
string.tag#CE9178
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9CDCFE
keyword#569CD6
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#569CD6
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#569CD6
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

EasyLanguage Support by Rider Trading Tools - VS Code Theme