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—