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#2E222F
  • activityBar.dropBackground#2E222F
  • activityBar.foreground#BDBCDB
  • activityBarBadge.background#65B8DC
  • activityBarBadge.foreground#1C1C1C
  • badge.background#65B8DC
  • badge.foreground#1C1C1C
  • button.background#BDBCDB
  • button.foreground#1C1C1C
  • button.hoverBackground#BDBCDBCC
  • debugExceptionWidget.background#402942
  • debugExceptionWidget.border#665C7633
  • debugToolBar.background#2E222F
  • descriptionForeground#BDBCDBE6
  • diffEditor.insertedTextBackground#70C18466
  • diffEditor.removedTextBackground#CC7F6566
  • dropdown.background#2E222F
  • dropdown.border#2E222F
  • dropdown.foreground#BDBCDB
  • editor.background#1C1C1C
  • editor.findMatchBackground#65B8DC66
  • editor.findMatchHighlightBackground#65B8DC33
  • editor.findRangeHighlightBackground#65B8DC33
  • editor.focusedStackFrameHighlightBackground#402942
  • editor.foreground#BDBCDB
  • editor.hoverHighlightBackground#402942
  • editor.inactiveSelectionBackground#BDBCDB22
  • editor.lineHighlightBackground#2E222F99
  • editor.lineHighlightBorder#2E222F00
  • editor.rangeHighlightBackground#65B8DC66
  • editor.selectionBackground#BDBCDB33
  • editor.selectionHighlightBackground#BDBCDB22
  • editor.stackFrameHighlightBackground#CCCC4F99
  • editor.wordHighlightBackground#BDBCDB33
  • editor.wordHighlightStrongBackground#BDBCDB66
  • editorBracketMatch.background#1C1C1C00
  • editorBracketMatch.border#65B8DC
  • editorCodeLens.foreground#402942
  • editorCursor.foreground#BDBCDB
  • editorError.border#CC7F6500
  • editorError.foreground#CC7F65
  • editorGroup.border#665C7633
  • editorGroup.dropBackground#BDBCDB22
  • editorGroup.emptyBackground#1C1C1C
  • editorGroupHeader.noTabsBackground#1C1C1C
  • editorGroupHeader.tabsBackground#1C1C1C
  • editorGroupHeader.tabsBorder#665C7600
  • editorGutter.addedBackground#70C184
  • editorGutter.background#1C1C1C
  • editorGutter.deletedBackground#CC7F65
  • editorGutter.modifiedBackground#CCCC4F
  • editorHint.border#CCCC4F00
  • editorHint.foreground#CCCC4F
  • editorHoverWidget.background#2E222F
  • editorHoverWidget.border#665C7633
  • editorIndentGuide.activeBackground#665C7666
  • editorIndentGuide.background#665C7633
  • editorLineNumber.activeForeground#402942
  • editorLineNumber.foreground#402942
  • editorLink.activeForeground#65B8DC
  • editorMarkerNavigation.background#78547BC0
  • editorMarkerNavigationError.background#CC7F6533
  • editorMarkerNavigationWarning.background#CCCC4F33
  • editorOverviewRuler.addedForeground#70C184
  • editorOverviewRuler.border#665C7633
  • editorOverviewRuler.currentContentForeground#2E222F
  • editorOverviewRuler.deletedForeground#CC7F65
  • editorOverviewRuler.errorForeground#CC7F65
  • editorOverviewRuler.findMatchForeground#65B8DC66
  • editorOverviewRuler.incomingContentForeground#2E222F
  • editorOverviewRuler.infoForeground#70C184
  • editorOverviewRuler.modifiedForeground#CCCC4F
  • editorOverviewRuler.rangeHighlightForeground#65B8DC33
  • editorOverviewRuler.selectionHighlightForeground#65B8DC33
  • editorOverviewRuler.warningForeground#CCCC4F
  • editorOverviewRuler.wordHighlightForeground#65B8DC66
  • editorOverviewRuler.wordHighlightStrongForeground#65B8DC66
  • editorRuler.foreground#402942
  • editorSuggestWidget.background#1C1C1C
  • editorSuggestWidget.border#2E222F
  • editorSuggestWidget.foreground#BDBCDB
  • editorSuggestWidget.highlightForeground#65B8DC
  • editorSuggestWidget.selectedBackground#402942
  • editorWarning.border#CCCC4F00
  • editorWarning.foreground#CCCC4F
  • editorWhitespace.foreground#402942B3
  • editorWidget.background#1C1C1C
  • editorWidget.border#665C7611
  • errorForeground#CC7F65
  • extensionButton.prominentBackground#BDBCDB
  • extensionButton.prominentForeground#1C1C1C
  • extensionButton.prominentHoverBackground#40294299
  • focusBorder#665C7600
  • foreground#BDBCDB
  • gitDecoration.conflictingResourceForeground#78547B
  • gitDecoration.deletedResourceForeground#CC7F65
  • gitDecoration.ignoredResourceForeground#BDBCDB66
  • gitDecoration.modifiedResourceForeground#CCCC4F
  • gitDecoration.submoduleResourceForeground#70C1C1
  • gitDecoration.untrackedResourceForeground#70C184
  • input.background#2E222F
  • input.border#2E222F00
  • input.foreground#BDBCDB
  • input.placeholderForeground#BDBCDB99
  • inputOption.activeBackground#65B8DC66
  • inputOption.activeBorder#65B8DC00
  • inputValidation.errorBackground#CC7F65
  • inputValidation.errorBorder#CC7F65
  • inputValidation.errorForeground#F1F1F1
  • inputValidation.infoBackground#70C184
  • inputValidation.infoBorder#70C184
  • inputValidation.infoForeground#F1F1F1
  • inputValidation.warningBackground#CCCC4F
  • inputValidation.warningBorder#CCCC4F
  • inputValidation.warningForeground#F1F1F1
  • list.activeSelectionBackground#65B8DC
  • list.activeSelectionForeground#1C1C1C
  • list.dropBackground#65B8DC66
  • list.errorForeground#CC7F65
  • list.focusBackground#65B8DC66
  • list.focusForeground#BDBCDB
  • list.highlightForeground#65B8DC
  • list.hoverBackground#2E222F
  • list.hoverForeground#BDBCDB
  • list.inactiveFocusBackground#40294266
  • list.inactiveSelectionBackground#40294299
  • list.inactiveSelectionForeground#BDBCDB
  • list.warningForeground#CCCC4F
  • merge.border#40294200
  • merge.currentContentBackground#70C1844D
  • merge.currentHeaderBackground#70C18466
  • merge.incomingContentBackground#70C1C14D
  • merge.incomingHeaderBackground#70C1C166
  • minimap.background#1C1C1C
  • minimap.errorHighlight#CC7F6599
  • minimap.findMatchHighlight#65B8DC
  • minimap.selectionHighlight#BDBCDB99
  • minimap.warningHighlight#CCCC4F99
  • minimapSlider.activeBackground#40294299
  • minimapSlider.background#40294266
  • minimapSlider.hoverBackground#40294299
  • notificationCenter.border#665C7633
  • notificationCenterHeader.background#402942
  • notificationCenterHeader.foreground#65B8DC
  • notificationLink.foreground#65B8DC
  • notifications.background#2E222F
  • notifications.border#1C1C1C
  • notifications.foreground#BDBCDB
  • notificationToast.border#40294200
  • panel.background#1C1C1C
  • panel.border#665C7633
  • panelTitle.activeBorder#65B8DC00
  • panelTitle.activeForeground#65B8DC
  • panelTitle.inactiveForeground#BDBCDB
  • peekView.border#402942
  • peekViewEditor.background#1C1C1C
  • peekViewEditor.matchHighlightBackground#65B8DC4D
  • peekViewEditorGutter.background#1C1C1C
  • peekViewResult.background#1C1C1C
  • peekViewResult.fileForeground#65B8DC
  • peekViewResult.lineForeground#BDBCDB66
  • peekViewResult.matchHighlightBackground#65B8DCCC
  • peekViewResult.selectionBackground#402942
  • peekViewResult.selectionForeground#BDBCDB
  • peekViewTitle.background#2E222F
  • peekViewTitleDescription.foreground#BDBCDB
  • peekViewTitleLabel.foreground#65B8DC
  • pickerGroup.border#2E222F
  • pickerGroup.foreground#65B8DC
  • progressBar.background#65B8DC
  • scrollbar.shadow#1C1C1C66
  • scrollbarSlider.activeBackground#BDBCDB66
  • scrollbarSlider.background#BDBCDB33
  • scrollbarSlider.hoverBackground#BDBCDB66
  • selection.background#65B8DC66
  • sideBar.background#1C1C1C
  • sideBar.border#665C7633
  • sideBar.foreground#BDBCDB
  • sideBarSectionHeader.background#402942
  • sideBarSectionHeader.foreground#BDBCDB
  • sideBarTitle.foreground#BDBCDB
  • statusBar.background#2E222F
  • statusBar.border#40294200
  • statusBar.debuggingBackground#78547B
  • statusBar.debuggingForeground#1C1C1C
  • statusBar.foreground#BDBCDB
  • statusBar.noFolderBackground#2E222F
  • statusBar.noFolderForeground#BDBCDB
  • statusBarItem.activeBackground#65B8DC66
  • statusBarItem.hoverBackground#40294299
  • statusBarItem.prominentBackground#402942
  • statusBarItem.prominentHoverBackground#402942
  • tab.activeBackground#402942CC
  • tab.activeBorder#65B8DCFF
  • tab.activeBorderTop#65B8DC00
  • tab.activeForeground#BDBCDB
  • tab.border#40294200
  • tab.hoverBackground#402942CC
  • tab.hoverBorder#65B8DC00
  • tab.inactiveBackground#1C1C1C
  • tab.inactiveForeground#BDBCDB99
  • tab.unfocusedActiveBackground#402942CC
  • tab.unfocusedActiveBorder#65B8DC00
  • tab.unfocusedActiveBorderTop#65B8DC00
  • tab.unfocusedActiveForeground#BDBCDB99
  • tab.unfocusedHoverBackground#402942B3
  • tab.unfocusedHoverBorder#65B8DC00
  • tab.unfocusedInactiveForeground#BDBCDB66
  • terminal.ansiBlack#1F1F1F
  • terminal.ansiBlue#7099C1
  • terminal.ansiBrightBlack#1F1F1F
  • terminal.ansiBrightBlue#7099C1
  • terminal.ansiBrightCyan#70C1C1
  • terminal.ansiBrightGreen#70C184
  • terminal.ansiBrightMagenta#AD70C1
  • terminal.ansiBrightRed#CC7F65
  • terminal.ansiBrightWhite#F1F1F1
  • terminal.ansiBrightYellow#CCCC4F
  • terminal.ansiCyan#70C1C1
  • terminal.ansiGreen#70C184
  • terminal.ansiMagenta#AD70C1
  • terminal.ansiRed#CC7F65
  • terminal.ansiWhite#F1F1F1
  • terminal.ansiYellow#CCCC4F
  • terminal.background#1C1C1C
  • terminal.foreground#BDBCDB
  • textBlockQuote.background#BDBCDB22
  • textBlockQuote.border#BDBCDB22
  • textCodeBlock.background#65B8DC
  • textLink.activeForeground#65B8DC
  • textLink.foreground#65B8DC
  • textPreformat.foreground#65B8DC99
  • textSeparator.foreground#BDBCDB
  • titleBar.activeBackground#2E222F
  • titleBar.activeForeground#BDBCDB
  • titleBar.border#1C1C1C00
  • titleBar.inactiveBackground#2E222F
  • titleBar.inactiveForeground#BDBCDB66
  • tree.indentGuidesStroke#BDBCDB
  • walkThrough.embeddedEditorBackground#1C1C1C
  • welcomePage.buttonBackground#402942
  • welcomePage.buttonHoverBackground#40294299

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#BDBCDB66italic
comment.block.preprocessor#BDBCDB66
comment.documentation, comment.block.documentation#70C184
invalid.illegal#CC7F65
keyword.operator#BDBCDB
keyword, storage, keyword.operator#BE54A7
storage.type, support.type#BE54A7
constant.language, support.constant, variable.language#A57EB3
variable, support.variable#BDBCDB
entity.name.function, support.function#4F9DC4
entity.name.type, entity.other.inherited-class, support.class#4F9DC4
entity.name.exception#CC7F65
entity.name.section#BE54A7bold
constant.numeric#A57EB3
string#4F9DC4
constant.character.escape, constant.character#D6D65B
string.regexp#D6D65B
constant.other.symbol#BDBCDB
punctuation#BDBCDB
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#4F9DC4
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#BDBCDB
entity.name.tag#BE54A7
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#A57EB3italic
constant.character.entity, punctuation.definition.entity#BDBCDB
entity.name.tag.css, meta.property-value, meta.property-value constant.other, support.constant.property-value#BE54A7
meta.property-name, support.type.property-name#BDBCDB
meta.selector, meta.selector entity, meta.selector entity punctuation#4F9DC4
markup.changed#CCCC4F
markup.deleted#CC7F65
markup.italicitalic
markup.error#CC7F65
markup.inserted#70C184
meta.link#4F9DC4
markup.heading#BE54A7
markup.boldbold
markup.underlineunderline
markup.quote#A57EB3
markup.list#BDBCDB
markup.bold markup.italic#BDBCDB
markup.inline.raw, markup.fenced_code.block#A57EB3
meta.diff.range meta.diff.index meta.separator#70C184
meta.diff.header.from-file#70C184
meta.diff.header.to-file#4F9DC4
Arcaea Theme by ayatough - VS Code Theme