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#232526
  • activityBar.foreground#cccccc
  • badge.background#2c2c32
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#181a1b
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cccccc
  • breadcrumbPicker.background#232526
  • button.background#20577a
  • button.foreground#fdf6e3
  • button.hoverBackground#163d56
  • button.secondaryBackground#586e75
  • button.secondaryForeground#fdf6e3
  • button.secondaryHoverBackground#657b83
  • debugConsole.errorForeground#dc322f
  • debugConsole.infoForeground#268bd2
  • debugConsole.sourceForeground#93a1a1
  • debugConsole.warningForeground#b58900
  • editor.background#001e28
  • editor.findMatchBackground#b5890020
  • editor.findMatchBorder#b58900
  • editor.findMatchHighlightBackground#b5890020
  • editor.findMatchHighlightBorder#b58900
  • editor.foreground#839496
  • editor.hoverHighlightBackground#22442240
  • editor.inactiveSelectionBackground#ffffff25
  • editor.lineHighlightBorder#586e7540
  • editor.selectionBackground#ffffff20
  • editor.wordHighlightBackground#83949620
  • editor.wordHighlightBorder#424577
  • editorCursor.foreground#93a1a1
  • editorError.foreground#dc322f
  • editorGroupHeader.tabsBackground#232526
  • editorInfo.foreground#268bd2
  • editorLineNumber.foreground#586e75
  • editorWarning.foreground#b58900
  • editorWidget.background#232526
  • editorWidget.border#2c2c32
  • input.background#232526
  • input.border#2c2c32
  • input.foreground#cccccc
  • list.activeSelectionBackground#232526
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#ffffff20
  • panel.background#181a1b
  • panel.border#2c2c32
  • panelTitle.activeBorder#2c2c32
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#cccccc
  • problemsErrorIcon.foreground#dc322f
  • problemsInfoIcon.foreground#268bd2
  • problemsWarningIcon.foreground#b58900
  • quickInput.background#232526
  • quickInput.foreground#cccccc
  • quickInputList.focusBackground#163d56
  • quickInputList.focusForeground#fdf6e3
  • selection.background#073642
  • sideBar.background#181a1b
  • sideBar.border#2c2c32
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#232526
  • sideBarSectionHeader.border#2c2c32
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#00161a
  • statusBar.foreground#fdf6e3
  • statusBar.noFolderBackground#00161a
  • statusBar.noFolderForeground#fdf6e3
  • statusBarItem.prominentBackground#20577a
  • statusBarItem.prominentForeground#fdf6e3
  • statusBarItem.prominentHoverBackground#2a6b8c
  • statusBarItem.prominentHoverForeground#fdf6e3
  • statusBarItem.remoteBackground#20577a
  • statusBarItem.remoteForeground#fdf6e3
  • statusBarItem.remoteHoverBackground#2a6b8c
  • statusBarItem.remoteHoverForeground#fdf6e3
  • tab.activeBackground#181a1b
  • tab.activeBorder#4f8fb9
  • tab.activeForeground#ffffff
  • tab.border#2c2c32
  • tab.inactiveBackground#232526
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#00161a
  • terminal.foreground#839496
  • terminalCursor.background#93a1a1
  • terminalCursor.foreground#93a1a1
  • textLink.activeForeground#b58900
  • textLink.foreground#cb4b16
  • titleBar.activeBackground#232526
  • titleBar.activeForeground#cccccc
  • titleBar.border#2c2c32
  • titleBar.inactiveBackground#181a1b
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#859900italic
keyword#B58900
storage.type, storage.modifier#B58900
entity.name.namespace#6C6FC4
meta.function.call#6C6FC4
constant.other#6C6FC4
entity.name.function.macro#CB4B16
keyword.control#859900
keyword.operator#839496
string, string.quoted#2AA198
constant.numeric, constant.language#CB4B16
constant.character.escape#2AA198bold
entity.name.function, support.function#2AA198
entity.name.type, entity.name.class, support.type, support.class#B58900
entity.name.type#CB4B16
entity.name.type.class.abstractitalic
entity.name.type.resultitalic
variable, support.variable#839496
variable.parameter#CB4B16
entity.name.tag#268BD2bold
entity.other.attribute-name#657B83
meta.annotation, storage.type.annotation#859900
entity.name.function.decorator, meta.decorator#6C6FC4
constant.language.boolean#268BD2
invalid, invalid.illegal#DC322F
invalid.deprecated#DC322Fstrikethrough
markup.heading#CB4B16bold
markup.boldbold
markup.italicitalic
markup.underline.link#268BD2
punctuation.definition.string.begin, punctuation.definition.string.end#2AA198
punctuation#859900