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.background#011627
  • activityBar.foreground#89a4bb
  • activityBarBadge.background#44596b
  • activityBarBadge.foreground#ffffff
  • badge.background#5f7e97
  • badge.foreground#ffffff
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • dropdown.background#0b253a
  • dropdown.border#5f7e97
  • editor.background#011627
  • editor.findMatchBackground#FFD25F77
  • editor.findMatchHighlightBackground#FF58745d
  • editor.findRangeHighlightBackground#1085bb33
  • editor.foreground#d6deeb
  • editor.inactiveSelectionBackground#1a1e2e
  • editor.lineHighlightBackground#0b253a
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#FF58745a
  • editor.wordHighlightBackground#FFD25F33
  • editor.wordHighlightStrongBackground#FF7F6633
  • editorBracketMatch.background#1a1e2e
  • editorBracketMatch.border#FFD25F
  • editorCursor.foreground#FFD25F
  • editorGroupHeader.tabsBackground#011627
  • editorGutter.addedBackground#9CCC6555
  • editorGutter.background#011627
  • editorGutter.deletedBackground#EF535055
  • editorGutter.modifiedBackground#e2b93d55
  • editorIndentGuide.activeBackground#7E97AC
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#FF5874
  • editorLineNumber.foreground#4b6479
  • editorWhitespace.foreground#2a3750
  • foreground#d6deeb
  • input.background#0b253a
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • list.activeSelectionBackground#234d708c
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#010d18
  • list.inactiveSelectionBackground#0e293f
  • panel.background#011627
  • panel.border#5f7e97
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#5f7e97
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.matchHighlightBackground#ffffffcc
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • sideBar.background#011627
  • sideBar.foreground#89a4bb
  • sideBarSectionHeader.background#011627
  • statusBar.background#011627
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingForeground#d6deeb
  • statusBar.foreground#5f7e97
  • statusBar.noFolderBackground#011627
  • tab.activeBackground#0b2942
  • tab.activeForeground#d2dee7
  • tab.inactiveBackground#01111d
  • tab.inactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#c5e478
  • terminal.background#011627
  • terminal.foreground#d6deeb
  • terminalCursor.foreground#80a4c2
  • titleBar.activeBackground#011627
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • titleBar.inactiveForeground#5f7e97

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5f7e97italic
string#FFEB95
constant.numeric, constant.character.numeric#FFD25F
constant.language, punctuation.definition.constant, variable.other.constant#FF5874
constant.character.escape#FF7F66
variable#d6deeb
punctuation.accessor, keyword#FF6B6Bitalic
storage, meta.var.expr, storage.type.property.js, storage.type.property.ts#FF6B6Bitalic
storage.type#FF6B6B
entity.name.class, meta.class entity.name.type.class#FFD25F
entity.other.inherited-class#FFEB95
entity.name.function#FFD25Fitalic
entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#FF5874
entity.other.attribute-name#FFEB95italic
support.function, support.constant#FFD25F
support.type, support.class#FFEB95
invalid#ffffff
keyword.operator#FF7F66
keyword.operator.relational#FF6B6Bitalic
keyword.operator.logical#FF6B6B
constant.language.boolean#FF5874
constant.language.null#FF5874
meta.brace#FFD25F
variable.language#FF7F66
variable.interpolation#FF6B6B
meta.function-call#FFD25F
meta.property-name#FFEB95
entity.name.tag.custom#FF7F66
entity.other.attribute-name.id#FFD25F
markup.bold#FFEB95bold
markup.italic#FF7F66italic
markup.heading#FF5874bold
markup.quote#5f7e97italic
markup.raw#FFEB95
manjulika-theme by manjulika-by-monu - VS Code Theme