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#2a2620
  • activityBar.badge.background#c41e1e
  • activityBar.badge.foreground#ffffff
  • activityBar.foreground#d4c896
  • activityBar.inactiveForeground#666666
  • badge.background#c41e1e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#a68a2e
  • breadcrumb.background#1a1410
  • breadcrumb.foreground#666666
  • breadcrumbPicker.background#2a2620
  • button.background#c41e1e
  • button.foreground#ffffff
  • button.hoverBackground#8b1a1a
  • diffEditor.insertedTextBackground#2a3a2a40
  • diffEditor.removedTextBackground#3a1a1a40
  • diffEditorInsertedTextBorder#a3be8c
  • diffEditorOverview.insertedForeground#a3be8c88
  • diffEditorOverview.removedForeground#d8655a88
  • diffEditorRemovedTextBorder#d8655a
  • dropdown.background#221e18
  • dropdown.border#3c3630
  • dropdown.foreground#d4c896
  • editor.background#1a1410
  • editor.findMatchBackground#a68a2e
  • editor.findMatchForeground#d4c896
  • editor.findMatchHighlightBackground#a68a2e80
  • editor.foreground#d4c896
  • editor.lineHighlightBackground#3c3630
  • editor.matchHighlightBackground#3c3630
  • editor.selectionBackground#4a3c2a
  • editor.selectionHighlightBackground#3c3630
  • editorBracketMatch.background#3c3630
  • editorBracketMatch.border#a68a2e
  • editorCursor.foreground#a68a2e
  • editorGroup.border#3c3630
  • editorGroupHeader.tabsBackground#2a2620
  • editorGutter.background#2a2620
  • editorHoverWidget.background#221e18
  • editorHoverWidget.border#3c3630
  • editorHoverWidget.foreground#d4c896
  • editorIndentGuide.activeBackground#a68a2e
  • editorIndentGuide.background#4a3c2a
  • editorLineNumber.activeForeground#a68a2e
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.border#3c3630
  • editorSuggestWidget.background#221e18
  • editorSuggestWidget.border#3c3630
  • editorSuggestWidget.foreground#d4c896
  • editorSuggestWidget.highlightForeground#c41e1e
  • editorSuggestWidget.selectedBackground#3c3630
  • editorWhitespace.foreground#3c3630
  • errorForeground#c41e1e
  • gitDecoration.addedResourceForeground#a3be8c
  • gitDecoration.conflictingResourceForeground#c41e1e
  • gitDecoration.deletedResourceForeground#d8655a
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#a68a2e
  • gitDecoration.untrackedResourceForeground#6aabd2
  • infoForeground#6aabd2
  • input.background#221e18
  • input.border#3c3630
  • input.foreground#d4c896
  • input.placeholderForeground#666666
  • inputOption.activeBackground#3c3630
  • inputOption.activeForeground#a68a2e
  • list.activeSelectionBackground#3c3630
  • list.activeSelectionForeground#a68a2e
  • list.focusBackground#3c3630
  • list.highlightForeground#c41e1e
  • list.hoverBackground#3c3630
  • list.hoverForeground#a68a2e
  • list.inactiveSelectionBackground#2a2620
  • list.inactiveSelectionForeground#d4c896
  • minimapGutter.background#2a2620
  • notification.background#2a2620
  • notification.border#3c3630
  • notification.foreground#d4c896
  • notifications.background#2a2620
  • notifications.border#3c3630
  • notifications.foreground#d4c896
  • panel.background#2a2620
  • panel.border#3c3630
  • panelInput.border#3c3630
  • panelTitle.activeForeground#c41e1e
  • panelTitle.inactiveForeground#666666
  • peekView.border#c41e1e
  • peekViewEditor.background#1a1410
  • peekViewEditor.matchHighlightBackground#a68a2e80
  • peekViewResult.background#2a2620
  • peekViewResult.matchHighlightBackground#a68a2e80
  • peekViewResult.selectionBackground#3c3630
  • peekViewTitle.background#1a1410
  • peekViewTitle.foreground#d4c896
  • scrollbarSlider.activeBackground#5c403380
  • scrollbarSlider.background#3c363080
  • scrollbarSlider.hoverBackground#5c4033cc
  • sideBar.background#2a2620
  • sideBar.border#3c3630
  • sideBar.foreground#d4c896
  • sideBarSectionHeader.background#3c3630
  • sideBarSectionHeader.foreground#d4c896
  • statusBar.background#1a1410
  • statusBar.debuggingBackground#c41e1e
  • statusBar.foreground#d4c896
  • statusBarItem.prominentBackground#c41e1e
  • statusBarItem.remoteBackground#2c6e8c
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#3c3630
  • tab.activeBorder#c41e1e
  • tab.activeBorderTop#c41e1e
  • tab.activeForeground#a68a2e
  • tab.border#3c3630
  • tab.inactiveBackground#2a2620
  • tab.inactiveForeground#666666
  • tab.unfocusedActiveForeground#c8b88a
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#1a1410
  • terminal.ansiBlue#6aabd2
  • terminal.ansiBrightBlack#3c3630
  • terminal.ansiBrightBlue#8ac6e8
  • terminal.ansiBrightCyan#8ac6e8
  • terminal.ansiBrightGreen#7a8e6a
  • terminal.ansiBrightMagenta#f08080
  • terminal.ansiBrightRed#d8655a
  • terminal.ansiBrightWhite#e8d5a3
  • terminal.ansiBrightYellow#a68a2e
  • terminal.ansiCyan#6aabd2
  • terminal.ansiGreen#5a6e4a
  • terminal.ansiMagenta#d8655a
  • terminal.ansiRed#c41e1e
  • terminal.ansiWhite#d4c896
  • terminal.ansiYellow#a68a2e
  • terminal.background#1a1410
  • terminal.border#3c3630
  • terminal.foreground#d4c896
  • terminal.selectionBackground#3c3630
  • terminalCursor.foreground#a68a2e
  • titleBar.activeBackground#3c3630
  • titleBar.activeForeground#a68a2e
  • titleBar.inactiveBackground#2a2620
  • titleBar.inactiveForeground#666666
  • warningForeground#a68a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, comment.block.documentation#7a8e6aitalic
