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#00E5FF
  • activityBar.background#0B0D1F
  • activityBar.foreground#8A92A6
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0B0D1F
  • badge.background#00E5FF
  • badge.foreground#0B0D1F
  • button.background#0B0D1F
  • button.foreground#CED2E0
  • button.hoverBackground#00E5FF33
  • dropdown.background#0B0D1F
  • dropdown.border#3A3A3A
  • dropdown.foreground#CED2E0
  • editor.background#0B0D1F
  • editor.findMatchBackground#00E5FF4D
  • editor.findMatchHighlightBackground#00E5FF1A
  • editor.foreground#CED2E0
  • editor.lineHighlightBackground#00E5FF1A
  • editor.lineHighlightBorder#00E5FF4D
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF1A
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0D1F
  • editorIndentGuide.activeBackground#3A3A3ACC
  • editorIndentGuide.background#3A3A3A4D
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#3A3A3A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#8A92A6
  • gitDecoration.deletedResourceForeground#8A92A6
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00FFC8
  • input.background#0B0D1F
  • input.border#3A3A3A
  • input.foreground#CED2E0
  • input.placeholderForeground#8A92A6
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#00E5FF33
  • list.activeSelectionForeground#CED2E0
  • list.focusBackground#00E5FF33
  • list.highlightForeground#00E5FF
  • list.hoverBackground#00E5FF1A
  • minimap.background#0B0D1F
  • minimapSlider.activeBackground#00E5FF4D
  • minimapSlider.background#00E5FF1A
  • minimapSlider.hoverBackground#00E5FF33
  • panel.background#0B0D1F
  • panel.border#3A3A3A
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#8A92A6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#3A3A3ACC
  • scrollbarSlider.background#3A3A3A4D
  • scrollbarSlider.hoverBackground#3A3A3A80
  • sideBar.background#0B0D1F
  • sideBar.foreground#CED2E0
  • sideBarSectionHeader.background#0B0D1F
  • sideBarSectionHeader.foreground#8A92A6
  • sideBarTitle.foreground#8A92A6
  • statusBar.background#0B0D1F
  • statusBar.debuggingBackground#00E5FF
  • statusBar.foreground#CED2E0
  • statusBar.noFolderBackground#0B0D1F
  • statusBarItem.hoverBackground#00E5FF20
  • tab.activeBackground#0B0D1F
  • tab.activeBorder#00E5FF
  • tab.activeForeground#CED2E0
  • tab.border#0B0D1F
  • tab.inactiveBackground#0B0D1F
  • tab.inactiveForeground#8A92A6
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#00FFC8
  • terminal.ansiBrightGreen#00FFC8
  • terminal.ansiBrightMagenta#8A92A6
  • terminal.ansiBrightRed#8A92A6
  • terminal.ansiBrightYellow#8A92A6
  • terminal.ansiCyan#00FFC8
  • terminal.ansiGreen#00FFC8
  • terminal.ansiMagenta#8A92A6
  • terminal.ansiRed#8A92A6
  • terminal.ansiYellow#8A92A6
  • terminal.background#0B0D1F
  • terminal.foreground#CED2E0
  • titleBar.activeBackground#0B0D1F
  • titleBar.activeForeground#CED2E0
  • titleBar.inactiveBackground#0B0D1F
  • titleBar.inactiveForeground#8A92A6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#333333italic
string, string.quoted, string.template#00FFAA
keyword, storage.type, storage.modifier#00A8FFbold
keyword.operator, punctuation.accessor#00A8FF
variable, variable.other#E0E0E0
variable.parameter#A0A0A0italic
entity.name.function, support.function#00A8FF
meta.function-call#E0E0E0
entity.name.class, entity.name.type.class, support.class#00A8FFbold
entity.name.type, support.type#00A8FF
entity.name.type.interface#00FFAAitalic
constant.numeric#00FFAA
constant, constant.language, constant.character#00FFAA
constant.language.boolean#00FFAAbold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#00A8FF
entity.name.tag, punctuation.definition.tag#00A8FF
entity.other.attribute-name#00FFAAitalic
punctuation, meta.brace#555555
string.regexp#00FFAA
constant.character.escape#00FFAA
meta.decorator, punctuation.decorator#00A8FF
invalid, invalid.illegal#555555strikethrough
markup.heading, entity.name.section#00A8FFbold
markup.bold#00FFAAbold
markup.italic#00FFAAitalic
markup.underline.link#00A8FF
markup.inline.raw, markup.fenced_code#00FFAA
support.type.property-name.json#00A8FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00FFAA
support.type.property-name.css#00A8FF
support.constant.property-value.css#00FFAA