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#100B07
  • activityBar.border#2A1A08
  • activityBar.foreground#F5E8D0
  • activityBar.inactiveForeground#6B5040
  • activityBarBadge.background#FF6B1A
  • activityBarBadge.foreground#0F0C09
  • badge.background#FF6B1A
  • badge.foreground#0F0C09
  • breadcrumb.activeSelectionForeground#F5E8D0
  • breadcrumb.focusForeground#F5E8D0
  • breadcrumb.foreground#6B5040
  • button.background#FF6B1A
  • button.foreground#0F0C09
  • button.hoverBackground#FF9050
  • descriptionForeground#6B5040
  • diffEditor.insertedLineBackground#1A2808
  • diffEditor.insertedTextBackground#88C06033
  • diffEditor.modifiedTextBackground#281808
  • diffEditor.removedLineBackground#300808
  • diffEditor.removedTextBackground#FF282033
  • dropdown.background#1E1408
  • dropdown.border#2A1A08
  • dropdown.foreground#F5E8D0
  • editor.background#0F0C09
  • editor.findMatchBackground#F5C04055
  • editor.findMatchBorder#F5C040
  • editor.findMatchHighlightBackground#F5C04033
  • editor.foreground#F5E8D0
  • editor.hoverHighlightBackground#2A180855
  • editor.inactiveSelectionBackground#1E1005
  • editor.lineHighlightBackground#181008
  • editor.selectionBackground#2A1808
  • editor.selectionHighlightBackground#2A180855
  • editor.wordHighlightBackground#2A180866
  • editor.wordHighlightStrongBackground#2A180899
  • editorBracketHighlight.foreground1#FF6B1A
  • editorBracketHighlight.foreground2#F5C040
  • editorBracketHighlight.foreground3#E8A020
  • editorBracketHighlight.foreground4#FF8A4C
  • editorBracketMatch.background#FF6B1A33
  • editorBracketMatch.border#FF6B1A
  • editorCursor.foreground#FF6B1A
  • editorError.foreground#FF2820
  • editorGroup.border#2A1A08
  • editorGroupHeader.tabsBackground#150E0A
  • editorGroupHeader.tabsBorder#2A1A08
  • editorGutter.addedBackground#88C060
  • editorGutter.deletedBackground#FF2820
  • editorGutter.modifiedBackground#F5C040
  • editorHint.foreground#88C060
  • editorIndentGuide.activeBackground1#4A3010
  • editorIndentGuide.background1#2A1A08
  • editorInfo.foreground#E8B840
  • editorLineNumber.activeForeground#F5E8D0
  • editorLineNumber.foreground#6B5040
  • editorLink.activeForeground#FF8A4C
  • editorWarning.foreground#F5C040
  • errorForeground#FF2820
  • focusBorder#FF6B1A
  • foreground#F5E8D0
  • gitDecoration.addedResourceForeground#88C060
  • gitDecoration.deletedResourceForeground#FF2820
  • gitDecoration.ignoredResourceForeground#6B5040
  • gitDecoration.modifiedResourceForeground#F5C040
  • gitDecoration.untrackedResourceForeground#906840
  • icon.foreground#F5E8D0
  • input.background#1E1408
  • input.border#2A1A08
  • input.foreground#F5E8D0
  • input.placeholderForeground#6B5040
  • list.activeSelectionBackground#2A1808
  • list.activeSelectionForeground#F5E8D0
  • list.deemphasizedForeground#C8A870
  • list.focusOutline#FF6B1A
  • list.hoverBackground#181008
  • list.hoverForeground#F5E8D0
  • list.inactiveSelectionBackground#1E1005
  • list.inactiveSelectionForeground#F5E8D0
  • minimap.findMatchHighlight#F5C04055
  • minimap.selectionHighlight#2A1808
  • notificationCenterHeader.background#0F0C09
  • notifications.background#150E0A
  • notifications.border#2A1A08
  • notifications.foreground#F5E8D0
  • panel.background#150E0A
  • panel.border#2A1A08
  • panelTitle.activeForeground#F5E8D0
  • panelTitle.inactiveForeground#6B5040
  • peekView.border#FF6B1A
  • peekViewEditor.background#150E0A
  • peekViewResult.background#150E0A
  • peekViewTitle.background#0F0C09
  • progressBar.background#FF6B1A
  • scrollbarSlider.activeBackground#7A5030
  • scrollbarSlider.background#3A2010
  • scrollbarSlider.hoverBackground#5A3820
  • sideBar.background#150E0A
  • sideBar.border#2A1A08
  • sideBar.foreground#F5E8D0
  • sideBarSectionHeader.background#0F0C09
  • sideBarSectionHeader.foreground#F5E8D0
  • sideBarTitle.foreground#F5E8D0
  • statusBar.background#100B07
  • statusBar.border#2A1A08
  • statusBar.debuggingBackground#FF6B1A
  • statusBar.foreground#F5E8D0
  • statusBar.noFolderBackground#100B07
  • tab.activeBackground#0F0C09
  • tab.activeBorder#FF6B1A
  • tab.activeForeground#F5E8D0
  • tab.border#2A1A08
  • tab.inactiveBackground#150E0A
  • tab.inactiveForeground#C8A870
  • terminal.ansiBlack#0F0C09
  • terminal.ansiBlue#E8B840
  • terminal.ansiBrightBlack#6B5040
  • terminal.ansiBrightBlue#F8C860
  • terminal.ansiBrightCyan#FFA060
  • terminal.ansiBrightGreen#A8D878
  • terminal.ansiBrightMagenta#F8B840
  • terminal.ansiBrightRed#FF5040
  • terminal.ansiBrightWhite#FFF0D8
  • terminal.ansiBrightYellow#FFD860
  • terminal.ansiCyan#FF8A4C
  • terminal.ansiGreen#88C060
  • terminal.ansiMagenta#E8A020
  • terminal.ansiRed#FF2820
  • terminal.ansiWhite#F5E8D0
  • terminal.ansiYellow#F5C040
  • terminal.background#0F0C09
  • terminal.foreground#F5E8D0
  • titleBar.activeBackground#130D09
  • titleBar.activeForeground#F5E8D0
  • titleBar.border#2A1A08
  • titleBar.inactiveBackground#130D09
  • titleBar.inactiveForeground#C8A870
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B5040italic
string, string.quoted, string.template#88C060
constant.numeric#FF4A1A
constant.language, constant.language.null#FF4A1A
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator#E8A020
keyword.operator#C8A870
storage.type#F5C040
constant.language.boolean#FF4A1A
string.regexp#FF2820
entity.name.function, support.function, meta.function-call#FF6B1A
entity.name.type, entity.name.class, support.type, support.class#F5C040
variable, variable.other, variable.parameter#F0D8B0
entity.name.tag, meta.tag#E8A020
entity.other.attribute-name#E0A050
constant.character.escape#FF6B1A
invalid, invalid.illegal#FF2820
markup.heading#FF6B1Abold
markup.bold#F5E8D0bold
markup.italic#E0A050italic
markup.underline.link, string.other.link#FF8A4C
markup.inline.raw, markup.fenced_code#F5C040
markup.fenced_code
markup.quote#6B5040italic
markup.list, punctuation.definition.list#E8A020
markup.inserted#88C060
markup.deleted#FF2820
punctuation, meta.brace#C8A870