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#3BF0FF
  • activityBar.background#141418
  • activityBar.foreground#3BF0FF
  • activityBarBadge.background#3BF0FF
  • activityBarBadge.foreground#0A0A0F
  • badge.background#3BF0FF
  • badge.foreground#0A0A0F
  • button.background#3BF0FF
  • button.foreground#0A0A0F
  • button.hoverBackground#3BF0FF88
  • dropdown.background#141418
  • dropdown.border#3BF0FF
  • dropdown.foreground#D4D4D4
  • editor.background#0A0A0F
  • editor.findMatchBackground#3BF0FF44
  • editor.findMatchHighlightBackground#3BF0FF22
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#3BF0FF12
  • editor.lineHighlightBorder#3BF0FF30
  • editor.selectionBackground#3BF0FF44
  • editor.selectionHighlightBackground#3BF0FF22
  • editorBracketMatch.background#3BF0FF33
  • editorBracketMatch.border#3BF0FF
  • editorCursor.foreground#3BF0FF
  • editorGroupHeader.tabsBackground#0A0A0F
  • editorIndentGuide.activeBackground#55555588
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#3BF0FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#3BF0FF
  • gitDecoration.conflictingResourceForeground#FFEB00
  • gitDecoration.deletedResourceForeground#FF6666
  • gitDecoration.modifiedResourceForeground#3BF0FF
  • gitDecoration.untrackedResourceForeground#80FF80
  • input.background#141418
  • input.border#3BF0FF
  • input.foreground#D4D4D4
  • input.placeholderForeground#555555
  • inputOption.activeBorder#3BF0FF
  • list.activeSelectionBackground#3BF0FF66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3BF0FF44
  • list.highlightForeground#3BF0FF
  • list.hoverBackground#3BF0FF33
  • minimap.background#0A0A0F
  • minimapSlider.activeBackground#3BF0FF66
  • minimapSlider.background#3BF0FF22
  • minimapSlider.hoverBackground#3BF0FF44
  • panel.background#0A0A0F
  • panel.border#3BF0FF
  • panelTitle.activeBorder#3BF0FF
  • panelTitle.activeForeground#3BF0FF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3BF0FF88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111113
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#141418
  • sideBarSectionHeader.foreground#3BF0FF
  • sideBarTitle.foreground#3BF0FF
  • statusBar.background#0A0A0F
  • statusBar.debuggingBackground#3BF0FF
  • statusBar.foreground#D4D4D4
  • statusBar.noFolderBackground#141418
  • statusBarItem.hoverBackground#3BF0FF33
  • tab.activeBackground#0A0A0F
  • tab.activeBorder#3BF0FF
  • tab.activeForeground#D4D4D4
  • tab.border#0A0A0F
  • tab.inactiveBackground#111113
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3BF0FF
  • terminal.ansiBrightBlue#66D9FF
  • terminal.ansiBrightCyan#99FFCC
  • terminal.ansiBrightGreen#99FF99
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFFF99
  • terminal.ansiCyan#00FFCC
  • terminal.ansiGreen#80FF80
  • terminal.ansiMagenta#FF80FF
  • terminal.ansiRed#FF6666
  • terminal.ansiYellow#FFEB00
  • terminal.background#0A0A0F
  • terminal.foreground#D4D4D4
  • titleBar.activeBackground#0A0A0F
  • titleBar.activeForeground#D4D4D4
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00FFCC
keyword, storage.type, storage.modifier#3BF0FFbold
keyword.operator, punctuation.accessor#A0A0A0
variable, variable.other#D4D4D4
variable.parameter#66FFCCitalic
entity.name.function, support.function#3BF0FF
meta.function-call#66D9FF
entity.name.class, entity.name.type.class, support.class#3BF0FFbold
entity.name.type, support.type#99FFEE
entity.name.type.interface#66FFCCitalic
constant.numeric#FFB800
constant, constant.language, constant.character#FFB800
constant.language.boolean#FFB800bold
variable.other.property, support.variable.property#D4D4D4
meta.object-literal.key#66D9FF
entity.name.tag, punctuation.definition.tag#3BF0FF
entity.other.attribute-name#FFAA00italic
punctuation, meta.brace#AAAAAA
string.regexp#FF80FF
constant.character.escape#FF80FF
meta.decorator, punctuation.decorator#FFAA00
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#3BF0FFbold
markup.bold#FFB800bold
markup.italic#FFAA00italic
markup.underline.link#66D9FF
markup.inline.raw, markup.fenced_code#00FFCC
support.type.property-name.json#66D9FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFAA00
support.type.property-name.css#66D9FF
support.constant.property-value.css#00FFCC