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.background#e7e9e8
  • activityBar.foreground#0a0b0a
  • activityBar.inactiveForeground#0a0b0a66
  • activityBarBadge.background#17b897
  • activityBarBadge.foreground#0a0b0a
  • badge.background#727976
  • badge.foreground#0a0b0a
  • breadcrumb.activeSelectionForeground#2a2d2c
  • breadcrumb.background#f4f5f5
  • breadcrumb.focusForeground#2a2d2c
  • breadcrumb.foreground#434746cc
  • button.background#17b897
  • button.foreground#0a0b0a
  • button.hoverBackground#129178e6
  • button.secondaryBackground#d5d7d6
  • button.secondaryForeground#0a0b0a
  • button.secondaryHoverBackground#a3a8a6e6
  • checkbox.background#e7e9e8
  • checkbox.border#fafafa00
  • checkbox.foreground#434746
  • debugExceptionWidget.background#e7e9e8
  • debugExceptionWidget.border#d5d7d6
  • debugToolBar.background#e7e9e8
  • debugToolBar.border#d5d7d6
  • diffEditor.border#d5d7d6
  • diffEditor.insertedTextBackground#65803033
  • diffEditor.removedTextBackground#ff575733
  • dropdown.background#e7e9e8
  • dropdown.border#fafafa00
  • dropdown.foreground#434746
  • editor.background#f4f5f5
  • editor.findMatchBackground#709190
  • editor.findMatchBorder#53ae96
  • editor.findMatchHighlightBackground#ff9b3255
  • editor.findMatchHighlightBorder#0a0b0a00
  • editor.findRangeHighlightBackground#d5d7d666
  • editor.findRangeHighlightBorder#0a0b0a00
  • editor.foldBackground#42c5a04d
  • editor.foreground#434746
  • editor.hoverHighlightBackground#649dcc40
  • editor.inactiveSelectionBackground#d5d7d6fe
  • editor.lineHighlightBackground#0a0b0a0a
  • editor.lineHighlightBorder#e7e9e8
  • editor.rangeHighlightBackground#0a0b0a0b
  • editor.rangeHighlightBorder#0a0b0a00
  • editor.selectionBackground#92f1de
  • editor.selectionHighlightBackground#545A5826
  • editor.selectionHighlightBorder#92f1de
  • editor.wordHighlightBackground#a3a8a6b8
  • editor.wordHighlightStrongBackground#b2eaffb8
  • editorBracketMatch.background#42c5a01a
  • editorBracketMatch.border#727976
  • editorCodeLens.foreground#545A58
  • editorCursor.background#fafafa
  • editorCursor.foreground#545A58
  • editorError.background#e8868100
  • editorError.border#0a0b0a00
  • editorError.foreground#d7482b
  • editorGroup.border#d5d7d6
  • editorGroup.emptyBackground#f4f5f5
  • editorGroupHeader.tabsBackground#f4f5f5
  • editorGutter.addedBackground#cff660
  • editorGutter.background#f4f5f5
  • editorGutter.commentRangeForeground#434746
  • editorGutter.deletedBackground#ffa2a6
  • editorGutter.foldingControlForeground#434746
  • editorGutter.modifiedBackground#64e9fc
  • editorHoverWidget.background#e7e9e8
  • editorHoverWidget.border#d5d7d6
  • editorHoverWidget.foreground#434746
  • editorIndentGuide.activeBackground1#727976
  • editorIndentGuide.background1#d5d7d6
  • editorInfo.background#4490bf00
  • editorInfo.border#4490bf00
  • editorInfo.foreground#1f72f1
  • editorLineNumber.activeForeground#434746
  • editorLineNumber.foreground#727976
  • editorLink.activeForeground#129178
  • editorMarkerNavigation.background#e7e9e8
  • editorMarkerNavigationError.background#d7482b
  • editorMarkerNavigationInfo.background#1f72f1
  • editorMarkerNavigationWarning.background#fff110
  • editorOverviewRuler.background#e7e9e800
  • editorOverviewRuler.border#7279764d
  • editorRuler.foreground#a3a8a6
  • editorSuggestWidget.background#e7e9e8
  • editorSuggestWidget.border#d5d7d6
  • editorSuggestWidget.foreground#434746
  • editorSuggestWidget.highlightForeground#129178
  • editorSuggestWidget.selectedBackground#92f1de
  • editorWarning.background#a9904000
  • editorWarning.border#0a0b0a00
  • editorWarning.foreground#fff110
  • editorWhitespace.foreground#2a2d2c29
  • editorWidget.background#f4f5f5
  • editorWidget.foreground#434746
  • editorWidget.resizeBorder#a3a8a6
  • focusBorder#17b897
  • foreground#434746
  • gitDecoration.addedResourceForeground#316a40
  • gitDecoration.conflictingResourceForeground#9ba5de
  • gitDecoration.deletedResourceForeground#e99080
  • gitDecoration.ignoredResourceForeground#5d5d5d
  • gitDecoration.modifiedResourceForeground#9f5a2f
  • gitDecoration.stageDeletedResourceForeground#e99080
  • gitDecoration.stageModifiedResourceForeground#9f5a2f
  • gitDecoration.submoduleResourceForeground#497ac7
  • gitDecoration.untrackedResourceForeground#1a623b
  • icon.foreground#434746
  • input.background#e7e9e8
  • input.border#fafafa00
  • input.foreground#434746
  • input.placeholderForeground#545A58
  • inputOption.activeBackground#17b89766
  • inputOption.activeBorder#17b89700
  • inputOption.activeForeground#0a0b0a
  • list.activeSelectionBackground#92f1de
  • list.activeSelectionForeground#0a0b0a
  • list.dropBackground#d5d7d6
  • list.focusBackground#92f1de
  • list.focusForeground#434746
  • list.highlightForeground#129178
  • list.hoverBackground#e7e9e8
  • list.hoverForeground#434746
  • list.inactiveSelectionBackground#d2d5d5
  • list.inactiveSelectionForeground#434746
  • listFilterWidget.background#e7e9e8
  • listFilterWidget.noMatchesOutline#fca5a5
  • listFilterWidget.outline#fafafa00
  • menu.background#f4f5f5
  • menu.border#fafafa85
  • menu.foreground#434746
  • menu.selectionBackground#92f1de
  • menu.selectionBorder#fafafa00
  • menu.selectionForeground#0a0b0a
  • menu.separatorBackground#545A58
  • menubar.selectionBackground#0a0b0a1f
  • menubar.selectionForeground#434746
  • merge.commonContentBackground#d1d1d1fe
  • merge.commonHeaderBackground#c1c1c1fe
  • merge.currentContentBackground#b5dacefe
  • merge.currentHeaderBackground#5da492fe
  • merge.incomingContentBackground#a4bcd5fe
  • merge.incomingHeaderBackground#6e96c2fe
  • minimap.background#f4f5f5
  • minimap.errorHighlight#d7482b
  • minimap.findMatchHighlight#709190cc
  • minimap.selectionHighlight#92f1decc
  • minimap.warningHighlight#fff110
  • minimapGutter.addedBackground#cff660
  • minimapGutter.deletedBackground#ffa2a6
  • minimapGutter.modifiedBackground#64e9fc
  • notificationCenter.border#d5d7d6
  • notificationCenterHeader.background#e7e9e8
  • notificationCenterHeader.foreground#434746
  • notifications.background#f4f5f5
  • notifications.border#e7e9e8
  • notifications.foreground#434746
  • notificationsErrorIcon.foreground#d7482b
  • notificationsInfoIcon.foreground#1f72f1
  • notificationsWarningIcon.foreground#fff110
  • notificationToast.border#d5d7d6
  • panel.background#f4f5f5
  • panel.border#72797659
  • panelSection.border#72797659
  • panelTitle.activeBorder#2a2d2c
  • panelTitle.activeForeground#2a2d2c
  • panelTitle.inactiveForeground#2a2d2c99
  • peekView.border#129178
  • peekViewEditor.background#c9f8ef
  • peekViewEditor.matchHighlightBackground#ff9b3255
  • peekViewEditor.matchHighlightBorder#cc9953
  • peekViewEditorGutter.background#c9f8ef
  • peekViewResult.background#e7e9e8
  • peekViewResult.fileForeground#0a0b0a
  • peekViewResult.lineForeground#545A58
  • peekViewResult.matchHighlightBackground#ff9b324d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#0a0b0a
  • peekViewTitle.background#f4f5f5
  • peekViewTitleDescription.foreground#434746b3
  • peekViewTitleLabel.foreground#0a0b0a
  • pickerGroup.border#d5d7d6
  • pickerGroup.foreground#129178
  • progressBar.background#42c5a0
  • scrollbar.shadow#fafafa
  • scrollbarSlider.activeBackground#96969666
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#888888b3
  • selection.background#92f1de
  • settings.focusedRowBackground#0a0b0a07
  • settings.headerForeground#434746
  • sideBar.background#e6e7e6
  • sideBar.dropBackground#d5d7d6
  • sideBar.foreground#434746
  • sideBarSectionHeader.background#fafafa00
  • sideBarSectionHeader.border#43474633
  • sideBarSectionHeader.foreground#434746
  • sideBarTitle.foreground#545A58
  • statusBar.background#17b897
  • statusBar.debuggingBackground#db945c
  • statusBar.debuggingForeground#0a0b0a
  • statusBar.foreground#0a0b0a
  • statusBar.noFolderBackground#eed2fc
  • statusBar.noFolderForeground#0a0b0a
  • statusBarItem.activeBackground#0a0b0a25
  • statusBarItem.hoverBackground#0a0b0a1f
  • statusBarItem.remoteBackground#47c090
  • statusBarItem.remoteForeground#0a0b0a
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#fafafa00
  • tab.activeBorderTop#fafafa00
  • tab.activeForeground#0a0b0a
  • tab.border#f4f5f5
  • tab.inactiveBackground#e7e9e8
  • tab.inactiveForeground#0a0b0a80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#72797659
  • terminal.foreground#434746
  • terminal.selectionBackground#0a0b0a40
  • terminalCursor.background#48d4ff
  • terminalCursor.foreground#0a0b0a
  • textLink.foreground#129178
  • titleBar.activeBackground#cfd2d0
  • titleBar.activeForeground#434746
  • titleBar.border#fafafa00
  • titleBar.inactiveBackground#cfd2d099
  • titleBar.inactiveForeground#43474699
  • tree.indentGuidesStroke#a3a8a6
  • walkThrough.embeddedEditorBackground#fafafa50
  • widget.shadow#fafafa5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#434746
