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#1d2021
  • activityBar.foreground#b8bb26
  • activityBar.inactiveForeground#665c54
  • activityBarBadge.background#b8bb26
  • activityBarBadge.foreground#282828
  • badge.background#b8bb26
  • badge.foreground#282828
  • button.background#b8bb26
  • button.foreground#282828
  • button.hoverBackground#98971a
  • debugToolBar.background#1d2021
  • debugToolBar.border#504945
  • editor.background#282828
  • editor.findMatchBackground#fabd2f99
  • editor.findMatchHighlightBackground#fabd2f55
  • editor.foreground#ebdbb2
  • editor.inactiveSelectionBackground#3c3836
  • editor.lineHighlightBackground#3c3836
  • editor.selectionBackground#504945
  • editor.wordHighlightBackground#50494599
  • editor.wordHighlightStrongBackground#504945cc
  • editorBracketMatch.background#504945
  • editorBracketMatch.border#b8bb26
  • editorCursor.foreground#fbf1c7
  • editorError.foreground#fb4934
  • editorGroupHeader.tabsBackground#1d2021
  • editorHint.foreground#8ec07c
  • editorIndentGuide.activeBackground#504945
  • editorIndentGuide.background#3c3836
  • editorInfo.foreground#83a598
  • editorLineNumber.activeForeground#ebdbb2
  • editorLineNumber.foreground#665c54
  • editorSuggestWidget.background#1d2021
  • editorSuggestWidget.border#504945
  • editorSuggestWidget.selectedBackground#504945
  • editorWarning.foreground#fabd2f
  • editorWhitespace.foreground#504945
  • editorWidget.background#1d2021
  • editorWidget.border#504945
  • extensionButton.prominentBackground#b8bb26
  • extensionButton.prominentForeground#282828
  • extensionButton.prominentHoverBackground#98971a
  • gitDecoration.conflictingResourceForeground#d3869b
  • gitDecoration.deletedResourceForeground#fb4934
  • gitDecoration.ignoredResourceForeground#665c54
  • gitDecoration.modifiedResourceForeground#fabd2f
  • gitDecoration.untrackedResourceForeground#b8bb26
  • input.background#282828
  • input.border#504945
  • input.foreground#ebdbb2
  • inputOption.activeBackground#504945
  • inputOption.activeForeground#fbf1c7
  • list.activeSelectionBackground#504945
  • list.activeSelectionForeground#fbf1c7
  • list.hoverBackground#3c3836
  • list.hoverForeground#fbf1c7
  • list.inactiveSelectionBackground#3c3836
  • notificationCenter.border#504945
  • notifications.background#1d2021
  • notifications.border#504945
  • notificationToast.border#504945
  • panel.background#1d2021
  • panel.border#282828
  • panelTitle.activeBorder#b8bb26
  • panelTitle.activeForeground#fbf1c7
  • panelTitle.inactiveForeground#665c54
  • peekViewEditor.background#1d2021
  • peekViewResult.background#1d2021
  • peekViewTitle.background#282828
  • pickerGroup.border#504945
  • pickerGroup.foreground#b8bb26
  • scrollbarSlider.activeBackground#665c54
  • scrollbarSlider.background#50494580
  • scrollbarSlider.hoverBackground#504945
  • sideBar.background#1d2021
  • sideBar.foreground#ebdbb2
  • sideBarSectionHeader.background#282828
  • sideBarSectionHeader.foreground#b8bb26
  • sideBarTitle.foreground#fbf1c7
  • statusBar.background#1d2021
  • statusBar.debuggingBackground#fb4934
  • statusBar.debuggingForeground#fbf1c7
  • statusBar.foreground#ebdbb2
  • statusBar.noFolderBackground#1d2021
  • tab.activeBackground#282828
  • tab.activeForeground#fbf1c7
  • tab.border#1d2021
  • tab.inactiveBackground#1d2021
  • tab.inactiveForeground#665c54
  • terminal.ansiBlack#282828
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#282828
  • terminal.foreground#ebdbb2
  • titleBar.activeBackground#1d2021
  • titleBar.activeForeground#fbf1c7
  • titleBar.inactiveBackground#1d2021
  • titleBar.inactiveForeground#665c54

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928374italic
keyword, storage.type, storage.modifier#fb4934
keyword.control, keyword.operator#fb4934
string, string.quoted#b8bb26
constant.numeric, constant.language#d3869b
constant.character.escape#fe8019
entity.name.function, support.function#b8bb26
entity.name.class, entity.name.type, support.class#fabd2f
variable, variable.other#ebdbb2
variable.parameter#fe8019
entity.name.tag#83a598
entity.other.attribute-name#fabd2f
support.type.property-name#83a598
markup.heading#fabd2fbold
markup.bold#fe8019bold
markup.italic#d3869bitalic
markup.underlineunderline
markup.inline.raw#b8bb26
punctuation.definition.tag#928374
meta.function-call#8ec07c
invalid#fb4934
Smit Dark Theme by Smit Dudhat - VS Code Theme