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#3FA9FF
  • activityBar.background#0C1028
  • activityBar.foreground#3FA9FF
  • activityBarBadge.background#3FA9FF
  • activityBarBadge.foreground#0A0C1F
  • badge.background#3FA9FF
  • badge.foreground#0A0C1F
  • button.background#162040
  • button.foreground#FFFFFF
  • button.hoverBackground#283C6F
  • dropdown.background#0C1028
  • dropdown.border#162040
  • dropdown.foreground#E0E5EC
  • editor.background#0A0C1F
  • editor.findMatchBackground#3FA9FF44
  • editor.findMatchHighlightBackground#3FA9FF22
  • editor.foreground#E0E5EC
  • editor.lineHighlightBackground#16204066
  • editor.lineHighlightBorder#16204099
  • editor.selectionBackground#3FA9FF55
  • editor.selectionHighlightBackground#3FA9FF33
  • editorBracketMatch.background#3FA9FF33
  • editorBracketMatch.border#3FA9FF
  • editorCursor.foreground#3FA9FF
  • editorGroupHeader.tabsBackground#0A0C1F
  • editorIndentGuide.activeBackground#283C6F88
  • editorIndentGuide.background#283C6F44
  • editorLineNumber.activeForeground#3FA9FF
  • editorLineNumber.foreground#5A647D
  • editorWhitespace.foreground#283C6F
  • focusBorder#3FA9FF
  • gitDecoration.conflictingResourceForeground#FFC966
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#3FA9FF
  • gitDecoration.untrackedResourceForeground#7DFF91
  • input.background#0C1028
  • input.border#162040
  • input.foreground#E0E5EC
  • input.placeholderForeground#5A647D
  • inputOption.activeBorder#3FA9FF
  • list.activeSelectionBackground#162040
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#162040
  • list.highlightForeground#3FA9FF
  • list.hoverBackground#16204066
  • minimap.background#0A0C1F
  • minimapSlider.activeBackground#3FA9FF66
  • minimapSlider.background#3FA9FF22
  • minimapSlider.hoverBackground#3FA9FF44
  • panel.background#0A0C1F
  • panel.border#162040
  • panelTitle.activeBorder#3FA9FF
  • panelTitle.activeForeground#3FA9FF
  • panelTitle.inactiveForeground#A6C8FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3FA9FF88
  • scrollbarSlider.background#5A647D44
  • scrollbarSlider.hoverBackground#5A647D88
  • sideBar.background#0C1028
  • sideBar.foreground#A6C8FF
  • sideBarSectionHeader.background#0C1028
  • sideBarSectionHeader.foreground#3FA9FF
  • sideBarTitle.foreground#3FA9FF
  • statusBar.background#162040
  • statusBar.debuggingBackground#3FA9FF
  • statusBar.foreground#E0E5EC
  • statusBar.noFolderBackground#0C1028
  • statusBarItem.hoverBackground#283C6F
  • tab.activeBackground#162040
  • tab.activeBorder#3FA9FF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0C1F
  • tab.inactiveBackground#0C1028
  • tab.inactiveForeground#A6C8FF
  • terminal.ansiBlue#3FA9FF
  • terminal.ansiBrightBlue#6CCAFF
  • terminal.ansiBrightCyan#81F2D2
  • terminal.ansiBrightGreen#9BFFB4
  • terminal.ansiBrightMagenta#E5B3FF
  • terminal.ansiBrightRed#FF8C66
  • terminal.ansiBrightYellow#FFD57F
  • terminal.ansiCyan#5FE3B5
  • terminal.ansiGreen#7DFF91
  • terminal.ansiMagenta#D58BFF
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFC966
  • terminal.background#0A0C1F
  • terminal.foreground#E0E5EC
  • titleBar.activeBackground#0C1028
  • titleBar.activeForeground#E0E5EC
  • titleBar.inactiveBackground#0A0C1F
  • titleBar.inactiveForeground#A6C8FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A647Ditalic
string, string.quoted, string.template#5FE3B5
keyword, storage.type, storage.modifier#3FA9FFbold
keyword.operator, punctuation.accessor#6CCAFF
variable, variable.other#E0E5EC
variable.parameter#A6C8FFitalic
entity.name.function, support.function#6CCAFF
meta.function-call#A6C8FF
entity.name.class, entity.name.type.class, support.class#7DFF91bold
entity.name.type, support.type#7DFF91
entity.name.type.interface#D58BFFitalic
constant.numeric#FFC966
constant, constant.language, constant.character#FFC966
constant.language.boolean#FFC966bold
variable.other.property, support.variable.property#A6C8FF
meta.object-literal.key#6CCAFF
entity.name.tag, punctuation.definition.tag#3FA9FF
entity.other.attribute-name#D58BFFitalic
punctuation, meta.brace#6CCAFF
string.regexp#FF6F6F
constant.character.escape#D58BFF
meta.decorator, punctuation.decorator#FFC966
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#3FA9FFbold
markup.bold#FFC966bold
markup.italic#D58BFFitalic
markup.underline.link#5FE3B5
markup.inline.raw, markup.fenced_code#5FE3B5
support.type.property-name.json#3FA9FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC966
support.type.property-name.css#6CCAFF
support.constant.property-value.css#5FE3B5