emphasisitalic
strongbold
header#fafafa
comment#727976
constant.language#129178
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#055a87
constant.regexp#c2cadf
entity.name.tag#129178
entity.name.tag.css, entity.name.tag.less#b8843e
entity.other.attribute-name#23777b
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#b8843e
invalid#f44747
markup.underlineunderline
markup.bold#129178bold
markup.heading#129178bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#055a87
markup.deleted#ac644a
markup.changed#129178
punctuation.definition.quote.begin.markdown#727976
punctuation.definition.list.begin.markdown#3c60d4
markup.inline.raw#ac644a
punctuation.definition.tag#727976
meta.preprocessor, entity.name.function.preprocessor#129178
meta.preprocessor.string#ac644a
meta.preprocessor.numeric#055a87
meta.structure.dictionary.key.python#23777b
meta.diff.header#129178
storage#129178
storage.type#129178
storage.modifier, keyword.operator.noexcept#129178
string, meta.embedded.assembly#ac644a
string.tag#ac644a
string.value#ac644a
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#545A58
meta.template.expression#434746
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#23777b
keyword#129178
keyword.control#129178
keyword.operator#434746
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#129178
keyword.other.unit#055a87
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#129178
support.function.git-rebase#23777b
constant.sha.git-rebase#055a87
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#434746
variable.language#129178
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#635130
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#3279de
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#3279de
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c785b5
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#23777b
variable.other.constant, variable.other.enummember#00be91
meta.object-literal.key#23777b
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#ac644a
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#ac644a
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#635130
keyword.operator.quantifier.regexp#b8843e
constant.character, constant.other.option#129178
constant.character.escape#b8843e
entity.name.label#4e5654
ref.matchtext#0a0b0a
token.info-token#3c60d4
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
timsexperiments-theme by Tim's Experiments - VS Code Theme