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.activeBackground#f7f7f7
  • activityBar.activeBorder#4a9e76
  • activityBar.background#ffffff
  • activityBar.border#f0f0f0
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#393a3450
  • activityBarBadge.background#4e4f47
  • activityBarBadge.foreground#ffffff
  • badge.background#6a737d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#22863a
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#393a3499
  • breadcrumbPicker.background#ffffff
  • button.background#1c6b48
  • button.foreground#fff
  • button.hoverBackground#1a5c3d
  • checkbox.background#ffffff
  • checkbox.border#959da5
  • debugToolBar.background#ffffff
  • descriptionForeground#393a3450
  • diffEditor.insertedTextBackground#1e754f30
  • diffEditor.removedTextBackground#ab595930
  • dropdown.background#ffffff
  • dropdown.border#f0f0f0
  • dropdown.foreground#393a34
  • dropdown.listBackground#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#bda43744
  • editor.findMatchHighlightBackground#bda43766
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#393a3410
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#6a737d40
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#79b8ff80
  • editor.selectionHighlightBackground#6a737d40
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4815
  • editor.wordHighlightStrongBackground#1c6b4825
  • 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#ffffff
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1e754f
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#393a3450
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1e754f
  • editorIndentGuide.activeBackground#393a3430
  • editorIndentGuide.background#393a3415
  • editorInfo.foreground#296aa3
  • editorInlayHint.background#f7f7f7
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#4e4f47
  • editorLineNumber.foreground#393a3450
  • editorOverviewRuler.border#f0f0f0
  • editorStickyScroll.background#f7f7f7
  • editorStickyScrollHover.background#f7f7f7
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#393a3415
  • editorWidget.background#ffffff
  • errorForeground#ab5959
  • focusBorder#4a9e76
  • foreground#393a34
  • gitDecoration.addedResourceForeground#1e754f
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#393a3450
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#f7f7f7
  • input.border#f0f0f0
  • input.foreground#393a34
  • input.placeholderForeground#393a3450
  • inputOption.activeBackground#393a3450
  • inputOption.activeBorder#4a9e76
  • list.activeSelectionBackground#1c6b4826
  • list.activeSelectionForeground#1c6b48
  • list.focusBackground#f7f7f7
  • list.focusOutline#4a9e76
  • list.highlightForeground#1c6b48
  • list.hoverBackground#f7f7f7
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#1c6b481a
  • list.inactiveSelectionForeground#393a34
  • menu.separatorBackground#f0f0f0
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#393a3499
  • notifications.background#ffffff
  • notifications.border#f0f0f0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#ffffff
  • panel.border#f0f0f0
  • panelInput.border#f0f0f0
  • panelTitle.activeBorder#4a9e76
  • panelTitle.activeForeground#4e4f47
  • panelTitle.inactiveForeground#393a3499
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#f0f0f0
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#1c6b48
  • quickInput.background#ffffff
  • quickInput.foreground#393a34
  • quickInputList.focusBackground#1c6b4826
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#393a3450
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3450
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#1c6b48
  • sideBar.background#ffffff
  • sideBar.border#f0f0f0
  • sideBar.foreground#393a34
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#ffffff
  • statusBar.border#f0f0f0
  • statusBar.debuggingBackground#f7f7f7
  • statusBar.debuggingForeground#393a34
  • statusBar.foreground#393a34
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f7f7f7
  • statusBarItem.remoteBackground#1c6b48
  • statusBarItem.remoteForeground#fff
  • statusBarItem.remoteHoverBackground#1a5c3d
  • statusBarItem.remoteHoverForeground#fff
  • tab.activeBackground#f7f7f7
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#4a9e76
  • tab.activeForeground#4e4f47
  • tab.border#f0f0f0
  • tab.hoverBackground#f7f7f7
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#393a3499
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1e754f
  • terminal.ansiBrightMagenta#a13865
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#555555
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1e754f
  • terminal.ansiMagenta#a13865
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#393a34
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • terminal.selectionBackground#79b8ff80
  • terminalCursor.foreground#22863a
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#1c6b48
  • textLink.foreground#1c6b48
  • textPreformat.foreground#393a3499
  • textSeparator.foreground#586069
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#4e4f47
  • titleBar.border#f7f7f7
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#393a3499
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#1c6b48
  • welcomePage.buttonHoverBackground#1a5c3d

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, keyword.operator.assignment, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#999999
constant, entity.name.constant, variable.language, meta.definition.variable#b07d48
entity, entity.name#59873a
variable.parameter.function#393a34
entity.name.tag, tag.html#1c6b48
entity.name.function#59873a
keyword, storage.type.class.jsdoc#1c6b48
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#ab5959
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#393a34
string, string punctuation.section.embedded source, attribute.value#448c27
punctuation.definition.string, punctuation.support.type.property-name#448c27
support#998418
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#998418
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#b07d48
variable, identifier#b07d48
support.type.primitive, entity.name.type#2e8f82
namespace#a55474
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#ab5959
invalid.broken#586069italic
invalid.deprecated#586069italic
invalid.illegal#586069italic
invalid.unimplemented#586069italic
carriage-return#fafbfcitalic underline
message.error#586069
string variable#448c27
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#448c27
string.regexp constant.character.escape#bda437
support.constant#b07d48
keyword.operator.quantifier.regexp, constant.numeric, number#2f798a
keyword.other.unit#ab5959
constant.language.boolean, constant.language#1e754f
meta.module-reference#1c6b48
punctuation.definition.list.begin.markdown#a65e2b
markup.heading, markup.heading entity.name#1c6b48bold
markup.quote#2e808f
markup.italic#393a34italic
markup.bold#393a34bold
markup.raw#1c6b48
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cb2431
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#28a745
markup.changed, punctuation.definition.changed#f66a0a
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
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#586069
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#448c27
markup.underline.link.markdown, markup.underline.link.image.markdown#393a3450underline
type.identifier, constant.other.character-class.regexp#5a6aa6
entity.other.attribute-name.html.vue#59873a
invalid.illegal.unrecognized-tag.htmlnormal
punctuation.separator.comma, punctuation.terminator.expression, punctuation.terminator.statement, punctuation.terminator.rule.scss, meta.property-list.scss, meta.property-list.scss, meta.property-list.scss, source.css.scss#6a737d
keyword, storage.type.function, storage.type.function.ts, storage.type.interface, storage.type.enum, variable.language.this, keyword.control.at-rule#c686c0
comment, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameteritalic