Skip to main content
CodingTheme

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#253146ff
  • activityBar.dropBackground#1f2b41ff
  • activityBar.foreground#dea6f4ff
  • activityBar.inactiveForeground#60697bff
  • activityBarBadge.background#dea6f4bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#dea6f4bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1f2b41ff
  • breadcrumb.focusForeground#f2f5fcff
  • breadcrumb.foreground#818898ff
  • breadcrumbPicker.background#253146ff
  • button.background#a874bfff
  • button.foreground#fdffffff
  • button.hoverBackground#ba84d0ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#253146ff
  • debugToolBar.background#1f2b41ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#253146ff
  • dropdown.border#253146ff
  • dropdown.foreground#f2f5fcff
  • editor.background#1f2b41ff
  • editor.findMatchBackground#6589c640
  • editor.findMatchHighlightBackground#6589c640
  • editor.findRangeHighlightBackground#6589c640
  • editor.focusedStackFrameHighlightBackground#6589c640
  • editor.foreground#e5e8f1ff
  • editor.hoverHighlightBackground#6589c640
  • editor.inactiveSelectionBackground#6589c620
  • editor.lineHighlightBackground#253146ff
  • editor.lineHighlightBorder#253146ff
  • editor.rangeHighlightBackground#6589c640
  • editor.selectionBackground#6589c640
  • editor.selectionHighlightBackground#6589c620
  • editor.snippetFinalTabstopHighlightBorder#6589c640
  • editor.snippetTabstopHighlightBackground#6589c640
  • editor.stackFrameHighlightBackground#6589c640
  • editor.wordHighlightBackground#6589c620
  • editor.wordHighlightStrongBackground#6589c620
  • editorActiveLineNumber.foreground#818898ff
  • editorBracketMatch.background#6589c620
  • editorBracketMatch.border#99bcfcff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b5bac6ff
  • editorError.foreground#df797cff
  • editorGroup.border#253146ff
  • editorGroup.dropBackground#1f2b41ff
  • editorGroupHeader.noTabsBackground#1f2b41ff
  • editorGroupHeader.tabsBackground#253146ff
  • editorGutter.addedBackground#005025ff
  • editorGutter.background#1f2b41ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#7b1d2bff
  • editorGutter.modifiedBackground#11447aff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#253146ff
  • editorHoverWidget.border#253146ff
  • editorIndentGuide.activeBackground#384257ff
  • editorIndentGuide.background#2e394eff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#818898ff
  • editorLineNumber.foreground#60697bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#df797cff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00794aff
  • editorOverviewRuler.border#253146ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a8484eff
  • editorOverviewRuler.errorForeground#df797cbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#446aa4ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1f2b41ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#253146ff
  • editorSuggestWidget.border#253146ff
  • editorSuggestWidget.foreground#f2f5fcff
  • editorSuggestWidget.highlightForeground#f2f5fcff
  • editorSuggestWidget.selectedBackground#2e394eff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#253146ff
  • editorWidget.border#253146ff
  • errorForeground#df797cff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6589c6ff
  • foreground#e5e8f1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#818898ff
  • gitDecoration.modifiedResourceForeground#e8ad6eff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#66ce98ff
  • input.background#1f2b41ff
  • input.foreground#f2f5fcff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#dea6f4ff
  • inputValidation.errorBackground#5d0015ff
  • inputValidation.errorBorder#882b35ff
  • inputValidation.infoBackground#1f2b41ff
  • inputValidation.infoBorder#444e62ff
  • inputValidation.warningBackground#481f00ff
  • inputValidation.warningBorder#6f4204ff
  • list.activeSelectionBackground#2e394eff
  • list.activeSelectionForeground#f2f5fcff
  • list.dropBackground#1f2b41ff
  • list.errorForeground#df797cff
  • list.focusBackground#2e394eff
  • list.highlightForeground#f2f5fcff
  • list.hoverBackground#2e394eff
  • list.inactiveFocusBackground#2e394eff
  • list.inactiveSelectionBackground#2e394eff
  • list.inactiveSelectionForeground#f2f5fcff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#253146ff
  • menu.foreground#c6cad5ff
  • menu.selectionBackground#2e394eff
  • menu.selectionForeground#f2f5fcff
  • menu.separatorBackground#444e62ff
  • menubar.selectionBackground#2e394eff
  • menubar.selectionForeground#f2f5fcff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#253146ff
  • notificationLink.foreground#dea6f4ff
  • notifications.background#253146ff
  • notifications.border#253146ff
  • panel.background#253146ff
  • panel.border#253146ff
  • panel.dropBackground#1f2b41ff
  • panelTitle.activeBorder#dea6f4ff
  • panelTitle.activeForeground#f2f5fcff
  • panelTitle.inactiveForeground#b5bac6ff
  • peekView.border#253146ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#253146ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f2b41ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#253146ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#08172aff
  • scrollbarSlider.activeBackground#60697bbf
  • scrollbarSlider.background#444e62bf
  • scrollbarSlider.hoverBackground#515a6ebf
  • settings.checkboxBackground#1f2b41ff
  • settings.checkboxBorder#60697bff
  • settings.checkboxForeground#f2f5fcff
  • settings.dropdownBackground#253146ff
  • settings.dropdownBorder#253146ff
  • settings.dropdownForeground#f2f5fcff
  • settings.dropdownListBorder#384257ff
  • settings.headerForeground#d5f7ffff
  • settings.modifiedItemIndicator#6589c6ff
  • settings.numberInputBackground#253146ff
  • settings.numberInputForeground#f2f5fcff
  • settings.textInputBackground#253146ff
  • settings.textInputForeground#f2f5fcff
  • sideBar.background#253146ff
  • sideBar.dropBackground#1f2b41ff
  • sideBar.foreground#b5bac6ff
  • sideBarSectionHeader.background#253146ff
  • sideBarSectionHeader.foreground#60697bff
  • sideBarTitle.foreground#60697bff
  • statusBar.background#2e394eff
  • statusBar.debuggingBackground#935a0eff
  • statusBar.debuggingForeground#b5bac6ff
  • statusBar.foreground#b5bac6ff
  • statusBar.noFolderBackground#6e3489ff
  • statusBar.noFolderForeground#b5bac6ff
  • tab.activeBackground#253146ff
  • tab.activeBorder#dea6f4ff
  • tab.activeForeground#f2f5fcff
  • tab.activeModifiedBorder#dea6f4bf
  • tab.border#253146ff
  • tab.inactiveBackground#253146ff
  • tab.inactiveForeground#b5bac6ff
  • tab.inactiveModifiedBorder#dea6f4bf
  • tab.unfocusedActiveForeground#f2f5fcff
  • tab.unfocusedActiveModifiedBorder#dea6f480
  • tab.unfocusedInactiveForeground#b5bac6ff
  • tab.unfocusedInactiveModifiedBorder#dea6f480
  • terminal.ansiBlack#1f2b41ff
  • terminal.ansiBlue#aaccffff
  • terminal.ansiBrightBlack#60697bff
  • terminal.ansiBrightBlue#aaccffff
  • terminal.ansiBrightCyan#45dcffff
  • terminal.ansiBrightGreen#77dfa8ff
  • terminal.ansiBrightMagenta#e9bafbff
  • terminal.ansiBrightRed#ffabadff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#fabe7eff
  • terminal.ansiCyan#45dcffff
  • terminal.ansiGreen#00794aff
  • terminal.ansiMagenta#e9bafbff
  • terminal.ansiRed#a8484eff
  • terminal.ansiWhite#e5e8f1ff
  • terminal.ansiYellow#fabe7eff
  • terminal.background#1f2b41ff
  • terminal.border#253146ff
  • terminal.foreground#e5e8f1ff
  • terminal.selectionBackground#6589c640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#253146ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#dea6f4ff
  • textLink.foreground#dea6f4ff
  • textPreformat.foreground#e9bafbff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#253146ff
  • titleBar.activeForeground#b5bac6ff
  • titleBar.inactiveBackground#253146ff
  • titleBar.inactiveForeground#60697bff
  • widget.shadow#142135ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...