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#b71c1c
  • activityBar.background#e0e0e0
  • activityBar.foreground#212121
  • activityBarBadge.background#b71c1c
  • activityBarBadge.foreground#ffffff
  • badge.background#b71c1c
  • badge.foreground#ffffff
  • button.background#b71c1c
  • button.foreground#ffffff
  • button.hoverBackground#c62828
  • dropdown.background#ffffff
  • dropdown.border#bdbdbd
  • dropdown.foreground#212121
  • editor.background#fafafa
  • editor.findMatchBackground#fff9c4
  • editor.findMatchHighlightBackground#ffe082
  • editor.foreground#212121
  • editor.lineHighlightBackground#eeeeee
  • editor.lineHighlightBorder#cccccc
  • editor.selectionBackground#b3e5fc
  • editor.selectionHighlightBackground#c8e6c9
  • editorBracketMatch.background#c5cae9
  • editorBracketMatch.border#9fa8da
  • editorCursor.foreground#b71c1c
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground#9e9e9e
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#e0e0e0
  • focusBorder#b71c1c
  • gitDecoration.conflictingResourceForeground#f57f17
  • gitDecoration.deletedResourceForeground#b71c1c
  • gitDecoration.modifiedResourceForeground#1565c0
  • gitDecoration.untrackedResourceForeground#2e7d32
  • input.background#ffffff
  • input.border#bdbdbd
  • input.foreground#212121
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#b71c1c
  • list.activeSelectionBackground#c5cae9
  • list.activeSelectionForeground#212121
  • list.focusBackground#bbdefb
  • list.highlightForeground#b71c1c
  • list.hoverBackground#e3f2fd
  • minimap.background#fafafa
  • minimapSlider.activeBackground#808080
  • minimapSlider.background#c0c0c0
  • minimapSlider.hoverBackground#a0a0a0
  • panel.background#f5f5f5
  • panel.border#bdbdbd
  • panelTitle.activeBorder#b71c1c
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#9e9e9e
  • scrollbar.shadow#e0e0e0
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#c0c0c0
  • scrollbarSlider.hoverBackground#a0a0a0
  • sideBar.background#f5f5f5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#424242
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#00695c
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#b71c1c
  • statusBarItem.hoverBackground#d5d5d5
  • tab.activeBackground#ffffff
  • tab.activeBorder#b71c1c
  • tab.activeForeground#212121
  • tab.border#bdbdbd
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#9e9e9e
  • terminal.ansiBlue#1565c0
  • terminal.ansiBrightBlue#1976d2
  • terminal.ansiBrightCyan#00acc1
  • terminal.ansiBrightGreen#43a047
  • terminal.ansiBrightMagenta#8e24aa
  • terminal.ansiBrightRed#d32f2f
  • terminal.ansiBrightYellow#fbc02d
  • terminal.ansiCyan#0097a7
  • terminal.ansiGreen#2e7d32
  • terminal.ansiMagenta#6a1b9a
  • terminal.ansiRed#b71c1c
  • terminal.ansiYellow#f9a825
  • terminal.background#fafafa
  • terminal.foreground#212121
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#9e9e9e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d6d6ditalic
string, string.quoted, string.template#c14e3a
keyword, storage.type, storage.modifier#3f51b5bold
keyword.operator, punctuation.accessor#795548
variable, variable.other#00796b
variable.parameter#00838fitalic
entity.name.function, support.function#6d4c41
meta.function-call#5d4037
entity.name.class, entity.name.type.class, support.class#1565c0bold
entity.name.type, support.type#0097a7
entity.name.type.interface#00796bitalic
constant.numeric#f57f17
constant, constant.language, constant.character#ff9800
constant.language.boolean#d84315bold
variable.other.property, support.variable.property#607d8b
meta.object-literal.key#8e24aa
entity.name.tag, punctuation.definition.tag#e64a19
entity.other.attribute-name#6a1b9aitalic
punctuation, meta.brace#9e9e9e
string.regexp#c62828
constant.character.escape#ad1457
meta.decorator, punctuation.decorator#00695c
invalid, invalid.illegal#d32f2fstrikethrough
markup.heading, entity.name.section#424242bold
markup.bold#212121bold
markup.italic#424242italic
markup.underline.link#1565c0
markup.inline.raw, markup.fenced_code#c14e3a
support.type.property-name.json#6d4c41
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#455a64
support.type.property-name.css#00796b
support.constant.property-value.css#ff5722
themesmith by CyberBoost - VS Code Theme