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#2c9279
  • activityBar.background#dcdcdc
  • activityBar.border#9c9c9c66
  • activityBar.foreground#2f2f2f
  • activityBar.inactiveForeground#73737370
  • activityBarBadge.background#555555
  • activityBarBadge.foreground#dcdcdc
  • badge.background#55555588
  • badge.foreground#dcdcdc
  • breadcrumb.activeSelectionForeground#c4c4c4
  • breadcrumb.background#cfcfcf
  • breadcrumb.focusForeground#2f2f2f
  • breadcrumb.foreground#55555588
  • breadcrumbPicker.background#dcdcdc
  • button.background#2c9279
  • button.foreground#dcdcdc
  • button.hoverBackground#2c9279
  • checkbox.background#cfcfcf
  • checkbox.border#d1d5da
  • debugToolBar.background#dcdcdc
  • descriptionForeground#55555588
  • diffEditor.insertedTextBackground#2c927938
  • diffEditor.removedTextBackground#a8474a44
  • dropdown.background#dcdcdc
  • dropdown.border#9c9c9c66
  • dropdown.foreground#2f2f2f
  • dropdown.listBackground#cfcfcf
  • editor.background#dcdcdc
  • editor.findMatchBackground#94763544
  • editor.findMatchHighlightBackground#9476352e
  • editor.focusedStackFrameHighlightBackground#94763538
  • editor.foldBackground#d4d4d4
  • editor.foreground#2f2f2f
  • editor.inactiveSelectionBackground#d4d4d4
  • editor.lineHighlightBackground#cfcfcf
  • editor.selectionBackground#d4d4d4
  • editor.selectionHighlightBackground#d4d4d4
  • editor.stackFrameHighlightBackground#94763526
  • editor.wordHighlightBackground#2c927914
  • editor.wordHighlightStrongBackground#2c927922
  • editorBracketHighlight.foreground1#2c9279
  • editorBracketHighlight.foreground2#2c9279
  • editorBracketHighlight.foreground3#b55b25
  • editorBracketHighlight.foreground4#824699
  • editorBracketHighlight.foreground5#947635
  • editorBracketHighlight.foreground6#365ca8
  • editorBracketMatch.background#2c927933
  • editorError.foreground#a8474a
  • editorGroup.border#9c9c9c66
  • editorGroupHeader.tabsBackground#dcdcdc
  • editorGroupHeader.tabsBorder#9c9c9c66
  • editorGutter.addedBackground#2c9279
  • editorGutter.commentRangeForeground#73737370
  • editorGutter.deletedBackground#a8474a
  • editorGutter.foldingControlForeground#55555588
  • editorGutter.modifiedBackground#365ca8
  • editorHint.foreground#2c9279
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#365ca8
  • editorInlayHint.background#cfcfcf
  • editorInlayHint.foreground#555555
  • editorLineNumber.activeForeground#555555
  • editorLineNumber.foreground#73737370
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#cfcfcf
  • editorStickyScrollHover.background#cfcfcf
  • editorWarning.foreground#b55b25
  • editorWhitespace.foreground#00000015
  • editorWidget.background#dcdcdc
  • errorForeground#a8474a
  • focusBorder#00000000
  • foreground#2f2f2f
  • gitDecoration.addedResourceForeground#2c9279
  • gitDecoration.conflictingResourceForeground#b55b25
  • gitDecoration.deletedResourceForeground#a8474a
  • gitDecoration.ignoredResourceForeground#73737370
  • gitDecoration.modifiedResourceForeground#365ca8
  • gitDecoration.submoduleResourceForeground#55555588
  • gitDecoration.untrackedResourceForeground#2c9279
  • input.background#cfcfcf
  • input.border#9c9c9c66
  • input.foreground#2f2f2f
  • input.placeholderForeground#55555588
  • inputOption.activeBackground#73737370
  • list.activeSelectionBackground#cfcfcf
  • list.activeSelectionForeground#2f2f2f
  • list.focusBackground#cfcfcf
  • list.highlightForeground#2c9279
  • list.hoverBackground#cfcfcf
  • list.hoverForeground#2f2f2f
  • list.inactiveFocusBackground#dcdcdc
  • list.inactiveSelectionBackground#cfcfcf
  • list.inactiveSelectionForeground#2f2f2f
  • menu.separatorBackground#9c9c9c66
  • notificationCenterHeader.background#dcdcdc
  • notificationCenterHeader.foreground#55555588
  • notifications.background#dcdcdc
  • notifications.border#9c9c9c66
  • notifications.foreground#2f2f2f
  • notificationsErrorIcon.foreground#a8474a
  • notificationsInfoIcon.foreground#365ca8
  • notificationsWarningIcon.foreground#b55b25
  • panel.background#dcdcdc
  • panel.border#9c9c9c66
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#2c9279
  • panelTitle.activeForeground#2f2f2f
  • panelTitle.inactiveForeground#55555588
  • peekViewEditor.background#dcdcdc
  • peekViewEditor.matchHighlightBackground#9476353a
  • peekViewResult.background#dcdcdc
  • peekViewResult.matchHighlightBackground#9476353a
  • pickerGroup.border#9c9c9c66
  • pickerGroup.foreground#2f2f2f
  • problemsErrorIcon.foreground#a8474a
  • problemsInfoIcon.foreground#365ca8
  • problemsWarningIcon.foreground#b55b25
  • progressBar.background#2c9279
  • quickInput.background#dcdcdc
  • quickInput.foreground#2f2f2f
  • quickInputList.focusBackground#cfcfcf
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#73737370
  • scrollbarSlider.background#73737320
  • scrollbarSlider.hoverBackground#73737370
  • settings.headerForeground#2f2f2f
  • settings.modifiedItemIndicator#2c9279
  • sideBar.background#dcdcdc
  • sideBar.border#9c9c9c66
  • sideBar.foreground#555555
  • sideBarSectionHeader.background#dcdcdc
  • sideBarSectionHeader.border#9c9c9c66
  • sideBarSectionHeader.foreground#2f2f2f
  • sideBarTitle.foreground#2f2f2f
  • statusBar.background#dcdcdc
  • statusBar.border#9c9c9c66
  • statusBar.debuggingBackground#cfcfcf
  • statusBar.debuggingForeground#555555
  • statusBar.foreground#555555
  • statusBar.noFolderBackground#dcdcdc
  • statusBarItem.prominentBackground#cfcfcf
  • tab.activeBackground#dcdcdc
  • tab.activeBorder#9c9c9c66
  • tab.activeBorderTop#55555588
  • tab.activeForeground#2f2f2f
  • tab.border#9c9c9c66
  • tab.hoverBackground#cfcfcf
  • tab.inactiveBackground#dcdcdc
  • tab.inactiveForeground#55555588
  • tab.unfocusedActiveBorder#9c9c9c66
  • tab.unfocusedActiveBorderTop#9c9c9c66
  • tab.unfocusedHoverBackground#dcdcdc
  • terminal.ansiBlack#2f2f2f
  • terminal.ansiBlue#365ca8
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#365ca8
  • terminal.ansiBrightCyan#2c9279
  • terminal.ansiBrightGreen#2c9279
  • terminal.ansiBrightMagenta#824699
  • terminal.ansiBrightRed#a8474a
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#947635
  • terminal.ansiCyan#2c9279
  • terminal.ansiGreen#2c9279
  • terminal.ansiMagenta#824699
  • terminal.ansiRed#a8474a
  • terminal.ansiWhite#2f2f2f
  • terminal.ansiYellow#947635
  • terminal.foreground#2f2f2f
  • terminal.selectionBackground#d4d4d4
  • textBlockQuote.background#dcdcdc
  • textBlockQuote.border#9c9c9c66
  • textCodeBlock.background#dcdcdc
  • textLink.activeForeground#2c9279
  • textLink.foreground#2c9279
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#dcdcdc
  • titleBar.activeForeground#555555
  • titleBar.border#cfcfcf
  • titleBar.inactiveBackground#dcdcdc
  • titleBar.inactiveForeground#55555588
  • tree.indentGuidesStroke#73737320
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666666
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, keyword.operator.type, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts, punctuation, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue#555555
constant, entity.name.constant, variable.language, meta.definition.variable#b55b25
entity, entity.name#2c9279
variable.parameter.function#2f2f2f
entity.name.tag, tag.html#2c9279
entity.name.function#2c9279
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#2c9279
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#a8474a
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#2f2f2f
string, string punctuation.section.embedded source, attribute.value#b55b25
punctuation.definition.string#b55b2577
punctuation.support.type.property-name#94763577
support#947635
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#947635
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#947635
variable, identifier#947635
support.type.primitive, entity.name.type#365ca8
namespace#824699
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#a8474a
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#fafbfcitalic underline
message.error#b31d28
string variable#b55b25
source.regexp, string.regexp#b55b25
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#b55b25
string.regexp constant.character.escape#947635
support.constant#b55b25
keyword.operator.quantifier.regexp, constant.numeric, number#365ca8
keyword.other.unit#a8474a
constant.language.boolean, constant.language#2c9279
meta.module-reference#2c9279
punctuation.definition.list.begin.markdown#b55b25
markup.heading, markup.heading entity.name#2c9279bold
markup.quote#365ca8
markup.italic#2f2f2fitalic
markup.bold#2f2f2fbold
markup.raw#2c9279
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#b55b25
markup.underline.link.markdown, markup.underline.link.image.markdown#55555588underline
type.identifier, constant.other.character-class.regexp#365ca8
entity.other.attribute-name.html.vue#2c9279
invalid.illegal.unrecognized-tag.htmlnormal
Abysal Theme by Andr3xDev - VS Code Theme