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#00000000
  • activityBar.activeBorder#fa9edb
  • activityBar.background#164133
  • activityBar.border#20604a
  • activityBar.foreground#fa9edb
  • activityBar.inactiveForeground#a8f0d8
  • activityBarBadge.background#fabd9e
  • activityBarBadge.foreground#12362a
  • activityBarTop.activeBorder#fa9edb
  • activityBarTop.dropBorder#fa9edb
  • activityBarTop.foreground#fa9edb
  • activityBarTop.inactiveForeground#a8f0d8
  • badge.background#fabd9e
  • badge.foreground#12362a
  • breadcrumb.background#12362a
  • button.background#a8f0d8
  • button.border#a8f0d8
  • button.foreground#12362a
  • button.hoverBackground#a8f0d8f2
  • button.secondaryBackground#12362a
  • button.secondaryForeground#a8f0d8
  • button.secondaryHoverBackground#12362af2
  • button.separator#12362a4d
  • commandCenter.activeBackground#39ac861a
  • commandCenter.activeBorder#20604a
  • commandCenter.background#164133
  • commandCenter.border#20604a
  • commandCenter.foreground#a8f0d8
  • commandCenter.inactiveBorder#20604a
  • commandCenter.inactiveForeground#39ac86
  • debugToolBar.background#12362a
  • diffEditor.border#20604a
  • diffEditor.diagonalFill#d6f5eb1a
  • diffEditor.insertedLineBackground#00339940
  • diffEditor.insertedTextBackground#00339940
  • diffEditor.removedLineBackground#99003340
  • diffEditor.removedTextBackground#99003340
  • diffEditorGutter.insertedLineBackground#00339940
  • diffEditorGutter.removedLineBackground#99003340
  • diffEditorOverview.insertedForeground#86acf9
  • diffEditorOverview.removedForeground#f28c9d
  • disabledForeground#39ac86
  • dropdown.background#12362a
  • dropdown.border#39ac86
  • dropdown.foreground#a8f0d8
  • dropdown.listBackground#12362a
  • editor.background#12362a
  • editor.findMatchBackground#914a0080
  • editor.findMatchHighlightBackground#914a0080
  • editor.findRangeHighlightBackground#5e630080
  • editor.foldBackground#00000000
  • editor.foreground#a8f0d8
  • editor.inactiveSelectionBackground#f57a3d4d
  • editor.lineHighlightBackground#164133
  • editor.rangeHighlightBackground#5e630080
  • editor.selectionBackground#f57a3d4d
  • editor.wordHighlightBackground#0066b280
  • editor.wordHighlightStrongBackground#9f2b9580
  • editorBracketHighlight.foreground1#88b34d
  • editorBracketHighlight.foreground2#c28b70
  • editorBracketHighlight.foreground3#c18baf
  • editorBracketHighlight.foreground4#88b34d
  • editorBracketHighlight.foreground5#c28b70
  • editorBracketHighlight.foreground6#c18baf
  • editorBracketHighlight.unexpectedBracket.foreground#f28c9d
  • editorBracketMatch.background#f57a3d26
  • editorBracketMatch.border#f57a3d80
  • editorCodeLens.foreground#8aa89e
  • editorCursor.foreground#fa9edb
  • editorGroup.border#20604a
  • editorGroup.dropBackground#f57a3d4d
  • editorGroupHeader.border#20604a
  • editorGroupHeader.noTabsBackground#12362a
  • editorGroupHeader.tabsBackground#164133
  • editorGroupHeader.tabsBorder#20604a
  • editorGutter.addedBackground#86acf9
  • editorGutter.deletedBackground#f28c9d
  • editorGutter.modifiedBackground#e18cf2
  • editorHoverWidget.background#12362a
  • editorHoverWidget.border#39ac86
  • editorIndentGuide.activeBackground1#a8f0d880
  • editorIndentGuide.background1#a8f0d81a
  • editorLightBulb.foreground#f9ac86
  • editorLightBulbAutoFix.foreground#f9ac86
  • editorLineNumber.activeForeground#a8f0d8
  • editorLineNumber.foreground#39ac86
  • editorLink.activeForeground#86acf9
  • editorOverviewRuler.border#20604a40
  • editorRuler.foreground#20604a80
  • editorStickyScroll.border#20604a
  • editorSuggestWidget.background#12362a
  • editorSuggestWidget.border#39ac86
  • editorWidget.background#12362a
  • editorWidget.border#39ac86
  • editorWidget.foreground#a8f0d8
  • editorWidget.resizeBorder#12362a
  • errorForeground#f28c9d
  • focusBorder#fa9edb
  • foreground#a8f0d8
  • gitDecoration.conflictingResourceForeground#6ef7f7
  • gitDecoration.deletedResourceForeground#f28c9d
  • gitDecoration.ignoredResourceForeground#a8f0d866
  • gitDecoration.modifiedResourceForeground#86acf9
  • gitDecoration.untrackedResourceForeground#e18cf2
  • icon.foreground#a8f0d8
  • input.background#12362a
  • input.border#39ac86
  • input.placeholderForeground#39ac86
  • inputOption.activeBorder#a8f0d8
  • keybindingLabel.background#00000000
  • keybindingLabel.border#20604a
  • keybindingLabel.bottomBorder#20604a
  • keybindingLabel.foreground#a8f0d8
  • list.activeSelectionBackground#a8f0d8
  • list.activeSelectionForeground#12362a
  • list.activeSelectionIconForeground#12362a
  • list.dropBackground#f57a3d4d
  • list.errorForeground#f28c9d
  • list.focusForeground#a8f0d8
  • list.focusHighlightForeground#12362a
  • list.highlightForeground#fa9edb
  • list.hoverBackground#39ac8626
  • list.inactiveSelectionBackground#12362a
  • list.inactiveSelectionForeground#a8f0d8
  • list.inactiveSelectionIconForeground#a8f0d8
  • list.warningForeground#f09e75
  • menu.background#164133
  • menu.border#20604a
  • menu.foreground#a8f0d8
  • menu.separatorBackground#20604a
  • merge.currentContentBackground#00339940
  • merge.currentHeaderBackground#003399a6
  • merge.incomingContentBackground#99003340
  • merge.incomingHeaderBackground#990033a6
  • notificationCenterHeader.background#164133
  • notificationCenterHeader.foreground#a8f0d8
  • notificationLink.foreground#49ab8b
  • notifications.background#164133
  • notifications.foreground#a8f0d8
  • notificationToast.border#20604a
  • panel.background#12362a
  • panel.border#20604a
  • panelSection.border#20604a
  • panelSectionHeader.border#20604a
  • panelTitle.activeBorder#fa9edb
  • panelTitle.activeForeground#fa9edb
  • panelTitle.inactiveForeground#a8f0d8
  • peekView.border#39ac86
  • peekViewEditor.background#12362a
  • peekViewResult.background#12362a
  • peekViewResult.fileForeground#a8f0d8
  • peekViewResult.lineForeground#a8f0d8
  • peekViewTitle.background#12362a
  • peekViewTitleDescription.foreground#49ab8b
  • peekViewTitleLabel.foreground#a8f0d8
  • pickerGroup.border#20604a
  • progressBar.background#a8f0d8
  • quickInput.background#164133
  • quickInputList.focusBackground#a8f0d8
  • quickInputList.focusForeground#12362a
  • quickInputList.focusIconForeground#12362a
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#a8f0d899
  • scrollbarSlider.background#a8f0d866
  • scrollbarSlider.hoverBackground#a8f0d880
  • settings.checkboxBackground#164133
  • settings.dropdownBackground#164133
  • settings.headerForeground#a5e052
  • settings.modifiedItemIndicator#f9ac86
  • settings.numberInputBackground#164133
  • settings.rowHoverBackground#16413340
  • settings.textInputBackground#164133
  • sideBar.background#164133
  • sideBar.border#20604a
  • sideBar.dropBackground#f57a3d4d
  • sideBarSectionHeader.background#164133
  • sideBarSectionHeader.border#20604a
  • statusBar.background#164133
  • statusBar.border#20604a
  • statusBar.debuggingBackground#164133
  • statusBar.foreground#a8f0d8
  • statusBar.noFolderBackground#164133
  • statusBarItem.activeBackground#39ac8666
  • statusBarItem.hoverBackground#39ac8633
  • statusBarItem.remoteBackground#164133
  • statusBarItem.remoteForeground#a8f0d8
  • statusBarItem.remoteHoverBackground#39ac8633
  • statusBarItem.remoteHoverForeground#a8f0d8
  • tab.activeBackground#12362a
  • tab.activeBorder#20604a
  • tab.activeBorderTop#fa9edb
  • tab.activeForeground#d6f5eb
  • tab.border#20604a
  • tab.inactiveBackground#164133
  • tab.inactiveForeground#a8f0d8
  • tab.unfocusedActiveBorder#20604a
  • tab.unfocusedActiveBorderTop#fa9edb
  • terminal.ansiBlack#295647
  • terminal.ansiBlue#86acf9
  • terminal.ansiBrightBlack#295647
  • terminal.ansiBrightBlue#86acf9
  • terminal.ansiBrightCyan#6ef7f7
  • terminal.ansiBrightGreen#bef76e
  • terminal.ansiBrightMagenta#e18cf2
  • terminal.ansiBrightRed#f28c9d
  • terminal.ansiBrightWhite#ede3de
  • terminal.ansiBrightYellow#f09e75
  • terminal.ansiCyan#6ef7f7
  • terminal.ansiGreen#bef76e
  • terminal.ansiMagenta#e18cf2
  • terminal.ansiRed#f28c9d
  • terminal.ansiWhite#ede3de
  • terminal.ansiYellow#f09e75
  • terminal.background#12362a
  • terminal.foreground#d6f5eb
  • textBlockQuote.background#00000000
  • textBlockQuote.border#d6f5eb
  • textLink.activeForeground#93f20d
  • textLink.foreground#93f20d
  • textPreformat.foreground#f9ac86
  • titleBar.activeBackground#164133
  • titleBar.activeForeground#a8f0d8
  • titleBar.border#20604a
  • titleBar.inactiveBackground#164133
  • titleBar.inactiveForeground#39ac86
  • toolbar.activeBackground#39ac8666
  • toolbar.hoverBackground#39ac8633
  • tree.indentGuidesStroke#a8f0d840
  • widget.border#20604a
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#d6f5eb
emphasisitalic
strongbold
header#a5e052
comment, punctuation.definition.comment#8aa89e
constant.language#f76ec9
constant.regexp#f7a1da
support.class.component, entity.name.tag#d3f5a3
entity.name.tag.css#d6f5eb
entity.other.attribute-name#f9ac86
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#f9ac86
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#f57a3d
invalid#f28c9d
markup.underlineunderline
markup.bold#f9ac86bold
markup.heading#a5e052bold
markup.italic#f9ac86italic
markup.strikethroughstrikethrough
markup.inserted#86acf9
markup.deleted#f28c9d
markup.changed#f09e75
punctuation.definition.quote.begin.markdown#49ab8b
punctuation.definition.list.begin.markdown#49ab8b
markup.inline.raw#f9ac86
punctuation.definition.tag#49ab8b
meta.preprocessor, entity.name.function.preprocessor#f9ac86
meta.preprocessor.string#f7a1da
constant.numeric, meta.preprocessor.numeric#fce
meta.structure.dictionary.key.python#a5e052
source.diff#49ab8b
meta.diff.header#ede3de
storage#d6f5eb
source.java storage.type, source.go storage.type#f9ac86
storage.type#a5e052
storage.modifier, keyword.operator.noexcept#a5e052
string, meta.embedded.assembly, constant.other.symbol#f7a1da
string.tag#f7a1da
string.value#f7a1da
string.regexp#f7a1da
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#49ab8b
meta.template.expression, meta.interpolation#d6f5eb
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#d3f5a3
keyword#a5e052
keyword.control#a5e052
keyword.operator.type.annotation#49ab8b
keyword.operator#a5e052
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#a5e052
keyword.other.unit#f76ec9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#49ab8b
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d6f5eb
variable.language#f57a3d
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#fdc
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#f9ac86
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#f9ac86
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#a5e052
variable, meta.definition.variable.name, support.variable, entity.name.variable#d6f5eb
meta.object-literal.key#d3f5a3
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#fdc
constant.other.placeholder#a5e052
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#fce
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#fce
keyword.operator.or.regexp, keyword.control.anchor.regexp#49ab8b
keyword.operator.quantifier.regexp#fce
constant.character, constant.other.option#fce
constant.character.escape#fce
entity.name.label#d6f5eb
punctuation, meta.brace#49ab8b