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#151109
  • activityBar.foreground#E6D5A9
  • activityBar.inactiveForeground#928463
  • activityBarBadge.background#E08A35
  • activityBarBadge.foreground#1B1710
  • badge.background#362E20
  • badge.foreground#E6D5A9
  • breadcrumb.focusForeground#E6D5A9
  • breadcrumb.foreground#928463
  • button.background#E08A35
  • button.foreground#1B1710
  • button.hoverBackground#D2A855
  • diffEditor.insertedTextBackground#98A96722
  • diffEditor.removedTextBackground#CC634122
  • dropdown.background#272117
  • dropdown.border#362E20
  • dropdown.foreground#E6D5A9
  • editor.background#1B1710
  • editor.findMatchBackground#D2A85555
  • editor.findMatchHighlightBackground#D2A85533
  • editor.foreground#E6D5A9
  • editor.inactiveSelectionBackground#272117
  • editor.lineHighlightBackground#27211780
  • editor.selectionBackground#362E20
  • editorBracketHighlight.foreground1#C6B287
  • editorBracketHighlight.foreground2#D2A855
  • editorBracketHighlight.foreground3#C9D2D4
  • editorBracketHighlight.foreground4#C6B287
  • editorBracketHighlight.foreground5#D2A855
  • editorBracketHighlight.foreground6#C9D2D4
  • editorBracketHighlight.unexpectedBracket.foreground#CC6341
  • editorBracketMatch.border#C9D2D4
  • editorCursor.foreground#E6D5A9
  • editorError.foreground#CC6341
  • editorGroupHeader.tabsBackground#151109
  • editorGutter.addedBackground#98A967
  • editorGutter.deletedBackground#CC6341
  • editorGutter.modifiedBackground#D2A855
  • editorHint.foreground#C9D2D4
  • editorHoverWidget.background#272117
  • editorHoverWidget.border#362E20
  • editorIndentGuide.activeBackground1#362E20
  • editorIndentGuide.background1#272117
  • editorInfo.foreground#5D9BC8
  • editorLineNumber.activeForeground#D2A855
  • editorLineNumber.foreground#928463
  • editorWarning.foreground#D2A855
  • editorWhitespace.foreground#362E20
  • editorWidget.background#272117
  • editorWidget.border#362E20
  • focusBorder#362E20
  • gitDecoration.addedResourceForeground#98A967
  • gitDecoration.deletedResourceForeground#CC6341
  • gitDecoration.ignoredResourceForeground#928463
  • gitDecoration.modifiedResourceForeground#D2A855
  • gitDecoration.untrackedResourceForeground#7FAC7C
  • input.background#151109
  • input.border#362E20
  • input.foreground#E6D5A9
  • input.placeholderForeground#928463
  • list.activeSelectionBackground#362E20
  • list.activeSelectionForeground#E6D5A9
  • list.highlightForeground#D2A855
  • list.hoverBackground#272117
  • list.inactiveSelectionBackground#272117
  • menu.background#272117
  • menu.foreground#E6D5A9
  • menu.selectionBackground#362E20
  • notifications.background#272117
  • notifications.foreground#E6D5A9
  • panel.background#1B1710
  • panel.border#362E20
  • panelTitle.activeBorder#E08A35
  • panelTitle.activeForeground#E6D5A9
  • peekView.border#362E20
  • peekViewEditor.background#151109
  • peekViewResult.background#151109
  • quickInput.background#272117
  • quickInputList.focusBackground#362E20
  • scrollbarSlider.background#272117AA
  • scrollbarSlider.hoverBackground#362E20AA
  • selection.background#362E20
  • sideBar.background#151109
  • sideBar.foreground#C6B287
  • sideBarSectionHeader.background#151109
  • sideBarTitle.foreground#E6D5A9
  • statusBar.background#151109
  • statusBar.debuggingBackground#CC6341
  • statusBar.debuggingForeground#1B1710
  • statusBar.foreground#C6B287
  • statusBar.noFolderBackground#151109
  • tab.activeBackground#1B1710
  • tab.activeBorderTop#E08A35
  • tab.activeForeground#E6D5A9
  • tab.inactiveBackground#151109
  • tab.inactiveForeground#928463
  • terminal.ansiBlack#272117
  • terminal.ansiBlue#5D9BC8
  • terminal.ansiBrightBlack#928463
  • terminal.ansiBrightBlue#5D9BC8
  • terminal.ansiBrightCyan#C9D2D4
  • terminal.ansiBrightGreen#98A967
  • terminal.ansiBrightMagenta#A188CC
  • terminal.ansiBrightRed#CC6341
  • terminal.ansiBrightWhite#E6D5A9
  • terminal.ansiBrightYellow#D2A855
  • terminal.ansiCyan#C9D2D4
  • terminal.ansiGreen#98A967
  • terminal.ansiMagenta#A188CC
  • terminal.ansiRed#CC6341
  • terminal.ansiWhite#C6B287
  • terminal.ansiYellow#D2A855
  • terminal.background#1B1710
  • terminal.foreground#E6D5A9
  • titleBar.activeBackground#151109
  • titleBar.activeForeground#C6B287
  • titleBar.inactiveBackground#151109
  • titleBar.inactiveForeground#928463
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928463italic
string, string.quoted, punctuation.definition.string#7FAC7C
constant.character.escape, string.regexp#C9D2D4
constant.numeric#D2A855
constant.language, constant.other, variable.other.constant#D2A855
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression#E08A35
keyword.operator#C6B287
entity.name.function, support.function, meta.function-call entity.name.function#5D9BC8
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#E6D5A9
variable.parameter#C6B287italic
variable.other.property, meta.object-literal.key, support.type.property-name#E6D5A9
entity.name.tag#E08A35
entity.other.attribute-name#C6B287italic
punctuation, meta.brace#C6B287
keyword.control.exception, keyword.control.trycatch#CC6341
variable.language#C9D2D4italic
invalid, invalid.illegal#CC6341
markup.heading, entity.name.section#E08A35bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#7FAC7C
markup.underline.link#5D9BC8
markup.inserted#98A967
markup.deleted#CC6341
markup.changed#D2A855