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#dddddd
  • activityBar.activeBorder#005FB8
  • activityBar.background#F8F8F8
  • activityBar.border#E5E5E5
  • activityBar.foreground#1F1F1F
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#005FB8
  • activityBarBadge.foreground#FFFFFF
  • badge.background#CCCCCC
  • badge.foreground#3B3B3B
  • button.background#005FB8
  • button.border#0000001a
  • button.foreground#FFFFFF
  • button.hoverBackground#0258A8
  • button.secondaryBackground#E5E5E5
  • button.secondaryForeground#3B3B3B
  • button.secondaryHoverBackground#CCCCCC
  • chat.slashCommandBackground#D2ECFF
  • chat.slashCommandForeground#306CA2
  • checkbox.background#F8F8F8
  • checkbox.border#CECECE
  • commandCenter.activeBackground#ffffff
  • commandCenter.background#ffffff
  • descriptionForeground#3B3B3B
  • dropdown.background#FFFFFF
  • dropdown.border#CECECE
  • dropdown.foreground#3B3B3B
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.foreground#3B3B3B
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.selectionHighlightBackground#ADD6FF80
  • editorGroup.border#E5E5E5
  • editorGroupHeader.tabsBackground#F8F8F8
  • editorGroupHeader.tabsBorder#E5E5E5
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#005FB8
  • editorHoverWidget.background#ffffff
  • editorIndentGuide.background1#D3D3D3
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#d2d2d2
  • editorOverviewRuler.border#E5E5E5
  • editorSuggestWidget.background#F8F8F8
  • editorSuggestWidget.focusHighlightForeground#3f3f3f
  • editorSuggestWidget.foreground#3f3f3fae
  • editorSuggestWidget.highlightForeground#3f3f3f
  • editorWidget.background#F8F8F8
  • errorForeground#F85149
  • focusBorder#005FB8
  • foreground#3B3B3B
  • icon.foreground#3B3B3B
  • input.background#FFFFFF
  • input.border#CECECE
  • input.foreground#3B3B3B
  • input.placeholderForeground#868686
  • inputOption.activeBackground#BED6ED
  • inputOption.activeBorder#005FB8
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#3B3B3B
  • list.activeSelectionBackground#E8E8E8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#005FB8
  • list.hoverBackground#F2F2F2
  • menu.background#ffffff
  • menu.border#CECECE
  • notebook.cellBorderColor#E5E5E5
  • notebook.selectedCellBackground#C8DDF150
  • notificationCenterHeader.background#FFFFFF
  • notificationCenterHeader.foreground#3B3B3B
  • notifications.background#FFFFFF
  • notifications.border#E5E5E5
  • notifications.foreground#3B3B3B
  • panel.background#F8F8F8
  • panel.border#E5E5E5
  • panelInput.border#E5E5E5
  • panelSectionHeader.background#F8F8F8
  • panelTitle.activeBorder#005FB8
  • panelTitle.activeForeground#3B3B3B
  • panelTitle.inactiveForeground#3B3B3B
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#FFFFFF
  • peekViewResult.matchHighlightBackground#BB800966
  • peekViewTitle.background#ffffff
  • pickerGroup.border#E5E5E5
  • pickerGroup.foreground#8B949E
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#005FB8
  • quickInput.background#F8F8F8
  • quickInput.foreground#3B3B3B
  • scrollbarSlider.activeBackground#dddddd
  • scrollbarSlider.background#eaeaea
  • scrollbarSlider.hoverBackground#e2e2e2
  • searchEditor.textInputBorder#CECECE
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownBorder#CECECE
  • settings.headerForeground#1F1F1F
  • settings.modifiedItemIndicator#BB800966
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#CECECE
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#CECECE
  • sideBar.background#F8F8F8
  • sideBar.border#E5E5E5
  • sideBar.foreground#3B3B3B
  • sideBarSectionHeader.background#F8F8F8
  • sideBarSectionHeader.border#E5E5E5
  • sideBarSectionHeader.foreground#3B3B3B
  • sideBarTitle.foreground#3B3B3B
  • statusBar.background#F8F8F8
  • statusBar.border#E5E5E5
  • statusBar.debuggingBackground#FD716C
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#005FB8
  • statusBar.foreground#3B3B3B
  • statusBar.noFolderBackground#F8F8F8
  • statusBarItem.errorBackground#C72E0F
  • statusBarItem.focusBorder#005FB8
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#005FB8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#F8F8F8
  • tab.activeBorderTop#005FB8
  • tab.activeForeground#3B3B3B
  • tab.border#E5E5E5
  • tab.hoverBackground#FFFFFF
  • tab.inactiveBackground#F8F8F8
  • tab.inactiveForeground#868686
  • tab.lastPinnedBorder#D4D4D4
  • tab.unfocusedActiveBorder#F8F8F8
  • tab.unfocusedActiveBorderTop#E5E5E5
  • tab.unfocusedHoverBackground#F8F8F8
  • terminal.background#ffffff
  • terminal.foreground#3B3B3B
  • terminal.inactiveSelectionBackground#E5EBF1
  • terminal.tab.activeBorder#005FB8
  • terminalCursor.foreground#005FB8
  • textBlockQuote.background#F8F8F8
  • textBlockQuote.border#E5E5E5
  • textCodeBlock.background#F8F8F8
  • textLink.activeForeground#005FB8
  • textLink.foreground#005FB8
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#F8F8F8
  • titleBar.activeForeground#1E1E1E
  • titleBar.border#E5E5E5
  • titleBar.inactiveBackground#F8F8F8
  • titleBar.inactiveForeground#8B949E
  • welcomePage.tileBackground#F3F3F3
  • widget.border#E5E5E5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#3f3f3f
