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#E24000
  • activityBar.activeFocusBorder#E24000
  • activityBar.background#282A36
  • activityBar.border#282A36
  • activityBar.foreground#F8F8F2
  • activityBarBadge.background#FF5555
  • activityBarBadge.foreground#F8F8F2
  • badge.background#E24000
  • badge.foreground#F8F8F2
  • button.background#E24000
  • button.foreground#F8F8F2
  • button.hoverBackground#FF5555
  • debugExceptionWidget.background#282A36
  • debugExceptionWidget.border#282A36
  • debugToolBar.background#282A36
  • diffEditor.insertedTextBackground#50FA7B26
  • diffEditor.removedTextBackground#FF555526
  • dropdown.background#282A36
  • dropdown.border#44475A
  • dropdown.foreground#F8F8F2
  • editor.background#282A36
  • editor.findMatchBackground#E240000D
  • editor.findMatchBorder#E24000
  • editor.findMatchHighlightBackground#E240000D
  • editor.findMatchHighlightBorder#E2400059
  • editor.findRangeHighlightBackground#44475A40
  • editor.findRangeHighlightBorder#282A3600
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#6272A430
  • editor.rangeHighlightBackground#44475A40
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#6272A430
  • editor.selectionHighlightBorder#6272A4
  • editor.wordHighlightBackground#6272A430
  • editor.wordHighlightStrongBackground#E2400033
  • editorBracketMatch.background#6272A44D
  • editorBracketMatch.border#6272A499
  • editorCodeLens.foreground#6272A4
  • editorCursor.foreground#E24000
  • editorError.foreground#FF5555
  • editorGroup.border#282A36
  • editorGroup.emptyBackground#282A36
  • editorGroupHeader.noTabsBackground#282A36
  • editorGroupHeader.tabsBackground#282A36
  • editorGroupHeader.tabsBorder#282A36
  • editorGutter.addedBackground#50FA7B99
  • editorGutter.deletedBackground#FF555599
  • editorGutter.modifiedBackground#8BE9FD99
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#282A36
  • editorHoverWidget.foreground#F8F8F2
  • editorIndentGuide.activeBackground1#6272A4B3
  • editorIndentGuide.background1#6272A44D
  • editorLineNumber.activeForeground#6272A4CC
  • editorLineNumber.foreground#6272A466
  • editorLink.activeForeground#FFB86C
  • editorMarkerNavigation.background#282A36
  • editorOverviewRuler.addedForeground#50FA7B99
  • editorOverviewRuler.border#282A36
  • editorOverviewRuler.deletedForeground#FF555599
  • editorOverviewRuler.errorForeground#FF5555
  • editorOverviewRuler.modifiedForeground#8BE9FD99
  • editorOverviewRuler.warningForeground#F1FA8C
  • editorRuler.foreground#6272A44D
  • editorSuggestWidget.background#282A36
  • editorSuggestWidget.border#282A36
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.highlightForeground#E24000
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#F1FA8C
  • editorWhitespace.foreground#6272A466
  • editorWidget.background#282A36
  • editorWidget.foreground#F8F8F2
  • extensionButton.prominentBackground#E24000
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#FF5555
  • focusBorder#E24000
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#E24000
  • gitDecoration.deletedResourceForeground#FF5555B3
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.submoduleResourceForeground#BD93F9B3
  • gitDecoration.untrackedResourceForeground#E24000
  • input.background#282A36
  • input.border#44475A
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#E24000
  • inputValidation.errorBackground#282A36
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBackground#282A36
  • inputValidation.infoBorder#8BE9FD
  • inputValidation.warningBackground#282A36
  • inputValidation.warningBorder#F1FA8C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#E24000
  • list.focusBackground#44475A
  • list.focusForeground#E24000
  • list.highlightForeground#E24000
  • list.hoverBackground#44475A66
  • list.hoverForeground#E24000
  • list.inactiveSelectionBackground#44475A66
  • list.inactiveSelectionForeground#E24000
  • list.invalidItemForeground#6272A4
  • panel.background#282A36
  • panel.border#282A36
  • panelTitle.activeBorder#E24000
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#282A36
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#E2400033
  • peekViewResult.background#282A36
  • peekViewResult.fileForeground#6272A4
  • peekViewResult.matchHighlightBackground#E2400033
  • peekViewTitle.background#282A36
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#6272A4
  • pickerGroup.border#282A36
  • pickerGroup.foreground#6272A4
  • progressBar.background#E24000
  • quickInputList.focusBackground#44475A
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#6272A4B3
  • scrollbarSlider.background#6272A466
  • scrollbarSlider.hoverBackground#6272A499
  • selection.background#E2400040
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#8BE9FD
  • sideBar.background#282A36
  • sideBar.border#282A36
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#282A36
  • sideBarSectionHeader.foreground#F8F8F2
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#282A36
  • statusBar.border#282A36
  • statusBar.debuggingBackground#E24000
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#6272A4
  • statusBar.noFolderBackground#282A36
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#282A36
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#E24000
  • tab.activeBackground#44475A
  • tab.activeBorderTop#E24000
  • tab.activeForeground#F8F8F2
  • tab.border#282A3600
  • tab.hoverBackground#44475A66
  • tab.inactiveBackground#282A36
  • tab.inactiveForeground#6272A4
  • tab.unfocusedActiveBorderTop#6272A4
  • tab.unfocusedActiveForeground#6272A4
  • tab.unfocusedInactiveForeground#6272A4
  • terminal.ansiBlack#282A36
  • terminal.ansiBlue#8BE9FD
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#8BE9FD
  • terminal.ansiBrightCyan#8BE9FD
  • terminal.ansiBrightGreen#50FA7B
  • terminal.ansiBrightMagenta#BD93F9
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#F1FA8C
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#BD93F9
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • terminalCursor.foreground#E24000
  • textBlockQuote.background#282A36
  • textLink.activeForeground#FFB86C
  • textLink.foreground#FFB86C
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#282A36
  • titleBar.activeForeground#F8F8F2
  • titleBar.border#282A36
  • titleBar.inactiveBackground#282A36
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#282A36
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6272A4italic
string, constant.other.symbol#50FA7B
string.regexp, constant.character, constant.other#8BE9FD
constant.numeric#BD93F9
constant.numeric.css#FF5555
constant.language#F1FA8C
constant.language.boolean#BD93F9
variable#F8F8F2
variable.other.constant#BD93F9
variable.member#E24000
variable.language#FFB86Citalic
variable.language.this#E24000italic
support.variable#FFB86C
storage#FFB86C
storage.type#FFB86Citalic
storage.modifier.async#E24000italic
storage.type.class#E24000italic
keyword#FFB86C
keyword.control.flow#E24000
keyword.control.loop#E24000
keyword.control.conditional#E24000
keyword.control.try-catch#E24000
keyword.operator#E24000
keyword.operator.new#E24000
punctuation.separator, punctuation.terminator#F8F8F2b3
punctuation.section#F8F8F2
punctuation.accessor#F1FA8C
source.java storage.type, source.haskell storage.type, source.c storage.type#8BE9FD
entity.other.inherited-class#F1FA8C
storage.type.function#FFB86C
storage.type.function.arrow#E24000
source.java storage.type.primitive#8BE9FD
variable.parameter, meta.parameter#BD93F9italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFB86C
support.function, support.macro#FFB86C
support.function.console#FFB86C
entity.name.import, entity.name.package#50FA7B
entity.name#E24000
entity.name.function#FFB86C
entity.name.class#F1FA8C
entity.name.tag, meta.tag.sgml#E24000
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#F8F8F2
text.html.derivative#F8F8F2
entity.other.attribute-name#FFB86Citalic
support.constant#E24000italic
support.type, support.class, source.go storage.type#E24000
support.class.promise#FFB86C
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#F8F8F2
invalid#FF5555
meta.diff, meta.diff.header#BD93F9
source.ruby variable.other.read-write#FFB86C
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#8BE9FD
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#6272A4
support.type.property-name#50FA7B
entity.other.attribute-name.class.css#50FA7B
entity.other.attribute-name.id.css#FFB86C
support.type.property-name.css#F8F8F2
constant.numeric.line-number.find-in-files - match#6272A4
constant.numeric.line-number.match#FFB86C
entity.name.filename.find-in-files#50FA7B
message.error#FF5555
markup.heading, markup.heading entity.name#50FA7Bbold
markup.underline.link, string.other.link#8BE9FD
markup.italic#E24000italic
markup.bold#E24000bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#6272A4bold
markup.quote#8BE9FDitalic
markup.list punctuation.definition.list.begin#FFB86C
markup.inserted#50FA7B
markup.changed#8BE9FD
markup.deleted#FF5555
markup.strike#FFB86C
markup.table#8BE9FD
text.html.markdown markup.inline.raw#F1FA8C
text.html.markdown meta.dummy.line-break#6272A4
punctuation.definition.markdown#6272A4
string.json support.type.property-name.json#F1FA8C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFB86C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E24000
constant.language.json#BD93F9
constant.numeric.json#FF5555
string.unquoted, constant.other.object.key#FFB86C
meta.brace.curly, meta.brace.round, meta.brace.square#F8F8F2
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FFB86C
meta.object-literal.key#FFB86C
entity.name.type#F1FA8C
entity.name.type.class#E24000
support.type.primitive#F1FA8C
text.gitignore#FFB86Citalic