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