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#c41e1e
  • activityBar.background#d9c589
  • activityBar.badge.background#c41e1e
  • activityBar.badge.foreground#ffffff
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#555555
  • badge.background#c41e1e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a1a1a
  • breadcrumb.background#f4e8c1
  • breadcrumb.foreground#555555
  • breadcrumbPicker.background#e8d5a3
  • button.background#c41e1e
  • button.foreground#ffffff
  • button.hoverBackground#8b1a1a
  • diffEditor.insertedTextBackground#5a6e4a40
  • diffEditor.insertedTextBorder#2a6682
  • diffEditor.removedTextBackground#c41e1e40
  • diffEditor.removedTextBorder#c41e1e
  • diffEditorOverview.insertedForeground#2a668288
  • diffEditorOverview.removedForeground#c41e1e88
  • dropdown.background#faf3e0
  • dropdown.border#c9b87a
  • dropdown.foreground#1a1a1a
  • editor.background#f5e9c2
  • editor.findMatchBackground#8b6914
  • editor.findMatchForeground#f4e8c1
  • editor.findMatchHighlightBackground#8b691480
  • editor.foreground#1a1a1a
  • editor.lineHighlightBackground#b8b0a0
  • editor.matchHighlightBackground#d9c589
  • editor.selectionBackground#a0845a
  • editor.selectionHighlightBackground#d9c589
  • editorBracketMatch.background#d9c589
  • editorBracketMatch.border#5c4033
  • editorCursor.foreground#1a1a1a
  • editorGroup.border#c9b87a
  • editorGroupHeader.tabsBackground#e8d5a3
  • editorGutter.background#e8d5a3
  • editorHoverWidget.background#faf3e0
  • editorHoverWidget.border#c9b87a
  • editorHoverWidget.foreground#1a1a1a
  • editorIndentGuide.activeBackground#8b6914
  • editorIndentGuide.background#8b7355
  • editorLineNumber.activeForeground#1a1a1a
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#c9b87a
  • editorSuggestWidget.background#faf3e0
  • editorSuggestWidget.border#c9b87a
  • editorSuggestWidget.foreground#1a1a1a
  • editorSuggestWidget.highlightForeground#c41e1e
  • editorSuggestWidget.selectedBackground#a0845a
  • editorWhitespace.foreground#c9b87a
  • errorForeground#c41e1e
  • gitDecoration.addedResourceForeground#2a6682
  • gitDecoration.conflictingResourceForeground#c41e1e
  • gitDecoration.deletedResourceForeground#c41e1e
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#8b6914
  • gitDecoration.untrackedResourceForeground#5a6e4a
  • infoForeground#2a6682
  • input.background#faf3e0
  • input.border#c9b87a
  • input.foreground#1a1a1a
  • input.placeholderForeground#888888
  • inputOption.activeBackground#d9c589
  • inputOption.activeForeground#1a1a1a
  • list.activeSelectionBackground#a0845a
  • list.activeSelectionForeground#f4e8c1
  • list.focusBackground#d9c589
  • list.highlightForeground#c41e1e
  • list.hoverBackground#d9c589
  • list.hoverForeground#1a1a1a
  • list.inactiveSelectionBackground#d9c589
  • list.inactiveSelectionForeground#1a1a1a
  • minimapGutter.background#e8d5a3
  • notification.background#faf3e0
  • notification.border#c9b87a
  • notification.foreground#1a1a1a
  • notifications.background#faf3e0
  • notifications.border#c9b87a
  • notifications.foreground#1a1a1a
  • panel.background#e8d5a3
  • panel.border#c9b87a
  • panelInput.border#c9b87a
  • panelTitle.activeForeground#c41e1e
  • panelTitle.inactiveForeground#555555
  • peekView.border#c41e1e
  • peekViewEditor.background#f4e8c1
  • peekViewEditor.matchHighlightBackground#8b691480
  • peekViewResult.background#e8d5a3
  • peekViewResult.matchHighlightBackground#8b691480
  • peekViewResult.selectionBackground#a0845a
  • peekViewTitle.background#a0845a
  • peekViewTitle.foreground#f4e8c1
  • scrollbarSlider.activeBackground#5c403380
  • scrollbarSlider.background#8b735580
  • scrollbarSlider.hoverBackground#5c4033cc
  • sideBar.background#e8d5a3
  • sideBar.border#c9b87a
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#d9c589
  • sideBarSectionHeader.foreground#1a1a1a
  • statusBar.background#a0845a
  • statusBar.debuggingBackground#c41e1e
  • statusBar.foreground#f4e8c1
  • statusBarItem.prominentBackground#c41e1e
  • statusBarItem.remoteBackground#2a6682
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#a0845a
  • tab.activeBorder#c41e1e
  • tab.activeBorderTop#c41e1e
  • tab.activeForeground#f4e8c1
  • tab.border#c9b87a
  • tab.inactiveBackground#e8d5a3
  • tab.inactiveForeground#555555
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#2a6682
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5a9ec8
  • terminal.ansiBrightCyan#5a9ec8
  • terminal.ansiBrightGreen#5a6e4a
  • terminal.ansiBrightMagenta#b55a5a
  • terminal.ansiBrightRed#e06c60
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#8b6914
  • terminal.ansiCyan#2a6682
  • terminal.ansiGreen#5a6e4a
  • terminal.ansiMagenta#8b1a1a
  • terminal.ansiRed#c41e1e
  • terminal.ansiWhite#e8d5a3
  • terminal.ansiYellow#8b6914
  • terminal.background#f4e8c1
  • terminal.border#c9b87a
  • terminal.foreground#1a1a1a
  • terminal.selectionBackground#a0845a
  • terminalCursor.foreground#1a1a1a
  • titleBar.activeBackground#a0845a
  • titleBar.activeForeground#f4e8c1
  • titleBar.inactiveBackground#e8d5a3
  • titleBar.inactiveForeground#555555
  • warningForeground#8b6914

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, comment.block.documentation#5d704eitalic
keyword, keyword.control, storage.type, storage.modifier#2a6682bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#555555
string, string.quoted, string.quoted.single, string.quoted.double, string.regexp#5c4033
constant.numeric, constant.numeric.integer, constant.numeric.float#8b1a1a
constant.language, constant.language.boolean, constant.language.null#8b6914
variable, variable.other, variable.other.readwrite#3a3530
variable.other.constant, variable.language.special#8b1a1a
entity.name.function, support.function, meta.function-call#1a1a1abold
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type#2a6682
support.constant, constant.other#8b6914
punctuation, punctuation.separator, punctuation.definition, meta.brace#888888
invalid, invalid.illegal, invalid.broken, invalid.deprecated#c41e1eunderline
markup.inserted, meta.diff.header.from-file, markup.inserted#2c6e8c
markup.deleted, meta.diff.header.to-file, markup.deleted#c41e1e
markup.heading, markup.heading.markdown#1a1a1abold
markup.boldbold
markup.italicitalic
markup.underline.link, markup.underline#2a6682underline
markup.list, markup.list.unordered, markup.list.ordered#5c4033
entity.name.tag, meta.tag, punctuation.definition.tag#6b3a2a
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#8b6914
string.quoted.double constant.character.escape, constant.character.escape, constant.character.escape.html#8b1a1a
support.type.property-name, variable.other.property, meta.property-name#3a3530
markup.table, markup.table.markdown#1a1a1a
Newspaper Theme Mosaulse by Mosaulse - VS Code Theme