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.

  • activityBar.activeBorder#5afe01
  • activityBar.background#101010
  • activityBar.border#1d6b00
  • activityBar.foreground#3eb300
  • activityBarBadge.background#103d00
  • activityBarBadge.foreground#00c78b
  • badge.background#103d00
  • badge.foreground#00c78b
  • button.background#2e2e2e
  • button.foreground#3eb300
  • button.hoverBackground#103d00
  • checkbox.background#101010
  • checkbox.border#103d00
  • checkbox.foreground#3eb300
  • descriptionForeground#3eb300
  • dropdown.background#101010
  • dropdown.border#1d6b00
  • dropdown.foreground#3eb300
  • dropdown.listBackground#101010
  • editor.background#101010
  • editor.findMatchHighlightBackground#101010
  • editor.findMatchHighlightBorder#ffd342
  • editor.findRangeHighlightBackground#101010
  • editor.foreground#cfcfcf
  • editor.inactiveSelectionBackground#1d6b00
  • editor.selectionBackground#1d6b00
  • editor.selectionForeground#101010
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#3eb300
  • editor.wordHighlightBackground#101010
  • editor.wordHighlightBorder#00c78b
  • editor.wordHighlightStrongBackground#1d6b00
  • editor.wordHighlightStrongBorder#5afe01
  • editorCursor.background#101010
  • editorCursor.foreground#5afe01
  • editorError.foreground#ff5252
  • editorGroup.emptyBackground#101010
  • editorGroup.focusedEmptyBorder#103d00
  • editorGroupHeader.noTabsBackground#101010
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#1d6b00
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.foreground#335fff
  • editorLineNumber.activeForeground#5afe01
  • editorLineNumber.foreground#1d6b00
  • editorPane.background#101010
  • editorWarning.foreground#ffd342
  • errorForeground#ff5252
  • focusBorder#3eb300
  • foreground#3eb300
  • gitDecoration.addedResourceForeground#00c78b
  • gitDecoration.conflictingResourceForeground#e600e5
  • gitDecoration.deletedResourceForeground#ff5252
  • gitDecoration.ignoredResourceForeground#444444
  • gitDecoration.modifiedResourceForeground#ffd342
  • gitDecoration.submoduleResourceForeground#3eb300
  • gitDecoration.untrackedResourceForeground#666666
  • icon.foreground#3eb300
  • input.background#2e2e2e
  • input.border#1d6b00
  • input.foreground#3eb300
  • input.placeholderForeground#1d6b00
  • inputOption.activeBackground#2e2e2e
  • inputOption.activeBorder#5afe01
  • inputValidation.errorBackground#2e2e2e
  • inputValidation.errorBorder#ff5252
  • inputValidation.errorForeground#ff5252
  • inputValidation.infoBackground#2e2e2e
  • inputValidation.infoBorder#1f2eff
  • inputValidation.infoForeground#1f2eff
  • inputValidation.warningBackground#2e2e2e
  • inputValidation.warningBorder#ffd342
  • inputValidation.warningForeground#ffd342
  • list.activeSelectionBackground#1d6b00
  • list.activeSelectionForeground#5afe01
  • list.deemphasizedForeground#1d6b00
  • list.dropBackground#103d00
  • list.errorForeground#ff5252
  • list.filterMatchBackground#071a00
  • list.filterMatchBorder#ffd342
  • list.focusBackground#103d00
  • list.focusForeground#5afe01
  • list.highlightForeground#5afe01
  • list.hoverBackground#2e2e2e
  • list.hoverForeground#5afe01
  • list.inactiveFocusBackground#103d00
  • list.inactiveSelectionBackground#103d00
  • list.inactiveSelectionForeground#3eb300
  • list.invalidItemForeground#ff5252
  • list.warningForeground#ffd342
  • listFilterWidget.background#101010
  • listFilterWidget.noMatchesOutline#750000
  • listFilterWidget.outline#1d6b00
  • menu.background#101010
  • menu.border#3eb300
  • menu.foreground#00c78b
  • menu.selectionBackground#101010
  • menu.selectionBorder#5afe01
  • menu.selectionForeground#5afe01
  • menu.separatorBackground#1d6b00
  • menubar.selectionBackground#101010
  • menubar.selectionBorder#00c78b
  • menubar.selectionForeground#5afe01
  • minimap.errorHighlight#ff5252
  • minimap.findMatchHighlight#ffd342
  • minimap.selectionHighlight#3eb300
  • minimap.warningHighlight#ffd342
  • minimapGutter.addedBackground#103d00
  • minimapGutter.deletedBackground#750000
  • minimapGutter.modifiedBackground#856600
  • notificationCenter.border#3eb300
  • notificationCenterHeader.background#101010
  • notificationCenterHeader.foreground#3eb300
  • notificationLink.foreground#3eb300
  • notifications.background#101010
  • notifications.border#1d6b00
  • notifications.foreground#3eb300
  • notificationsErrorIcon.foreground#ff5252
  • notificationsInfoIcon.foreground#335fff
  • notificationsWarningIcon.foreground#ffd342
  • notificationToast.border#3eb300
  • panel.background#101010
  • panel.border#1d6b00
  • panelInput.border#1d6b00
  • panelTitle.activeBorder#3eb300
  • panelTitle.activeForeground#00c78b
  • panelTitle.inactiveForeground#3eb300
  • problemsErrorIcon.foreground#ff5252
  • problemsInfoIcon.foreground#335fff
  • problemsWarningIcon.foreground#ffd342
  • progressBar.background#103d00
  • scrollbar.shadow#101010
  • scrollbarSlider.activeBackground#103d00
  • scrollbarSlider.background#103d00
  • scrollbarSlider.hoverBackground#3eb300
  • searchEditor.findMatchBackground#101010
  • searchEditor.findMatchBorder#ffd342
  • selection.background#101010
  • settings.headerForeground#00c78b
  • settings.modifiedItemIndicator#856600
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#101010
  • sideBar.border#1d6b00
  • sideBar.foreground#3eb300
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#1d6b00
  • sideBarSectionHeader.foreground#00c78b
  • sideBarTitle.foreground#3eb300
  • statusBar.background#101010
  • statusBar.border#1d6b00
  • statusBar.debuggingBackground#101010
  • statusBar.debuggingBorder#ffd342
  • statusBar.debuggingForeground#ffd342
  • statusBar.foreground#3eb300
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderForeground#3eb300
  • statusBarItem.hoverBackground#2e2e2e
  • statusBarItem.prominentBackground#101010
  • statusBarItem.prominentForeground#00c78b
  • statusBarItem.prominentHoverBackground#2e2e2e
  • statusBarItem.remoteBackground#101010
  • statusBarItem.remoteForeground#00c78b
  • tab.activeBackground#103d00
  • tab.activeBorder#1d6b00
  • tab.activeForeground#3eb300
  • tab.border#1d6b00
  • tab.hoverBackground#103d00
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#3eb300
  • tab.unfocusedActiveBackground#101010
  • tab.unfocusedActiveBorder#103d00
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#3eb300
  • titleBar.border#1d6b00
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#1d6b00
  • tree.indentGuidesStroke#103d00
  • widget.shadow#103d00
  • window.activeBorder#1d6b00
  • window.inactiveBorder#101010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#00AF5Fbold
