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#FF6F61
  • activityBar.background#14142B
  • activityBar.foreground#FF6F61
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#1A1A2E
  • badge.background#FF6F61
  • badge.foreground#1A1A2E
  • button.background#1F1F3F
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A4F
  • dropdown.background#14142B
  • dropdown.border#1F1F3F
  • dropdown.foreground#E0E0FF
  • editor.background#1A1A2E
  • editor.findMatchBackground#FF6F6144
  • editor.findMatchHighlightBackground#FF6F6122
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#2A2A4F80
  • editor.lineHighlightBorder#FFEB3B30
  • editor.selectionBackground#4DD0E150
  • editor.selectionHighlightBackground#4DD0E122
  • editorBracketMatch.background#4DD0E133
  • editorBracketMatch.border#4DD0E1
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#1A1A2E
  • editorIndentGuide.activeBackground#FFEB3B88
  • editorIndentGuide.background#33334F44
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#555575
  • editorWhitespace.foreground#33334F
  • focusBorder#FFEB3B
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#448AFF
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#14142B
  • input.border#1F1F3F
  • input.foreground#E0E0FF
  • input.placeholderForeground#77778F
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#1F1F3F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1F1F3F
  • list.highlightForeground#FF6F61
  • list.hoverBackground#1F1F3F66
  • minimap.background#1A1A2E
  • minimapSlider.activeBackground#FFEB3B66
  • minimapSlider.background#FFEB3B22
  • minimapSlider.hoverBackground#FFEB3B44
  • panel.background#1A1A2E
  • panel.border#14142B
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#FF6F61
  • panelTitle.inactiveForeground#C5C5E6
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFEB3B88
  • scrollbarSlider.background#55557544
  • scrollbarSlider.hoverBackground#55557588
  • sideBar.background#14142B
  • sideBar.foreground#C5C5E6
  • sideBarSectionHeader.background#14142B
  • sideBarSectionHeader.foreground#FFEB3B
  • sideBarTitle.foreground#FFEB3B
  • statusBar.background#14142B
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#14142B
  • statusBarItem.hoverBackground#1F1F3F
  • tab.activeBackground#1F1F3F
  • tab.activeBorder#FF6F61
  • tab.activeForeground#FFFFFF
  • tab.border#1A1A2E
  • tab.inactiveBackground#14142B
  • tab.inactiveForeground#C5C5E6
  • terminal.ansiBlue#448AFF
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#E040FB
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E040FB
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFEB3B
  • terminal.background#1A1A2E
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#14142B
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#1A1A2E
  • titleBar.inactiveForeground#C5C5E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#77778Fitalic
string, string.quoted, string.template#4DD0E1
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#E0E0FF
variable, variable.other#E0E0FF
variable.parameter#FFEB3Bitalic
entity.name.function, support.function#448AFF
meta.function-call#C5C5E6
entity.name.class, entity.name.type.class, support.class#FF6F61bold
entity.name.type, support.type#448AFF
entity.name.type.interface#4DD0E1italic
constant.numeric#FFEB3B
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#C5C5E6
meta.object-literal.key#448AFF
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#4DD0E1italic
punctuation, meta.brace#E0E0FF
string.regexp#FFEB3B
constant.character.escape#4DD0E1
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FFEB3Bbold
markup.italic#4DD0E1italic
markup.underline.link#448AFF
markup.inline.raw, markup.fenced_code#8BC34A
support.type.property-name.json#448AFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#448AFF
support.constant.property-value.css#FFEB3B