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#2a2d2c
  • activityBar.foreground#fafafa
  • activityBar.inactiveForeground#fafafa66
  • activityBarBadge.background#129178
  • activityBarBadge.foreground#fafafa
  • badge.background#434746
  • badge.foreground#fafafa
  • breadcrumb.activeSelectionForeground#e7e9e8
  • breadcrumb.background#1b1d1c
  • breadcrumb.focusForeground#e7e9e8
  • breadcrumb.foreground#d5d7d6cc
  • button.background#129178
  • button.foreground#fafafa
  • button.hoverBackground#17b897e6
  • button.secondaryBackground#434746
  • button.secondaryForeground#fafafa
  • button.secondaryHoverBackground#545a58e6
  • checkbox.background#2a2d2c
  • checkbox.border#0a0b0a00
  • checkbox.foreground#d5d7d6
  • debugExceptionWidget.background#2a2d2c
  • debugExceptionWidget.border#434746
  • debugToolBar.background#2a2d2c
  • debugToolBar.border#434746
  • diffEditor.border#434746
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2a2d2c
  • dropdown.border#0a0b0a00
  • dropdown.foreground#d5d7d6
  • editor.background#1b1d1c
  • editor.findMatchBackground#435e5e
  • editor.findMatchBorder#2c7565
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#fafafa00
  • editor.findRangeHighlightBackground#43474666
  • editor.findRangeHighlightBorder#fafafa00
  • editor.foldBackground#0e6d5a4d
  • editor.foreground#d5d7d6
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#434746fe
  • editor.lineHighlightBackground#fafafa0a
  • editor.lineHighlightBorder#2a2d2c
  • editor.rangeHighlightBackground#fafafa0b
  • editor.rangeHighlightBorder#fafafa00
  • editor.selectionBackground#09493c
  • editor.selectionHighlightBackground#a3a8a626
  • editor.selectionHighlightBorder#09493c
  • editor.wordHighlightBackground#545a58b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0e6d5a1a
  • editorBracketMatch.border#727976
  • editorCodeLens.foreground#a3a8a6
  • editorCursor.background#0a0b0a
  • editorCursor.foreground#a3a8a6
  • editorError.background#B73A3400
  • editorError.border#fafafa00
  • editorError.foreground#f48771
  • editorGroup.border#434746
  • editorGroup.emptyBackground#1b1d1c
  • editorGroupHeader.tabsBackground#1b1d1c
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#1b1d1c
  • editorGutter.commentRangeForeground#d5d7d6
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#d5d7d6
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#2a2d2c
  • editorHoverWidget.border#434746
  • editorHoverWidget.foreground#d5d7d6
  • editorIndentGuide.activeBackground1#727976
  • editorIndentGuide.background1#434746
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#d5d7d6
  • editorLineNumber.foreground#727976
  • editorLink.activeForeground#17b897
  • editorMarkerNavigation.background#2a2d2c
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#2a2d2c00
  • editorOverviewRuler.border#7279764d
  • editorRuler.foreground#545a58
  • editorSuggestWidget.background#2a2d2c
  • editorSuggestWidget.border#434746
  • editorSuggestWidget.foreground#d5d7d6
  • editorSuggestWidget.highlightForeground#17b897
  • editorSuggestWidget.selectedBackground#09493c
  • editorWarning.background#A9904000
  • editorWarning.border#fafafa00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e7e9e829
  • editorWidget.background#1b1d1c
  • editorWidget.foreground#d5d7d6
  • editorWidget.resizeBorder#545a58
  • focusBorder#129178
  • foreground#d5d7d6
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#d5d7d6
  • input.background#2a2d2c
  • input.border#0a0b0a00
  • input.foreground#d5d7d6
  • input.placeholderForeground#a3a8a6
  • inputOption.activeBackground#12917866
  • inputOption.activeBorder#12917800
  • inputOption.activeForeground#fafafa
  • list.activeSelectionBackground#09493c
  • list.activeSelectionForeground#fafafa
  • list.dropBackground#434746
  • list.focusBackground#09493c
  • list.focusForeground#d5d7d6
  • list.highlightForeground#17b897
  • list.hoverBackground#2a2d2c
  • list.hoverForeground#d5d7d6
  • list.inactiveSelectionBackground#2f3131
  • list.inactiveSelectionForeground#d5d7d6
  • listFilterWidget.background#2a2d2c
  • listFilterWidget.noMatchesOutline#b91c1c
  • listFilterWidget.outline#0a0b0a00
  • menu.background#1b1d1c
  • menu.border#0a0b0a85
  • menu.foreground#d5d7d6
  • menu.selectionBackground#09493c
  • menu.selectionBorder#0a0b0a00
  • menu.selectionForeground#fafafa
  • menu.separatorBackground#a3a8a6
  • menubar.selectionBackground#fafafa1f
  • menubar.selectionForeground#d5d7d6
  • merge.commonContentBackground#282828fe
  • merge.commonHeaderBackground#383838fe
  • merge.currentContentBackground#27403Bfe
  • merge.currentHeaderBackground#367366fe
  • merge.incomingContentBackground#28384Bfe
  • merge.incomingHeaderBackground#395F8Ffe
  • minimap.background#1b1d1c
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#435e5ecc
  • minimap.selectionHighlight#09493ccc
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#434746
  • notificationCenterHeader.background#2a2d2c
  • notificationCenterHeader.foreground#d5d7d6
  • notifications.background#1b1d1c
  • notifications.border#2a2d2c
  • notifications.foreground#d5d7d6
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#434746
  • panel.background#1b1d1c
  • panel.border#72797659
  • panelSection.border#72797659
  • panelTitle.activeBorder#e7e9e8
  • panelTitle.activeForeground#e7e9e8
  • panelTitle.inactiveForeground#e7e9e899
  • peekView.border#17b897
  • peekViewEditor.background#05241e
  • peekViewEditor.matchHighlightBackground#ea5c0055
  • peekViewEditor.matchHighlightBorder#ad6435
  • peekViewEditorGutter.background#05241e
  • peekViewResult.background#2a2d2c
  • peekViewResult.fileForeground#fafafa
  • peekViewResult.lineForeground#a3a8a6
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#fafafa
  • peekViewTitle.background#1b1d1c
  • peekViewTitleDescription.foreground#d5d7d6b3
  • peekViewTitleLabel.foreground#fafafa
  • pickerGroup.border#434746
  • pickerGroup.foreground#17b897
  • progressBar.background#0e6d5a
  • scrollbar.shadow#0a0b0a
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#09493c
  • settings.focusedRowBackground#fafafa07
  • settings.headerForeground#d5d7d6
  • sideBar.background#1f2120
  • sideBar.dropBackground#434746
  • sideBar.foreground#d5d7d6
  • sideBarSectionHeader.background#0a0b0a00
  • sideBarSectionHeader.border#d5d7d633
  • sideBarSectionHeader.foreground#d5d7d6
  • sideBarTitle.foreground#a3a8a6
  • statusBar.background#129178
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#fafafa
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#fafafa
  • statusBarItem.activeBackground#fafafa25
  • statusBarItem.hoverBackground#fafafa1f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#fafafa
  • tab.activeBackground#1b1d1c
  • tab.activeBorder#0a0b0a00
  • tab.activeBorderTop#0a0b0a00
  • tab.activeForeground#fafafa
  • tab.border#1b1d1c
  • tab.inactiveBackground#2a2d2c
  • tab.inactiveForeground#fafafa80
  • 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#d5d7d6
  • terminal.selectionBackground#fafafa40
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#fafafa
  • textLink.foreground#17b897
  • titleBar.activeBackground#393c3b
  • titleBar.activeForeground#d5d7d6
  • titleBar.border#0a0b0a00
  • titleBar.inactiveBackground#393c3b99
  • titleBar.inactiveForeground#d5d7d699
  • tree.indentGuidesStroke#545a58
  • walkThrough.embeddedEditorBackground#0a0b0a50
  • widget.shadow#0a0b0a5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#d5d7D6
