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