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#182439ff
  • activityBar.dropBackground#111e33ff
  • activityBar.foreground#d8a1efff
  • activityBar.inactiveForeground#565e71ff
  • activityBarBadge.background#d8a1efbf
  • activityBarBadge.foreground#fdffffff
  • badge.background#d8a1efbf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#111e33ff
  • breadcrumb.focusForeground#f1f4fbff
  • breadcrumb.foreground#787f90ff
  • breadcrumbPicker.background#182439ff
  • button.background#9f6bb6ff
  • button.foreground#fdffffff
  • button.hoverBackground#b27dc9ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#182439ff
  • debugToolBar.background#111e33ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#182439ff
  • dropdown.border#182439ff
  • dropdown.foreground#f1f4fbff
  • editor.background#111e33ff
  • editor.findMatchBackground#5c81bd40
  • editor.findMatchHighlightBackground#5c81bd40
  • editor.findRangeHighlightBackground#5c81bd40
  • editor.focusedStackFrameHighlightBackground#5c81bd40
  • editor.foreground#e3e7efff
  • editor.hoverHighlightBackground#5c81bd40
  • editor.inactiveSelectionBackground#5c81bd20
  • editor.lineHighlightBackground#182439ff
  • editor.lineHighlightBorder#182439ff
  • editor.rangeHighlightBackground#5c81bd40
  • editor.selectionBackground#5c81bd40
  • editor.selectionHighlightBackground#5c81bd20
  • editor.snippetFinalTabstopHighlightBorder#5c81bd40
  • editor.snippetTabstopHighlightBackground#5c81bd40
  • editor.stackFrameHighlightBackground#5c81bd40
  • editor.wordHighlightBackground#5c81bd20
  • editor.wordHighlightStrongBackground#5c81bd20
  • editorActiveLineNumber.foreground#787f90ff
  • editorBracketMatch.background#5c81bd20
  • editorBracketMatch.border#94b7f7ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b0b5c1ff
  • editorError.foreground#d77175ff
  • editorGroup.border#182439ff
  • editorGroup.dropBackground#111e33ff
  • editorGroupHeader.noTabsBackground#111e33ff
  • editorGroupHeader.tabsBackground#182439ff
  • editorGutter.addedBackground#00431aff
  • editorGutter.background#111e33ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6b0c1fff
  • editorGutter.modifiedBackground#00386cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#182439ff
  • editorHoverWidget.border#182439ff
  • editorIndentGuide.activeBackground#2c364aff
  • editorIndentGuide.background#212c41ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#787f90ff
  • editorLineNumber.foreground#565e71ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d77175ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006e40ff
  • editorOverviewRuler.border#182439ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9c3d45ff
  • editorOverviewRuler.errorForeground#d77175bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#386099ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#111e33ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#182439ff
  • editorSuggestWidget.border#182439ff
  • editorSuggestWidget.foreground#f1f4fbff
  • editorSuggestWidget.highlightForeground#f1f4fbff
  • editorSuggestWidget.selectedBackground#212c41ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#182439ff
  • editorWidget.border#182439ff
  • errorForeground#d77175ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5c81bdff
  • foreground#e3e7efff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#787f90ff
  • gitDecoration.modifiedResourceForeground#e2a86aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#60c894ff
  • input.background#111e33ff
  • input.foreground#f1f4fbff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d8a1efff
  • inputValidation.errorBackground#4c0002ff
  • inputValidation.errorBorder#7a1d2aff
  • inputValidation.infoBackground#111e33ff
  • inputValidation.infoBorder#384256ff
  • inputValidation.warningBackground#3a1100ff
  • inputValidation.warningBorder#623600ff
  • list.activeSelectionBackground#212c41ff
  • list.activeSelectionForeground#f1f4fbff
  • list.dropBackground#111e33ff
  • list.errorForeground#d77175ff
  • list.focusBackground#212c41ff
  • list.highlightForeground#f1f4fbff
  • list.hoverBackground#212c41ff
  • list.inactiveFocusBackground#212c41ff
  • list.inactiveSelectionBackground#212c41ff
  • list.inactiveSelectionForeground#f1f4fbff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#182439ff
  • menu.foreground#c2c7d2ff
  • menu.selectionBackground#212c41ff
  • menu.selectionForeground#f1f4fbff
  • menu.separatorBackground#384256ff
  • menubar.selectionBackground#212c41ff
  • menubar.selectionForeground#f1f4fbff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#182439ff
  • notificationLink.foreground#d8a1efff
  • notifications.background#182439ff
  • notifications.border#182439ff
  • panel.background#182439ff
  • panel.border#182439ff
  • panel.dropBackground#111e33ff
  • panelTitle.activeBorder#d8a1efff
  • panelTitle.activeForeground#f1f4fbff
  • panelTitle.inactiveForeground#b0b5c1ff
  • peekView.border#182439ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#182439ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#111e33ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#182439ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00041eff
  • scrollbarSlider.activeBackground#565e71bf
  • scrollbarSlider.background#384256bf
  • scrollbarSlider.hoverBackground#464f63bf
  • settings.checkboxBackground#111e33ff
  • settings.checkboxBorder#565e71ff
  • settings.checkboxForeground#f1f4fbff
  • settings.dropdownBackground#182439ff
  • settings.dropdownBorder#182439ff
  • settings.dropdownForeground#f1f4fbff
  • settings.dropdownListBorder#2c364aff
  • settings.headerForeground#d4f6ffff
  • settings.modifiedItemIndicator#5c81bdff
  • settings.numberInputBackground#182439ff
  • settings.numberInputForeground#f1f4fbff
  • settings.textInputBackground#182439ff
  • settings.textInputForeground#f1f4fbff
  • sideBar.background#182439ff
  • sideBar.dropBackground#111e33ff
  • sideBar.foreground#b0b5c1ff
  • sideBarSectionHeader.background#182439ff
  • sideBarSectionHeader.foreground#565e71ff
  • sideBarTitle.foreground#565e71ff
  • statusBar.background#212c41ff
  • statusBar.debuggingBackground#875000ff
  • statusBar.debuggingForeground#b0b5c1ff
  • statusBar.foreground#b0b5c1ff
  • statusBar.noFolderBackground#61287cff
  • statusBar.noFolderForeground#b0b5c1ff
  • tab.activeBackground#182439ff
  • tab.activeBorder#d8a1efff
  • tab.activeForeground#f1f4fbff
  • tab.activeModifiedBorder#d8a1efbf
  • tab.border#182439ff
  • tab.inactiveBackground#182439ff
  • tab.inactiveForeground#b0b5c1ff
  • tab.inactiveModifiedBorder#d8a1efbf
  • tab.unfocusedActiveForeground#f1f4fbff
  • tab.unfocusedActiveModifiedBorder#d8a1ef80
  • tab.unfocusedInactiveForeground#b0b5c1ff
  • tab.unfocusedInactiveModifiedBorder#d8a1ef80
  • terminal.ansiBlack#111e33ff
  • terminal.ansiBlue#a6c8ffff
  • terminal.ansiBrightBlack#565e71ff
  • terminal.ansiBrightBlue#a6c8ffff
  • terminal.ansiBrightCyan#3fd8ffff
  • terminal.ansiBrightGreen#73dba5ff
  • terminal.ansiBrightMagenta#e5b6f7ff
  • terminal.ansiBrightRed#ffa7a9ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#f5ba7aff
  • terminal.ansiCyan#3fd8ffff
  • terminal.ansiGreen#006e40ff
  • terminal.ansiMagenta#e5b6f7ff
  • terminal.ansiRed#9c3d45ff
  • terminal.ansiWhite#e3e7efff
  • terminal.ansiYellow#f5ba7aff
  • terminal.background#111e33ff
  • terminal.border#182439ff
  • terminal.foreground#e3e7efff
  • terminal.selectionBackground#5c81bd40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#182439ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d8a1efff
  • textLink.foreground#d8a1efff
  • textPreformat.foreground#e5b6f7ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#182439ff
  • titleBar.activeForeground#b0b5c1ff
  • titleBar.inactiveBackground#182439ff
  • titleBar.inactiveForeground#565e71ff
  • widget.shadow#051428ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...