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#424242
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#2196f3
  • activityBarBadge.foreground#ffffff
  • badge.background#424242
  • badge.foreground#ffffff
  • banner.background#3f51b5
  • banner.foreground#ffffff
  • banner.iconForeground#2196f3
  • bookmarks.lineBackground#ffffff0b
  • breadcrumb.activeSelectionForeground#bdbdbd
  • breadcrumb.background#101010
  • breadcrumb.focusForeground#bdbdbd
  • breadcrumb.foreground#bdbdbd
  • breadcrumbPicker.background#212121
  • button.background#3f51b5
  • button.foreground#ffffff
  • button.hoverBackground#3f51b5
  • charts.blue#2196f3
  • charts.foreground#bdbdbd
  • charts.green#81c784
  • charts.lines#bdbdbd
  • charts.orange#ffc107
  • charts.purple#b39ddb
  • charts.red#ff5722
  • charts.yellow#ffeb3b
  • debugExceptionWidget.background#795548
  • debugExceptionWidget.border#f44336
  • diffEditor.diagonalFill#bdbdbd33
  • diffEditor.insertedTextBackground#8bc34a33
  • diffEditor.removedTextBackground#f4433633
  • dropdown.background#424242
  • dropdown.border#424242
  • dropdown.foreground#eeeeee
  • editor.background#101010
  • editor.findMatchBackground#3f51b566
  • editor.findMatchHighlightBackground#ff6f0033
  • editor.findRangeHighlightBackground#21212166
  • editor.foreground#9e9e9e
  • editor.hoverHighlightBackground#3f51b540
  • editor.inactiveSelectionBackground#3f51b522
  • editor.lineHighlightBackground#090909
  • editor.lineHighlightBorder#2f2f2f
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#007fd4
  • editor.selectionBackground#3f51b555
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#ff6f0066
  • editor.snippetFinalTabstopHighlightBorder#424242
  • editor.snippetTabstopHighlightBackground#757575
  • editor.symbolHighlightBackground#ff572255
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#9e9e9e44
  • editorBracketMatch.border#75757500
  • editorCodeLens.foreground#9e9e9e
  • editorCursor.foreground#ffffff
  • editorGhostText.foreground#ffffff56
  • editorGroup.border#424242
  • editorGroup.dropBackground#607d8b80
  • editorGroupHeader.noTabsBackground#101010
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.background#101010
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#424242
  • editorHoverWidget.statusBarBackground#212121
  • editorIndentGuide.activeBackground1#eeeeee29
  • editorIndentGuide.background1#eeeeee29
  • editorInlayHint.background#42424233
  • editorInlayHint.foreground#aaaaaa88
  • editorLightBulb.foreground#ffc107
  • editorLightBulbAutoFix.foreground#2196f3
  • editorLineNumber.activeForeground#bdbdbd
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#2196f3
  • editorMultiCursor.primary.foreground#2196f3
  • editorOverviewRuler.border#7575754d
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#424242
  • editorOverviewRuler.currentContentForeground#009688
  • editorOverviewRuler.errorForeground#f44336
  • editorOverviewRuler.findMatchForeground#ffc10780
  • editorOverviewRuler.incomingContentForeground#03a9f4
  • editorOverviewRuler.infoForeground#2196f3
  • editorOverviewRuler.rangeHighlightForeground#2196f399
  • editorOverviewRuler.selectionHighlightForeground#cddc39cc
  • editorOverviewRuler.warningForeground#ffeb3b
  • editorPane.background#101010
  • editorRuler.foreground#424242
  • editorStickyScroll.background#212121
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.focusHighlightForeground#2196f3
  • editorSuggestWidget.foreground#9e9e9e
  • editorSuggestWidget.highlightForeground#03a9f4
  • editorSuggestWidget.selectedBackground#3f51b5
  • editorSuggestWidget.selectedForeground#ffffff
  • editorUnnecessaryCode.opacity#000000a0
  • editorWhitespace.foreground#eeeeee29
  • editorWidget.background#212121
  • editorWidget.border#424242
  • extensionBadge.remoteBackground#2196f3
  • extensionBadge.remoteForeground#ffffff
  • icon.foreground#bdbdbd
  • input.background#424242
  • input.foreground#bdbdbd
  • input.placeholderForeground#bdbdbd
  • inputOption.activeBackground#03a9f4
  • inputOption.activeBorder#2196f300
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#795548
  • inputValidation.errorBorder#f44336
  • inputValidation.infoBackground#3f51b5
  • inputValidation.infoBorder#2196f3
  • inputValidation.warningBackground#795548
  • inputValidation.warningBorder#ffc107
  • keybindingLabel.background#607d8b
  • keybindingLabel.border#424242
  • keybindingLabel.bottomBorder#424242
  • keybindingLabel.foreground#bdbdbd
  • list.dropBackground#3f51b5
  • list.errorForeground#ff5722
  • list.focusOutline#03a9f4
  • list.highlightForeground#2196f3
  • list.hoverBackground#607d8b80
  • list.inactiveSelectionBackground#212c60
  • list.invalidItemForeground#ffc107
  • list.warningForeground#ffeb3b
  • listFilterWidget.background#795548
  • listFilterWidget.noMatchesOutline#f44336
  • listFilterWidget.outline#00000000
  • menu.background#424242
  • menu.foreground#eeeeee
  • menu.selectionBackground#3f51b5
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#9e9e9e
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#bdbdbd
  • merge.commonContentBackground#424242
  • merge.commonHeaderBackground#424242
  • merge.currentContentBackground#00968880
  • merge.currentHeaderBackground#00968880
  • merge.incomingContentBackground#03a9f480
  • merge.incomingHeaderBackground#03a9f480
  • minimap.errorHighlight#f44336
  • minimap.findMatchHighlight#ffc10780
  • minimap.selectionHighlight#3f51b5
  • minimap.warningHighlight#ffeb3b
  • minimapSlider.activeBackground#bdbdbd66
  • minimapSlider.background#75757566
  • minimapSlider.hoverBackground#757575b3
  • notificationCenterHeader.background#607d8b
  • notificationLink.foreground#2196f3
  • notifications.background#212121
  • notifications.border#607d8b
  • notifications.foreground#bdbdbd
  • notificationsErrorIcon.foreground#ff5722
  • notificationsInfoIcon.foreground#2196f3
  • notificationsWarningIcon.foreground#ffeb3b
  • panel.background#101010
  • panel.border#607d8b59
  • panel.dropBorder#eeeeee
  • panelSection.border#607d8b59
  • panelSection.dropBackground#607d8b80
  • panelSectionHeader.background#607d8b33
  • panelTitle.activeBorder#eeeeee
  • panelTitle.activeForeground#eeeeee
  • panelTitle.inactiveForeground#eeeeee99
  • pickerGroup.border#212121
  • pickerGroup.foreground#2196f3
  • progressBar.background#2196f3
  • quickInput.background#212121
  • quickInput.foreground#bdbdbd
  • sash.hoverBorder#03a9f4
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bdbdbd66
  • scrollbarSlider.background#75757566
  • scrollbarSlider.hoverBackground#757575b3
  • searchEditor.findMatchBackground#ff6f0033
  • sideBar.background#212121
  • sideBar.dropBackground#607d8b80
  • sideBarSectionHeader.background#607d8b33
  • statusBar.background#101010
  • statusBar.border#424242
  • statusBar.debuggingBackground#ff6600
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#007fd4
  • statusBar.foreground#9e9e9e
  • statusBar.noFolderBackground#101010
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#2196f3
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#424242
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#03a9f4
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#03a9f480
  • tab.lastPinnedBorder#9e9e9e
  • tab.unfocusedActiveBackground#3c3c3c80
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedActiveModifiedBorder#03a9f480
  • tab.unfocusedInactiveBackground#212121
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#03a9f440
  • textBlockQuote.background#7575751a
  • textBlockQuote.border#2196f380
  • textCodeBlock.background#10101066
  • textLink.activeForeground#2196f3
  • textLink.foreground#2196f3
  • textPreformat.foreground#ff9800
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#424242
  • titleBar.activeForeground#bdbdbd
  • titleBar.inactiveBackground#212121
  • titleBar.inactiveForeground#7e7e7e
  • toolbar.activeBackground#61616150
  • toolbar.hoverBackground#61616150
  • tree.tableColumnsBorder#bdbdbd20
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.preprocessor, meta.preprocessor.macro.cpp entity.name.other.preprocessor.macro, entity.name.variable.preprocessor.symbol.cs, keyword.control.at-rule#7e57c2—
keyword.control, keyword.preprocessor, keyword.operator.ternary, keyword.operator.null-coalescing, keyword.operator.null-conditional, entity.other.attribute-name.pragma.preprocessor.cpp, keyword.operator.conditional.colon.cs, keyword.operator.conditional.question-mark.cs, entity.name.tag.custom.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.at-rule keyword.operator.logical, meta.preprocessor.toml, keyword.operator.expression.in.ts, keyword.operator.expression.of.ts, meta.import keyword.control.as.ts#e91e63—
entity.name.label#607d8b—
entity.name.tag, keyword, storage, entity.other.attribute, meta.head.function.definition keyword.control.throw.cpp, keyword.control.context, variable.other.value.cs, entity.other.namespace-prefix.css, meta.at-rule entity.other, markup.heading.setext, meta.separator.markdown, punctuation.definition.bold.markdown, punctuation.definition.constant.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown, keyword.control.as.ts, keyword.control.default.ts, keyword.control.export.ts#2196f3—
entity.name.type, keyword.type, storage.type.var, support.class, support.type, entity.name.operator.type.cpp, source.cpp storage.type.integral, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, variable.language.base.cs, entity.name.function.namespace-prefix.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.at-rule variable.parameter, entity.other.inherited-class.ts, keyword.operator.expression.void.ts, meta.import variable.other.readwrite.alias.ts, meta.import-equals variable.other.readwrite.alias.ts, support.variable.ts, variable.language.super.ts, variable.language.super.ts#00897b—
entity.name.function, support.function, entity.name.operator.cpp, entity.name.operator.custom-literal.cpp, entity.name.operator.custom-literal.string.cpp, keyword.operator.delete.array.cpp, keyword.operator.delete.cpp, keyword.operator.new.cpp, keyword.other.suffix.literal.user-defined.character.cpp#64dd17—
entity.name.variable.parameter, variable.parameter, punctuation.vararg-ellipses.variable.parameter.preprocessor.cpp#00bcd4italic
entity.name.variable, entity.other.attribute-name, string.key, support.type.property-name punctuation, support.type.property-name, support.variable, variable, storage.type.template.argument.variable_template.cpp, variable.language.this.cs, support.constant.property, variable.language.this.ts#00bcd4—
constant, keyword.other.unit, string punctuation, string, support.constant, variable.other.enummember, keyword.operator.plus.exponent.decimal.cpp, keyword.operator.minus.exponent.decimal.cpp, entity.name.variable.enum-member.cs, meta.at-rule variable.parameter, meta.embedded.block.xml, text.xml#ffc107
constant.character.escape, punctuation.line.separator.math.tex, constant.character.numeric.regexp, constant.other.character-class.regexp, keyword.control.anchor.regexp, keyword.operator.negation.regexp, keyword.operator.quantifier.regexp, punctuation.definition.character-class.regexp#ff9800—
constant.other.placeholder, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs, keyword.operator.or.regexp, keyword.other.back-reference.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, punctuation.definition.template-expression#f44336—
comment punctuation, comment, comment storage.type.class.gtkdoc.cpp, comment meta.tag.cs punctuation#33691e—
storage.type.class.doxygen.cpp, comment keyword.other.parameter, entity.name.tag.localname.cs#2196f377italic
comment.block.documentation variable.parameter.cpp, comment.line.double-slash.documentation variable.parameter.cpp, comment meta.tag.cs string#00bcd499italic
entity.name.tag.namespace, keyword.operator.arithmetic, keyword.operator.arrow, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.conditional, keyword.operator.decrement, keyword.operator.increment, keyword.operator.logical, keyword.operator.minus, keyword.operator.plus, keyword.operator.relational, punctuation, keyword.operator.delete.array.bracket.cpp, storage.modifier.pointer.cpp, storage.modifier.reference.cpp, entity.name.type.namespace.cs, keyword.other.attribute-specifier.cs, keyword.operator.combinator.css, keyword.operator.pattern.css, constant.other.reference.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown, string.other.reference.link.markdown, keyword.operator.other.powershell, keyword.other.array.begin.powershell, keyword.other.powershell, keyword.operator.string-format.powershell, keyword.operator.unary.powershell, entity.name.type.module.ts, keyword.generator.asterisk.ts, keyword.operator.optional.ts, keyword.operator.spread.ts, keyword.operator.type.annotation.ts, keyword.operator.type.ts, punctuation.accessor.ts, storage.type.function.arrow.ts, meta.tag.preprocessor.xml, meta.tag.xml, meta.tag.no-content.xml#9e9e9e—
invalid#ff0000—
#ff0000—