keyword, keyword.control, storage.type, storage.modifier#a68a2ebold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#888888
string, string.quoted, string.quoted.single, string.quoted.double, string.regexp#d8655a
constant.numeric, constant.numeric.integer, constant.numeric.float#c41e1e
constant.language, constant.language.boolean, constant.language.null#b55a5a
constant.other, support.constant#b55a5a
variable, variable.other, variable.other.readwrite#d2b48c
variable.other.constant, variable.language.special#e06c60
entity.name.function, support.function, meta.function-call#6aabd2bold
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type#6aabd2
support.type.property-name, variable.other.property, meta.property-name#8aab7a
punctuation, punctuation.separator, punctuation.definition, meta.brace#888888
invalid, invalid.legal, invalid.broken, invalid.deprecated#c41e1eunderline
markup.inserted, meta.diff.header.from-file, marking.inserted#a3be8c
markup.deleted, meta.diff.header.to-file, marking.deleted#e06c60
markup.heading, markup.heading.markdown#8b6914bold
markup.boldbold
markup.italicitalic
markup.underline.link, markup.underline#6aabd2underline
markup.list, markup.list.unordered, markup.list.ordered#e06c60
entity.name.tag, meta.tag, punctuation.definition.tag#cd853f
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#b55a5a
string.quoted.double constant.character.escape, constant.character.escape, constant.character.escape.html#d8655a
markup.table, markup.table.markdown#d4c896
Newspaper Theme Mosaulse by Mosaulse - VS Code Theme