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#7c6490
  • activityBar.background#f4faf3
  • activityBar.border#f0f0f0
  • activityBar.foreground#4a3c53
  • activityBar.inactiveForeground#88aaa5
  • activityBarBadge.background#6c401b
  • activityBarBadge.foreground#f4faf3
  • badge.background#c2861d
  • badge.foreground#f4faf3
  • breadcrumb.activeSelectionForeground#22222215
  • breadcrumb.background#eff3fe
  • breadcrumb.focusForeground#4a3c53
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#f4faf3
  • button.background#7c6490
  • button.foreground#f4faf3
  • button.hoverBackground#7c6490
  • checkbox.background#eff3fe
  • checkbox.border#d1d5da
  • debugToolBar.background#f4faf3
  • descriptionForeground#c2861d
  • diffEditor.insertedTextBackground#1c6b4815
  • diffEditor.removedTextBackground#ab595910
  • dropdown.background#f4faf3
  • dropdown.border#f0f0f0
  • dropdown.foreground#4a3c53
  • dropdown.listBackground#eff3fe
  • editor.background#f4faf3
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#22222210
  • editor.foreground#4a3c53
  • editor.inactiveSelectionBackground#22222208
  • editor.lineHighlightBackground#eff3fe
  • editor.selectionBackground#22222215
  • editor.selectionHighlightBackground#22222208
  • editor.stackFrameHighlightBackground#fffbdd
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#2993a3
  • editorBracketHighlight.foreground2#1e754f
  • editorBracketHighlight.foreground3#a65e2b
  • editorBracketHighlight.foreground4#a13865
  • editorBracketHighlight.foreground5#bda437
  • editorBracketHighlight.foreground6#296aa3
  • editorBracketMatch.background#1c6b4820
  • editorError.foreground#ab5959
  • editorGroup.border#f0f0f0
  • editorGroupHeader.tabsBackground#f4faf3
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1e754f
  • editorGutter.commentRangeForeground#88aaa5
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#c2861d
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1e754f
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#296aa3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#6c401b
  • editorLineNumber.foreground#88aaa5
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#eff3fe
  • editorStickyScrollHover.background#eff3fe
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#00000015
  • editorWidget.background#f4faf3
  • errorForeground#ab5959
  • focusBorder#00000000
  • foreground#4a3c53
  • gitDecoration.addedResourceForeground#1e754f
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#88aaa5
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#c2861d
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#eff3fe
  • input.border#f0f0f0
  • input.foreground#4a3c53
  • input.placeholderForeground#c2861d
  • inputOption.activeBackground#88aaa5
  • list.activeSelectionBackground#eff3fe
  • list.activeSelectionForeground#4a3c53
  • list.focusBackground#eff3fe
  • list.hoverBackground#eff3fe
  • list.hoverForeground#4a3c53
  • list.inactiveFocusBackground#f4faf3
  • list.inactiveSelectionBackground#eff3fe
  • list.inactiveSelectionForeground#4a3c53
  • notificationCenterHeader.background#f4faf3
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#f4faf3
  • notifications.border#f0f0f0
  • notifications.foreground#4a3c53
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#f4faf3
  • panel.border#f0f0f0
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#7c6490
  • panelTitle.activeForeground#4a3c53
  • panelTitle.inactiveForeground#6a737d
  • peekViewEditor.background#f4faf3
  • peekViewResult.background#f4faf3
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#4a3c53
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#7c6490
  • quickInput.background#f4faf3
  • quickInput.foreground#4a3c53
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#88aaa5
  • scrollbarSlider.background#effefa
  • scrollbarSlider.hoverBackground#88aaa5
  • settings.headerForeground#4a3c53
  • settings.modifiedItemIndicator#7c6490
  • sideBar.background#f4faf3
  • sideBar.border#f0f0f0
  • sideBar.foreground#6c401b
  • sideBarSectionHeader.background#f4faf3
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#4a3c53
  • sideBarTitle.foreground#4a3c53
  • statusBar.background#f4faf3
  • statusBar.border#f0f0f0
  • statusBar.debuggingBackground#eff3fe
  • statusBar.debuggingForeground#6c401b
  • statusBar.foreground#6c401b
  • statusBar.noFolderBackground#f4faf3
  • statusBarItem.prominentBackground#eff3fe
  • tab.activeBackground#f4faf3
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#c2861d
  • tab.activeForeground#4a3c53
  • tab.border#f0f0f0
  • tab.hoverBackground#eff3fe
  • tab.inactiveBackground#f4faf3
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#f4faf3
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1e754f
  • terminal.ansiBrightMagenta#a13865
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1e754f
  • terminal.ansiMagenta#a13865
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#ffa2cb
  • terminal.ansiYellow#bda437
  • terminal.foreground#4a3c53
  • terminal.selectionBackground#22222215
  • textBlockQuote.background#f4faf3
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#f4faf3
  • textLink.activeForeground#7c6490
  • textLink.foreground#7c6490
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#f4faf3
  • titleBar.activeForeground#6c401b
  • titleBar.border#eff3fe
  • titleBar.inactiveBackground#f4faf3
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#a0ada0
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational.ts, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#999999
constant, entity.name.constant, variable.language, meta.definition.variable#cc8f26
entity, entity.name#59873a
variable.parameter.function#4a3c53
entity.name.tag, tag.html#8b08a0
entity.name.function#59873a
keyword, storage.type.class.jsdoc#8b08a0
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#ab5959
storage.modifier.package, storage.modifier.import, storage.type.java#4a3c53
string, string punctuation.section.embedded source, attribute.value#b56959
punctuation.definition.string, punctuation.support.type.property-name#b56959aa
support#495e16
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#495e16
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#b07d48
variable, identifier#b07d48
support.type.primitive, entity.name.type#2e808f
namespace#b05a78
keyword.operator, meta.var.expr.ts#ab5959
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#fafbfcitalic underline
message.error#b31d28
string source#4a3c53
string variable#b56959
source.regexp, string.regexp#ab5e3f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#b56959
string.regexp constant.character.escape#bda437
support.constant#cc8f26
constant.numeric, number#1a6884
keyword.other.unit#ab5959
constant.language.boolean, constant.language#1e754f
meta.module-reference#7c6490
punctuation.definition.list.begin.markdown#a65e2b
markup.heading, markup.heading entity.name#7c6490bold
markup.quote#2e8f82
markup.italic#4a3c53italic
markup.bold#4a3c53bold
markup.raw#7c6490
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#b56959
markup.underline.link.markdown#c2861dunderline
type.identifier#5a6aa6
entity.other.attribute-name.html.vue#59873a
invalid.illegal.unrecognized-tag.htmlnormal