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#F4C430
  • activityBar.background#15171F
  • activityBar.foreground#F4C430
  • activityBarBadge.background#F4C430
  • activityBarBadge.foreground#0F111A
  • badge.background#F4C430
  • badge.foreground#0F111A
  • button.background#212332
  • button.foreground#D0D0D0
  • button.hoverBackground#262A38
  • dropdown.background#1A1C26
  • dropdown.border#212332
  • dropdown.foreground#D0D0D0
  • editor.background#0F111A
  • editor.findMatchBackground#F4C43040
  • editor.findMatchHighlightBackground#F4C43020
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1A1C2670
  • editor.lineHighlightBorder#212332
  • editor.selectionBackground#4ECDC460
  • editor.selectionHighlightBackground#4ECDC420
  • editorBracketMatch.background#4ECDC440
  • editorBracketMatch.border#4ECDC4
  • editorCursor.foreground#F4C430
  • editorGroupHeader.tabsBackground#0F111A
  • editorIndentGuide.activeBackground#262A3880
  • editorIndentGuide.background#262A3840
  • editorLineNumber.activeForeground#F4C430
  • editorLineNumber.foreground#5A6A73
  • editorWhitespace.foreground#262A38
  • focusBorder#F4C430
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF5370
  • gitDecoration.modifiedResourceForeground#F4C430
  • gitDecoration.untrackedResourceForeground#8AE234
  • input.background#1A1C26
  • input.border#212332
  • input.foreground#D0D0D0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#F4C430
  • list.activeSelectionBackground#212332
  • list.activeSelectionForeground#F4C430
  • list.focusBackground#212332
  • list.highlightForeground#F4C430
  • list.hoverBackground#21233240
  • minimap.background#0F111A
  • minimapSlider.activeBackground#F4C43060
  • minimapSlider.background#F4C43020
  • minimapSlider.hoverBackground#F4C43040
  • panel.background#0F111A
  • panel.border#212332
  • panelTitle.activeBorder#F4C430
  • panelTitle.activeForeground#F4C430
  • panelTitle.inactiveForeground#B0BEC5
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#262A38C0
  • scrollbarSlider.background#262A3840
  • scrollbarSlider.hoverBackground#262A3880
  • sideBar.background#15171F
  • sideBar.foreground#B0BEC5
  • sideBarSectionHeader.background#1A1C26
  • sideBarSectionHeader.foreground#F4C430
  • sideBarTitle.foreground#F4C430
  • statusBar.background#212332
  • statusBar.debuggingBackground#4ECDC4
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#15171F
  • statusBarItem.hoverBackground#262A38
  • tab.activeBackground#1A1C26
  • tab.activeBorder#F4C430
  • tab.activeForeground#F4C430
  • tab.border#0F111A
  • tab.inactiveBackground#15171F
  • tab.inactiveForeground#B0BEC5
  • terminal.ansiBlue#4ECDC4
  • terminal.ansiBrightBlue#6C9E9E
  • terminal.ansiBrightCyan#5FD9FF
  • terminal.ansiBrightGreen#9FDC5F
  • terminal.ansiBrightMagenta#E58CFF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#8AE234
  • terminal.ansiMagenta#D76CFF
  • terminal.ansiRed#FF5370
  • terminal.ansiYellow#F4C430
  • terminal.background#0F111A
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#15171F
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0F111A
  • titleBar.inactiveForeground#B0BEC5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A73italic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#F4C430bold
keyword.operator, punctuation.accessor#4ECDC4
variable, variable.other#D0D0D0
variable.parameter#FFB84Ditalic
entity.name.function, support.function#8AE234
meta.function-call#B0E57C
entity.name.class, entity.name.type.class, support.class#D76CFFbold
entity.name.type, support.type#D76CFF
entity.name.type.interface#4ECDC4italic
constant.numeric#FFB84D
constant, constant.language, constant.character#FFB84D
constant.language.boolean#FFB84Dbold
variable.other.property, support.variable.property#B0BEC5
meta.object-literal.key#8AE234
entity.name.tag, punctuation.definition.tag#F4C430
entity.other.attribute-name#AB47BCitalic
punctuation, meta.brace#B0BEC5
string.regexp#FF7043
constant.character.escape#AB47BC
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF5370strikethrough
markup.heading, entity.name.section#F4C430bold
markup.bold#FFB84Dbold
markup.italic#AB47BCitalic
markup.underline.link#4ECDC4
markup.inline.raw, markup.fenced_code#8AE234
support.type.property-name.json#8AE234
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F4C430
support.type.property-name.css#8AE234
support.constant.property-value.css#4ECDC4