variable#3f3f3fitalic
variable.parameter, source variable.parameter, meta.method.declaration, source.pip-requirements, meta.function-call.arguments, meta.attribute, meta.fstring#4a4a4aitalic
meta.definition.method, meta.function.shell, entity.name.function#bb8800
meta.function-call, meta.statement.command.shell, meta.function-call.generic, support.class.promise#bb8800italic
support.variable.property, meta.type.parameters support.type#7f7f7fitalic bold
variable.object.property, variable.other.property, meta.object-literal.key, variable.other.object.property#7f7f7f
markup.list.numbered.markdown#3f3f3fitalic
source keyword.operator, punctuation.separator, punctuation.section#167d8b
punctuation.definition.decorator, support.function.builtin, support.function.magic, support.type.python, support.variable.magic, entity.name.function.decorator.python, keyword, string.regexp#167d8bitalic
punctuation.accessor, keyword.operator.logical, meta.template.expression punctuation.definition, keyword.operator.new, entity.name.section, entity.name.tag, constant.language.python, support.type.property-name.json#d7745b
variable.language, support.type.property-name, support.type.exception, variable.other.readwrite.alias#d7745bitalic
keyword.control.trycatch#d1664bbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#d1664b81italic
constant.numeric, constant.language#a95c14
meta.type.parameters, support.type.primitive.ts, support.type.builtin, entity.name.function.decorator, support.type#d197c9italic
entity.name.type#c28bbbitalic
entity.name.type.alias#c28bbb
entity.name.type.class, variable.other.constant.object#e0760b
entity.other.inherited-class#e0760bitalic
storage.type, keyword, keyword.control, storage.modifier, storage.type.property, keyword.operator.logical.python, keyword.operator.expression#8f44c8
string, string.unquoted.plain.out.yaml#688f4c
string.quoted.docstring.multi#899e7a
string.template#688f4citalic
comment, markup.quote, markup.raw.block.markdown#a5adbcitalic
log.warning#bb8800italic bold
log.error#d77158italic bold
log.debug, keyword.codetag.notation#6b7992italic bold
log.info#698ac9italic bold
variable.other.constant, constant#698ac9italic
variable.other.enummember#698ac9
markup.underline.link#a5adbc
source#3f3f3f
variable#3f3f3fitalic
variable.parameter, source variable.parameter, meta.method.declaration, source.pip-requirements, meta.function-call.arguments, meta.attribute, meta.fstring#4a4a4aitalic
meta.definition.method, meta.function.shell, entity.name.function#bb8800
meta.function-call, meta.statement.command.shell, meta.function-call.generic, support.class.promise#bb8800italic
support.variable.property, meta.type.parameters support.type#7f7f7fitalic bold
variable.object.property, variable.other.property, meta.object-literal.key, variable.other.object.property#7f7f7f
markup.list.numbered.markdown#3f3f3fitalic
source keyword.operator, punctuation.separator, punctuation.section#167d8b
punctuation.definition.decorator, support.function.builtin, support.function.magic, support.type.python, support.variable.magic, entity.name.function.decorator.python, keyword, string.regexp#167d8bitalic
punctuation.accessor, keyword.operator.logical, meta.template.expression punctuation.definition, keyword.operator.new, entity.name.section, entity.name.tag, constant.language.python, support.type.property-name.json#d7745b
variable.language, support.type.property-name, support.type.exception, variable.other.readwrite.alias#d7745bitalic
keyword.control.trycatch#d1664bbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#d1664b81italic
constant.numeric, constant.language#a95c14
meta.type.parameters, support.type.primitive.ts, support.type.builtin, entity.name.function.decorator, support.type#d197c9italic
entity.name.type#c28bbbitalic
entity.name.type.alias#c28bbb
entity.name.type.class, variable.other.constant.object#e0760b
entity.other.inherited-class#e0760bitalic
storage.type, keyword, keyword.control, storage.modifier, storage.type.property, keyword.operator.logical.python, keyword.operator.expression#8f44c8
string, string.unquoted.plain.out.yaml#688f4c
string.quoted.docstring.multi#899e7a
string.template#688f4citalic
comment, markup.quote, markup.raw.block.markdown#a5adbcitalic
log.warning#bb8800italic bold
log.error#d77158italic bold
log.debug, keyword.codetag.notation#6b7992italic bold
log.info#698ac9italic bold
variable.other.constant, constant#698ac9italic
variable.other.enummember#698ac9
markup.underline.link#a5adbc
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#795E26
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#267f99
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#267f99
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#AF00DB
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#001080
variable.other.constant, variable.other.enummember#0070C1
meta.object-literal.key#001080
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#0451a5
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#d16969
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#811f3f
keyword.operator.quantifier.regexp#000000
keyword.operator.or.regexp, keyword.control.anchor.regexp#EE0000
constant.character, constant.other.option#0000ff
constant.character.escape#EE0000
entity.name.label#000000
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000ff
emphasisitalic
strongbold
meta.diff.header#000080
comment#008000
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#e50000
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#800000
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#098658
markup.deleted#a31515
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#a31515
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451a5
storage#0000ff
storage.type#0000ff
storage.modifier, keyword.operator.noexcept#0000ff
string, meta.embedded.assembly#a31515
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#000000
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#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e50000
support.type.property-name.json#0451a5
keyword#0000ff
keyword.control#0000ff
keyword.operator#000000
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#0000ff
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451a5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
entity.name.label#C8C8C8
meta.type.tuple, meta.item-access#C996A7italic
meta.array.literal#C996A7
meta.import, meta.object-binding-pattern-variable, punctuation.definition.block#B180D7italic
meta.objectliteral#CB8800
new.expr#CB8800italic
new.exprm#CB8800
meta.arrow, meta.var.expr, meta.method.declaration, meta.embedded.line, meta.object.member, punctuation.definition.parameters, meta.function-call#F1BE34

Shiki preview

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

Loading...