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#D4A657
  • activityBar.background#07101A
  • activityBar.foreground#E8E2D0
  • activityBarBadge.background#D4A657
  • activityBarBadge.foreground#0A112F
  • badge.background#D4A657
  • badge.foreground#0A112F
  • button.background#10294D
  • button.foreground#FFFFFF
  • button.hoverBackground#1A3B6F
  • dropdown.background#0C1628
  • dropdown.border#10294D
  • dropdown.foreground#E8E2D0
  • editor.background#0A112F
  • editor.findMatchBackground#D4A65744
  • editor.findMatchHighlightBackground#D4A65722
  • editor.foreground#E8E2D0
  • editor.lineHighlightBackground#10294D66
  • editor.lineHighlightBorder#10294DAA
  • editor.selectionBackground#D4A65740
  • editor.selectionHighlightBackground#D4A65733
  • editorBracketMatch.background#D4A65733
  • editorBracketMatch.border#D4A657
  • editorCursor.foreground#D4A657
  • editorGroupHeader.tabsBackground#0A112F
  • editorIndentGuide.activeBackground#4B6A8F88
  • editorIndentGuide.background#4B6A8F44
  • editorLineNumber.activeForeground#D4A657
  • editorLineNumber.foreground#4B6A8F
  • editorWhitespace.foreground#4B6A8F
  • focusBorder#D4A657
  • gitDecoration.conflictingResourceForeground#EFC562
  • gitDecoration.deletedResourceForeground#E96B5B
  • gitDecoration.modifiedResourceForeground#D4A657
  • gitDecoration.untrackedResourceForeground#88C99E
  • input.background#0C1628
  • input.border#10294D
  • input.foreground#E8E2D0
  • input.placeholderForeground#4B6A8F
  • inputOption.activeBorder#D4A657
  • list.activeSelectionBackground#10294D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#10294D
  • list.highlightForeground#D4A657
  • list.hoverBackground#10294D66
  • minimap.background#0A112F
  • minimapSlider.activeBackground#D4A65766
  • minimapSlider.background#D4A65722
  • minimapSlider.hoverBackground#D4A65744
  • panel.background#0A112F
  • panel.border#10294D
  • panelTitle.activeBorder#D4A657
  • panelTitle.activeForeground#D4A657
  • panelTitle.inactiveForeground#A3A9B8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D4A65788
  • scrollbarSlider.background#4B6A8F44
  • scrollbarSlider.hoverBackground#4B6A8F88
  • sideBar.background#0C1628
  • sideBar.foreground#E8E2D0
  • sideBarSectionHeader.background#07101A
  • sideBarSectionHeader.foreground#D4A657
  • sideBarTitle.foreground#D4A657
  • statusBar.background#10294D
  • statusBar.debuggingBackground#D4A657
  • statusBar.foreground#E8E2D0
  • statusBar.noFolderBackground#07101A
  • statusBarItem.hoverBackground#1A3B6F
  • tab.activeBackground#10294D
  • tab.activeBorder#D4A657
  • tab.activeForeground#FFFFFF
  • tab.border#0A112F
  • tab.inactiveBackground#0A112F
  • tab.inactiveForeground#A3A9B8
  • terminal.ansiBlue#5A9BD4
  • terminal.ansiBrightBlue#81BFFB
  • terminal.ansiBrightCyan#80E8D7
  • terminal.ansiBrightGreen#A5E6B9
  • terminal.ansiBrightMagenta#F2C274
  • terminal.ansiBrightRed#F28B7C
  • terminal.ansiBrightYellow#F9D889
  • terminal.ansiCyan#5FD8C7
  • terminal.ansiGreen#88C99E
  • terminal.ansiMagenta#D4A657
  • terminal.ansiRed#E96B5B
  • terminal.ansiYellow#EFC562
  • terminal.background#0A112F
  • terminal.foreground#E8E2D0
  • titleBar.activeBackground#07101A
  • titleBar.activeForeground#E8E2D0
  • titleBar.inactiveBackground#040A14
  • titleBar.inactiveForeground#A3A9B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#58657Fitalic
string, string.quoted, string.template#66CDAA—
keyword, storage.type, storage.modifier#CDA34Fbold
keyword.operator, punctuation.accessor#8A7A5F—
variable, variable.other#D8CFA8—
variable.parameter#8A7A5Fitalic
entity.name.function, support.function#5FD9C1—
meta.function-call#70E0D0—
entity.name.class, entity.name.type.class, support.class#CDA34Fbold
entity.name.type, support.type#D2B96F—
entity.name.type.interface#8A7A5Fitalic
constant.numeric#F1C96D—
constant, constant.language, constant.character#F1C96D—
constant.language.boolean#F1C96Dbold
variable.other.property, support.variable.property#E0D4B5—
meta.object-literal.key#8A7A5F—
entity.name.tag, punctuation.definition.tag#CDA34F—
entity.other.attribute-name#CDA34Fitalic
punctuation, meta.brace#8A7A5F—
string.regexp#F5C965—
constant.character.escape#F5C965—
meta.decorator, punctuation.decorator#CDA34F—
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#CDA34Fbold
markup.bold#8A7A5Fbold
markup.italic#66CDAAitalic
markup.underline.link#CDA34F—
markup.inline.raw, markup.fenced_code#66CDAA—
support.type.property-name.json#CDA34F—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CDA34F—
support.type.property-name.css#66CDAA—
support.constant.property-value.css#E0D4B5—