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#122838ff
  • activityBar.dropBackground#0b2232ff
  • activityBar.foreground#00b491ff
  • activityBar.inactiveForeground#4a5b6aff
  • activityBarBadge.background#00b491bf
  • activityBarBadge.foreground#f7ffffff
  • badge.background#00b491bf
  • badge.foreground#f7ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0b2232ff
  • breadcrumb.focusForeground#e6f0faff
  • breadcrumb.foreground#687886ff
  • breadcrumbPicker.background#122838ff
  • button.background#007558ff
  • button.foreground#f7ffffff
  • button.hoverBackground#00896aff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#122838ff
  • debugToolBar.background#0b2232ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#122838ff
  • dropdown.border#122838ff
  • dropdown.foreground#e6f0faff
  • editor.background#0b2232ff
  • editor.findMatchBackground#0065a940
  • editor.findMatchHighlightBackground#0065a940
  • editor.findRangeHighlightBackground#0065a940
  • editor.focusedStackFrameHighlightBackground#0065a940
  • editor.foreground#d4dee9ff
  • editor.hoverHighlightBackground#0065a940
  • editor.inactiveSelectionBackground#0065a920
  • editor.lineHighlightBackground#122838ff
  • editor.lineHighlightBorder#122838ff
  • editor.rangeHighlightBackground#0065a940
  • editor.selectionBackground#0065a940
  • editor.selectionHighlightBackground#0065a920
  • editor.snippetFinalTabstopHighlightBorder#0065a940
  • editor.snippetTabstopHighlightBackground#0065a940
  • editor.stackFrameHighlightBackground#0065a940
  • editor.wordHighlightBackground#0065a920
  • editor.wordHighlightStrongBackground#0065a920
  • editorActiveLineNumber.foreground#687886ff
  • editorBracketMatch.background#0065a920
  • editorBracketMatch.border#00a1ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff287fff
  • editorError.foreground#ef0051ff
  • editorGroup.border#122838ff
  • editorGroup.dropBackground#0b2232ff
  • editorGroupHeader.noTabsBackground#0b2232ff
  • editorGroupHeader.tabsBackground#122838ff
  • editorGutter.addedBackground#002c12ff
  • editorGutter.background#0b2232ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#700000ff
  • editorGutter.modifiedBackground#001e56ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#122838ff
  • editorHoverWidget.border#122838ff
  • editorIndentGuide.activeBackground#253848ff
  • editorIndentGuide.background#1b2f3fff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#687886ff
  • editorLineNumber.foreground#4a5b6aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ef0051ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005038ff
  • editorOverviewRuler.border#122838ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a90024ff
  • editorOverviewRuler.errorForeground#ef0051bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004484ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0b2232ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#122838ff
  • editorSuggestWidget.border#122838ff
  • editorSuggestWidget.foreground#e6f0faff
  • editorSuggestWidget.highlightForeground#e6f0faff
  • editorSuggestWidget.selectedBackground#1b2f3fff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#122838ff
  • editorWidget.border#122838ff
  • errorForeground#ef0051ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0065a9ff
  • foreground#d4dee9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#687886ff
  • gitDecoration.modifiedResourceForeground#d28422ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b491ff
  • input.background#0b2232ff
  • input.foreground#e6f0faff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b491ff
  • inputValidation.errorBackground#5b0000ff
  • inputValidation.errorBorder#810007ff
  • inputValidation.infoBackground#0b2232ff
  • inputValidation.infoBorder#304352ff
  • inputValidation.warningBackground#350000ff
  • inputValidation.warningBorder#4a0b00ff
  • list.activeSelectionBackground#1b2f3fff
  • list.activeSelectionForeground#e6f0faff
  • list.dropBackground#0b2232ff
  • list.errorForeground#ef0051ff
  • list.focusBackground#1b2f3fff
  • list.highlightForeground#e6f0faff
  • list.hoverBackground#1b2f3fff
  • list.inactiveFocusBackground#1b2f3fff
  • list.inactiveSelectionBackground#1b2f3fff
  • list.inactiveSelectionForeground#e6f0faff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#122838ff
  • menu.foreground#aebbc7ff
  • menu.selectionBackground#1b2f3fff
  • menu.selectionForeground#e6f0faff
  • menu.separatorBackground#304352ff
  • menubar.selectionBackground#1b2f3fff
  • menubar.selectionForeground#e6f0faff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#122838ff
  • notificationLink.foreground#00b491ff
  • notifications.background#122838ff
  • notifications.border#122838ff
  • panel.background#122838ff
  • panel.border#122838ff
  • panel.dropBackground#0b2232ff
  • panelTitle.activeBorder#00b491ff
  • panelTitle.activeForeground#e6f0faff
  • panelTitle.inactiveForeground#9ca9b6ff
  • peekView.border#122838ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#122838ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0b2232ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#122838ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000c1dff
  • scrollbarSlider.activeBackground#4a5b6abf
  • scrollbarSlider.background#304352bf
  • scrollbarSlider.hoverBackground#3d4e5ebf
  • settings.checkboxBackground#0b2232ff
  • settings.checkboxBorder#4a5b6aff
  • settings.checkboxForeground#e6f0faff
  • settings.dropdownBackground#122838ff
  • settings.dropdownBorder#122838ff
  • settings.dropdownForeground#e6f0faff
  • settings.dropdownListBorder#253848ff
  • settings.headerForeground#a4f3ffff
  • settings.modifiedItemIndicator#0065a9ff
  • settings.numberInputBackground#122838ff
  • settings.numberInputForeground#e6f0faff
  • settings.textInputBackground#122838ff
  • settings.textInputForeground#e6f0faff
  • sideBar.background#122838ff
  • sideBar.dropBackground#0b2232ff
  • sideBar.foreground#9ca9b6ff
  • sideBarSectionHeader.background#122838ff
  • sideBarSectionHeader.foreground#4a5b6aff
  • sideBarTitle.foreground#4a5b6aff
  • statusBar.background#1b2f3fff
  • statusBar.debuggingBackground#870000ff
  • statusBar.debuggingForeground#9ca9b6ff
  • statusBar.foreground#9ca9b6ff
  • statusBar.noFolderBackground#3f0061ff
  • statusBar.noFolderForeground#9ca9b6ff
  • tab.activeBackground#122838ff
  • tab.activeBorder#00b491ff
  • tab.activeForeground#e6f0faff
  • tab.activeModifiedBorder#00b491bf
  • tab.border#122838ff
  • tab.inactiveBackground#122838ff
  • tab.inactiveForeground#9ca9b6ff
  • tab.inactiveModifiedBorder#00b491bf
  • tab.unfocusedActiveForeground#e6f0faff
  • tab.unfocusedActiveModifiedBorder#00b49180
  • tab.unfocusedInactiveForeground#9ca9b6ff
  • tab.unfocusedInactiveModifiedBorder#00b49180
  • terminal.ansiBlack#0b2232ff
  • terminal.ansiBlue#00abffff
  • terminal.ansiBrightBlack#6c768bff
  • terminal.ansiBrightBlue#39c4ffff
  • terminal.ansiBrightCyan#bca7ffff
  • terminal.ansiBrightGreen#00fed7ff
  • terminal.ansiBrightMagenta#ff6abfff
  • terminal.ansiBrightRed#ff0069ff
  • terminal.ansiBrightWhite#dce7ffff
  • terminal.ansiBrightYellow#ffc87dff
  • terminal.ansiCyan#b47effff
  • terminal.ansiGreen#00fed7ff
  • terminal.ansiMagenta#ff6abfff
  • terminal.ansiRed#ff0069ff
  • terminal.ansiWhite#c3cee6ff
  • terminal.ansiYellow#ffb453ff
  • terminal.background#0b2232ff
  • terminal.border#122838ff
  • terminal.foreground#d4dee9ff
  • terminal.selectionBackground#0065a940
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#122838ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b491ff
  • textLink.foreground#00b491ff
  • textPreformat.foreground#ff6abfff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#122838ff
  • titleBar.activeForeground#9ca9b6ff
  • titleBar.inactiveBackground#122838ff
  • titleBar.inactiveForeground#4a5b6aff
  • widget.shadow#001827ff

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#ff6abfff
entity.name.tag#00a1ffff
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#8a98a5ff
meta.preprocessor#ff63b9ff
meta.preprocessor.string#00fed7ff
meta.preprocessor.numeric#ffb453ff
meta.structure.dictionary.key.python#d4dee9ff
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#77c9ffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#77c9ffff
keyword.control#ff63b9ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dce7ffff
meta.object-literal.key#d4dee9ff
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#8a98a5ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff6abfff
keyword.operator.or.regexp, keyword.control.anchor.regexp#dce7ffff
keyword.operator.quantifier.regexp#ffb453ff
constant.character#ff63b9ff
constant.character.escape#8a98a5ff
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#00a1ffff
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#d4dee9ff
support.function#39c4ffff
variable.other.constant#ff8dc3ff
meta.brace.round.js, meta.brace.square.js, punctuation#8a98a5ff
support.type.property-name.json#d4dee9ff
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#77c9ffff
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...