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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#800070
  • activityBar.background#1b1917
  • activityBar.border#2b292700
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • breadcrumb.foreground#9A9896
  • button.background#800070
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#215e34
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCC6C0
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#70E09A
  • checkbox.background#313131
  • checkbox.border#6B6B6B
  • commandCenter.activeBackground#FFFFFF0F
  • commandCenter.activeForeground#CCC6C0
  • commandCenter.background#242221
  • commandCenter.border#2d2b2a
  • commandCenter.foreground#CCC6C0
  • debugToolBar.background#1b1917
  • descriptionForeground#9E9C9A
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCC6C0
  • dropdown.listBackground#24211d
  • editor.background#1E1E1E
  • editor.findMatchBackground#9E6A03
  • editor.foreground#D4cac0
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#2a2825
  • editor.selectionHighlightBackground#ADD6FF26
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#1b1917
  • editorGroupHeader.tabsBorder#2b292700
  • editorGutter.addedBackground#29863a
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#800070
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#CCC6C0
  • editorLineNumber.foreground#787674
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#800070
  • foreground#CCC6C0
  • icon.foreground#CCC6C0
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCC6C0
  • input.placeholderForeground#A6A6A6
  • inputOption.activeBackground#9332CD82
  • inputOption.activeBorder#9332CD
  • keybindingLabel.foreground#CCC6C0
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#800070
  • menu.selectionForeground#CCC6C0
  • menu.separatorBackground#454545
  • menubar.selectionBackground#262524
  • menubar.selectionForeground#CCC6C0
  • notificationCenterHeader.background#24211d
  • notificationCenterHeader.foreground#CCC6C0
  • notifications.background#24211d
  • notifications.border#2b292700
  • notifications.foreground#CCC6C0
  • panel.background#1b1917
  • panel.border#2b2927
  • panelInput.border#2b292700
  • panelTitle.activeBorder#800070
  • panelTitle.activeForeground#CCC6C0
  • panelTitle.inactiveForeground#9E9C9A
  • peekViewEditor.background#24211d
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#24211d
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#800070
  • quickInput.background#22201e
  • quickInput.foreground#CCCbCa
  • quickInputList.focusBackground#7D159126
  • quickInputList.focusForeground#CCC6C0
  • quickInputList.focusIconForeground#CCC6C0
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#1b1917
  • sideBar.border#2b2b28
  • sideBar.foreground#CCC6C0
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarSectionHeader.foreground#CCC6C0
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#1b1917
  • statusBar.border#2b2927
  • statusBar.debuggingBackground#800070
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#800070
  • statusBar.foreground#CCC6C0
  • statusBar.noFolderBackground#24211d
  • statusBarItem.focusBorder#800070
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#24211d
  • tab.activeBorder#24211d
  • tab.activeBorderTop#800070
  • tab.activeForeground#FFFFFF
  • tab.border#2b292700
  • tab.hoverBackground#24211d
  • tab.inactiveBackground#1b1917
  • tab.inactiveForeground#9E9C9A
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#93dd98
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#24211d
  • tab.unfocusedActiveBorderTop#2b292700
  • tab.unfocusedHoverBackground#24211d
  • terminal.foreground#CCC6C0
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#800070
  • textBlockQuote.background#2b292700
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b292700
  • textLink.activeForeground#32c03b
  • textLink.foreground#53c25a
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#1b1917
  • titleBar.activeForeground#cccac4
  • titleBar.border#2b292700
  • titleBar.inactiveBackground#24211d
  • titleBar.inactiveForeground#9E9C9A
  • welcomePage.progress.foreground#800070
  • welcomePage.tileBackground#2b292700
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dede90
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#f0b915
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#eab515underline
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c586c0
variable#dad6c8
support.variable#dad6c8
variable.parameter, meta.parameter.type.variable, meta.definition.variable.name, entity.name.variable, constant.other.placeholder, string.constant.other.placeholder#fb5d4b
variable.other.constant, variable.other.enummember#62e769
meta.object-literal.key, variable.other.property, meta.object.member#90eaa2
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#eba589
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#eba589
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, constant.other.option#56cf6c
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dede90
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#f0b915
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#eab515underline
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c586c0
variable#dad6c8
support.variable#dad6c8
variable.parameter, meta.parameter.type.variable, meta.definition.variable.name, entity.name.variable, constant.other.placeholder, string.constant.other.placeholder#fb5d4b
variable.other.constant, variable.other.enummember#62e769
meta.object-literal.key, variable.other.property, meta.object.member#90eaa2
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#eba589
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#eba589
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, constant.other.option#56cf6c
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4cac0
emphasisitalic
strongbold
header#35bb50bold
comment#7aa965
constant.language#ff997a
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5cea8
constant.regexp#6a956a
entity.name.tag#35bb50
entity.name.tag.css, entity.name.tag.less#d7ba7d
entity.other.attribute-name#9aebb8
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#35bb50bold
markup.heading#35bb50bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#eba589
markup.changed#35bb50
punctuation.definition.quote.begin.markdown#5a6b99
punctuation.definition.list.begin.markdown#67e67b
markup.inline.raw#eba589
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#35bb50
meta.preprocessor.string#eba589
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9aebb8
meta.diff.header#35bb50
keyword.control, keyword.control.async, keyword.control.export, keyword.control.import, keyword.control.flow, keyword.control.conditional, keyword.control.loop#C586c0
storage, storage.type, storage.modifier, keyword.declaration, keyword.other.declaration#e09d57
string, meta.embedded.assembly#eba589
string.tag#eba589
string.value#eba589
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#35bb50
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9aebb8
keyword.operator#d4cac0
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#C586c0
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C586c0
support.function.git-rebase#9aebb8
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4cac0
variable.language#e09d57
Green Eyes Care Theme by Usman Ghani - VS Code Theme