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#D4A017
  • activityBar.background#212638
  • activityBar.foreground#D4C9B4
  • activityBarBadge.background#A67C00
  • activityBarBadge.foreground#1B1F2B
  • badge.background#5C3A31
  • badge.foreground#E0E2EB
  • button.background#D4A017
  • button.foreground#1B1F2B
  • button.hoverBackground#C0901F
  • dropdown.background#212638
  • dropdown.border#2C3A4D
  • dropdown.foreground#E0E2EB
  • editor.background#1B1F2B
  • editor.findMatchBackground#5C3A31
  • editor.findMatchHighlightBackground#754C34
  • editor.foreground#E0E2EB
  • editor.lineHighlightBackground#2A2F3D
  • editor.lineHighlightBorder#3E4455
  • editor.selectionBackground#3A506B
  • editor.selectionHighlightBackground#4C5D72
  • editorBracketMatch.background#2F3E5B
  • editorBracketMatch.border#5C6E8A
  • editorCursor.foreground#D4A017
  • editorGroupHeader.tabsBackground#1B1F2B
  • editorIndentGuide.activeBackground#5C6E8A
  • editorIndentGuide.background#3E4455
  • editorLineNumber.activeForeground#D4A017
  • editorLineNumber.foreground#7A7F8A
  • editorWhitespace.foreground#5A5F6A
  • focusBorder#D4A017
  • gitDecoration.conflictingResourceForeground#D27474
  • gitDecoration.deletedResourceForeground#B95C5C
  • gitDecoration.modifiedResourceForeground#6A9456
  • gitDecoration.untrackedResourceForeground#8A6A9F
  • input.background#212638
  • input.border#2C3A4D
  • input.foreground#E0E2EB
  • input.placeholderForeground#7A7F8A
  • inputOption.activeBorder#D4A017
  • list.activeSelectionBackground#2F3E5B
  • list.activeSelectionForeground#E0E2EB
  • list.focusBackground#2F3E5B
  • list.highlightForeground#D4A017
  • list.hoverBackground#2A2F3D
  • minimap.background#1B1F2B
  • minimapSlider.activeBackground#7A8FAF
  • minimapSlider.background#3E4455
  • minimapSlider.hoverBackground#5C6E8A
  • panel.background#1B1F2B
  • panel.border#2C3A4D
  • panelTitle.activeBorder#D4A017
  • panelTitle.activeForeground#E0E2EB
  • panelTitle.inactiveForeground#7A7F8A
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#7A8FAF
  • scrollbarSlider.background#3E4455
  • scrollbarSlider.hoverBackground#5C6E8A
  • sideBar.background#1E222D
  • sideBar.foreground#C5BFA4
  • sideBarSectionHeader.background#212638
  • sideBarSectionHeader.foreground#E0E2EB
  • sideBarTitle.foreground#D4A017
  • statusBar.background#212638
  • statusBar.debuggingBackground#A63232
  • statusBar.foreground#E0E2EB
  • statusBar.noFolderBackground#2C3E50
  • statusBarItem.hoverBackground#2F3A4D
  • tab.activeBackground#212638
  • tab.activeBorder#D4A017
  • tab.activeForeground#E0E2EB
  • tab.border#2C3A4D
  • tab.inactiveBackground#1B1F2B
  • tab.inactiveForeground#8A8F99
  • terminal.ansiBlue#3B6EA5
  • terminal.ansiBrightBlue#5C8FD3
  • terminal.ansiBrightCyan#78B3A3
  • terminal.ansiBrightGreen#8ABF73
  • terminal.ansiBrightMagenta#A983C0
  • terminal.ansiBrightRed#D27474
  • terminal.ansiBrightYellow#E1B85A
  • terminal.ansiCyan#5A938B
  • terminal.ansiGreen#6A9456
  • terminal.ansiMagenta#8A6A9F
  • terminal.ansiRed#B95C5C
  • terminal.ansiYellow#CFA04A
  • terminal.background#1B1F2B
  • terminal.foreground#E0E2EB
  • titleBar.activeBackground#212638
  • titleBar.activeForeground#E0E2EB
  • titleBar.inactiveBackground#1B1F2B
  • titleBar.inactiveForeground#8A8F99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C3A31italic
string, string.quoted, string.template#D4A017—
keyword, storage.type, storage.modifier#3B6EA5bold
keyword.operator, punctuation.accessor#5C6E8A—
variable, variable.other#C5BFA4—
variable.parameter#A67C00italic
entity.name.function, support.function#5C8FD3—
meta.function-call#5C8FD3—
entity.name.class, entity.name.type.class, support.class#CFA04Abold
entity.name.type, support.type#5A938B—
entity.name.type.interface#D4A017italic
constant.numeric#6A9456—
constant, constant.language, constant.character#8A6A9F—
constant.language.boolean#B95C5Cbold
variable.other.property, support.variable.property#5C3A31—
meta.object-literal.key#D4A017—
entity.name.tag, punctuation.definition.tag#B95C5C—
entity.other.attribute-name#3B6EA5italic
punctuation, meta.brace#E0E2EB—
string.regexp#8ABF73—
constant.character.escape#8A6A9F—
meta.decorator, punctuation.decorator#D4A017—
invalid, invalid.illegal#D27474strikethrough
markup.heading, entity.name.section#D4A017bold
markup.bold#D4A017bold
markup.italic#3B6EA5italic
markup.underline.link#3B6EA5—
markup.inline.raw, markup.fenced_code#5A938B—
support.type.property-name.json#D4A017—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5C8FD3—
support.type.property-name.css#6A9456—
support.constant.property-value.css#CFA04A—