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#d65d00
  • activityBar.background#0b0d0e
  • activityBar.foreground#6b00b8
  • activityBar.inactiveForeground#7e848a
  • activityBarBadge.background#0033ff
  • activityBarBadge.foreground#0f1112
  • badge.background#0033ff
  • badge.foreground#0f1112
  • breadcrumb.activeSelectionForeground#d65d00
  • breadcrumb.focusForeground#d7d5d2
  • breadcrumb.foreground#a9adb0
  • button.background#6b00b8
  • button.foreground#0f1112
  • button.hoverBackground#6b00b8d4
  • button.secondaryBackground#d65d00
  • button.secondaryForeground#0f1112
  • button.secondaryHoverBackground#d65d00d4
  • diffEditor.border#6b00b826
  • diffEditor.insertedLineBackground#0082820f
  • diffEditor.insertedTextBackground#0082821f
  • diffEditor.removedLineBackground#ff5a6a0f
  • diffEditor.removedTextBackground#ff5a6a1f
  • dropdown.background#15181a
  • dropdown.border#6b00b8
  • dropdown.foreground#d7d5d2
  • editor.background#0f1112
  • editor.findMatchBackground#0033ff40
  • editor.findMatchHighlightBackground#6b00b826
  • editor.foreground#d7d5d2
  • editor.lineHighlightBackground#ffffff06
  • editor.lineHighlightBorder#ffffff10
  • editor.selectionBackground#6b00b82b
  • editor.selectionHighlightBackground#0082821a
  • editor.wordHighlightBackground#0082821a
  • editor.wordHighlightStrongBackground#d65d001f
  • editorBracketMatch.background#6b00b81a
  • editorBracketMatch.border#6b00b8
  • editorCursor.foreground#d65d00
  • editorGroupHeader.tabsBackground#0c0e0f
  • editorGroupHeader.tabsBorder#6b00b822
  • editorHoverWidget.background#15181a
  • editorHoverWidget.border#6b00b8
  • editorIndentGuide.activeBackground#6b00b852
  • editorIndentGuide.background#3e424633
  • editorLineNumber.activeForeground#d65d00
  • editorLineNumber.foreground#3e4246
  • editorSuggestWidget.background#15181a
  • editorSuggestWidget.border#6b00b8
  • editorSuggestWidget.highlightForeground#d65d00
  • editorSuggestWidget.selectedBackground#6b00b81a
  • editorWidget.background#15181a
  • editorWidget.border#6b00b8
  • errorForeground#ff5a6a
  • focusBorder#6b00b8
  • foreground#d7d5d2
  • gitDecoration.addedResourceForeground#008282
  • gitDecoration.conflictingResourceForeground#d65d00
  • gitDecoration.deletedResourceForeground#ff5a6a
  • gitDecoration.ignoredResourceForeground#7e848a
  • gitDecoration.modifiedResourceForeground#0033ff
  • gitDecoration.untrackedResourceForeground#d65d00
  • icon.foreground#d7d5d2
  • input.background#15181a
  • input.border#6b00b8
  • input.foreground#d7d5d2
  • input.placeholderForeground#7e848a
  • inputOption.activeBackground#0033ff26
  • inputOption.activeBorder#0033ff
  • inputValidation.errorBorder#ff5a6a
  • inputValidation.infoBorder#6b00b8
  • inputValidation.warningBorder#d65d00
  • list.activeSelectionBackground#6b00b822
  • list.activeSelectionForeground#d7d5d2
  • list.focusBackground#6b00b81a
  • list.focusOutline#6b00b8
  • list.highlightForeground#0033ff
  • list.hoverBackground#00828212
  • list.hoverForeground#d7d5d2
  • list.inactiveSelectionBackground#6b00b814
  • menu.background#15181a
  • menu.border#6b00b8
  • menu.foreground#d7d5d2
  • menu.selectionBackground#6b00b826
  • menu.selectionForeground#d7d5d2
  • menu.separatorBackground#6b00b833
  • minimap.errorHighlight#ff5a6aa3
  • minimap.findMatchHighlight#0033ff5c
  • minimap.selectionHighlight#6b00b833
  • minimap.warningHighlight#d65d00a3
  • minimapGutter.addedBackground#008282
  • minimapGutter.deletedBackground#ff5a6a
  • minimapGutter.modifiedBackground#0033ff
  • notificationCenter.border#6b00b8
  • notificationLink.foreground#0033ff
  • notifications.background#15181a
  • notifications.border#6b00b8
  • notifications.foreground#d7d5d2
  • notificationToast.border#6b00b8
  • panel.background#0c0e0f
  • panel.border#6b00b822
  • panelTitle.activeBorder#d65d00
  • panelTitle.activeForeground#d7d5d2
  • panelTitle.inactiveForeground#a9adb0
  • peekView.border#6b00b8
  • peekViewEditor.background#0f1112
  • peekViewResult.background#0c0e0f
  • peekViewResult.selectionBackground#6b00b826
  • peekViewTitle.background#15181a
  • progressBar.background#d65d00
  • scrollbarSlider.activeBackground#6b00b852
  • scrollbarSlider.background#6b00b826
  • scrollbarSlider.hoverBackground#6b00b83d
  • selection.background#6b00b833
  • sideBar.background#0c0e0f
  • sideBar.border#6b00b822
  • sideBar.foreground#cfd0d0
  • sideBarSectionHeader.background#0f1112
  • sideBarSectionHeader.border#6b00b826
  • sideBarSectionHeader.foreground#d65d00
  • sideBarTitle.foreground#d65d00
  • statusBar.background#0c0e0f
  • statusBar.border#6b00b822
  • statusBar.debuggingBackground#0c0e0f
  • statusBar.debuggingForeground#d65d00
  • statusBar.foreground#cfd0d0
  • statusBar.noFolderBackground#0c0e0f
  • statusBar.noFolderForeground#a9adb0
  • statusBarItem.hoverBackground#6b00b81a
  • statusBarItem.prominentBackground#0033ff22
  • tab.activeBackground#0f1112
  • tab.activeBorder#d65d00
  • tab.activeForeground#d7d5d2
  • tab.border#00000000
  • tab.hoverBackground#15181a44
  • tab.hoverBorder#008282
  • tab.inactiveBackground#0c0e0f
  • tab.inactiveForeground#a9adb0
  • terminal.ansiBlack#15181a
  • terminal.ansiBlue#0033ff
  • terminal.ansiBrightBlack#3e4246
  • terminal.ansiBrightBlue#4d70ff
  • terminal.ansiBrightCyan#55c4c4
  • terminal.ansiBrightGreen#33a7a7
  • terminal.ansiBrightMagenta#a062ff
  • terminal.ansiBrightRed#ff7a84
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e07b33
  • terminal.ansiCyan#008282
  • terminal.ansiGreen#008282
  • terminal.ansiMagenta#6b00b8
  • terminal.ansiRed#ff5a6a
  • terminal.ansiWhite#d7d5d2
  • terminal.ansiYellow#d65d00
  • terminal.background#0c0e0f
  • terminal.foreground#d7d5d2
  • terminal.selectionBackground#6b00b833
  • terminalCursor.foreground#d65d00
  • titleBar.activeBackground#0c0e0f
  • titleBar.activeForeground#d7d5d2
  • titleBar.border#6b00b822
  • titleBar.inactiveBackground#0c0e0f
  • titleBar.inactiveForeground#7e848a
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f7276italic
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#6b00b8—
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#cfd0d0—
entity.name.function, support.function, entity.name.method, support.method, variable.function#d65d00—
string, punctuation.definition.string, string.quoted, string.template, string.regexp#008282—
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.character.escape, constant.other, support.constant#0033ff—
variable, variable.other, variable.other.readwrite#d7d5d2—
variable.parameter#d65d00—
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.object.member#008282—
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.typeparameters#a9adb0—
invalid, invalid.illegal#ff5a6aunderline