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.activeBorder#00998B
  • activityBar.background#181818
  • activityBar.border#2E2E2E
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#8A8A8A
  • activityBarBadge.background#00998B
  • activityBarBadge.foreground#000000
  • badge.background#00998B
  • badge.foreground#000000
  • button.background#00998B
  • button.foreground#000000
  • button.hoverBackground#00B8A7
  • dropdown.background#181818
  • dropdown.foreground#D4D4D4
  • editor.background#1E1E1E
  • editor.findMatchBackground#00998B55
  • editor.findMatchHighlightBackground#00998B22
  • editor.foreground#D4D4D4
  • editor.selectionBackground#00998B44
  • editor.selectionHighlightBackground#00998B22
  • editor.wordHighlightBackground#00998B22
  • editorBracketMatch.background#00998B22
  • editorBracketMatch.border#00998B
  • editorCursor.foreground#00998B
  • editorGroup.border#2E2E2E
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2E2E2E
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#2E2E2E
  • editorIndentGuide.activeBackground1#00998B
  • editorIndentGuide.background1#2E2E2E
  • editorLineNumber.activeForeground#00998B
  • editorLineNumber.foreground#8A8A8A
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#2E2E2E
  • editorSuggestWidget.highlightForeground#00998B
  • editorSuggestWidget.selectedBackground#00998B33
  • editorWhitespace.foreground#2E2E2E
  • editorWidget.background#181818
  • editorWidget.border#2E2E2E
  • extensionButton.prominentBackground#00998B
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#00B8A7
  • focusBorder#00998B
  • gitDecoration.modifiedResourceForeground#00998B
  • input.background#181818
  • input.foreground#D4D4D4
  • input.placeholderForeground#8A8A8A
  • inputOption.activeBorder#00998B
  • list.activeSelectionBackground#00998B44
  • list.activeSelectionForeground#D4D4D4
  • list.focusOutline#00998B
  • list.highlightForeground#00998B
  • list.hoverBackground#181818
  • list.inactiveSelectionBackground#00998B22
  • minimap.findMatchHighlight#00998B
  • panel.background#1E1E1E
  • panel.border#2E2E2E
  • panelTitle.activeBorder#00998B
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#8A8A8A
  • peekView.border#00998B
  • progressBar.background#00998B
  • scrollbarSlider.activeBackground#00998BAA
  • scrollbarSlider.background#8A8A8A44
  • scrollbarSlider.hoverBackground#00998B66
  • sideBar.background#1E1E1E
  • sideBar.border#2E2E2E
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2E2E2E
  • sideBarSectionHeader.foreground#D4D4D4
  • sideBarTitle.foreground#B0B0B0
  • statusBar.background#00998B
  • statusBar.border#2E2E2E
  • statusBar.debuggingBackground#00B2A2
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#00B2A2
  • statusBarItem.hoverBackground#00998B33
  • statusBarItem.remoteBackground#00B2A2
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1E1E1E
  • tab.activeBorderTop#00998B
  • tab.activeForeground#D4D4D4
  • tab.border#2E2E2E
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#8A8A8A
  • terminal.background#1E1E1E
  • terminal.foreground#D4D4D4
  • terminalCursor.foreground#00998B
  • textLink.activeForeground#00B2A2
  • textLink.foreground#00998B
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#B0B0B0
  • titleBar.border#2E2E2E
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#8A8A8A
  • tree.indentGuidesStroke#2E2E2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#429C5Aitalic
string, punctuation.definition.string#FC4200
constant.numeric, constant.language, constant.character#AECC7E
keyword, keyword.control, storage, storage.type#00998B
entity.name.function, support.function#EAF00C
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#AEF6D8
variable, variable.parameter#7278F6
entity.name.tag, meta.tag#00998B
entity.other.attribute-name#7278F6
keyword.operator, punctuation#6CCCFC
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute#EAF00C
Backend Themes by StraightRight - VS Code Theme