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#0f1827ff
  • activityBar.dropBackground#061121ff
  • activityBar.foreground#d19de5ff
  • activityBar.inactiveForeground#4e5461ff
  • activityBarBadge.background#d19de5bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d19de5bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#061121ff
  • breadcrumb.focusForeground#f3f3f4ff
  • breadcrumb.foreground#727781ff
  • breadcrumbPicker.background#0f1827ff
  • button.background#9465a9ff
  • button.foreground#ffffffff
  • button.hoverBackground#a877bdff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0f1827ff
  • debugToolBar.background#061121ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0f1827ff
  • dropdown.border#0f1827ff
  • dropdown.foreground#f3f3f4ff
  • editor.background#061121ff
  • editor.findMatchBackground#5878ae40
  • editor.findMatchHighlightBackground#5878ae40
  • editor.findRangeHighlightBackground#5878ae40
  • editor.focusedStackFrameHighlightBackground#5878ae40
  • editor.foreground#e4e5e7ff
  • editor.hoverHighlightBackground#5878ae40
  • editor.inactiveSelectionBackground#5878ae20
  • editor.lineHighlightBackground#0f1827ff
  • editor.lineHighlightBorder#0f1827ff
  • editor.rangeHighlightBackground#5878ae40
  • editor.selectionBackground#5878ae40
  • editor.selectionHighlightBackground#5878ae20
  • editor.snippetFinalTabstopHighlightBorder#5878ae40
  • editor.snippetTabstopHighlightBackground#5878ae40
  • editor.stackFrameHighlightBackground#5878ae40
  • editor.wordHighlightBackground#5878ae20
  • editor.wordHighlightStrongBackground#5878ae20
  • editorActiveLineNumber.foreground#727781ff
  • editorBracketMatch.background#5878ae20
  • editorBracketMatch.border#93b1ebff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#adb0b6ff
  • editorError.foreground#ca6d70ff
  • editorGroup.border#0f1827ff
  • editorGroup.dropBackground#061121ff
  • editorGroupHeader.noTabsBackground#061121ff
  • editorGroupHeader.tabsBackground#0f1827ff
  • editorGutter.addedBackground#003511ff
  • editorGutter.background#061121ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#590116ff
  • editorGutter.modifiedBackground#002c59ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0f1827ff
  • editorHoverWidget.border#0f1827ff
  • editorIndentGuide.activeBackground#232a39ff
  • editorIndentGuide.background#18202fff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#727781ff
  • editorLineNumber.foreground#4e5461ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ca6d70ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006239ff
  • editorOverviewRuler.border#0f1827ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8c363dff
  • editorOverviewRuler.errorForeground#ca6d70bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#325588ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#061121ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0f1827ff
  • editorSuggestWidget.border#0f1827ff
  • editorSuggestWidget.foreground#f3f3f4ff
  • editorSuggestWidget.highlightForeground#f3f3f4ff
  • editorSuggestWidget.selectedBackground#18202fff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0f1827ff
  • editorWidget.border#0f1827ff
  • errorForeground#ca6d70ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5878aeff
  • foreground#e4e5e7ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#727781ff
  • gitDecoration.modifiedResourceForeground#daa46bff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#64c291ff
  • input.background#061121ff
  • input.foreground#f3f3f4ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d19de5ff
  • inputValidation.errorBackground#3b0000ff
  • inputValidation.errorBorder#691421ff
  • inputValidation.infoBackground#061121ff
  • inputValidation.infoBorder#303645ff
  • inputValidation.warningBackground#2e0200ff
  • inputValidation.warningBorder#532c00ff
  • list.activeSelectionBackground#18202fff
  • list.activeSelectionForeground#f3f3f4ff
  • list.dropBackground#061121ff
  • list.errorForeground#ca6d70ff
  • list.focusBackground#18202fff
  • list.highlightForeground#f3f3f4ff
  • list.hoverBackground#18202fff
  • list.inactiveFocusBackground#18202fff
  • list.inactiveSelectionBackground#18202fff
  • list.inactiveSelectionForeground#f3f3f4ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0f1827ff
  • menu.foreground#c1c3c8ff
  • menu.selectionBackground#18202fff
  • menu.selectionForeground#f3f3f4ff
  • menu.separatorBackground#303645ff
  • menubar.selectionBackground#18202fff
  • menubar.selectionForeground#f3f3f4ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0f1827ff
  • notificationLink.foreground#d19de5ff
  • notifications.background#0f1827ff
  • notifications.border#0f1827ff
  • panel.background#0f1827ff
  • panel.border#0f1827ff
  • panel.dropBackground#061121ff
  • panelTitle.activeBorder#d19de5ff
  • panelTitle.activeForeground#f3f3f4ff
  • panelTitle.inactiveForeground#adb0b6ff
  • peekView.border#0f1827ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0f1827ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#061121ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0f1827ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000118ff
  • scrollbarSlider.activeBackground#4e5461bf
  • scrollbarSlider.background#303645bf
  • scrollbarSlider.hoverBackground#3e4452bf
  • settings.checkboxBackground#061121ff
  • settings.checkboxBorder#4e5461ff
  • settings.checkboxForeground#f3f3f4ff
  • settings.dropdownBackground#0f1827ff
  • settings.dropdownBorder#0f1827ff
  • settings.dropdownForeground#f3f3f4ff
  • settings.dropdownListBorder#232a39ff
  • settings.headerForeground#d7f5ffff
  • settings.modifiedItemIndicator#5878aeff
  • settings.numberInputBackground#0f1827ff
  • settings.numberInputForeground#f3f3f4ff
  • settings.textInputBackground#0f1827ff
  • settings.textInputForeground#f3f3f4ff
  • sideBar.background#0f1827ff
  • sideBar.dropBackground#061121ff
  • sideBar.foreground#adb0b6ff
  • sideBarSectionHeader.background#0f1827ff
  • sideBarSectionHeader.foreground#4e5461ff
  • sideBarTitle.foreground#4e5461ff
  • statusBar.background#18202fff
  • statusBar.debuggingBackground#794700ff
  • statusBar.debuggingForeground#adb0b6ff
  • statusBar.foreground#adb0b6ff
  • statusBar.noFolderBackground#521e6bff
  • statusBar.noFolderForeground#adb0b6ff
  • tab.activeBackground#0f1827ff
  • tab.activeBorder#d19de5ff
  • tab.activeForeground#f3f3f4ff
  • tab.activeModifiedBorder#d19de5bf
  • tab.border#0f1827ff
  • tab.inactiveBackground#0f1827ff
  • tab.inactiveForeground#adb0b6ff
  • tab.inactiveModifiedBorder#d19de5bf
  • tab.unfocusedActiveForeground#f3f3f4ff
  • tab.unfocusedActiveModifiedBorder#d19de580
  • tab.unfocusedInactiveForeground#adb0b6ff
  • tab.unfocusedInactiveModifiedBorder#d19de580
  • terminal.ansiBlack#061121ff
  • terminal.ansiBlue#a6c4ffff
  • terminal.ansiBrightBlack#4e5461ff
  • terminal.ansiBrightBlue#a6c4ffff
  • terminal.ansiBrightCyan#4fd3f7ff
  • terminal.ansiBrightGreen#77d5a3ff
  • terminal.ansiBrightMagenta#deb4eeff
  • terminal.ansiBrightRed#ffa6a7ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#eeb77cff
  • terminal.ansiCyan#4fd3f7ff
  • terminal.ansiGreen#006239ff
  • terminal.ansiMagenta#deb4eeff
  • terminal.ansiRed#8c363dff
  • terminal.ansiWhite#e4e5e7ff
  • terminal.ansiYellow#eeb77cff
  • terminal.background#061121ff
  • terminal.border#0f1827ff
  • terminal.foreground#e4e5e7ff
  • terminal.selectionBackground#5878ae40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0f1827ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d19de5ff
  • textLink.foreground#d19de5ff
  • textPreformat.foreground#deb4eeff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0f1827ff
  • titleBar.activeForeground#adb0b6ff
  • titleBar.inactiveBackground#0f1827ff
  • titleBar.inactiveForeground#4e5461ff
  • widget.shadow#000118ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...