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#bd00ff
  • activityBar.background#01090b
  • activityBar.foreground#00ffa3
  • activityBar.inactiveForeground#5a8790
  • activityBarBadge.background#ff5f5f
  • activityBarBadge.foreground#020c0e
  • badge.background#ff5f5f
  • badge.foreground#020c0e
  • breadcrumb.activeSelectionForeground#00ffa3
  • breadcrumb.focusForeground#d8f6f2
  • breadcrumb.foreground#89b9c0
  • button.background#00ffa3
  • button.foreground#020c0e
  • button.hoverBackground#00ffa3d4
  • button.secondaryBackground#0077ff
  • button.secondaryForeground#020c0e
  • button.secondaryHoverBackground#0077ffd4
  • diffEditor.border#00ffa326
  • diffEditor.insertedLineBackground#00ffa30f
  • diffEditor.insertedTextBackground#00ffa31f
  • diffEditor.removedLineBackground#ff5f5f0f
  • diffEditor.removedTextBackground#ff5f5f1f
  • dropdown.background#041216
  • dropdown.border#00ffa3
  • dropdown.foreground#d8f6f2
  • editor.background#020c0e
  • editor.findMatchBackground#ff5f5f40
  • editor.findMatchHighlightBackground#bd00ff26
  • editor.foreground#d8f6f2
  • editor.lineHighlightBackground#00ffa308
  • editor.lineHighlightBorder#00ffa312
  • editor.selectionBackground#00ffa326
  • editor.selectionHighlightBackground#0077ff1a
  • editor.wordHighlightBackground#0077ff1a
  • editor.wordHighlightStrongBackground#00ffa31f
  • editorBracketMatch.background#00ffa31a
  • editorBracketMatch.border#00ffa3
  • editorCursor.foreground#00ffa3
  • editorGroupHeader.tabsBackground#01090b
  • editorGroupHeader.tabsBorder#00ffa322
  • editorHoverWidget.background#041216
  • editorHoverWidget.border#00ffa3
  • editorIndentGuide.activeBackground#00ffa352
  • editorIndentGuide.background#2b4c5233
  • editorLineNumber.activeForeground#00ffa3
  • editorLineNumber.foreground#2b4c52
  • editorSuggestWidget.background#041216
  • editorSuggestWidget.border#00ffa3
  • editorSuggestWidget.highlightForeground#bd00ff
  • editorSuggestWidget.selectedBackground#00ffa31a
  • editorWidget.background#041216
  • editorWidget.border#00ffa3
  • errorForeground#ff5f5f
  • focusBorder#00ffa3
  • foreground#d8f6f2
  • gitDecoration.addedResourceForeground#00ffa3
  • gitDecoration.conflictingResourceForeground#ffb86b
  • gitDecoration.deletedResourceForeground#ff5f5f
  • gitDecoration.ignoredResourceForeground#5a8790
  • gitDecoration.modifiedResourceForeground#0077ff
  • gitDecoration.untrackedResourceForeground#bd00ff
  • icon.foreground#d8f6f2
  • input.background#041216
  • input.border#00ffa3
  • input.foreground#d8f6f2
  • input.placeholderForeground#5a8790
  • inputOption.activeBackground#bd00ff26
  • inputOption.activeBorder#bd00ff
  • inputValidation.errorBorder#ff5f5f
  • inputValidation.infoBorder#0077ff
  • inputValidation.warningBorder#ffb86b
  • list.activeSelectionBackground#00ffa322
  • list.activeSelectionForeground#d8f6f2
  • list.focusBackground#0077ff1a
  • list.focusOutline#00ffa3
  • list.highlightForeground#00ffa3
  • list.hoverBackground#0077ff12
  • list.hoverForeground#d8f6f2
  • list.inactiveSelectionBackground#00ffa314
  • menu.background#041216
  • menu.border#00ffa3
  • menu.foreground#d8f6f2
  • menu.selectionBackground#0077ff26
  • menu.selectionForeground#d8f6f2
  • menu.separatorBackground#00ffa333
  • minimap.errorHighlight#ff5f5fa3
  • minimap.findMatchHighlight#ff5f5f5c
  • minimap.selectionHighlight#00ffa333
  • minimap.warningHighlight#ffb86ba3
  • minimapGutter.addedBackground#00ffa3
  • minimapGutter.deletedBackground#ff5f5f
  • minimapGutter.modifiedBackground#0077ff
  • notificationCenter.border#00ffa3
  • notificationLink.foreground#0077ff
  • notifications.background#041216
  • notifications.border#00ffa3
  • notifications.foreground#d8f6f2
  • notificationToast.border#00ffa3
  • panel.background#01090b
  • panel.border#00ffa322
  • panelTitle.activeBorder#00ffa3
  • panelTitle.activeForeground#d8f6f2
  • panelTitle.inactiveForeground#89b9c0
  • peekView.border#00ffa3
  • peekViewEditor.background#020c0e
  • peekViewResult.background#01090b
  • peekViewResult.selectionBackground#0077ff26
  • peekViewTitle.background#041216
  • progressBar.background#00ffa3
  • scrollbarSlider.activeBackground#00ffa352
  • scrollbarSlider.background#00ffa326
  • scrollbarSlider.hoverBackground#00ffa33d
  • selection.background#00ffa333
  • sideBar.background#01090b
  • sideBar.border#00ffa322
  • sideBar.foreground#c9ece7
  • sideBarSectionHeader.background#020c0e
  • sideBarSectionHeader.border#00ffa326
  • sideBarSectionHeader.foreground#00ffa3
  • sideBarTitle.foreground#00ffa3
  • statusBar.background#01090b
  • statusBar.border#00ffa322
  • statusBar.debuggingBackground#01090b
  • statusBar.debuggingForeground#ff5f5f
  • statusBar.foreground#c9ece7
  • statusBar.noFolderBackground#01090b
  • statusBar.noFolderForeground#89b9c0
  • statusBarItem.hoverBackground#00ffa31a
  • statusBarItem.prominentBackground#bd00ff22
  • tab.activeBackground#020c0e
  • tab.activeBorder#bd00ff
  • tab.activeForeground#d8f6f2
  • tab.border#00000000
  • tab.hoverBackground#04121644
  • tab.hoverBorder#0077ff
  • tab.inactiveBackground#01090b
  • tab.inactiveForeground#89b9c0
  • terminal.ansiBlack#041216
  • terminal.ansiBlue#0077ff
  • terminal.ansiBrightBlack#2b4c52
  • terminal.ansiBrightBlue#3392ff
  • terminal.ansiBrightCyan#66efff
  • terminal.ansiBrightGreen#33ffb6
  • terminal.ansiBrightMagenta#d04dff
  • terminal.ansiBrightRed#ff7d7d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd2a1
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#00ffa3
  • terminal.ansiMagenta#bd00ff
  • terminal.ansiRed#ff5f5f
  • terminal.ansiWhite#d8f6f2
  • terminal.ansiYellow#ffb86b
  • terminal.background#01090b
  • terminal.foreground#d8f6f2
  • terminal.selectionBackground#00ffa333
  • terminalCursor.foreground#00ffa3
  • titleBar.activeBackground#01090b
  • titleBar.activeForeground#d8f6f2
  • titleBar.border#00ffa322
  • titleBar.inactiveBackground#01090b
  • titleBar.inactiveForeground#5a8790
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b8f96italic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.control, keyword.operator.expression, keyword.operator.logical#00ffa3
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#00e5ff
entity.name.function, support.function, entity.name.method, support.method, variable.function#bd00ff
string, punctuation.definition.string, string.quoted, string.template, string.regexp#0077ff
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.character.escape, constant.other, constant.other.color, support.constant#ff5f5f
variable, variable.other, variable.other.readwrite#7dffec
variable.parameter#b7ffe9
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.object.member#33c4ff
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.typeparameters#89b9c0
meta.annotation, punctuation.definition.annotation, entity.name.function.decorator, meta.decorator#00ffa3
invalid, invalid.illegal#ff5f5funderline