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#E96479
  • activityBar.background#0A1622
  • activityBar.foreground#E8E2D1
  • activityBarBadge.background#E96479
  • activityBarBadge.foreground#0D1B2A
  • badge.background#E96479
  • badge.foreground#0D1B2A
  • button.background#E96479
  • button.foreground#0D1B2A
  • button.hoverBackground#F28399
  • dropdown.background#101B2A
  • dropdown.border#E96479
  • dropdown.foreground#E8E2D1
  • editor.background#0D1B2A
  • editor.findMatchBackground#E9647966
  • editor.findMatchHighlightBackground#E9647622
  • editor.foreground#E8E2D1
  • editor.lineHighlightBackground#E9647919
  • editor.lineHighlightBorder#E9647933
  • editor.selectionBackground#C2A97266
  • editor.selectionHighlightBackground#C2A97233
  • editorBracketMatch.background#E9647933
  • editorBracketMatch.border#E96479
  • editorCursor.foreground#E96479
  • editorGroupHeader.tabsBackground#101B2A
  • editorIndentGuide.activeBackground#6A7B8988
  • editorIndentGuide.background#6A7B8944
  • editorLineNumber.activeForeground#E8E2D1
  • editorLineNumber.foreground#6A7B89
  • editorWhitespace.foreground#6A7B89
  • focusBorder#E96479
  • gitDecoration.conflictingResourceForeground#E8E2D1
  • gitDecoration.deletedResourceForeground#E96479
  • gitDecoration.modifiedResourceForeground#E96479
  • gitDecoration.untrackedResourceForeground#A1C181
  • input.background#101B2A
  • input.border#E96479
  • input.foreground#E8E2D1
  • input.placeholderForeground#6A7B89
  • inputOption.activeBorder#E96479
  • list.activeSelectionBackground#C2A97266
  • list.activeSelectionForeground#E8E2D1
  • list.focusBackground#C2A97266
  • list.highlightForeground#E96479
  • list.hoverBackground#C2A97244
  • minimap.background#0A1622
  • minimapSlider.activeBackground#C2A97266
  • minimapSlider.background#C2A97222
  • minimapSlider.hoverBackground#C2A97244
  • panel.background#0D1B2A
  • panel.border#101B2A
  • panelTitle.activeBorder#E96479
  • panelTitle.activeForeground#E8E2D1
  • panelTitle.inactiveForeground#6A7B89
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#E9647888
  • scrollbarSlider.background#6A7B8944
  • scrollbarSlider.hoverBackground#6A7B8988
  • sideBar.background#0A1622
  • sideBar.foreground#E8E2D1
  • sideBarSectionHeader.background#0A1622
  • sideBarSectionHeader.foreground#E8E2D1
  • sideBarTitle.foreground#E8E2D1
  • statusBar.background#101B2A
  • statusBar.debuggingBackground#E96479
  • statusBar.foreground#E8E2D1
  • statusBar.noFolderBackground#0A1622
  • statusBarItem.hoverBackground#6EB5C044
  • tab.activeBackground#0D1B2A
  • tab.activeBorder#E96479
  • tab.activeForeground#E8E2D1
  • tab.border#070D14
  • tab.inactiveBackground#101B2A
  • tab.inactiveForeground#6A7B89
  • terminal.ansiBlue#6C8EBF
  • terminal.ansiBrightBlue#8AB5FF
  • terminal.ansiBrightCyan#92D9E5
  • terminal.ansiBrightGreen#B5D991
  • terminal.ansiBrightMagenta#F2A1C9
  • terminal.ansiBrightRed#F28A93
  • terminal.ansiBrightYellow#E8D5A0
  • terminal.ansiCyan#6EB5C0
  • terminal.ansiGreen#A1C181
  • terminal.ansiMagenta#D291C0
  • terminal.ansiRed#E96479
  • terminal.ansiYellow#C2A972
  • terminal.background#0D1B2A
  • terminal.foreground#E8E2D1
  • titleBar.activeBackground#0A1622
  • titleBar.activeForeground#E8E2D1
  • titleBar.inactiveBackground#101B2A
  • titleBar.inactiveForeground#6A7B89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A7Aitalic
string, string.quoted, string.template#6EB5C0
keyword, storage.type, storage.modifier#E96479bold
keyword.operator, punctuation.accessor#C2A972
variable, variable.other#E8E2D1
variable.parameter#E8E2D1italic
entity.name.function, support.function#E96479
meta.function-call#E96479
entity.name.class, entity.name.type.class, support.class#E96479bold
entity.name.type, support.type#E96479
entity.name.type.interface#E96479italic
constant.numeric#C2A972
constant, constant.language, constant.character#C2A972
constant.language.boolean#C2A972bold
variable.other.property, support.variable.property#6EB5C0
meta.object-literal.key#6EB5C0
entity.name.tag, punctuation.definition.tag#E96479
entity.other.attribute-name#E96479italic
punctuation, meta.brace#E8E2D1
string.regexp#E96479
constant.character.escape#E96479
meta.decorator, punctuation.decorator#E96479
invalid, invalid.illegal#E96479strikethrough
markup.heading, entity.name.section#E96479bold
markup.bold#E96479bold
markup.italic#E96479italic
markup.underline.link#C2A972
markup.inline.raw, markup.fenced_code#6EB5C0
support.type.property-name.json#E96479
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E96479
support.type.property-name.css#6EB5C0
support.constant.property-value.css#E8E2D1