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#D7263D
  • activityBar.background#1F1F1F
  • activityBar.foreground#C5C5C5
  • activityBarBadge.background#D7263D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F91
  • badge.foreground#FFFFFF
  • button.background#D7263D
  • button.foreground#FFFFFF
  • button.hoverBackground#E53948
  • dropdown.background#262626
  • dropdown.border#444444
  • dropdown.foreground#E0E0E0
  • editor.background#121212
  • editor.findMatchBackground#D7263D
  • editor.findMatchHighlightBackground#FF6F91
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2C2C2C
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#4B4B4B
  • editor.selectionHighlightBackground#3A3A3A
  • editorBracketMatch.background#3A3A3A
  • editorBracketMatch.border#D7263D
  • editorCursor.foreground#FF6F91
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#555555
  • focusBorder#FF6F91
  • gitDecoration.conflictingResourceForeground#C586C0
  • gitDecoration.deletedResourceForeground#D7263D
  • gitDecoration.modifiedResourceForeground#FF6F91
  • gitDecoration.untrackedResourceForeground#B5F4EA
  • input.background#262626
  • input.border#444444
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#D7263D
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3A3A3A
  • list.highlightForeground#FF6F91
  • list.hoverBackground#2E2E2E
  • minimap.background#1E1E1E
  • minimapSlider.activeBackground#555555
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#444444
  • panel.background#1E1E1E
  • panel.border#333333
  • panelTitle.activeBorder#D7263D
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#1E1E1E
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#2A2A2A
  • sideBarSectionHeader.foreground#FF6F91
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#2A2A2A
  • statusBar.debuggingBackground#D7263D
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.hoverBackground#3A3A3A
  • tab.activeBackground#252525
  • tab.activeBorder#D7263D
  • tab.activeForeground#FFFFFF
  • tab.border#333333
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#569CD6
  • terminal.ansiBrightBlue#9CDCFE
  • terminal.ansiBrightCyan#B5F4EA
  • terminal.ansiBrightGreen#B5CE9A
  • terminal.ansiBrightMagenta#D8A5C4
  • terminal.ansiBrightRed#FF6F91
  • terminal.ansiBrightYellow#FFE59E
  • terminal.ansiCyan#4EC9B0
  • terminal.ansiGreen#6A9955
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#D7263D
  • terminal.ansiYellow#D7BA7D
  • terminal.background#121212
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955italic
string, string.quoted, string.template#FF6F91
keyword, storage.type, storage.modifier#D7263Dbold
keyword.operator, punctuation.accessor#FFB3C1
variable, variable.other#9CDCFE
variable.parameter#C586C0italic
entity.name.function, support.function#4EC9B0
meta.function-call#4EC9B0
entity.name.class, entity.name.type.class, support.class#B5CE9Abold
entity.name.type, support.type#569CD6
entity.name.type.interface#C586C0italic
constant.numeric#B5CE9A
constant, constant.language, constant.character#FFB3C1
constant.language.boolean#D7263Dbold
variable.other.property, support.variable.property#9CDCFE
meta.object-literal.key#D7263D
entity.name.tag, punctuation.definition.tag#C586C0
entity.other.attribute-name#9CDCFEitalic
punctuation, meta.brace#CCCCCC
string.regexp#D7263D
constant.character.escape#C586C0
meta.decorator, punctuation.decorator#FF6F91
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FF6F91bold
markup.bold#FF6F91bold
markup.italic#FF6F91italic
markup.underline.link#569CD6
markup.inline.raw, markup.fenced_code#9CDCFE
support.type.property-name.json#9CDCFE
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D7263D
support.type.property-name.css#569CD6
support.constant.property-value.css#B5CE9A