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.background#0a0e14
  • activityBar.border#0a0e14
  • activityBar.foreground#218c74
  • activityBar.inactiveForeground#7f8fa6
  • activityBarBadge.background#218c74
  • activityBarBadge.foreground#ffffff
  • badge.background#218c74
  • badge.foreground#ffffff
  • button.background#7f8fa680
  • button.foreground#ffffff
  • button.hoverBackground#218c74
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#0a0e14
  • debugExceptionWidget.border#ffffff
  • debugToolBar.background#0a0e14
  • descriptionForeground#ffffff
  • diffEditor.insertedTextBackground#3ae37433
  • diffEditor.insertedTextBorder#3ae37455
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#0a0e14
  • dropdown.border#7f8fa6
  • dropdown.foreground#ffffff
  • editor.background#0a0e14
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#CAD40F66
  • editor.findRangeHighlightBackground#7f8fa670
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#0a0e1433
  • editor.inactiveSelectionBackground#7f8fa670
  • editor.lineHighlightBackground#0a0e14
  • editor.lineHighlightBorder#0a0e14
  • editor.rangeHighlightBackground#7f8fa680
  • editor.selectionBackground#7f8fa685
  • editor.selectionHighlightBackground#7f8fa675
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketMatch.background#0a0e1455
  • editorBracketMatch.border#0a0e1480
  • editorCodeLens.foreground#ffffff
  • editorCursor.foreground#218c74
  • editorError.border#0a0e14
  • editorError.foreground#A22929
  • editorGroup.border#0a0e14
  • editorGroup.dropBackground#0a0e1499
  • editorGroup.emptyBackground#0a0e14
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGroupHeader.tabsBorder#0a0e14
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#0a0e1466
  • editorGutter.deletedBackground#A22929
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#0a0e14
  • editorHoverWidget.border#0a0e14
  • editorIndentGuide.background#7f8fa670
  • editorLineNumber.activeForeground#218c74
  • editorLineNumber.foreground#ffffff
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#7f8fa633
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#0a0e14
  • editorOverviewRuler.border#0a0e14
  • editorOverviewRuler.commonContentForeground#0a0e1455
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ae37455
  • editorRuler.foreground#7f8fa670
  • editorSuggestWidget.background#0a0e14
  • editorSuggestWidget.border#0a0e14
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#e84545
  • editorSuggestWidget.selectedBackground#7f8fa660
  • editorWarning.border#ffffff00
  • editorWarning.foreground#d50000
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#0a0e14
  • editorWidget.border#0a0e14
  • errorForeground#A22929
  • extensionButton.prominentBackground#7f8fa690
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#218c74
  • focusBorder#0a0e14
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#fff200
  • gitDecoration.untrackedResourceForeground#3ae374
  • input.background#0a0e14
  • input.border#0a0e14
  • input.foreground#218c74
  • input.placeholderForeground#ffffff
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#0a0e14
  • inputValidation.errorBorder#0a0e14
  • inputValidation.infoBackground#0a0e14
  • inputValidation.infoBorder#0a0e14
  • inputValidation.warningBackground#0a0e14
  • inputValidation.warningBorder#0a0e14
  • list.activeSelectionBackground#0a0e14
  • list.activeSelectionForeground#218c74
  • list.dropBackground#0a0e14
  • list.focusBackground#0a0e14
  • list.focusForeground#ffffff
  • list.highlightForeground#218c74
  • list.hoverBackground#0a0e14
  • list.hoverForeground#218c74
  • list.inactiveSelectionBackground#0a0e14
  • list.inactiveSelectionForeground#ffffff
  • menu.background#0a0e14
  • menu.border#0a0e14
  • menu.selectionForeground#218c74
  • menubar.selectionBackground#0a0e14
  • menubar.selectionForeground#218c74
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • notificationCenter.border#0a0e14
  • notificationCenterHeader.background#0a0e14
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#0a0e14
  • notifications.background#0a0e14
  • notifications.border#7f8fa6
  • notifications.foreground#ffffff
  • notificationToast.border#7f8fa6
  • panel.background#0a0e14
  • panel.border#218c74
  • panelTitle.activeBorder#218c74
  • panelTitle.activeForeground#218c74
  • panelTitle.inactiveForeground#ffffff
  • peekView.border#0a0e14
  • peekViewEditor.background#0a0e14
  • peekViewEditor.matchHighlightBackground#0a0e1400
  • peekViewEditorGutter.background#0a0e14
  • peekViewResult.background#0a0e14
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#0a0e14
  • peekViewResult.selectionBackground#0a0e14
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0a0e14
  • peekViewTitleDescription.foreground#ffffff
  • peekViewTitleLabel.foreground#0a0e14
  • pickerGroup.border#0a0e14
  • pickerGroup.foreground#ffffff
  • progressBar.background#218c74
  • sash.hoverBorder#7f8fa6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#218c74cc
  • scrollbarSlider.background#7f8fa650
  • scrollbarSlider.hoverBackground#7f8fa6cc
  • selection.background#7f8fa660
  • sideBar.background#0a0e14
  • sideBar.border#0a0e14
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#0a0e14
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0a0e14
  • statusBar.border#218c74
  • statusBar.debuggingBackground#0a0e14
  • statusBar.debuggingBorder#0a0e14
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0a0e14
  • statusBar.noFolderBorder#0a0e14
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#218c74
  • statusBarItem.hoverBackground#0a0e14
  • statusBarItem.prominentBackground#0a0e14
  • statusBarItem.prominentHoverBackground#7f8fa6
  • tab.activeBackground#0a0e14
  • tab.activeBorder#218c74
  • tab.activeForeground#ffffff
  • tab.border#0a0e14
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#ffffff
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlack#000
  • terminal.ansiBlue#17c0eb
  • terminal.ansiBrightBlack#000
  • terminal.ansiBrightBlue#17c0eb
  • terminal.ansiBrightCyan#67e6dc
  • terminal.ansiBrightGreen#3ae374
  • terminal.ansiBrightMagenta#7d5fff
  • terminal.ansiBrightRed#ff4d4d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff200
  • terminal.ansiCyan#67e6dc
  • terminal.ansiGreen#3ae374
  • terminal.ansiMagenta#7d5fff
  • terminal.ansiRed#ff4d4d
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#fff200
  • terminal.background#0a0e14
  • terminal.foreground#ffffff
  • terminalCursor.background#218c74
  • terminalCursor.foreground#218c74
  • textBlockQuote.background#0a0e14
  • textBlockQuote.border#218c74
  • textCodeBlock.background#0a0e14
  • textLink.activeForeground#f2e5bc
  • textLink.foreground#218c74
  • textPreformat.foreground#218c74
  • textSeparator.foreground#0a0e14
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0a0e14
  • welcomePage.buttonBackground#7f8fa6
  • welcomePage.buttonHoverBackground#218c74
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#218c7470italic
meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifieritalic
constant#ff4d4d
entity#fff200
variable.parameter, meta.parameteritalic
invalid#ff3838
storage.type.function#ffb8b8
keyword, storage.type.class, keyword.control.default.ts#ffb8b8
meta#ffffff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#fffitalic
meta.brace#ffffff
punctuation#ffffff
punctuation.definition.parameters#c7eceeitalic
punctuation.definition.template-expression#c7ecee
storage#fff200
storage.type.function.arrow#fff200
string, punctuation.definition.string#32ff7e
string.template, punctuation.definition.string.template#fffa65
support#18dcff
support.function#ffb8b8
support.variable.property.dom#ffffff
variable#F8EFBA
source.css entity, source.stylus entity#fffa65
entity.other.attribute-name.id.css#e15f41
entity.name.tag#17c0eb
source.css support, source.stylus support#32ff7e
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#c7ecee
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#c7ecee
source.css variable, source.stylus variable#17c0eb
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#ff3838
text.html.basic entity.name#17c0eb
meta.toc-list.id.html#32ff7e
text.html.basic entity.other#fff200italic
meta.tag.metadata.script.html entity.name.tag.html#fff200
punctuation.definition.string.begin, punctuation.definition.string.end#2fff00
source.ini entity#ffffff
source.ini keyword#fff200
source.ini punctuation.definition#c7ecee
source.ini punctuation.separator#ffb8b8
source.js storage.type.function, source.ts storage.type.function#7d5fff
variable.language, entity.name.type.class.js#ff757fitalic
entity.other.inherited-class.js#808e9b
variable.other.object.js#7efff5
variable.parameter.function.language.special.self.python#7d5fff
source.json support#fff200
source.json string, source.json punctuation.definition.string#ffffff
punctuation.definition.heading.markdown#ffffff
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#fff200bold
meta.paragraph.markdown#ffffff
beginning.punctuation.definition.quote.markdown#fff200
markup.quote.markdown meta.paragraph.markdown#17c0ebitalic
meta.separator.markdown#fff200
markup.bold.markdown#17c0ebbold
markup.italic.markdown#17c0ebitalic
beginning.punctuation.definition.list.markdown#fff200
string.other.link.title.markdown#32ff7e
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#32ff7e
markup.underline.link.markdown, markup.underline.link.image.markdown#17c0eb
fenced_code.block.language, markup.inline.raw.markdown#17c0eb
fenced_code.block.language, markup.inline.raw.markdown#17c0eb
text.jade entity.name#17c0eb
text.jade entity.other.attribute-name.tagitalic
text.jade string.interpolated#c7ecee
source.ts entity.name.type#18dcff
source.ts keyword#fff200
source.ts punctuation.definition.parameters#ffffff
meta.arrow.ts punctuation.definition.parameters#c7ecee
source.php entity#17c0eb
variable.other.php#fff200
storage.type.cs#17c0eb
entity.name.variable.property.cs#17c0eb
storage.modifier.cs#18dcff
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.htmlitalic
keyword.control.export#ffb8b8italic
meta.return.type.ts#7158e2italic
Illumination by Fabius Andriamaroson - VS Code Theme