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