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#150E12
  • activityBar.foreground#F2E2B8
  • activityBar.inactiveForeground#9A8781
  • activityBarBadge.background#EFB63B
  • activityBarBadge.foreground#1D1318
  • badge.background#3A2730
  • badge.foreground#F2E2B8
  • breadcrumb.focusForeground#F2E2B8
  • breadcrumb.foreground#9A8781
  • button.background#EFB63B
  • button.foreground#1D1318
  • button.hoverBackground#D4A63F
  • diffEditor.insertedTextBackground#99A75E22
  • diffEditor.removedTextBackground#CE5B6B22
  • dropdown.background#2A1C22
  • dropdown.border#3A2730
  • dropdown.foreground#F2E2B8
  • editor.background#1D1318
  • editor.findMatchBackground#5A4526
  • editor.findMatchBorder#EFB63B
  • editor.findMatchHighlightBackground#5A4526
  • editor.foldBackground#5A452660
  • editor.foreground#F2E2B8
  • editor.inactiveSelectionBackground#5A452680
  • editor.lineHighlightBackground#2A1C2280
  • editor.selectionBackground#5A4526
  • editorBracketHighlight.foreground1#B99441
  • editorBracketHighlight.foreground2#D4A63F
  • editorBracketHighlight.foreground3#87A0AD
  • editorBracketHighlight.foreground4#B99441
  • editorBracketHighlight.foreground5#D4A63F
  • editorBracketHighlight.foreground6#87A0AD
  • editorBracketHighlight.unexpectedBracket.foreground#CE5B6B
  • editorBracketMatch.border#87A0AD
  • editorCursor.foreground#EFB63B
  • editorError.foreground#CE5B6B
  • editorGroupHeader.tabsBackground#150E12
  • editorGutter.addedBackground#99A75E
  • editorGutter.deletedBackground#CE5B6B
  • editorGutter.modifiedBackground#D4A63F
  • editorHint.foreground#87A0AD
  • editorHoverWidget.background#2A1C22
  • editorHoverWidget.border#3A2730
  • editorIndentGuide.activeBackground1#3A2730
  • editorIndentGuide.background1#2A1C22
  • editorInfo.foreground#7290D9
  • editorLineNumber.activeForeground#EFB63B
  • editorLineNumber.foreground#9A8781
  • editorWarning.foreground#D4A63F
  • editorWhitespace.foreground#3A2730
  • editorWidget.background#2A1C22
  • editorWidget.border#3A2730
  • focusBorder#D4A63F
  • gitDecoration.addedResourceForeground#99A75E
  • gitDecoration.deletedResourceForeground#CE5B6B
  • gitDecoration.ignoredResourceForeground#9A8781
  • gitDecoration.modifiedResourceForeground#D4A63F
  • gitDecoration.untrackedResourceForeground#53A874
  • input.background#150E12
  • input.border#3A2730
  • input.foreground#F2E2B8
  • input.placeholderForeground#9A8781
  • list.activeSelectionBackground#3A2730
  • list.activeSelectionForeground#F2E2B8
  • list.highlightForeground#D4A63F
  • list.hoverBackground#2A1C22
  • list.inactiveSelectionBackground#2A1C22
  • menu.background#2A1C22
  • menu.foreground#F2E2B8
  • menu.selectionBackground#3A2730
  • notifications.background#2A1C22
  • notifications.foreground#F2E2B8
  • panel.background#1D1318
  • panel.border#3A2730
  • panelTitle.activeBorder#EFB63B
  • panelTitle.activeForeground#F2E2B8
  • peekView.border#3A2730
  • peekViewEditor.background#150E12
  • peekViewResult.background#150E12
  • quickInput.background#2A1C22
  • quickInputList.focusBackground#3A2730
  • scrollbarSlider.background#2A1C22AA
  • scrollbarSlider.hoverBackground#3A2730AA
  • selection.background#3A2730
  • sideBar.background#150E12
  • sideBar.foreground#CFBC96
  • sideBarSectionHeader.background#150E12
  • sideBarTitle.foreground#F2E2B8
  • statusBar.background#150E12
  • statusBar.debuggingBackground#CE5B6B
  • statusBar.debuggingForeground#1D1318
  • statusBar.foreground#D4A63F
  • statusBar.noFolderBackground#150E12
  • tab.activeBackground#1D1318
  • tab.activeBorderTop#EFB63B
  • tab.activeForeground#F2E2B8
  • tab.inactiveBackground#150E12
  • tab.inactiveForeground#9A8781
  • terminal.ansiBlack#2A1C22
  • terminal.ansiBlue#7290D9
  • terminal.ansiBrightBlack#9A8781
  • terminal.ansiBrightBlue#7290D9
  • terminal.ansiBrightCyan#87A0AD
  • terminal.ansiBrightGreen#99A75E
  • terminal.ansiBrightMagenta#A188CC
  • terminal.ansiBrightRed#CE5B6B
  • terminal.ansiBrightWhite#F2E2B8
  • terminal.ansiBrightYellow#D4A63F
  • terminal.ansiCyan#87A0AD
  • terminal.ansiGreen#99A75E
  • terminal.ansiMagenta#A188CC
  • terminal.ansiRed#CE5B6B
  • terminal.ansiWhite#CFBC96
  • terminal.ansiYellow#D4A63F
  • terminal.background#1D1318
  • terminal.foreground#F2E2B8
  • titleBar.activeBackground#150E12
  • titleBar.activeForeground#CFBC96
  • titleBar.inactiveBackground#150E12
  • titleBar.inactiveForeground#9A8781
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9A8781italic
string, string.quoted, punctuation.definition.string#53A874
constant.character.escape, string.regexp#87A0AD
constant.numeric#D4A63F
constant.language, constant.other, variable.other.constant#EFB63B
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression#EFB63Bbold
keyword.operator#CFBC96
entity.name.function, support.function, meta.function-call entity.name.function#7290D9
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace#A188CC
support.type.primitive, keyword.type#A188CCitalic
variable, meta.definition.variable, variable.other.readwrite#F2E2B8
variable.parameter#CFBC96italic
variable.other.property, meta.object-literal.key, support.type.property-name#F2E2B8
entity.name.tag#EFB63B
entity.other.attribute-name#CFBC96italic
punctuation, meta.brace#CFBC96
keyword.control.exception, keyword.control.trycatch#CE5B6B
variable.language#87A0ADitalic
invalid, invalid.illegal#CE5B6B
markup.heading, entity.name.section#EFB63Bbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#53A874
markup.underline.link#7290D9
markup.inserted#99A75E
markup.deleted#CE5B6B
markup.changed#D4A63F
keyword.operator#B99441
punctuation.separator, punctuation.terminator, meta.brace#B99441
variable.other.constant, constant.other#EFB63B