comment#949494
constant.language#00AF5Fbold
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#00AF5Fbold
entity.name.tag.css#D7BA7D
entity.other.attribute-name#BFBFBF
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#00AF5Fbold
markup.heading#00AF5Fbold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#0087FF
markup.changed#00AF5F
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#0087FF
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#00AF5Fbold
meta.preprocessor.string#0087FF
meta.preprocessor.numeric#e600e5
meta.structure.dictionary.key.python#0087FF
meta.diff.header#00AF5F
storage#00AF5Fbold
storage.type#00AF5Fbold
storage.modifier, keyword.operator.noexcept#00AF5Fbold
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#0087FF
string.tag#0087FF
string.value#0087FF
string.regexp#0087FF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#00AF5F
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9CDCFE
keyword#00AF5Fbold
keyword.control#00AF5Fbold
keyword.operator#D4D4D4bold
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#00AF5F
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#00AF5F
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#00AF5F
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
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#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable#9CDCFE
variable.other.constant, variable.other.enummember#00AF5F
meta.object-literal.key#9CDCFE
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#0087FF
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#0087FF
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ffd342
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character#00AF5F
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
comment#00572e
punctuation.definition.comment#00572e
string#0087FF
meta.embedded.assembly#00C78B
keyword - keyword.operator#00AF5F
keyword.control#00AF5F
storage#00AF5F
storage.type#00AF5F
constant.numeric#ffd342
entity.name.type#BFBFBF
entity.name.class#BFBFBF
support.type#BFBFBF
support.class#BFBFBF
entity.name.function#BFBFBF
support.function#BFBFBF
variable#BFBFBF
entity.name.variable#BFBFBF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#750000
token.debug-token#B267E6

Shiki preview

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

Loading...

Zone Green - Coding Theme