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#FF33AA
  • activityBar.background#08081A
  • activityBar.foreground#FF33AA
  • activityBarBadge.background#FF33AA
  • activityBarBadge.foreground#0A0A1F
  • badge.background#FF33AA
  • badge.foreground#0A0A1F
  • button.background#222244
  • button.foreground#C0C0D0
  • button.hoverBackground#333355
  • dropdown.background#0C0C2A
  • dropdown.border#222244
  • dropdown.foreground#C0C0D0
  • editor.background#0A0A1F
  • editor.findMatchBackground#FF33AA44
  • editor.findMatchHighlightBackground#FF33AA22
  • editor.foreground#C0C0D0
  • editor.lineHighlightBackground#111133
  • editor.lineHighlightBorder#222244
  • editor.selectionBackground#3322AA88
  • editor.selectionHighlightBackground#3322AA44
  • editorBracketMatch.background#FF33AA33
  • editorBracketMatch.border#FF33AA
  • editorCursor.foreground#FF33AA
  • editorGroupHeader.tabsBackground#0A0A1F
  • editorIndentGuide.activeBackground#33335588
  • editorIndentGuide.background#33335544
  • editorLineNumber.activeForeground#FF33AA
  • editorLineNumber.foreground#555577
  • editorWhitespace.foreground#333355
  • focusBorder#FF33AA
  • gitDecoration.conflictingResourceForeground#FFEE33
  • gitDecoration.deletedResourceForeground#FF3355
  • gitDecoration.modifiedResourceForeground#3355FF
  • gitDecoration.untrackedResourceForeground#33FF99
  • input.background#0C0C2A
  • input.border#222244
  • input.foreground#C0C0D0
  • input.placeholderForeground#555577
  • inputOption.activeBorder#FF33AA
  • list.activeSelectionBackground#222244
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#222244
  • list.highlightForeground#FF33AA
  • list.hoverBackground#11113366
  • minimap.background#0A0A1F
  • minimapSlider.activeBackground#FF33AA66
  • minimapSlider.background#FF33AA22
  • minimapSlider.hoverBackground#FF33AA44
  • panel.background#0A0A1F
  • panel.border#222244
  • panelTitle.activeBorder#FF33AA
  • panelTitle.activeForeground#FF33AA
  • panelTitle.inactiveForeground#A0A0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#55557788
  • scrollbarSlider.background#33335544
  • scrollbarSlider.hoverBackground#33335588
  • sideBar.background#0C0C2A
  • sideBar.foreground#B0B0C0
  • sideBarSectionHeader.background#0A0A1F
  • sideBarSectionHeader.foreground#FF33AA
  • sideBarTitle.foreground#FF33AA
  • statusBar.background#111133
  • statusBar.debuggingBackground#FF33AA
  • statusBar.foreground#C0C0D0
  • statusBar.noFolderBackground#0A0A1F
  • statusBarItem.hoverBackground#222244
  • tab.activeBackground#111133
  • tab.activeBorder#FF33AA
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A1F
  • tab.inactiveBackground#0C0C2A
  • tab.inactiveForeground#A0A0B0
  • terminal.ansiBlue#3355FF
  • terminal.ansiBrightBlue#5577FF
  • terminal.ansiBrightCyan#55FFFF
  • terminal.ansiBrightGreen#55FFBB
  • terminal.ansiBrightMagenta#FF55CC
  • terminal.ansiBrightRed#FF5577
  • terminal.ansiBrightYellow#FFFF55
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#33FF99
  • terminal.ansiMagenta#FF33AA
  • terminal.ansiRed#FF3355
  • terminal.ansiYellow#FFEE33
  • terminal.background#0A0A1F
  • terminal.foreground#C0C0D0
  • titleBar.activeBackground#0A0A1F
  • titleBar.activeForeground#C0C0D0
  • titleBar.inactiveBackground#08081A
  • titleBar.inactiveForeground#A0A0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555577italic
string, string.quoted, string.template#33FF99
keyword, storage.type, storage.modifier#FF33AAbold
keyword.operator, punctuation.accessor#FF77CC
variable, variable.other#C0C0D0
variable.parameter#FF99CCitalic
entity.name.function, support.function#3355FF
meta.function-call#6677FF
entity.name.class, entity.name.type.class, support.class#FF33AAbold
entity.name.type, support.type#FF33AA
entity.name.type.interface#00FFCCitalic
constant.numeric#FFEE33
constant, constant.language, constant.character#FFEE33
constant.language.boolean#FFEE33bold
variable.other.property, support.variable.property#6677FF
meta.object-literal.key#3355FF
entity.name.tag, punctuation.definition.tag#FF33AA
entity.other.attribute-name#FF55FFitalic
punctuation, meta.brace#AAAAAA
string.regexp#FFEE33
constant.character.escape#FF55FF
meta.decorator, punctuation.decorator#FFFF55
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FF33AAbold
markup.bold#FFEE33bold
markup.italic#FF55FFitalic
markup.underline.link#00FFCC
markup.inline.raw, markup.fenced_code#33FF99
support.type.property-name.json#3355FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFFF55
support.type.property-name.css#3355FF
support.constant.property-value.css#33FF99