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#ffdf00
  • activityBar.background#1a1f2b
  • activityBar.foreground#c0c8d9
  • activityBarBadge.background#ffdf00
  • activityBarBadge.foreground#1e1e1e
  • badge.background#cfa23d
  • badge.foreground#1e1e1e
  • button.background#1a2b5e
  • button.foreground#f8f8f2
  • button.hoverBackground#2a5bdf
  • dropdown.background#1a1f2b
  • dropdown.border#1a2b5e
  • dropdown.foreground#e0e0e0
  • editor.background#0d1018
  • editor.findMatchBackground#cfa23d80
  • editor.findMatchHighlightBackground#ffdf4080
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2a2e3d
  • editor.lineHighlightBorder#ffdf00
  • editor.selectionBackground#5b7f5d80
  • editor.selectionHighlightBackground#2ad4c980
  • editorBracketMatch.background#2ad4c940
  • editorBracketMatch.border#ffdf00
  • editorCursor.foreground#ffdf00
  • editorGroupHeader.tabsBackground#151a2a
  • editorIndentGuide.activeBackground#ffdf00
  • editorIndentGuide.background#333444
  • editorLineNumber.activeForeground#ffdf00
  • editorLineNumber.foreground#555765
  • editorWhitespace.foreground#555765
  • focusBorder#2ad4c9
  • gitDecoration.conflictingResourceForeground#ffdf00
  • gitDecoration.deletedResourceForeground#b93c3c
  • gitDecoration.modifiedResourceForeground#2ad4c9
  • gitDecoration.untrackedResourceForeground#5b7f5d
  • input.background#1a1f2b
  • input.border#1a2b5e
  • input.foreground#e0e0e0
  • input.placeholderForeground#555765
  • inputOption.activeBorder#ffdf00
  • list.activeSelectionBackground#2ad4c940
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2ad4c940
  • list.highlightForeground#ffdf00
  • list.hoverBackground#2a2e3d
  • minimap.background#0d1018
  • minimapSlider.activeBackground#9999aa80
  • minimapSlider.background#55576580
  • minimapSlider.hoverBackground#77779580
  • panel.background#151a2a
  • panel.border#1a2b5e
  • panelTitle.activeBorder#ffdf00
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#7a8ab8
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#9999aa80
  • scrollbarSlider.background#55576580
  • scrollbarSlider.hoverBackground#77779580
  • sideBar.background#151a2a
  • sideBar.foreground#c0c8d9
  • sideBarSectionHeader.background#1a1f2b
  • sideBarSectionHeader.foreground#ffdf00
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#1a2b5e
  • statusBar.debuggingBackground#cfa23d
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#3b4b66
  • statusBarItem.hoverBackground#2ad4c9
  • tab.activeBackground#151a2a
  • tab.activeBorder#ffdf00
  • tab.activeForeground#ffdf00
  • tab.border#1a1f2b
  • tab.inactiveBackground#0d1018
  • tab.inactiveForeground#7a8ab8
  • terminal.ansiBlue#1a2b5e
  • terminal.ansiBrightBlue#2a5bdf
  • terminal.ansiBrightCyan#53e0e0
  • terminal.ansiBrightGreen#7ac774
  • terminal.ansiBrightMagenta#e0a75d
  • terminal.ansiBrightRed#d45a5a
  • terminal.ansiBrightYellow#ffea70
  • terminal.ansiCyan#2ad4c9
  • terminal.ansiGreen#5b7f5d
  • terminal.ansiMagenta#cfa23d
  • terminal.ansiRed#b93c3c
  • terminal.ansiYellow#ffdf00
  • terminal.background#0d1018
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0d1018
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#151a2a
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555765italic
string, string.quoted, string.template#cfa23d
keyword, storage.type, storage.modifier#1a2b5ebold
keyword.operator, punctuation.accessor#2ad4c9
variable, variable.other#d8b5a5
variable.parameter#555765italic
entity.name.function, support.function#2ad4c9
meta.function-call#53e0e0
entity.name.class, entity.name.type.class, support.class#1a2b5ebold
entity.name.type, support.type#5b7f5d
entity.name.type.interface#ffdf00italic
constant.numeric#e0a75d
constant, constant.language, constant.character#e0a75d
constant.language.boolean#ffdf00bold
variable.other.property, support.variable.property#d8b5a5
meta.object-literal.key#ffdf00
entity.name.tag, punctuation.definition.tag#6b4c3b
entity.other.attribute-name#5b7f5ditalic
punctuation, meta.brace#555765
string.regexp#5b7f5d
constant.character.escape#d45a5a
meta.decorator, punctuation.decorator#2ad4c9
invalid, invalid.illegal#b93c3cstrikethrough
markup.heading, entity.name.section#1a2b5ebold
markup.bold#ffdf00bold
markup.italic#2ad4c9italic
markup.underline.link#2ad4c9
markup.inline.raw, markup.fenced_code#cfa23d
support.type.property-name.json#ffdf00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1a2b5e
support.type.property-name.css#2ad4c9
support.constant.property-value.css#cfa23d