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#0FF0E6
  • activityBar.background#101629
  • activityBar.foreground#0FF0E6
  • activityBarBadge.background#0FF0E6
  • activityBarBadge.foreground#0B111F
  • badge.background#0FF0E6
  • badge.foreground#0B111F
  • button.background#151A2E
  • button.foreground#FFFFFF
  • button.hoverBackground#1E2A45
  • dropdown.background#101629
  • dropdown.border#151A2E
  • dropdown.foreground#E0E5F0
  • editor.background#0B111F
  • editor.findMatchBackground#0FF0E644
  • editor.findMatchHighlightBackground#0FF0E622
  • editor.foreground#E0E5F0
  • editor.lineHighlightBackground#151A2E80
  • editor.lineHighlightBorder#0FF0E640
  • editor.selectionBackground#0FF0E633
  • editor.selectionHighlightBackground#0FF0E622
  • editorBracketMatch.background#0FF0E633
  • editorBracketMatch.border#0FF0E6
  • editorCursor.foreground#0FF0E6
  • editorGroupHeader.tabsBackground#0B111F
  • editorIndentGuide.activeBackground#0FF0E644
  • editorIndentGuide.background#4A5B7344
  • editorLineNumber.activeForeground#0FF0E6
  • editorLineNumber.foreground#4A5B73
  • editorWhitespace.foreground#4A5B73
  • focusBorder#0FF0E6
  • gitDecoration.conflictingResourceForeground#FFD666
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#0FF0E6
  • gitDecoration.untrackedResourceForeground#7CFFB2
  • input.background#101629
  • input.border#151A2E
  • input.foreground#E0E5F0
  • input.placeholderForeground#6A7A8F
  • inputOption.activeBorder#0FF0E6
  • list.activeSelectionBackground#151A2E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151A2E
  • list.highlightForeground#0FF0E6
  • list.hoverBackground#151A2E66
  • minimap.background#0B111F
  • minimapSlider.activeBackground#0FF0E666
  • minimapSlider.background#0FF0E622
  • minimapSlider.hoverBackground#0FF0E644
  • panel.background#0B111F
  • panel.border#151A2E
  • panelTitle.activeBorder#0FF0E6
  • panelTitle.activeForeground#0FF0E6
  • panelTitle.inactiveForeground#A0A8B5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0FF0E688
  • scrollbarSlider.background#4A5B7344
  • scrollbarSlider.hoverBackground#4A5B7388
  • sideBar.background#101629
  • sideBar.foreground#C0C8D5
  • sideBarSectionHeader.background#101629
  • sideBarSectionHeader.foreground#0FF0E6
  • sideBarTitle.foreground#0FF0E6
  • statusBar.background#151A2E
  • statusBar.debuggingBackground#0FF0E6
  • statusBar.foreground#E0E5F0
  • statusBar.noFolderBackground#101629
  • statusBarItem.hoverBackground#1E2A45
  • tab.activeBackground#151A2E
  • tab.activeBorder#0FF0E6
  • tab.activeForeground#FFFFFF
  • tab.border#0B111F
  • tab.inactiveBackground#101629
  • tab.inactiveForeground#A0A8B5
  • terminal.ansiBlue#0A84FF
  • terminal.ansiBrightBlue#5A9DFF
  • terminal.ansiBrightCyan#86F0C8
  • terminal.ansiBrightGreen#A6FFCC
  • terminal.ansiBrightMagenta#E6B3FF
  • terminal.ansiBrightRed#FF8C8C
  • terminal.ansiBrightYellow#FFE699
  • terminal.ansiCyan#5FD0A8
  • terminal.ansiGreen#7CFFB2
  • terminal.ansiMagenta#D982FF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFD666
  • terminal.background#0B111F
  • terminal.foreground#E0E5F0
  • titleBar.activeBackground#101629
  • titleBar.activeForeground#E0E5F0
  • titleBar.inactiveBackground#0B111F
  • titleBar.inactiveForeground#A0A8B5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A80italic
string, string.quoted, string.template#7CFFB2
keyword, storage.type, storage.modifier#0FF0E6bold
keyword.operator, punctuation.accessor#5FD0A8
variable, variable.other#E0E5F0
variable.parameter#5FD0A8italic
entity.name.function, support.function#5FD0A8
meta.function-call#A0A8B5
entity.name.class, entity.name.type.class, support.class#0FF0E6bold
entity.name.type, support.type#5FD0A8
entity.name.type.interface#5FD0A8italic
constant.numeric#FFD666
constant, constant.language, constant.character#FFD666
constant.language.boolean#FFD666bold
variable.other.property, support.variable.property#A0A8B5
meta.object-literal.key#5FD0A8
entity.name.tag, punctuation.definition.tag#0FF0E6
entity.other.attribute-name#D982FFitalic
punctuation, meta.brace#5FD0A8
string.regexp#FF6B6B
constant.character.escape#D982FF
meta.decorator, punctuation.decorator#FFD666
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#0FF0E6bold
markup.bold#FFD666bold
markup.italic#D982FFitalic
markup.underline.link#5FD0A8
markup.inline.raw, markup.fenced_code#7CFFB2
support.type.property-name.json#0FF0E6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD666
support.type.property-name.css#5FD0A8
support.constant.property-value.css#7CFFB2