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#313131ff
  • activityBar.dropBackground#2c2c2cff
  • activityBar.foreground#66a2d7ff
  • activityBar.inactiveForeground#636363ff
  • activityBarBadge.background#66a2d7bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#66a2d7bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2c2c2cff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#7e7e7eff
  • breadcrumbPicker.background#313131ff
  • button.background#246b9cff
  • button.foreground#ffffffff
  • button.hoverBackground#3b7cafff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#313131ff
  • debugToolBar.background#2c2c2cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#313131ff
  • dropdown.border#313131ff
  • dropdown.foreground#efefefff
  • editor.background#2c2c2cff
  • editor.findMatchBackground#4d688140
  • editor.findMatchHighlightBackground#4d688140
  • editor.findRangeHighlightBackground#4d688140
  • editor.focusedStackFrameHighlightBackground#4d688140
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#4d688140
  • editor.inactiveSelectionBackground#4d688120
  • editor.lineHighlightBackground#313131ff
  • editor.lineHighlightBorder#313131ff
  • editor.rangeHighlightBackground#4d688140
  • editor.selectionBackground#4d688140
  • editor.selectionHighlightBackground#4d688120
  • editor.snippetFinalTabstopHighlightBorder#4d688140
  • editor.snippetTabstopHighlightBackground#4d688140
  • editor.stackFrameHighlightBackground#4d688140
  • editor.wordHighlightBackground#4d688120
  • editor.wordHighlightStrongBackground#4d688120
  • editorActiveLineNumber.foreground#7e7e7eff
  • editorBracketMatch.background#4d688120
  • editorBracketMatch.border#66a2d7ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#5e8bf3ff
  • editorError.foreground#b8575eff
  • editorGroup.border#313131ff
  • editorGroup.dropBackground#2c2c2cff
  • editorGroupHeader.noTabsBackground#2c2c2cff
  • editorGroupHeader.tabsBackground#313131ff
  • editorGutter.addedBackground#0a2600ff
  • editorGutter.background#2c2c2cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#4f000aff
  • editorGutter.modifiedBackground#012238ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#313131ff
  • editorHoverWidget.border#313131ff
  • editorIndentGuide.activeBackground#414141ff
  • editorIndentGuide.background#393939ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7e7e7eff
  • editorLineNumber.foreground#636363ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b8575eff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#2c4d17ff
  • editorOverviewRuler.border#313131ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#7e2230ff
  • editorOverviewRuler.errorForeground#b8575ebf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2d4860ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2c2c2cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#313131ff
  • editorSuggestWidget.border#313131ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#393939ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#313131ff
  • editorWidget.border#313131ff
  • errorForeground#b8575eff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4d6881ff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7e7e7eff
  • gitDecoration.modifiedResourceForeground#b59760ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#83a669ff
  • input.background#2c2c2cff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#66a2d7ff
  • inputValidation.errorBackground#350000ff
  • inputValidation.errorBorder#5d0017ff
  • inputValidation.infoBackground#2c2c2cff
  • inputValidation.infoBorder#4b4b4bff
  • inputValidation.warningBackground#1f0000ff
  • inputValidation.warningBorder#3b2700ff
  • list.activeSelectionBackground#393939ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#2c2c2cff
  • list.errorForeground#b8575eff
  • list.focusBackground#393939ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#393939ff
  • list.inactiveFocusBackground#393939ff
  • list.inactiveSelectionBackground#393939ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#313131ff
  • menu.foreground#bdbdbdff
  • menu.selectionBackground#393939ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#4b4b4bff
  • menubar.selectionBackground#393939ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#313131ff
  • notificationLink.foreground#66a2d7ff
  • notifications.background#313131ff
  • notifications.border#313131ff
  • panel.background#313131ff
  • panel.border#313131ff
  • panel.dropBackground#2c2c2cff
  • panelTitle.activeBorder#66a2d7ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#adadadff
  • peekView.border#313131ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#313131ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2c2c2cff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#313131ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#171717ff
  • scrollbarSlider.activeBackground#636363bf
  • scrollbarSlider.background#4b4b4bbf
  • scrollbarSlider.hoverBackground#565656bf
  • settings.checkboxBackground#2c2c2cff
  • settings.checkboxBorder#636363ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#313131ff
  • settings.dropdownBorder#313131ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#414141ff
  • settings.headerForeground#d4f0ffff
  • settings.modifiedItemIndicator#4d6881ff
  • settings.numberInputBackground#313131ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#313131ff
  • settings.textInputForeground#efefefff
  • sideBar.background#313131ff
  • sideBar.dropBackground#2c2c2cff
  • sideBar.foreground#adadadff
  • sideBarSectionHeader.background#313131ff
  • sideBarSectionHeader.foreground#636363ff
  • sideBarTitle.foreground#636363ff
  • statusBar.background#393939ff
  • statusBar.debuggingBackground#821f01ff
  • statusBar.debuggingForeground#adadadff
  • statusBar.foreground#adadadff
  • statusBar.noFolderBackground#421657ff
  • statusBar.noFolderForeground#adadadff
  • tab.activeBackground#313131ff
  • tab.activeBorder#66a2d7ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#66a2d7bf
  • tab.border#313131ff
  • tab.inactiveBackground#313131ff
  • tab.inactiveForeground#adadadff
  • tab.inactiveModifiedBorder#66a2d7bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#66a2d780
  • tab.unfocusedInactiveForeground#adadadff
  • tab.unfocusedInactiveModifiedBorder#66a2d780
  • terminal.ansiBlack#313131ff
  • terminal.ansiBlue#72aee3ff
  • terminal.ansiBrightBlack#848484ff
  • terminal.ansiBrightBlue#5e8bf3ff
  • terminal.ansiBrightCyan#6db3bcff
  • terminal.ansiBrightGreen#9ec183ff
  • terminal.ansiBrightMagenta#dd96f1ff
  • terminal.ansiBrightRed#ec514cff
  • terminal.ansiBrightWhite#dadadaff
  • terminal.ansiBrightYellow#e1c187ff
  • terminal.ansiCyan#6db3bcff
  • terminal.ansiGreen#9ec183ff
  • terminal.ansiMagenta#dd96f1ff
  • terminal.ansiRed#d77279ff
  • terminal.ansiWhite#dadadaff
  • terminal.ansiYellow#e1c187ff
  • terminal.background#2c2c2cff
  • terminal.border#313131ff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#4d688140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#313131ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#66a2d7ff
  • textLink.foreground#66a2d7ff
  • textPreformat.foreground#dd96f1ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#313131ff
  • titleBar.activeForeground#adadadff
  • titleBar.inactiveBackground#313131ff
  • titleBar.inactiveForeground#636363ff
  • widget.shadow#212121ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...