Skip to main content
Coding Theme

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#080808
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#e5ff00
  • activityBar.inactiveForeground#5f5f5f
  • activityBarBadge.background#f3c900
  • activityBarBadge.foreground#080808
  • badge.background#424242
  • badge.foreground#ffffff
  • banner.background#01579b
  • banner.foreground#ffffff
  • banner.iconForeground#2196f3
  • breadcrumb.activeSelectionForeground#bdbdbd
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#bdbdbd
  • breadcrumb.foreground#bdbdbd
  • breadcrumbPicker.background#212121
  • button.background#ff6600
  • button.foreground#ffffff
  • button.hoverBackground#ffae00
  • charts.blue#0773f3
  • charts.foreground#bdbdbd
  • charts.green#2bff00
  • charts.lines#bdbdbd
  • charts.orange#ff8300
  • charts.purple#b765ff
  • charts.red#ff4c2c
  • charts.yellow#e5ff00
  • debugExceptionWidget.background#3e2723
  • debugExceptionWidget.border#b71c1c
  • diffEditor.diagonalFill#bdbdbd33
  • diffEditor.insertedTextBackground#8bc34a33
  • diffEditor.removedTextBackground#e64a1933
  • dropdown.background#424242
  • dropdown.border#50504f
  • dropdown.foreground#eeeeee
  • editor.background#000000
  • editor.findMatchBackground#455a64
  • editor.findMatchBorder#b1006f
  • editor.findRangeHighlightBackground#42424266
  • editor.foreground#bdbdbd
  • editor.hoverHighlightBackground#01579b40
  • editor.inactiveSelectionBackground#01579b
  • editor.lineHighlightBorder#b1006f
  • editor.rangeHighlightBackground#ffffff0b
  • editor.selectionBackground#690042
  • editor.selectionHighlightBackground#01579b
  • editor.snippetFinalTabstopHighlightBorder#616161
  • editor.snippetTabstopHighlightBackground#757575
  • editor.symbolHighlightBackground#e6510055
  • editorBracketHighlight.foreground1#f700ff
  • editorBracketHighlight.foreground2#0b85fb
  • editorBracketHighlight.foreground3#b765ff
  • editorBracketHighlight.foreground4#e5ff00
  • editorBracketHighlight.foreground5#2bff00
  • editorBracketHighlight.foreground6#00d9ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#33691e1a
  • editorBracketMatch.border#757575
  • editorCodeLens.foreground#9e9e9e
  • editorCursor.foreground#d0d0d0
  • editorError.background#ff000048
  • editorError.foreground#ff3c3c
  • editorGhostText.foreground#ffffff56
  • editorGroup.border#424242
  • editorGroup.dropBackground#00000040
  • editorGroupHeader.noTabsBackground#212121
  • editorGroupHeader.tabsBackground#080808
  • editorGroupHeader.tabsBorder#ffee00
  • editorGutter.background#000000
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#424242
  • editorHoverWidget.statusBarBackground#212121
  • editorIndentGuide.activeBackground#e0e0e029
  • editorIndentGuide.background#e0e0e029
  • editorInfo.foreground#00b7ff
  • editorInlayHint.background#424242
  • editorInlayHint.foreground#ffffff
  • editorInlayHint.parameterBackground#424242
  • editorInlayHint.parameterForeground#ffffff
  • editorInlayHint.typeBackground#424242
  • editorInlayHint.typeForeground#ffffff
  • editorLightBulb.foreground#ffca28
  • editorLightBulbAutoFix.foreground#64b5f6
  • editorLineNumber.activeForeground#00ff00
  • editorLineNumber.foreground#007722
  • editorLink.activeForeground#e5ff00
  • editorOverviewRuler.border#7575754d
  • editorOverviewRuler.commonContentForeground#616161
  • editorOverviewRuler.currentContentForeground#4db6ac
  • editorOverviewRuler.errorForeground#f44336
  • editorOverviewRuler.findMatchForeground#fb8c007e
  • editorOverviewRuler.incomingContentForeground#42a5f5
  • editorOverviewRuler.infoForeground#e5ff00
  • editorOverviewRuler.rangeHighlightForeground#0277bd99
  • editorOverviewRuler.selectionHighlightForeground#9e9e9ecc
  • editorOverviewRuler.warningForeground#ffeb3b
  • editorPane.background#212121
  • editorRuler.foreground#616161
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.focusHighlightForeground#e2008f
  • editorSuggestWidget.foreground#bdbdbd
  • editorSuggestWidget.highlightForeground#e5ff00
  • editorSuggestWidget.selectedBackground#252525
  • editorSuggestWidget.selectedForeground#bdbdbd
  • editorSuggestWidget.selectedIconForeground#e2008f
  • editorSuggestWidgetStatus.foreground#e5ff00
  • editorUnicodeHighlight.border#9e9d24
  • editorUnnecessaryCode.opacity#000000a0
  • editorWarning.foreground#e5ff00
  • editorWhitespace.foreground#e0e0e029
  • editorWidget.background#000000
  • editorWidget.border#424242
  • errorForeground#f3002b
  • extensionBadge.remoteBackground#0277bd
  • extensionBadge.remoteForeground#ffffff
  • focusBorder#080808
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#e4676b
  • gitDecoration.deletedResourceForeground#ff4c2c
  • gitDecoration.ignoredResourceForeground#b1abab
  • gitDecoration.modifiedResourceForeground#f3c900
  • gitDecoration.renamedResourceForeground#2bff00
  • gitDecoration.stageDeletedResourceForeground#ff4c2c
  • gitDecoration.stageModifiedResourceForeground#e5ff00
  • gitDecoration.submoduleResourceForeground#0773f3
  • gitDecoration.untrackedResourceForeground#2bff00
  • icon.foreground#bdbdbd
  • input.background#424242
  • input.border#50504f
  • input.foreground#bdbdbd
  • input.placeholderForeground#bdbdbd
  • inputOption.activeBackground#1e88e5
  • inputOption.activeBorder#b2b2b1
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#61616180
  • inputValidation.errorBackground#4e342e
  • inputValidation.errorBorder#bf360c
  • inputValidation.infoBackground#263238
  • inputValidation.infoBorder#0277bd
  • inputValidation.warningBackground#212121
  • inputValidation.warningBorder#9e9d24
  • keybindingLabel.background#757575
  • keybindingLabel.border#424242
  • keybindingLabel.bottomBorder#424242
  • keybindingLabel.foreground#bdbdbd
  • list.activeSelectionBackground#080808
  • list.activeSelectionForeground#f3c900
  • list.dropBackground#333332
  • list.errorForeground#f3002b
  • list.filterMatchBorder#e6510055
  • list.focusAndSelectionOutline#ff20a9
  • list.focusBackground#080808
  • list.focusHighlightForeground#e2008f
  • list.focusOutline#b1006f
  • list.highlightForeground#e5ff00
  • list.hoverBackground#272727
  • list.inactiveSelectionBackground#080808
  • list.inactiveSelectionForeground#f3c900
  • list.invalidItemForeground#9e9d24
  • list.warningForeground#f3c900
  • listFilterWidget.background#5d4037
  • listFilterWidget.noMatchesOutline#bf360c
  • listFilterWidget.outline#00000000
  • menu.background#000000
  • menu.border#4d4d4d
  • menu.foreground#8c8c8a
  • menu.selectionBackground#080808
  • menu.selectionForeground#f3c900
  • menu.separatorBackground#bdbdbd
  • menubar.selectionBackground#000000
  • menubar.selectionForeground#f3c900
  • merge.commonContentBackground#616161
  • merge.commonHeaderBackground#616161
  • merge.currentContentBackground#4db6ac80
  • merge.currentHeaderBackground#4db6ac80
  • merge.incomingContentBackground#42a5f580
  • merge.incomingHeaderBackground#42a5f580
  • minimap.background#000000
  • minimap.errorHighlight#f44336
  • minimap.findMatchHighlight#b10070e0
  • minimap.foregroundOpacity#000000f0
  • minimap.infoHighlight#308dff
  • minimap.selectionHighlight#01579b
  • minimap.selectionOccurrenceHighlight#616161
  • minimap.warningHighlight#ffeb3b
  • minimapSlider.activeBackground#bdbdbd66
  • minimapSlider.background#75757566
  • minimapSlider.hoverBackground#616161b3
  • notificationCenter.border#2c2c2c
  • notificationCenterHeader.background#212121
  • notificationLink.foreground#e5ff00
  • notifications.background#000000
  • notifications.border#2c2c2c
  • notifications.foreground#bdbdbd
  • notificationsErrorIcon.foreground#ff8a65
  • notificationsInfoIcon.foreground#e5ff00
  • notificationsWarningIcon.foreground#ffeb3b
  • notificationToast.border#2c2c2c
  • panel.background#080808
  • panel.border#3d3d3c
  • panel.dropBorder#eeeeee
  • panelSection.border#75757559
  • panelSection.dropBackground#61616180
  • panelSectionHeader.background#75757533
  • panelTitle.activeBorder#ff20a9
  • panelTitle.activeForeground#ff6600
  • panelTitle.inactiveForeground#e5ff00
  • pickerGroup.border#424242
  • pickerGroup.foreground#e5ff00
  • progressBar.background#e5ff00
  • quickInput.background#000000
  • quickInput.foreground#bdbdbd
  • sash.hoverBorder#e5ff00
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bdbdbd66
  • scrollbarSlider.background#75757566
  • scrollbarSlider.hoverBackground#616161b3
  • searchEditor.findMatchBackground#e65100a8
  • searchEditor.findMatchBorder#e65100a8
  • selection.background#ff00ea46
  • settings.headerForeground#f3c900
  • settings.modifiedItemIndicator#b1006f
  • sideBar.background#000000
  • sideBar.dropBackground#61616180
  • sideBar.foreground#8c8c8a
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.foreground#b2b2b1
  • sideBySideEditor.horizontalBorder#424242
  • sideBySideEditor.verticalBorder#424242
  • statusBar.background#080808
  • statusBar.debuggingBackground#f34f00
  • statusBar.debuggingForeground#f8f8f2
  • statusBar.foreground#878787
  • statusBar.noFolderBackground#080808
  • statusBar.noFolderForeground#878787
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • statusBarItem.hoverForeground#e5ff00
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#e5ff00
  • statusBarItem.warningBackground#afb42b
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#000000
  • tab.activeBorder#080808
  • tab.activeBorderTop#fffb00
  • tab.activeForeground#ff8800
  • tab.activeModifiedBorder#039be5
  • tab.border#080808
  • tab.hoverBackground#080808
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#ffff00
  • tab.inactiveModifiedBorder#039be580
  • tab.lastPinnedBorder#616161
  • tab.unfocusedActiveBorder#080808
  • tab.unfocusedActiveBorderTop#080808
  • tab.unfocusedActiveForeground#d0d0d0
  • tab.unfocusedActiveModifiedBorder#039be580
  • tab.unfocusedInactiveBackground#212121
  • tab.unfocusedInactiveForeground#8c8c8a
  • tab.unfocusedInactiveModifiedBorder#039be540
  • terminal.background#000000
  • terminal.foreground#ff8300
  • terminal.selectionBackground#ffffff
  • terminalCursor.foreground#e5ff00
  • textBlockQuote.background#7575751a
  • textBlockQuote.border#0277bd80
  • textCodeBlock.background#00000066
  • textLink.activeForeground#e5ff00
  • textLink.foreground#e5ff00
  • textPreformat.foreground#ffcc80
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#878787
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#878787
  • toolbar.activeBackground#61616150
  • toolbar.hoverBackground#61616150
  • tree.tableColumnsBorder#bdbdbd20
  • tree.tableOddRowsBackground#bdbdbd
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
emphasis, markup.italicitalic
markup.underlineunderline
meta.template.expression, source.groovy.embedded, variable.language.wildcard.java#E0E0E0
header#311B92
punctuation.definition.quote.begin.markdown#689F38
constant.sha.git-rebase, keyword.operator.minus.exponent, keyword.operator.plus.exponent, keyword.other.unit, markup.inserted, meta.preprocessor.numeric#A5D6A7
variable.other.constant, variable.other.enummember#4FC3F7
constant.regexp#5C6BC0
constant.character.escape, entity.name.tag.css, 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, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, keyword.operator.quantifier.regexp, source.css.less entity.other.attribute-name.id#FFCC80
constant.other.placeholder, meta.definition.variable.name, meta.structure.dictionary.key.python, source.coffee.embedded, support.function.git-rebase, support.type.vendored.property-name, support.variable, variable.css, variable.other.less, variable.scss#81D4FA
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, string.regexp#E57373
entity.name.operator, keyword.operator.delete, keyword.other.operator#CE93D8
entity.name.operator.custom-literal, keyword.control.anchor.regexp, keyword.operator.or.regexp, support.constant.handlebars#F0F4C3
constant.other.color.rgb-value, constant.other.rgb-value, keyword.operator.negation.regexp, markup.deleted, markup.inline.raw, meta.preprocessor.string, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, string.tag, string.value, support.constant.color, support.constant.font-name, support.constant.media, support.constant.media-type, support.constant.property-value, support.other.parenthesis.regexp#ffd000
entity.name.namespace, entity.name.scope-resolution, entity.other.attribute, entity.other.inherited-class, meta.return-type, meta.type.cast.expr, meta.type.new.expr, storage.type.annotation.java, storage.type.annotation.groovy, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, support.constant.dom, support.constant.json, support.constant.math, entity.name.label#4ecc99
constant.character, entity.name.function.preprocessor, entity.name.tag, keyword, keyword.operator.noexcept, markup.changed, meta.diff.header, meta.preprocessor, punctuation.definition.list.begin.markdown, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, storage.modifier, support.type.property-name, variable.language#2196F3
markup.bold, markup.heading#329CFFbold
comment, punctuation.definition.comment#00BA6F
meta.embedded.assembly, string#94EF00
keyword - keyword.operator, keyword.control, keyword.other.fn.rust, storage, storage.type#329CFF
constant.numeric#FFD000
entity.name.class, entity.name.type, constant.language, keyword.operator, keyword.other, meta.embedded, source.powershell, source.powershell variable.other.member, source.ruby, support.class, support.type, variable.other.member.powershell#2BFF00
entity.name.function, keyword.other.DML.sql, meta.body.function.definition, meta.function-call.generic.python, support.function, text#FF4C2C
entity.name.variable, variable#FF8300
entity.name.type, meta.method-call.java, meta.selector.css, storage.modifier.import.java, storage.modifier.package.java#E89800
constant.other.enum.java, meta.method.body.java, text.xml#FFC400
log.error#FF0800
meta.scriptblock#73FF00
keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, punctuation, punctuation.definition.block.sequence.item.yaml, punctuation.definition.tag, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.section.embedded, punctuation.separator.key-value.mapping.yaml, source.cpp keyword.operator.new, source.js#E5FF00
source.batchfile, source.go, source.perl, source.rust, source.sql, source.tsx, variable.other.object.property.cs#FFA700
source.python, text.html, text.log, text.txt#FF8800
storage.type.cs#8F9EFE
storage.modifier.cs#0B85FB
entity.name.type, entity.other.attribute-name, meta.object-literal.key#FFAE00
keyword.other.using#B765FF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
invalid#EF5350
I Believe In A Thing Called Love by Tarhn - VS Code Theme