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#00E5E5
  • activityBar.background#0A0B0F
  • activityBar.foreground#00E5E5
  • activityBarBadge.background#00E5E5
  • activityBarBadge.foreground#0B0D12
  • badge.background#00E5E5
  • badge.foreground#0B0D12
  • button.background#15171D
  • button.foreground#C0C5D0
  • button.hoverBackground#1A1D23
  • dropdown.background#0C0D13
  • dropdown.border#15171D
  • dropdown.foreground#C0C5D0
  • editor.background#0B0D12
  • editor.findMatchBackground#00E5E560
  • editor.findMatchHighlightBackground#00E5E430
  • editor.foreground#C0C5D0
  • editor.lineHighlightBackground#15171D66
  • editor.lineHighlightBorder#00E5E560
  • editor.selectionBackground#00E5E540
  • editor.selectionHighlightBackground#00E5E430
  • editorBracketMatch.background#00E5E540
  • editorBracketMatch.border#00E5E5
  • editorCursor.foreground#00E5E5
  • editorGroupHeader.tabsBackground#0B0D12
  • editorIndentGuide.activeBackground#00E5E540
  • editorIndentGuide.background#2A2F3A44
  • editorLineNumber.activeForeground#00E5E5
  • editorLineNumber.foreground#5A5F6B
  • editorWhitespace.foreground#2A2F3A
  • focusBorder#00E5E5
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF6E6E
  • gitDecoration.modifiedResourceForeground#00E5E5
  • gitDecoration.untrackedResourceForeground#5DE1A3
  • input.background#0C0D13
  • input.border#15171D
  • input.foreground#C0C5D0
  • input.placeholderForeground#555B66
  • inputOption.activeBorder#00E5E5
  • list.activeSelectionBackground#15171D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#15171D
  • list.highlightForeground#00E5E5
  • list.hoverBackground#15171D66
  • minimap.background#0B0D12
  • minimapSlider.activeBackground#00E5E666
  • minimapSlider.background#00E5E522
  • minimapSlider.hoverBackground#00E5E544
  • panel.background#0B0D12
  • panel.border#15171D
  • panelTitle.activeBorder#00E5E5
  • panelTitle.activeForeground#00E5E5
  • panelTitle.inactiveForeground#A0A5B2
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5E888
  • scrollbarSlider.background#5A5F6B44
  • scrollbarSlider.hoverBackground#5A5F6B88
  • sideBar.background#0C0D13
  • sideBar.foreground#A0A5B2
  • sideBarSectionHeader.background#0B0D12
  • sideBarSectionHeader.foreground#00E5E5
  • sideBarTitle.foreground#00E5E5
  • statusBar.background#15171D
  • statusBar.debuggingBackground#005F7F
  • statusBar.foreground#C0C5D0
  • statusBar.noFolderBackground#0B0D12
  • statusBarItem.hoverBackground#1A1D23
  • tab.activeBackground#15171D
  • tab.activeBorder#00E5E5
  • tab.activeForeground#FFFFFF
  • tab.border#0B0D12
  • tab.inactiveBackground#0C0D13
  • tab.inactiveForeground#A0A5B2
  • terminal.ansiBlue#005F7F
  • terminal.ansiBrightBlue#33A1C9
  • terminal.ansiBrightCyan#33F0F0
  • terminal.ansiBrightGreen#7DE8B5
  • terminal.ansiBrightMagenta#FF92D1
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFF275
  • terminal.ansiCyan#00E5E5
  • terminal.ansiGreen#5DE1A3
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF6E6E
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0B0D12
  • terminal.foreground#C0C5D0
  • titleBar.activeBackground#0B0D12
  • titleBar.activeForeground#C0C5D0
  • titleBar.inactiveBackground#0A0A0F
  • titleBar.inactiveForeground#A0A5B2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555B66italic
string, string.quoted, string.template#7FFFD4
keyword, storage.type, storage.modifier#00E5E5bold
keyword.operator, punctuation.accessor#33F0F0
variable, variable.other#C0C5D0
variable.parameter#00E5E5italic
entity.name.function, support.function#5DE1A3
meta.function-call#A0A8B5
entity.name.class, entity.name.type.class, support.class#00E5E5bold
entity.name.type, support.type#5DE1A3
entity.name.type.interface#00E5E5italic
constant.numeric#FFB86C
constant, constant.language, constant.character#FFD37A
constant.language.boolean#FFB86Cbold
variable.other.property, support.variable.property#A0A8B5
meta.object-literal.key#5DE1A3
entity.name.tag, punctuation.definition.tag#00E5E5
entity.other.attribute-name#FF79C6italic
punctuation, meta.brace#00E5E5
string.regexp#FFB86C
constant.character.escape#FF79C6
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#00E5E5bold
markup.bold#FFD37Abold
markup.italic#FF79C6italic
markup.underline.link#80D8FF
markup.inline.raw, markup.fenced_code#7FFFD4
support.type.property-name.json#00E5E5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#5DE1A3
support.constant.property-value.css#7FFFD4