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#283d4eff
  • activityBar.dropBackground#223748ff
  • activityBar.foreground#00be9bff
  • activityBar.inactiveForeground#5b6c7cff
  • activityBarBadge.background#00be9bbf
  • activityBarBadge.foreground#f7ffffff
  • badge.background#00be9bbf
  • badge.foreground#f7ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#223748ff
  • breadcrumb.focusForeground#e8f2fcff
  • breadcrumb.foreground#778695ff
  • breadcrumbPicker.background#283d4eff
  • button.background#008466ff
  • button.foreground#f7ffffff
  • button.hoverBackground#009777ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#283d4eff
  • debugToolBar.background#223748ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#283d4eff
  • dropdown.border#283d4eff
  • dropdown.foreground#e8f2fcff
  • editor.background#223748ff
  • editor.findMatchBackground#0073b940
  • editor.findMatchHighlightBackground#0073b940
  • editor.findRangeHighlightBackground#0073b940
  • editor.focusedStackFrameHighlightBackground#0073b940
  • editor.foreground#d7e2edff
  • editor.hoverHighlightBackground#0073b940
  • editor.inactiveSelectionBackground#0073b920
  • editor.lineHighlightBackground#283d4eff
  • editor.lineHighlightBorder#283d4eff
  • editor.rangeHighlightBackground#0073b940
  • editor.selectionBackground#0073b940
  • editor.selectionHighlightBackground#0073b920
  • editor.snippetFinalTabstopHighlightBorder#0073b940
  • editor.snippetTabstopHighlightBackground#0073b940
  • editor.stackFrameHighlightBackground#0073b940
  • editor.wordHighlightBackground#0073b920
  • editor.wordHighlightStrongBackground#0073b920
  • editorActiveLineNumber.foreground#778695ff
  • editorBracketMatch.background#0073b920
  • editorBracketMatch.border#00abffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff287fff
  • editorError.foreground#ff005dff
  • editorGroup.border#283d4eff
  • editorGroup.dropBackground#223748ff
  • editorGroupHeader.noTabsBackground#223748ff
  • editorGroupHeader.tabsBackground#283d4eff
  • editorGutter.addedBackground#003a24ff
  • editorGutter.background#223748ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#8b0012ff
  • editorGutter.modifiedBackground#002f6cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#283d4eff
  • editorHoverWidget.border#283d4eff
  • editorIndentGuide.activeBackground#394c5dff
  • editorIndentGuide.background#304455ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#778695ff
  • editorLineNumber.foreground#5b6c7cff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ff005dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006248ff
  • editorOverviewRuler.border#283d4eff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#c00032ff
  • editorOverviewRuler.errorForeground#ff005dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#005496ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#223748ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#283d4eff
  • editorSuggestWidget.border#283d4eff
  • editorSuggestWidget.foreground#e8f2fcff
  • editorSuggestWidget.highlightForeground#e8f2fcff
  • editorSuggestWidget.selectedBackground#304455ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#283d4eff
  • editorWidget.border#283d4eff
  • errorForeground#ff005dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0073b9ff
  • foreground#d7e2edff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#778695ff
  • gitDecoration.modifiedResourceForeground#dd8d2cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00be9bff
  • input.background#223748ff
  • input.foreground#e8f2fcff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00be9bff
  • inputValidation.errorBackground#680000ff
  • inputValidation.errorBorder#9b001dff
  • inputValidation.infoBackground#223748ff
  • inputValidation.infoBorder#435666ff
  • inputValidation.warningBackground#3a0000ff
  • inputValidation.warningBorder#5d2000ff
  • list.activeSelectionBackground#304455ff
  • list.activeSelectionForeground#e8f2fcff
  • list.dropBackground#223748ff
  • list.errorForeground#ff005dff
  • list.focusBackground#304455ff
  • list.highlightForeground#e8f2fcff
  • list.hoverBackground#304455ff
  • list.inactiveFocusBackground#304455ff
  • list.inactiveSelectionBackground#304455ff
  • list.inactiveSelectionForeground#e8f2fcff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#283d4eff
  • menu.foreground#b6c2cfff
  • menu.selectionBackground#304455ff
  • menu.selectionForeground#e8f2fcff
  • menu.separatorBackground#435666ff
  • menubar.selectionBackground#304455ff
  • menubar.selectionForeground#e8f2fcff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#283d4eff
  • notificationLink.foreground#00be9bff
  • notifications.background#283d4eff
  • notifications.border#283d4eff
  • panel.background#283d4eff
  • panel.border#283d4eff
  • panel.dropBackground#223748ff
  • panelTitle.activeBorder#00be9bff
  • panelTitle.activeForeground#e8f2fcff
  • panelTitle.inactiveForeground#a5b3c0ff
  • peekView.border#283d4eff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#283d4eff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#223748ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#283d4eff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0b2232ff
  • scrollbarSlider.activeBackground#5b6c7cbf
  • scrollbarSlider.background#435666bf
  • scrollbarSlider.hoverBackground#4f6171bf
  • settings.checkboxBackground#223748ff
  • settings.checkboxBorder#5b6c7cff
  • settings.checkboxForeground#e8f2fcff
  • settings.dropdownBackground#283d4eff
  • settings.dropdownBorder#283d4eff
  • settings.dropdownForeground#e8f2fcff
  • settings.dropdownListBorder#394c5dff
  • settings.headerForeground#a6f5ffff
  • settings.modifiedItemIndicator#0073b9ff
  • settings.numberInputBackground#283d4eff
  • settings.numberInputForeground#e8f2fcff
  • settings.textInputBackground#283d4eff
  • settings.textInputForeground#e8f2fcff
  • sideBar.background#283d4eff
  • sideBar.dropBackground#223748ff
  • sideBar.foreground#a5b3c0ff
  • sideBarSectionHeader.background#283d4eff
  • sideBarSectionHeader.foreground#5b6c7cff
  • sideBarTitle.foreground#5b6c7cff
  • statusBar.background#304455ff
  • statusBar.debuggingBackground#9c0100ff
  • statusBar.debuggingForeground#a5b3c0ff
  • statusBar.foreground#a5b3c0ff
  • statusBar.noFolderBackground#550b76ff
  • statusBar.noFolderForeground#a5b3c0ff
  • tab.activeBackground#283d4eff
  • tab.activeBorder#00be9bff
  • tab.activeForeground#e8f2fcff
  • tab.activeModifiedBorder#00be9bbf
  • tab.border#283d4eff
  • tab.inactiveBackground#283d4eff
  • tab.inactiveForeground#a5b3c0ff
  • tab.inactiveModifiedBorder#00be9bbf
  • tab.unfocusedActiveForeground#e8f2fcff
  • tab.unfocusedActiveModifiedBorder#00be9b80
  • tab.unfocusedInactiveForeground#a5b3c0ff
  • tab.unfocusedInactiveModifiedBorder#00be9b80
  • terminal.ansiBlack#223748ff
  • terminal.ansiBlue#00abffff
  • terminal.ansiBrightBlack#6c768bff
  • terminal.ansiBrightBlue#39c4ffff
  • terminal.ansiBrightCyan#bca7ffff
  • terminal.ansiBrightGreen#00fed7ff
  • terminal.ansiBrightMagenta#ff73c7ff
  • terminal.ansiBrightRed#ff0069ff
  • terminal.ansiBrightWhite#dce7ffff
  • terminal.ansiBrightYellow#ffc87dff
  • terminal.ansiCyan#b47effff
  • terminal.ansiGreen#00fed7ff
  • terminal.ansiMagenta#ff73c7ff
  • terminal.ansiRed#ff0069ff
  • terminal.ansiWhite#c3cee6ff
  • terminal.ansiYellow#ffb453ff
  • terminal.background#223748ff
  • terminal.border#283d4eff
  • terminal.foreground#d7e2edff
  • terminal.selectionBackground#0073b940
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#283d4eff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00be9bff
  • textLink.foreground#00be9bff
  • textPreformat.foreground#ff73c7ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#283d4eff
  • titleBar.activeForeground#a5b3c0ff
  • titleBar.inactiveBackground#283d4eff
  • titleBar.inactiveForeground#5b6c7cff
  • widget.shadow#172c3dff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dce7ffff
