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#3A9E93
  • activityBar.background#0A151F
  • activityBar.foreground#3A9E93
  • activityBarBadge.background#3A9E93
  • activityBarBadge.foreground#0F1E2A
  • badge.background#3A9E93
  • badge.foreground#0F1E2A
  • button.background#152B3C
  • button.foreground#FFFFFF
  • button.hoverBackground#1A2F41
  • dropdown.background#0C1A26
  • dropdown.border#152B3C
  • dropdown.foreground#D1E8F0
  • editor.background#0F1E2A
  • editor.findMatchBackground#3A9E9344
  • editor.findMatchHighlightBackground#3A9E9322
  • editor.foreground#D1E8F0
  • editor.lineHighlightBackground#152B3C80
  • editor.lineHighlightBorder#152B3CA0
  • editor.selectionBackground#3A9E9366
  • editor.selectionHighlightBackground#3A9E9333
  • editorBracketMatch.background#3A9E9333
  • editorBracketMatch.border#3A9E93
  • editorCursor.foreground#3A9E93
  • editorGroupHeader.tabsBackground#0F1E2A
  • editorIndentGuide.activeBackground#3A9E93AA
  • editorIndentGuide.background#1A2F4188
  • editorLineNumber.activeForeground#3A9E93
  • editorLineNumber.foreground#4A5E6F
  • editorWhitespace.foreground#1A2F41
  • focusBorder#3A9E93
  • gitDecoration.conflictingResourceForeground#E57373
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#3A9E93
  • gitDecoration.untrackedResourceForeground#A8E6CF
  • input.background#0C1A26
  • input.border#152B3C
  • input.foreground#D1E8F0
  • input.placeholderForeground#6B7A87
  • inputOption.activeBorder#3A9E93
  • list.activeSelectionBackground#152B3C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#152B3C
  • list.highlightForeground#3A9E93
  • list.hoverBackground#152B3C66
  • minimap.background#0F1E2A
  • minimapSlider.activeBackground#3A9E9366
  • minimapSlider.background#3A9E9322
  • minimapSlider.hoverBackground#3A9E9344
  • panel.background#0F1E2A
  • panel.border#152B3C
  • panelTitle.activeBorder#3A9E93
  • panelTitle.activeForeground#3A9E93
  • panelTitle.inactiveForeground#B0C4D6
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A9E9388
  • scrollbarSlider.background#4A5E6F44
  • scrollbarSlider.hoverBackground#4A5E6F88
  • sideBar.background#0C1A26
  • sideBar.foreground#B0C4D6
  • sideBarSectionHeader.background#0A151F
  • sideBarSectionHeader.foreground#3A9E93
  • sideBarTitle.foreground#3A9E93
  • statusBar.background#152B3C
  • statusBar.debuggingBackground#3A9E93
  • statusBar.foreground#D1E8F0
  • statusBar.noFolderBackground#0A151F
  • statusBarItem.hoverBackground#1A2F41
  • tab.activeBackground#152B3C
  • tab.activeBorder#3A9E93
  • tab.activeForeground#FFFFFF
  • tab.border#0F1E2A
  • tab.inactiveBackground#0C1A26
  • tab.inactiveForeground#B0C4D6
  • terminal.ansiBlue#3A9E93
  • terminal.ansiBrightBlue#5AB3A5
  • terminal.ansiBrightCyan#87D9CE
  • terminal.ansiBrightGreen#C8F9D8
  • terminal.ansiBrightMagenta#D8A5FF
  • terminal.ansiBrightRed#FF9A8A
  • terminal.ansiBrightYellow#FFE1A0
  • terminal.ansiCyan#6FC4B8
  • terminal.ansiGreen#A8E6CF
  • terminal.ansiMagenta#C18FFF
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#F7C96F
  • terminal.background#0F1E2A
  • terminal.foreground#D1E8F0
  • titleBar.activeBackground#0A151F
  • titleBar.activeForeground#D1E8F0
  • titleBar.inactiveBackground#0F1E2A
  • titleBar.inactiveForeground#B0C4D6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7A87italic
string, string.quoted, string.template#A8E6CF
keyword, storage.type, storage.modifier#3A9E93bold
keyword.operator, punctuation.accessor#6FC4B8
variable, variable.other#D1E8F0
variable.parameter#A8E6CFitalic
entity.name.function, support.function#6FC4B8
meta.function-call#B0C4D6
entity.name.class, entity.name.type.class, support.class#C18FFFbold
entity.name.type, support.type#C18FFF
entity.name.type.interface#6FC4B8italic
constant.numeric#F7C96F
constant, constant.language, constant.character#F7C96F
constant.language.boolean#F7C96Fbold
variable.other.property, support.variable.property#B0C4D6
meta.object-literal.key#6FC4B8
entity.name.tag, punctuation.definition.tag#3A9E93
entity.other.attribute-name#C18FFFitalic
punctuation, meta.brace#6FC4B8
string.regexp#F7C96F
constant.character.escape#C18FFF
meta.decorator, punctuation.decorator#F7C96F
invalid, invalid.illegal#E57373strikethrough
markup.heading, entity.name.section#3A9E93bold
markup.bold#F7C96Fbold
markup.italic#C18FFFitalic
markup.underline.link#6FC4B8
markup.inline.raw, markup.fenced_code#C18FFF
support.type.property-name.json#3A9E93
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F7C96F
support.type.property-name.css#6FC4B8
support.constant.property-value.css#B0C4D6