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.activeBackground#25181b
  • activityBar.activeBorder#e8a96d4f
  • activityBar.activeFocusBorder#171213
  • activityBar.background#171213
  • activityBarBadge.background#171213
  • button.background#343434
  • diffEditor.insertedTextBackground#FFE4B346
  • diffEditor.removedTextBackground#ff274850
  • dropdown.background#af7070
  • dropdown.listBackground#3f3e3e
  • editor.background#171213
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionBackground#9c705e48
  • editor.selectionHighlightBackground#9c173f26
  • editorBracketHighlight.foreground1#ff9317
  • editorBracketHighlight.foreground2#ff4788
  • editorBracketHighlight.foreground3#ffa788
  • editorBracketHighlight.foreground4#F395CC
  • editorBracketHighlight.foreground5#f34e3f
  • editorBracketHighlight.foreground6#abb2c0
  • editorBracketHighlight.unexpectedBracket.foreground#2e2929
  • editorCodeLens.foreground#55442aa0
  • editorError.foreground#ff3768
  • editorGroupHeader.tabsBackground#171213
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorSuggestWidget.background#131011
  • editorSuggestWidget.foreground#f4aca0
  • editorSuggestWidget.selectedBackground#ff98aa50
  • editorWarning.foreground#ff931788
  • focusBorder#ff478888
  • gitDecoration.conflictingResourceForeground#F395CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#FFE4B3
  • gitDecoration.untrackedResourceForeground#ff4788
  • gitlens.trailingLineForegroundColor#Ff98aa50
  • input.background#070607
  • input.border#EF535090
  • input.placeholderForeground#A6A6A6
  • inputOption.activeBorder#EF535090
  • list.activeSelectionBackground#ff3a68af
  • list.dropBackground#040607
  • list.filterMatchBackground#ff478860
  • list.focusBackground#ff4788
  • list.highlightForeground#ff9317
  • list.hoverBackground#ff931726
  • list.warningForeground#fe6e0e
  • menu.background#171213
  • menu.foreground#f5f5f5
  • menubar.selectionBackground#252525
  • minimap.selectionHighlight#706767
  • panel.background#171213
  • panelInput.border#EF535090
  • panelTitle.activeForeground#FFE4B3
  • panelTitle.inactiveForeground#8f5b5683
  • quickInput.background#111012
  • quickInput.foreground#dfcfcf
  • quickInputList.focusBackground#fa276822
  • quickInputList.focusForeground#fefefe
  • scrollbarSlider.activeBackground#f34e3f
  • scrollbarSlider.background#ffa8852d
  • scrollbarSlider.hoverBackground#ff478881
  • searchEditor.findMatchBackground#835353
  • selection.background#4b4b4b
  • settings.numberInputBackground#292929
  • settings.textInputBackground#000000
  • sideBar.background#171213
  • sideBarSectionHeader.background#171213
  • sideBarTitle.foreground#f28118
  • statusBar.background#171213
  • statusBar.noFolderBackground#171213
  • statusBarItem.remoteBackground#291e20
  • statusBarItem.remoteForeground#FFF
  • symbolIcon.classForeground#ff3768
  • symbolIcon.functionForeground#ff4788
  • symbolIcon.keyForeground#FFE4B3
  • symbolIcon.keywordForeground#ffa788
  • symbolIcon.namespaceForeground#ff3768
  • symbolIcon.objectForeground#Ff5aCC
  • symbolIcon.propertyForeground#ff9317
  • symbolIcon.snippetForeground#69709890
  • symbolIcon.variableForeground#FFE4B3
  • tab.activeBackground#171213
  • tab.activeForeground#f34e3f
  • tab.hoverBackground#2c2c2c
  • tab.inactiveBackground#171213
  • tab.inactiveForeground#9e4c5f
  • terminal.background#171213
  • terminal.foreground#ffa3a7
  • terminal.selectionBackground#27212381
  • textLink.foreground#ff9317
  • titleBar.activeBackground#171213
  • titleBar.activeForeground#fafafa
  • titleBar.inactiveBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6d4f53
constant.language#FFA885
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#FFA885
constant.regexp#646695
entity.name.tag#E3747D
entity.name.tag.css#d7ba7d
entity.other.attribute-name#ffd077
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.attribute.scss, entity.other.attribute-name.scss#ff4788
invalid#e73941
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
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#524242
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#0884ff
storage.type#FFE4B3
storage.modifier, keyword.operator.noexcept#E8B380
string, meta.embedded.assembly#ffa07b
string.tag#ce9178
string.value#24b337
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e66144
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff9317
keyword#f34e3f
keyword.control#ff00d4
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#E8A86D
keyword.other.unit#E3747D
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#8f7c5e
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#ff4788
meta.return-type, 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#f34e3f
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#706064
meta.structure.dictionary.value.json string.quoted.double#f58383
string.quoted.double.json punctuation.definition.string.json#f58383
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#e91e61
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#aa7b5f
variable, meta.definition.variable.name, support.variable, entity.name.variable#f28118
meta.object-literal.key#D1977D
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#FFE4B3
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#CE9178
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#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character#899197
constant.character.escape#d7ba7d
entity.name.label#d7ba7d
quoteitalic
meta.tag.sgml.doctype.html#c792eaitalic
keyword.other.unit, support.type.property-name.css, support.type.vendored.property-name.css, support.constant.vendored.property-value.css, meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, meta.export.ts meta.block.ts variable.other.readwrite.alias.ts, meta.export.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.export.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, entity.other.attribute-name, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, punctuation.section.embedded, keyword.operator.type.annotation, variable.object.property.ts, variable.object.property.js, variable.object.property.jsx, variable.object.property.tsx, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, variable.scss, variable.sass, variable.other.less, variable.parameter.url.scss, variable.parameter.url.sass, parameter, string, italic, quote, keyword, storage, language, constant.language, variable.language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic

Shiki preview

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

Loading...