emphasisitalic
strongbold
header#000080
comment#5e6b8fff
constant.language#ffb453ff
constant.numeric#ffb453ff
constant.regexp#ff73c7ff
entity.name.tag#00abffff
entity.name.tag.css#ffc87dff
entity.other.attribute-name#ffb453ff
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, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#ffb453ff
invalid#f44747
markup.underlineunderline
markup.bold#ff63b9ffbold
markup.heading#ff63b9ffbold
markup.italicitalic
markup.inserted#ffb453ff
markup.deleted#00fed7ff
markup.changed#ff63b9ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#00fed7ff
punctuation.definition.tag#95a3b1ff
meta.preprocessor#ff63b9ff
meta.preprocessor.string#00fed7ff
meta.preprocessor.numeric#ffb453ff
meta.structure.dictionary.key.python#d7e2edff
meta.diff.header#ff63b9ff
storage#ff63b9ff
storage.type#ffb453ff
storage.modifier#ffb453ff
string#00fed7ff
string.tag#00fed7ff
string.value#00fed7ff
string.regexp#00fed7ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#dce7ffff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#dce7ffff
keyword#ff63b9ff
keyword.control#ff63b9ff
keyword.operator#dce7ffff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ff63b9ff
keyword.other.unit#ffb453ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff63b9ff
support.function.git-rebase#39c4ffff
constant.sha.git-rebase#ffb453ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff63b9ff
entity.name.function, support.function, support.constant.handlebars#39c4ffff
meta.return-type, support.class, support.type, entity.name.type, 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#7dcfffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7dcfffff
keyword.control#ff63b9ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dce7ffff
meta.object-literal.key#d7e2edff
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#00fed7ff
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#95a3b1ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff73c7ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#dce7ffff
keyword.operator.quantifier.regexp#ffb453ff
constant.character#ff63b9ff
constant.character.escape#95a3b1ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#00fed7ff
string.template#00fed7ff
storage.type.function#ffb453ff
support.class.component.js#00abffff
variable.parameter#b2bcd3ff
variable.other.property#dce7ffff
support.function, support.constant.handlebars#39c4ffff
support.type, support.class, support.constant.math#ffc87dff
support.type.vendored.property-name, support.type.property-name#d7e2edff
support.function#39c4ffff
variable.other.constant#ff8dc3ff
meta.brace.round.js, meta.brace.square.js, punctuation#95a3b1ff
support.type.property-name.json#d7e2edff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#dce7ffff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ff63b9ff
entity.name.type.class, entity.name.type.module#7dcfffff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#5e6b8fff
markup.headingnormal

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...