emphasisitalic
strongbold
header#0A0B0A
comment#727976
constant.language#17b897
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#9cdcfe
constant.regexp#646695
entity.name.tag#17b897
entity.name.tag.css, entity.name.tag.less#D7BA7D
entity.other.attribute-name#98e7e3
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#17b897bold
markup.heading#17b897bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#9cdcfe
markup.deleted#ca997d
markup.changed#17b897
punctuation.definition.quote.begin.markdown#727976
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#ca997d
punctuation.definition.tag#727976
meta.preprocessor, entity.name.function.preprocessor#17b897
meta.preprocessor.string#ca997d
meta.preprocessor.numeric#9cdcfe
meta.structure.dictionary.key.python#98e7e3
meta.diff.header#17b897
storage#17b897
storage.type#17b897
storage.modifier, keyword.operator.noexcept#17b897
string, meta.embedded.assembly#ca997d
string.tag#ca997d
string.value#ca997d
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a3a8a6
meta.template.expression#d5d7D6
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#98e7e3
keyword#17b897
keyword.control#17b897
keyword.operator#d5d7D6
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#17b897
keyword.other.unit#9cdcfe
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#17b897
support.function.git-rebase#98e7e3
constant.sha.git-rebase#9cdcfe
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d5d7D6
variable.language#17b897
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dcdcaa
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#61afef
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#61afef
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#98e7e3
variable.other.constant, variable.other.enummember#00ffc4
meta.object-literal.key#98e7e3
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#ca997d
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#ca997d
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#dcdcaa
keyword.operator.quantifier.regexp#D7BA7D
constant.character, constant.other.option#17b897
constant.character.escape#D7BA7D
entity.name.label#c2c8c6
ref.matchtext#fafafa
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
timsexperiments-theme by Tim's Experiments - VS Code Theme