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#0096FF
  • activityBar.background#121212
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#0096FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0096FF
  • badge.foreground#FFFFFF
  • button.background#0A3D62
  • button.foreground#FFFFFF
  • button.hoverBackground#1A4A73
  • dropdown.background#1E1E1E
  • dropdown.border#0A3D62
  • dropdown.foreground#E5E5E5
  • editor.background#0D0D0D
  • editor.findMatchBackground#0096FF99
  • editor.findMatchHighlightBackground#0096FF66
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1A1A1A
  • editor.lineHighlightBorder#0096FF
  • editor.selectionBackground#00336666
  • editor.selectionHighlightBackground#00336699
  • editorBracketMatch.background#0096FF33
  • editorBracketMatch.border#0096FF
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#0A3D62
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#0096FF
  • gitDecoration.conflictingResourceForeground#FF1744
  • gitDecoration.deletedResourceForeground#FF5252
  • gitDecoration.modifiedResourceForeground#00E676
  • gitDecoration.untrackedResourceForeground#FFC107
  • input.background#1E1E1E
  • input.border#0A3D62
  • input.foreground#E5E5E5
  • input.placeholderForeground#777777
  • inputOption.activeBorder#0096FF
  • list.activeSelectionBackground#0A3D62
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0A3D62
  • list.highlightForeground#0096FF
  • list.hoverBackground#1A1A1A
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#99999980
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#77777780
  • panel.background#0D0D0D
  • panel.border#0A3D62
  • panelTitle.activeBorder#0096FF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#77777780
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#55555580
  • sideBar.background#111111
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.foreground#0096FF
  • sideBarTitle.foreground#E5E5E5
  • statusBar.background#0A3D62
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#2B2B2B
  • statusBarItem.hoverBackground#1A4A73
  • tab.activeBackground#0A3D62
  • tab.activeBorder#0096FF
  • tab.activeForeground#FFFFFF
  • tab.border#0A3D62
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0A3D62
  • terminal.ansiBrightBlue#0096FF
  • terminal.ansiBrightCyan#00E5FF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF6E40
  • terminal.ansiBrightYellow#FFD740
  • terminal.ansiCyan#00B5D8
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D500F9
  • terminal.ansiRed#FF3D00
  • terminal.ansiYellow#FFAB00
  • terminal.background#0D0D0D
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0A3D62
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0D1B2A
  • titleBar.inactiveForeground#AAAAAA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00C853
keyword, storage.type, storage.modifier#0096FFbold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#E0E0E0
variable.parameter#FFAB00italic
entity.name.function, support.function#FFFFFF
meta.function-call#00B5D8
entity.name.class, entity.name.type.class, support.class#FFB300bold
entity.name.type, support.type#D500F9
entity.name.type.interface#00E5FFitalic
constant.numeric#B388FF
constant, constant.language, constant.character#FFAB00
constant.language.boolean#0096FFbold
variable.other.property, support.variable.property#00BFA5
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF3D00
entity.other.attribute-name#FF3D00italic
punctuation, meta.brace#CCCCCC
string.regexp#FF4081
constant.character.escape#FFAB00
meta.decorator, punctuation.decorator#FF4081
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#0A3D62bold
markup.bold#0A3D62bold
markup.italic#0A3D62italic
markup.underline.link#00B5D8
markup.inline.raw, markup.fenced_code#00C853
support.type.property-name.json#0096FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B388FF
support.type.property-name.css#00BFA5
support.constant.property-value.css#FFAB00