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#66ffb3
  • activityBar.background#151311
  • activityBar.foreground#ff8a33
  • activityBar.inactiveForeground#8b817a
  • activityBarBadge.background#ff4d00
  • activityBarBadge.foreground#1a1816
  • badge.background#ff4d00
  • badge.foreground#1a1816
  • breadcrumb.activeSelectionForeground#ff8a33
  • breadcrumb.focusForeground#e6ded6
  • breadcrumb.foreground#b3a9a2
  • button.background#66ffb3
  • button.foreground#1a1816
  • button.hoverBackground#66ffb3d4
  • button.secondaryBackground#ff8a33
  • button.secondaryForeground#1a1816
  • button.secondaryHoverBackground#ff8a33d4
  • diffEditor.border#ff4d0026
  • diffEditor.insertedLineBackground#66ffb30f
  • diffEditor.insertedTextBackground#66ffb31f
  • diffEditor.removedLineBackground#ff4d000f
  • diffEditor.removedTextBackground#ff4d001f
  • dropdown.background#221f1c
  • dropdown.border#ff4d00
  • dropdown.foreground#e6ded6
  • editor.background#1a1816
  • editor.findMatchBackground#ff4d0050
  • editor.findMatchHighlightBackground#33c4ff26
  • editor.foreground#e6ded6
  • editor.lineHighlightBackground#ff4d0008
  • editor.lineHighlightBorder#ff4d0012
  • editor.selectionBackground#ff4d0026
  • editor.selectionHighlightBackground#66ffb31a
  • editor.wordHighlightBackground#66ffb31a
  • editor.wordHighlightStrongBackground#ff4d002b
  • editorBracketMatch.background#ff4d001a
  • editorBracketMatch.border#ff4d00
  • editorCursor.foreground#ff8a33
  • editorGroupHeader.tabsBackground#151311
  • editorGroupHeader.tabsBorder#ff4d0022
  • editorHoverWidget.background#221f1c
  • editorHoverWidget.border#ff8a33
  • editorIndentGuide.activeBackground#ff8a3352
  • editorIndentGuide.background#6f655f33
  • editorLineNumber.activeForeground#ff8a33
  • editorLineNumber.foreground#6f655f
  • editorSuggestWidget.background#221f1c
  • editorSuggestWidget.border#ff8a33
  • editorSuggestWidget.highlightForeground#ff4d00
  • editorSuggestWidget.selectedBackground#ff4d001a
  • editorWidget.background#221f1c
  • editorWidget.border#ff8a33
  • errorForeground#ff3b30
  • focusBorder#ff4d00
  • foreground#e6ded6
  • gitDecoration.addedResourceForeground#66ffb3
  • gitDecoration.conflictingResourceForeground#ff8a33
  • gitDecoration.deletedResourceForeground#ff4d00
  • gitDecoration.ignoredResourceForeground#8b817a
  • gitDecoration.modifiedResourceForeground#33c4ff
  • gitDecoration.untrackedResourceForeground#ffcc66
  • icon.foreground#e6ded6
  • input.background#221f1c
  • input.border#ff4d00
  • input.foreground#e6ded6
  • input.placeholderForeground#8b817a
  • inputOption.activeBackground#66ffb326
  • inputOption.activeBorder#66ffb3
  • inputValidation.errorBorder#ff3b30
  • inputValidation.infoBorder#33c4ff
  • inputValidation.warningBorder#ff8a33
  • list.activeSelectionBackground#ff4d0022
  • list.activeSelectionForeground#e6ded6
  • list.focusBackground#66ffb31a
  • list.focusOutline#66ffb3
  • list.highlightForeground#ff8a33
  • list.hoverBackground#66ffb30f
  • list.hoverForeground#e6ded6
  • list.inactiveSelectionBackground#ff4d0014
  • menu.background#221f1c
  • menu.border#ff8a33
  • menu.foreground#e6ded6
  • menu.selectionBackground#66ffb326
  • menu.selectionForeground#e6ded6
  • menu.separatorBackground#ff4d0033
  • minimap.errorHighlight#ff3b30a3
  • minimap.findMatchHighlight#ff4d005c
  • minimap.selectionHighlight#66ffb333
  • minimap.warningHighlight#ff8a33a3
  • minimapGutter.addedBackground#66ffb3
  • minimapGutter.deletedBackground#ff4d00
  • minimapGutter.modifiedBackground#33c4ff
  • notificationCenter.border#ff8a33
  • notificationLink.foreground#33c4ff
  • notifications.background#221f1c
  • notifications.border#ff8a33
  • notifications.foreground#e6ded6
  • notificationToast.border#ff8a33
  • panel.background#151311
  • panel.border#ff4d0022
  • panelTitle.activeBorder#66ffb3
  • panelTitle.activeForeground#e6ded6
  • panelTitle.inactiveForeground#b3a9a2
  • peekView.border#ff8a33
  • peekViewEditor.background#1a1816
  • peekViewResult.background#151311
  • peekViewResult.selectionBackground#66ffb326
  • peekViewTitle.background#221f1c
  • progressBar.background#66ffb3
  • scrollbarSlider.activeBackground#ff4d0052
  • scrollbarSlider.background#ff4d0026
  • scrollbarSlider.hoverBackground#ff4d003d
  • selection.background#ff4d0033
  • sideBar.background#151311
  • sideBar.border#ff4d0022
  • sideBar.foreground#e0d6ce
  • sideBarSectionHeader.background#1a1816
  • sideBarSectionHeader.border#ff4d0026
  • sideBarSectionHeader.foreground#ff8a33
  • sideBarTitle.foreground#ff8a33
  • statusBar.background#151311
  • statusBar.border#ff4d0022
  • statusBar.debuggingBackground#151311
  • statusBar.debuggingForeground#ff4d00
  • statusBar.foreground#e0d6ce
  • statusBar.noFolderBackground#151311
  • statusBar.noFolderForeground#b58cff
  • statusBarItem.hoverBackground#ff4d001a
  • statusBarItem.prominentBackground#66ffb322
  • tab.activeBackground#1a1816
  • tab.activeBorder#66ffb3
  • tab.activeForeground#e6ded6
  • tab.border#00000000
  • tab.hoverBackground#221f1c44
  • tab.hoverBorder#ff8a33
  • tab.inactiveBackground#151311
  • tab.inactiveForeground#b3a9a2
  • terminal.ansiBlack#2a2623
  • terminal.ansiBlue#33c4ff
  • terminal.ansiBrightBlack#6f655f
  • terminal.ansiBrightBlue#5ad4ff
  • terminal.ansiBrightCyan#7dffec
  • terminal.ansiBrightGreen#8affc6
  • terminal.ansiBrightMagenta#d0b8ff
  • terminal.ansiBrightRed#ff6b33
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd27a
  • terminal.ansiCyan#4dffe1
  • terminal.ansiGreen#66ffb3
  • terminal.ansiMagenta#b58cff
  • terminal.ansiRed#ff4d00
  • terminal.ansiWhite#e6ded6
  • terminal.ansiYellow#ffcc66
  • terminal.background#151311
  • terminal.foreground#e6ded6
  • terminal.selectionBackground#66ffb333
  • terminalCursor.foreground#ff8a33
  • titleBar.activeBackground#151311
  • titleBar.activeForeground#e6ded6
  • titleBar.border#ff4d0022
  • titleBar.inactiveBackground#151311
  • titleBar.inactiveForeground#8b817a
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b7a9aitalic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.control, keyword.operator.expression, keyword.operator.logical#ff4d00
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#b58cff
entity.name.function, support.function, entity.name.method, support.method, variable.function#33c4ff
string, punctuation.definition.string, string.quoted, string.template, string.regexp#66ffb3
constant.numeric, constant.language.boolean, constant.language.null#ffd27a
constant.language, constant.character.escape, constant.other, constant.other.color, support.constant#ff8a33
variable, variable.other, variable.other.readwrite#ffcc66
variable.parameter#ffe0a3
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.object.member#4dffe1
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.typeparameters#b3a9a2
meta.annotation, punctuation.definition.annotation, entity.name.function.decorator, meta.decorator#ff8a33
invalid, invalid.illegal#ff3b30underline