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.border#114411
  • activityBar.foreground#66ff66
  • activityBarBadge.background#44bb44
  • activityBarBadge.foreground#010b01
  • badge.background#449944
  • badge.foreground#010b01
  • button.background#449944
  • button.foreground#010b01
  • button.hoverBackground#66ff66
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • descriptionForeground#339933
  • dropdown.background#010b01
  • dropdown.border#114411
  • dropdown.foreground#44bb44
  • editor.background#010b01
  • editor.findMatchBackground#114411
  • editor.findMatchHighlightBackground#114411
  • editor.foreground#44bb44
  • editor.hoverHighlightBackground#114411
  • editor.inactiveSelectionBackground#114411
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#114411
  • editor.selectionHighlightBackground#114411
  • editorBracketHighlight.foreground1#00eaff
  • editorBracketHighlight.foreground2#cca700
  • editorBracketHighlight.foreground3#66ff66
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#226622
  • editorCodeLens.foreground#44bb44
  • editorCursor.foreground#66ff66
  • editorError.foreground#ff1767
  • editorGroup.border#114411
  • editorGroup.dropBackground#010b01
  • editorGutter.addedBackground#226622
  • editorGutter.deletedBackground#226622
  • editorGutter.modifiedBackground#226622
  • editorHoverWidget.background#021002
  • editorHoverWidget.border#114411
  • editorLineNumber.foreground#226622
  • editorLink.activeForeground#66ff66
  • editorRuler.foreground#114411
  • editorSuggestWidget.background#021002
  • editorSuggestWidget.border#114411
  • editorSuggestWidget.foreground#44bb44
  • editorSuggestWidget.selectedBackground#114411
  • editorWarning.foreground#cca700
  • editorWidget.background#021002
  • editorWidget.border#114411
  • extensionButton.prominentBackground#66ff66
  • extensionButton.prominentForeground#010b01
  • extensionButton.prominentHoverBackground#66ff66
  • foreground#338833
  • gitDecoration.addedResourceForeground#0adb8b
  • gitDecoration.conflictingResourceForeground#44bb44
  • gitDecoration.deletedResourceForeground#66ff66
  • gitDecoration.ignoredResourceForeground#226622
  • gitDecoration.modifiedResourceForeground#00eaff
  • gitDecoration.stageDeletedResourceForeground#66ff66
  • gitDecoration.stageModifiedResourceForeground#cca700
  • gitDecoration.submoduleResourceForeground#226622
  • gitDecoration.untrackedResourceForeground#0adb8b
  • input.background#010b01
  • input.border#114411
  • input.foreground#44bb44
  • input.placeholderForeground#226622
  • list.activeSelectionBackground#226622
  • list.dropBackground#114411
  • list.focusBackground#114411
  • list.highlightForeground#66ff66
  • list.hoverBackground#226622
  • list.inactiveFocusBackground#114411
  • list.inactiveSelectionBackground#226622
  • panel.background#010b01
  • panel.border#114411
  • panelTitle.activeForeground#44bb44
  • panelTitle.inactiveForeground#339933
  • peekView.border#114411
  • peekViewEditor.background#010b01
  • peekViewEditor.matchHighlightBackground#114411
  • peekViewEditorGutter.background#010801
  • peekViewResult.background#010b01
  • peekViewResult.fileForeground#44bb44
  • peekViewResult.lineForeground#44bb44
  • peekViewResult.matchHighlightBackground#114411
  • peekViewResult.selectionBackground#114411
  • peekViewResult.selectionForeground#66ff66
  • peekViewTitle.background#66ff66
  • peekViewTitleDescription.foreground#66ff66
  • peekViewTitleLabel.foreground#66ff66
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#226622
  • scrollbarSlider.background#226622
  • scrollbarSlider.hoverBackground#339933
  • selection.background#226622
  • sideBar.background#010b01
  • sideBar.border#114411
  • sideBar.dropBackground#114411
  • sideBar.foreground#44bb44
  • sideBarSectionHeader.background#124212
  • sideBarSectionHeader.foreground#44bb44
  • sideBarTitle.foreground#66ff66
  • statusBar.background#010b01
  • statusBar.debuggingBackground#114411
  • statusBar.foreground#66ff66
  • statusBar.noFolderBackground#010b01
  • tab.activeBackground#114411
  • tab.activeForeground#66ff66
  • tab.border#114411
  • tab.inactiveBackground#010b01
  • tab.inactiveForeground#66ff66
  • terminal.ansiBlack#010b01
  • terminal.ansiBlue#114411
  • terminal.ansiBrightBlack#226622
  • terminal.ansiBrightBlue#44bb44
  • terminal.ansiBrightCyan#44bb44
  • terminal.ansiBrightGreen#44bb44
  • terminal.ansiBrightMagenta#44bb44
  • terminal.ansiBrightRed#ff1767
  • terminal.ansiBrightWhite#66ff66
  • terminal.ansiBrightYellow#0adb8b
  • terminal.ansiCyan#0adb8b
  • terminal.ansiGreen#44bb44
  • terminal.ansiMagenta#226622
  • terminal.ansiRed#ff1767
  • terminal.ansiWhite#44bb44
  • terminal.ansiYellow#0adb8b
  • terminal.background#040600
  • terminal.foreground#44bb44
  • terminalCursor.foreground#66ff66
  • textBlockQuote.background#021002
  • textBlockQuote.border#114411
  • textCodeBlock.background#021002
  • textLink.activeForeground#66ff66
  • textLink.foreground#44bb44
  • textPreformat.foreground#66ff66
  • textSeparator.foreground#66ff66
  • walkThrough.embeddedEditorBackground#010b01
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis#66FF66
strong#66FF66bold
meta.diff.header#66FF66
comment#226622
constant.language#66FF66
constant.numeric#66FF66
constant.regexp#66FF66
entity.name.tagbold
entity.name.selector#66FF66
entity.other.attribute-name#66FF66
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#66FF66
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id#66FF66
invalid#66FF66bold
markup.underlineunderline
markup.bold#66FF66bold
markup.heading#66FF66bold
markup.italic#66FF66
markup.list#66FF66
markup.list.numbered#66FF66
markup.list.numbered#66FF66
markup.quote#226622
markup.raw#226622
markup.inline.raw#226622
markup.inserted#44BB44underline
markup.deleted#66FF66underline
markup.changedunderline
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown#66FF66
markup.inline.raw#226622
meta.selector#66FF66
punctuation.definition.tag#226622
meta.preprocessor#66FF66bold
meta.preprocessor.string#66FF66
meta.preprocessor.numeric#66FF66
meta.structure.dictionary.key.python#66FF66
storage, storage.type, storage.modifier#44BB44
string#66FF66
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, 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#66FF66underline
string.regexp#66FF66
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#66FF66underline
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
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less
support.type.property-name.json#66FF66
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php
support.function.git-rebase#66FF66bold underline
constant.sha.git-rebase#226622
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#44BB44
variable.language#226622
keyword, keyword.control#44BB44bold
keyword.operator
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.other.unit#44BB44bold
entity.name.function, support.function, support.constant.handlebars#66FF66
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, 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#66FF66
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#66FF66
entity.other.inherited-classbold
variable, meta.definition.variable.name, support.variable
meta.object-literal.key, meta.object-literal.key entity.name.functionbold
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#66FF66
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6