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#3A8FFF
  • activityBar.background#121212
  • activityBar.foreground#3A8FFF
  • activityBarBadge.background#3A8FFF
  • activityBarBadge.foreground#0B0C0D
  • badge.background#3A8FFF
  • badge.foreground#0B0C0D
  • button.background#1A1A1A
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#111111
  • dropdown.border#1A1A1A
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C0D
  • editor.findMatchBackground#D9774433
  • editor.findMatchHighlightBackground#D9774422
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1A1A1A80
  • editor.lineHighlightBorder#1A1A1AC0
  • editor.selectionBackground#3A8FFF33
  • editor.selectionHighlightBackground#3A8FFF22
  • editorBracketMatch.background#3A8FFF33
  • editorBracketMatch.border#3A8FFF
  • editorCursor.foreground#3A8FFF
  • editorGroupHeader.tabsBackground#0B0C0D
  • editorIndentGuide.activeBackground#56565688
  • editorIndentGuide.background#56565644
  • editorLineNumber.activeForeground#3A8FFF
  • editorLineNumber.foreground#565656
  • editorWhitespace.foreground#565656
  • focusBorder#3A8FFF
  • gitDecoration.conflictingResourceForeground#FFC75F
  • gitDecoration.deletedResourceForeground#FF5F5F
  • gitDecoration.modifiedResourceForeground#3A8FFF
  • gitDecoration.untrackedResourceForeground#6AFF8D
  • input.background#111111
  • input.border#1A1A1A
  • input.foreground#D0D0D0
  • input.placeholderForeground#565656
  • inputOption.activeBorder#3A8FFF
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1A
  • list.highlightForeground#3A8FFF
  • list.hoverBackground#1A1A1A66
  • minimap.background#0B0C0D
  • minimapSlider.activeBackground#3A8FFF66
  • minimapSlider.background#3A8FFF22
  • minimapSlider.hoverBackground#3A8FFF44
  • panel.background#0B0C0D
  • panel.border#1A1A1A
  • panelTitle.activeBorder#3A8FFF
  • panelTitle.activeForeground#3A8FFF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A8FFF88
  • scrollbarSlider.background#56565644
  • scrollbarSlider.hoverBackground#56565688
  • sideBar.background#111111
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#3A8FFF
  • sideBarTitle.foreground#3A8FFF
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#D97741
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#3A8FFF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0D
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#3A8FFF
  • terminal.ansiBrightBlue#66A8FF
  • terminal.ansiBrightCyan#88F0FF
  • terminal.ansiBrightGreen#88FFB3
  • terminal.ansiBrightMagenta#FFAAFF
  • terminal.ansiBrightRed#FFAAAA
  • terminal.ansiBrightYellow#FFE08A
  • terminal.ansiCyan#5FDFFF
  • terminal.ansiGreen#6AFF8D
  • terminal.ansiMagenta#FF77FF
  • terminal.ansiRed#FF5F5F
  • terminal.ansiYellow#FFC75F
  • terminal.background#0B0C0D
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C0D
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#6AFF8D—
keyword, storage.type, storage.modifier#3A8FFFbold
keyword.operator, punctuation.accessor#5FDFFF—
variable, variable.other#D0D0D0—
variable.parameter#6AFF8Ditalic
entity.name.function, support.function#5FDFFF—
meta.function-call#A0A0A0—
entity.name.class, entity.name.type.class, support.class#3A8FFFbold
entity.name.type, support.type#5FDFFF—
entity.name.type.interface#6AFF8Ditalic
constant.numeric#FF5F5F—
constant, constant.language, constant.character#FFC75F—
constant.language.boolean#FF5F5Fbold
variable.other.property, support.variable.property#A0A0A0—
meta.object-literal.key#3A8FFF—
entity.name.tag, punctuation.definition.tag#3A8FFF—
entity.other.attribute-name#6AFF8Ditalic
punctuation, meta.brace#565656—
string.regexp#FF5F5F—
constant.character.escape#6AFF8D—
meta.decorator, punctuation.decorator#FFC75F—
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#3A8FFFbold
markup.bold#FFC75Fbold
markup.italic#6AFF8Ditalic
markup.underline.link#5FDFFF—
markup.inline.raw, markup.fenced_code#6AFF8D—
support.type.property-name.json#3A8FFF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC75F—
support.type.property-name.css#3A8FFF—
support.constant.property-value.css#6AFF8D—