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.activeBackground#3B3B3B
  • activityBar.activeBorder#888787
  • activityBar.background#171717
  • activityBar.border#3B3B3B
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#888787
  • activityBarBadge.background#888787
  • activityBarBadge.foreground#171717
  • badge.background#888787
  • badge.foreground#171717
  • button.background#888787
  • button.foreground#171717
  • button.hoverBackground#FFFFFF30
  • button.secondaryBackground#3B3B3B
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#88878730
  • dropdown.background#101010
  • dropdown.border#3B3B3B
  • dropdown.foreground#FFFFFF
  • editor.background#171717
  • editor.findMatchBackground#FFFFFF50
  • editor.findMatchHighlightBackground#FFFFFF30
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#FFFFFF10
  • editor.lineHighlightBorder#FFFFFF05
  • editor.selectionHighlightBackground#88878720
  • editor.wordHighlightBackground#88878720
  • editor.wordHighlightStrongBackground#88878730
  • editorBracketMatch.background#88878720
  • editorBracketMatch.border#888787
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#3B3B3B
  • editorGroupHeader.tabsBackground#171717
  • editorGroupHeader.tabsBorder#3B3B3B
  • editorHoverWidget.background#101010
  • editorHoverWidget.border#3B3B3B
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#88878780
  • editorSuggestWidget.background#101010
  • editorSuggestWidget.border#3B3B3B
  • editorSuggestWidget.selectedBackground#3B3B3B
  • editorWidget.background#101010
  • editorWidget.border#3B3B3B
  • focusBorder#888787
  • foreground#FFFFFF
  • input.background#101010
  • input.border#3B3B3B
  • input.foreground#FFFFFF
  • input.placeholderForeground#888787
  • list.activeSelectionBackground#3B3B3B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3B3B3B
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#3B3B3B40
  • list.inactiveSelectionBackground#3B3B3B80
  • peekView.border#888787
  • peekViewEditor.background#101010
  • peekViewEditorGutter.background#101010
  • peekViewResult.background#171717
  • peekViewTitle.background#101010
  • progressBar.background#888787
  • quickInput.background#101010
  • quickInput.foreground#FFFFFF
  • scrollbarSlider.activeBackground#888787
  • scrollbarSlider.background#3B3B3B80
  • scrollbarSlider.hoverBackground#88878780
  • selection.background#88878740
  • sideBar.background#171717
  • sideBar.border#3B3B3B
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#3B3B3B
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#3B3B3B
  • statusBar.border#171717
  • statusBar.debuggingBackground#888787
  • statusBar.debuggingForeground#171717
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#171717
  • statusBarItem.hoverBackground#88878730
  • statusBarItem.prominentBackground#888787
  • statusBarItem.prominentHoverBackground#FFFFFF30
  • statusBarItem.remoteBackground#888787
  • statusBarItem.remoteForeground#171717
  • tab.activeBackground#3B3B3B
  • tab.activeBorder#888787
  • tab.activeBorderTop#888787
  • tab.activeForeground#FFFFFF
  • tab.border#101010
  • tab.hoverBackground#3B3B3B80
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#888787
  • tab.unfocusedActiveBorder#88878770
  • tab.unfocusedActiveBorderTop#88878770
  • terminal.ansiBlack#3B3B3B
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#888787
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFCB6B
  • terminal.background#171717
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#3B3B3B
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#888787

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888787italic
variable, string constant.other.placeholder#FFFFFF
keyword, storage.type, storage.modifier, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.control#AAAAAA
string, punctuation.definition.string#CCCCCC
constant.numeric#BBBBBB
entity.name.function, entity.name.class, entity.name.type, entity.other.inherited-class, support.function, support.class, support.type#FFFFFFbold
entity.name.tag, entity.other.attribute-name#999999
constant.language, support.constant, variable.language#AAAAAAitalic
punctuation#888787
Nuxtian by Mashed Potato Studios - VS Code Theme