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#00DFFC
  • activityBar.background#0E1523
  • activityBar.foreground#00DFFC
  • activityBarBadge.background#00DFFC
  • activityBarBadge.foreground#0A0F1A
  • badge.background#00DFFC
  • badge.foreground#0A0F1A
  • button.background#14273F
  • button.foreground#FFFFFF
  • button.hoverBackground#273B5C
  • dropdown.background#0E1523
  • dropdown.border#14273F
  • dropdown.foreground#E0E5F0
  • editor.background#0A0F1A
  • editor.findMatchBackground#00DFFC44
  • editor.findMatchHighlightBackground#00DFFC22
  • editor.foreground#E0E5F0
  • editor.lineHighlightBackground#14273F66
  • editor.lineHighlightBorder#14273F99
  • editor.selectionBackground#00DFFC33
  • editor.selectionHighlightBackground#00DFFC22
  • editorBracketMatch.background#00DFFC33
  • editorBracketMatch.border#00DFFC
  • editorCursor.foreground#00DFFC
  • editorGroupHeader.tabsBackground#0A0F1A
  • editorIndentGuide.activeBackground#4A566D88
  • editorIndentGuide.background#4A566D44
  • editorLineNumber.activeForeground#00DFFC
  • editorLineNumber.foreground#4A566D
  • editorWhitespace.foreground#4A566D44
  • focusBorder#00DFFC
  • gitDecoration.conflictingResourceForeground#FFEB5B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00DFFC
  • gitDecoration.untrackedResourceForeground#8AFF96
  • input.background#0E1523
  • input.border#14273F
  • input.foreground#E0E5F0
  • input.placeholderForeground#4A566D
  • inputOption.activeBorder#00DFFC
  • list.activeSelectionBackground#14273F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#14273F
  • list.highlightForeground#00DFFC
  • list.hoverBackground#14273F66
  • minimap.background#0A0F1A
  • minimapSlider.activeBackground#00DFFC66
  • minimapSlider.background#00DFFC22
  • minimapSlider.hoverBackground#00DFFC44
  • panel.background#0A0F1A
  • panel.border#14273F
  • panelTitle.activeBorder#00DFFC
  • panelTitle.activeForeground#00DFFC
  • panelTitle.inactiveForeground#A1B2C8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00DFFC88
  • scrollbarSlider.background#4A566D44
  • scrollbarSlider.hoverBackground#4A566D88
  • sideBar.background#0E1523
  • sideBar.foreground#A1B2C8
  • sideBarSectionHeader.background#0E1523
  • sideBarSectionHeader.foreground#00DFFC
  • sideBarTitle.foreground#00DFFC
  • statusBar.background#14273F
  • statusBar.debuggingBackground#00DFFC
  • statusBar.foreground#E0E5F0
  • statusBar.noFolderBackground#0E1523
  • statusBarItem.hoverBackground#273B5C
  • tab.activeBackground#14273F
  • tab.activeBorder#00DFFC
  • tab.activeForeground#FFFFFF
  • tab.border#0A0F1A
  • tab.inactiveBackground#0E1523
  • tab.inactiveForeground#A1B2C8
  • terminal.ansiBlue#00DFFC
  • terminal.ansiBrightBlue#66FFFF
  • terminal.ansiBrightCyan#66FFDD
  • terminal.ansiBrightGreen#66FF96
  • terminal.ansiBrightMagenta#D196FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF79F
  • terminal.ansiCyan#6AFFD1
  • terminal.ansiGreen#8AFF96
  • terminal.ansiMagenta#C58AFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFEB5B
  • terminal.background#0A0F1A
  • terminal.foreground#E0E5F0
  • titleBar.activeBackground#0E1523
  • titleBar.activeForeground#E0E5F0
  • titleBar.inactiveBackground#0A0F1A
  • titleBar.inactiveForeground#A1B2C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A566Ditalic
string, string.quoted, string.template#8AFF96
keyword, storage.type, storage.modifier#00DFFCbold
keyword.operator, punctuation.accessor#66FFFF
variable, variable.other#E0E5F0
variable.parameter#C58AFFitalic
entity.name.function, support.function#66FFFF
meta.function-call#A1B2C8
entity.name.class, entity.name.type.class, support.class#C58AFFbold
entity.name.type, support.type#C58AFF
entity.name.type.interface#8AFF96italic
constant.numeric#FFEB5B
constant, constant.language, constant.character#FFEB5B
constant.language.boolean#FFEB5Bbold
variable.other.property, support.variable.property#A1B2C8
meta.object-literal.key#66FFFF
entity.name.tag, punctuation.definition.tag#00DFFC
entity.other.attribute-name#C58AFFitalic
punctuation, meta.brace#66FFFF
string.regexp#FF6B6B
constant.character.escape#C58AFF
meta.decorator, punctuation.decorator#FFEB5B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00DFFCbold
markup.bold#FFEB5Bbold
markup.italic#C58AFFitalic
markup.underline.link#8AFF96
markup.inline.raw, markup.fenced_code#8AFF96
support.type.property-name.json#00DFFC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB5B
support.type.property-name.css#66FFFF
support.constant.property-value.css#8AFF96