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#ff007a
  • activityBar.background#070c16
  • activityBar.foreground#00ffd5
  • activityBar.inactiveForeground#6c7aa0
  • activityBarBadge.background#d400ff
  • activityBarBadge.foreground#0a101e
  • badge.background#d400ff
  • badge.foreground#0a101e
  • breadcrumb.activeSelectionForeground#00ffd5
  • breadcrumb.focusForeground#d8e2ff
  • breadcrumb.foreground#a8b7db
  • button.background#00ffd5
  • button.foreground#0a101e
  • button.hoverBackground#00ffd5d4
  • button.secondaryBackground#d400ff
  • button.secondaryForeground#0a101e
  • button.secondaryHoverBackground#d400ffd4
  • diffEditor.border#00ffd526
  • diffEditor.insertedLineBackground#00ffd50f
  • diffEditor.insertedTextBackground#00ffd51f
  • diffEditor.removedLineBackground#ff007a0f
  • diffEditor.removedTextBackground#ff007a1f
  • dropdown.background#0d1628
  • dropdown.border#00ffd5
  • dropdown.foreground#d8e2ff
  • editor.background#0a101e
  • editor.findMatchBackground#ff007a40
  • editor.findMatchHighlightBackground#00ffd526
  • editor.foreground#d8e2ff
  • editor.lineHighlightBackground#ffffff06
  • editor.lineHighlightBorder#ffffff10
  • editor.selectionBackground#00ffd52b
  • editor.selectionHighlightBackground#d400ff1a
  • editor.wordHighlightBackground#00ffd51a
  • editor.wordHighlightStrongBackground#d400ff1f
  • editorBracketMatch.background#00ffd51a
  • editorBracketMatch.border#00ffd5
  • editorCursor.foreground#ff007a
  • editorGroupHeader.tabsBackground#070c16
  • editorGroupHeader.tabsBorder#00ffd522
  • editorHoverWidget.background#0d1628
  • editorHoverWidget.border#00ffd5
  • editorIndentGuide.activeBackground#00ffd552
  • editorIndentGuide.background#2b3b5733
  • editorLineNumber.activeForeground#00ffd5
  • editorLineNumber.foreground#2b3b57
  • editorSuggestWidget.background#0d1628
  • editorSuggestWidget.border#00ffd5
  • editorSuggestWidget.highlightForeground#ff007a
  • editorSuggestWidget.selectedBackground#00ffd51a
  • editorWidget.background#0d1628
  • editorWidget.border#00ffd5
  • errorForeground#ff5a6a
  • focusBorder#00ffd5
  • foreground#d8e2ff
  • gitDecoration.addedResourceForeground#00ffd5
  • gitDecoration.conflictingResourceForeground#ffe66d
  • gitDecoration.deletedResourceForeground#ff5a6a
  • gitDecoration.ignoredResourceForeground#5c6b73
  • gitDecoration.modifiedResourceForeground#d400ff
  • gitDecoration.untrackedResourceForeground#6aff00
  • icon.foreground#d8e2ff
  • input.background#0d1628
  • input.border#00ffd5
  • input.foreground#d8e2ff
  • input.placeholderForeground#6c7aa0
  • inputOption.activeBackground#ff007a26
  • inputOption.activeBorder#ff007a
  • inputValidation.errorBorder#ff5a6a
  • inputValidation.infoBorder#00ffd5
  • inputValidation.warningBorder#ff007a
  • list.activeSelectionBackground#00ffd522
  • list.activeSelectionForeground#d8e2ff
  • list.focusBackground#00ffd51a
  • list.focusOutline#00ffd5
  • list.highlightForeground#ff007a
  • list.hoverBackground#00ffd512
  • list.hoverForeground#d8e2ff
  • list.inactiveSelectionBackground#00ffd514
  • menu.background#0d1628
  • menu.border#00ffd5
  • menu.foreground#d8e2ff
  • menu.selectionBackground#00ffd526
  • menu.selectionForeground#d8e2ff
  • menu.separatorBackground#00ffd533
  • minimap.errorHighlight#ff5a6aa3
  • minimap.findMatchHighlight#ff007a5c
  • minimap.selectionHighlight#00ffd533
  • minimap.warningHighlight#ffe66da3
  • minimapGutter.addedBackground#00ffd5
  • minimapGutter.deletedBackground#ff5a6a
  • minimapGutter.modifiedBackground#d400ff
  • notificationCenter.border#00ffd5
  • notificationLink.foreground#00ffd5
  • notifications.background#0d1628
  • notifications.border#00ffd5
  • notifications.foreground#d8e2ff
  • notificationToast.border#00ffd5
  • panel.background#070c16
  • panel.border#00ffd522
  • panelTitle.activeBorder#ff007a
  • panelTitle.activeForeground#d8e2ff
  • panelTitle.inactiveForeground#a8b7db
  • peekView.border#00ffd5
  • peekViewEditor.background#0a101e
  • peekViewResult.background#070c16
  • peekViewResult.selectionBackground#00ffd526
  • peekViewTitle.background#0d1628
  • progressBar.background#ff007a
  • scrollbarSlider.activeBackground#00ffd552
  • scrollbarSlider.background#00ffd526
  • scrollbarSlider.hoverBackground#00ffd53d
  • selection.background#00ffd533
  • sideBar.background#070c16
  • sideBar.border#00ffd522
  • sideBar.foreground#cfe0ff
  • sideBarSectionHeader.background#0a101e
  • sideBarSectionHeader.border#00ffd526
  • sideBarSectionHeader.foreground#d400ff
  • sideBarTitle.foreground#d400ff
  • statusBar.background#070c16
  • statusBar.border#00ffd522
  • statusBar.debuggingBackground#070c16
  • statusBar.debuggingForeground#ff007a
  • statusBar.foreground#cfe0ff
  • statusBar.noFolderBackground#070c16
  • statusBar.noFolderForeground#a8b7db
  • statusBarItem.hoverBackground#00ffd51a
  • statusBarItem.prominentBackground#d400ff22
  • tab.activeBackground#0a101e
  • tab.activeBorder#00ffd5
  • tab.activeForeground#d8e2ff
  • tab.border#00000000
  • tab.hoverBackground#0d162844
  • tab.hoverBorder#ff007a
  • tab.inactiveBackground#070c16
  • tab.inactiveForeground#a8b7db
  • terminal.ansiBlack#0d1628
  • terminal.ansiBlue#4d8bff
  • terminal.ansiBrightBlack#2b3b57
  • terminal.ansiBrightBlue#7db0ff
  • terminal.ansiBrightCyan#55ffe4
  • terminal.ansiBrightGreen#8cff33
  • terminal.ansiBrightMagenta#e06bff
  • terminal.ansiBrightRed#ff7a84
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff09a
  • terminal.ansiCyan#00ffd5
  • terminal.ansiGreen#6aff00
  • terminal.ansiMagenta#d400ff
  • terminal.ansiRed#ff5a6a
  • terminal.ansiWhite#d8e2ff
  • terminal.ansiYellow#ffe66d
  • terminal.background#070c16
  • terminal.foreground#d8e2ff
  • terminal.selectionBackground#00ffd533
  • terminalCursor.foreground#ff007a
  • titleBar.activeBackground#070c16
  • titleBar.activeForeground#d8e2ff
  • titleBar.border#00ffd522
  • titleBar.inactiveBackground#070c16
  • titleBar.inactiveForeground#6c7aa0
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6b73italic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.control, keyword.operator.expression, keyword.operator.logical, entity.name.function.preprocessor, meta.preprocessor, keyword.control.directive, support.other.directive#d400ff—
support.type, support.class, entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, entity.name.trait, entity.name.impl#6aff00—
entity.name.function, support.function, entity.name.method, support.method, variable.function#ff007a—
string, punctuation.definition.string, string.quoted, string.template, string.regexp#00ffd5—
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.character.escape, constant.other, support.constant#ffe66d—
variable, variable.other, variable.other.readwrite#d8e2ff—
variable.parameter#ff007a—
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.object.member#00ffd5—
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.typeparameters#a8b7db—
invalid, invalid.illegal#ff5a6aunderline