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.

  • activityBar.background#333842
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#353b45
  • dropdown.border#181A1F
  • editor.background#282C34
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.background#21252B
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#ABB2BF26
  • editorInlayHint.background#00000027
  • editorInlayHint.foreground#6d6d6d
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#21252B
  • editorWidget.border#3A3F4B
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#1B1D23
  • input.border#181A1F
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • notification.background#21252B
  • peekView.border#528BFF
  • peekViewEditor.background#1B1D23
  • peekViewResult.background#21252B
  • peekViewResult.selectionBackground#2C313A
  • peekViewTitle.background#1B1D23
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252B
  • sideBarSectionHeader.background#333842
  • statusBar.background#21252B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#282C34
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D4D4D4
meta.template.expression#D4D4D4
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
emphasisitalic
strongbold
markup.italicitalic
markup.underlineunderline
markup.strikethroughstrikethrough
markup.bold, markup.heading#C678DDbold
header#000080
markup.changed#C678DD
markup.inserted#D19A66
markup.deleted, markup.inline.raw#98C379
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
comment#6A9955
constant.language, variable.language, constant.character#C678DD
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit, constant.language.boolean#D19A66
string, string.tag, string.value, meta.embedded.assembly#98C379
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C678DD
string.regexp, string.regexp.js meta.group.regexp#56B6C2
constant.regexp#646695
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#98C379
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#61AFEF
keyword.operator.quantifier.regexp#D7BA7D
keyword, keyword.control#C678DD
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, keyword.operator.noexcept, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C678DD
keyword.operator, source.tsx keyword.operator#56B6C2
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C678DD
storage, storage.type, storage.modifier#DCAEEB
support.class, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, entity.other.inherited-class, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, 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#E0C285
defaultLibrary, support.variable, support.function, support.type, constant.character.escape, support.type.vendored.property-name.css#56B6C2
entity.name.type.module#56B6C2italic
entity.name.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, variable.other.constant.object.tsx entity.name.function.tsx#61AFEF
variable.parameter#D19A66italic
variable.other.property, variable.other.enummember, variable.scss, variable.other.env, source.json support.type.property-name#E06C75
meta.object-literal.key, meta.structure.dictionary.key.python, support.type.vendored.property-name, support.type.property-name, variable.css, variable.other.less, source.coffee.embedded#ABB2BF
entity.name.tag, entity.name.tag.css#E06C75
punctuation.definition.tag#ABB2BF
entity.other.attribute-name, entity.other.attribute-name.pseudo-element.css#D19A66
support.class.component#26BDA4
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, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D7BA7D
support.constant.property-value, support.constant.font-name, support.constant.color, constant.language.json.comments, constant.language.json#D19A66
support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value#98C379
meta.preprocessor, entity.name.function.preprocessor#C678DD
meta.preprocessor.string#98C379
meta.preprocessor.numeric#D19A66
meta.diff.header#C678DD
support.function.git-rebase#ABB2BF
constant.sha.git-rebase#D19A66
entity.name.label#C8C8C8
invalid#F44747

Shiki preview

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

Loading...

Kvy-True Atom One Dark by kvy - VS Code Theme