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#1b2434ff
  • activityBar.dropBackground#151e2eff
  • activityBar.foreground#d6a2ebff
  • activityBar.inactiveForeground#585e6bff
  • activityBarBadge.background#d6a2ebbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d6a2ebbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151e2eff
  • breadcrumb.focusForeground#f4f4f5ff
  • breadcrumb.foreground#7b7f8aff
  • breadcrumbPicker.background#1b2434ff
  • button.background#9d6db2ff
  • button.foreground#ffffffff
  • button.hoverBackground#b07fc4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1b2434ff
  • debugToolBar.background#151e2eff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1b2434ff
  • dropdown.border#1b2434ff
  • dropdown.foreground#f4f4f5ff
  • editor.background#151e2eff
  • editor.findMatchBackground#6181b740
  • editor.findMatchHighlightBackground#6181b740
  • editor.findRangeHighlightBackground#6181b740
  • editor.focusedStackFrameHighlightBackground#6181b740
  • editor.foreground#e6e6e9ff
  • editor.hoverHighlightBackground#6181b740
  • editor.inactiveSelectionBackground#6181b720
  • editor.lineHighlightBackground#1b2434ff
  • editor.lineHighlightBorder#1b2434ff
  • editor.rangeHighlightBackground#6181b740
  • editor.selectionBackground#6181b740
  • editor.selectionHighlightBackground#6181b720
  • editor.snippetFinalTabstopHighlightBorder#6181b740
  • editor.snippetTabstopHighlightBackground#6181b740
  • editor.stackFrameHighlightBackground#6181b740
  • editor.wordHighlightBackground#6181b720
  • editor.wordHighlightStrongBackground#6181b720
  • editorActiveLineNumber.foreground#7b7f8aff
  • editorBracketMatch.background#6181b720
  • editorBracketMatch.border#98b6f1ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b2b5bbff
  • editorError.foreground#d27477ff
  • editorGroup.border#1b2434ff
  • editorGroup.dropBackground#151e2eff
  • editorGroupHeader.noTabsBackground#151e2eff
  • editorGroupHeader.tabsBackground#1b2434ff
  • editorGutter.addedBackground#00421cff
  • editorGutter.background#151e2eff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#681321ff
  • editorGutter.modifiedBackground#063767ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1b2434ff
  • editorHoverWidget.border#1b2434ff
  • editorIndentGuide.activeBackground#2f3645ff
  • editorIndentGuide.background#242c3cff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7b7f8aff
  • editorLineNumber.foreground#585e6bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d27477ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006d42ff
  • editorOverviewRuler.border#1b2434ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#984146ff
  • editorOverviewRuler.errorForeground#d27477bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3e5f93ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#151e2eff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1b2434ff
  • editorSuggestWidget.border#1b2434ff
  • editorSuggestWidget.foreground#f4f4f5ff
  • editorSuggestWidget.highlightForeground#f4f4f5ff
  • editorSuggestWidget.selectedBackground#242c3cff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1b2434ff
  • editorWidget.border#1b2434ff
  • errorForeground#d27477ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6181b7ff
  • foreground#e6e6e9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7b7f8aff
  • gitDecoration.modifiedResourceForeground#e0a96fff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#69c796ff
  • input.background#151e2eff
  • input.foreground#f4f4f5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d6a2ebff
  • inputValidation.errorBackground#490005ff
  • inputValidation.errorBorder#77222cff
  • inputValidation.infoBackground#151e2eff
  • inputValidation.infoBorder#3b4251ff
  • inputValidation.warningBackground#381300ff
  • inputValidation.warningBorder#603700ff
  • list.activeSelectionBackground#242c3cff
  • list.activeSelectionForeground#f4f4f5ff
  • list.dropBackground#151e2eff
  • list.errorForeground#d27477ff
  • list.focusBackground#242c3cff
  • list.highlightForeground#f4f4f5ff
  • list.hoverBackground#242c3cff
  • list.inactiveFocusBackground#242c3cff
  • list.inactiveSelectionBackground#242c3cff
  • list.inactiveSelectionForeground#f4f4f5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1b2434ff
  • menu.foreground#c4c6cbff
  • menu.selectionBackground#242c3cff
  • menu.selectionForeground#f4f4f5ff
  • menu.separatorBackground#3b4251ff
  • menubar.selectionBackground#242c3cff
  • menubar.selectionForeground#f4f4f5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1b2434ff
  • notificationLink.foreground#d6a2ebff
  • notifications.background#1b2434ff
  • notifications.border#1b2434ff
  • panel.background#1b2434ff
  • panel.border#1b2434ff
  • panel.dropBackground#151e2eff
  • panelTitle.activeBorder#d6a2ebff
  • panelTitle.activeForeground#f4f4f5ff
  • panelTitle.inactiveForeground#b2b5bbff
  • peekView.border#1b2434ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1b2434ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#151e2eff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1b2434ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00041aff
  • scrollbarSlider.activeBackground#585e6bbf
  • scrollbarSlider.background#3b4251bf
  • scrollbarSlider.hoverBackground#494f5dbf
  • settings.checkboxBackground#151e2eff
  • settings.checkboxBorder#585e6bff
  • settings.checkboxForeground#f4f4f5ff
  • settings.dropdownBackground#1b2434ff
  • settings.dropdownBorder#1b2434ff
  • settings.dropdownForeground#f4f4f5ff
  • settings.dropdownListBorder#2f3645ff
  • settings.headerForeground#d8f6ffff
  • settings.modifiedItemIndicator#6181b7ff
  • settings.numberInputBackground#1b2434ff
  • settings.numberInputForeground#f4f4f5ff
  • settings.textInputBackground#1b2434ff
  • settings.textInputForeground#f4f4f5ff
  • sideBar.background#1b2434ff
  • sideBar.dropBackground#151e2eff
  • sideBar.foreground#b2b5bbff
  • sideBarSectionHeader.background#1b2434ff
  • sideBarSectionHeader.foreground#585e6bff
  • sideBarTitle.foreground#585e6bff
  • statusBar.background#242c3cff
  • statusBar.debuggingBackground#85510aff
  • statusBar.debuggingForeground#b2b5bbff
  • statusBar.foreground#b2b5bbff
  • statusBar.noFolderBackground#5f2a78ff
  • statusBar.noFolderForeground#b2b5bbff
  • tab.activeBackground#1b2434ff
  • tab.activeBorder#d6a2ebff
  • tab.activeForeground#f4f4f5ff
  • tab.activeModifiedBorder#d6a2ebbf
  • tab.border#1b2434ff
  • tab.inactiveBackground#1b2434ff
  • tab.inactiveForeground#b2b5bbff
  • tab.inactiveModifiedBorder#d6a2ebbf
  • tab.unfocusedActiveForeground#f4f4f5ff
  • tab.unfocusedActiveModifiedBorder#d6a2eb80
  • tab.unfocusedInactiveForeground#b2b5bbff
  • tab.unfocusedInactiveModifiedBorder#d6a2eb80
  • terminal.ansiBlack#151e2eff
  • terminal.ansiBlue#aac8ffff
  • terminal.ansiBrightBlack#585e6bff
  • terminal.ansiBrightBlue#aac8ffff
  • terminal.ansiBrightCyan#54d7fbff
  • terminal.ansiBrightGreen#7bd9a7ff
  • terminal.ansiBrightMagenta#e2b8f2ff
  • terminal.ansiBrightRed#ffaaabff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f3bb80ff
  • terminal.ansiCyan#54d7fbff
  • terminal.ansiGreen#006d42ff
  • terminal.ansiMagenta#e2b8f2ff
  • terminal.ansiRed#984146ff
  • terminal.ansiWhite#e6e6e9ff
  • terminal.ansiYellow#f3bb80ff
  • terminal.background#151e2eff
  • terminal.border#1b2434ff
  • terminal.foreground#e6e6e9ff
  • terminal.selectionBackground#6181b740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1b2434ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d6a2ebff
  • textLink.foreground#d6a2ebff
  • textPreformat.foreground#e2b8f2ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1b2434ff
  • titleBar.activeForeground#b2b5bbff
  • titleBar.inactiveBackground#1b2434ff
  • titleBar.inactiveForeground#585e6bff
  • widget.shadow#091423ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...