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#1f2a3fff
  • activityBar.dropBackground#18243aff
  • activityBar.foreground#dba3f2ff
  • activityBar.inactiveForeground#5b6376ff
  • activityBarBadge.background#dba3f2bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#dba3f2bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#18243aff
  • breadcrumb.focusForeground#f2f4fcff
  • breadcrumb.foreground#7d8394ff
  • breadcrumbPicker.background#1f2a3fff
  • button.background#a46fbaff
  • button.foreground#fdffffff
  • button.hoverBackground#b681cdff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1f2a3fff
  • debugToolBar.background#18243aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1f2a3fff
  • dropdown.border#1f2a3fff
  • dropdown.foreground#f2f4fcff
  • editor.background#18243aff
  • editor.findMatchBackground#6185c240
  • editor.findMatchHighlightBackground#6185c240
  • editor.findRangeHighlightBackground#6185c240
  • editor.focusedStackFrameHighlightBackground#6185c240
  • editor.foreground#e4e7f0ff
  • editor.hoverHighlightBackground#6185c240
  • editor.inactiveSelectionBackground#6185c220
  • editor.lineHighlightBackground#1f2a3fff
  • editor.lineHighlightBorder#1f2a3fff
  • editor.rangeHighlightBackground#6185c240
  • editor.selectionBackground#6185c240
  • editor.selectionHighlightBackground#6185c220
  • editor.snippetFinalTabstopHighlightBorder#6185c240
  • editor.snippetTabstopHighlightBackground#6185c240
  • editor.stackFrameHighlightBackground#6185c240
  • editor.wordHighlightBackground#6185c220
  • editor.wordHighlightStrongBackground#6185c220
  • editorActiveLineNumber.foreground#7d8394ff
  • editorBracketMatch.background#6185c220
  • editorBracketMatch.border#97b9faff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b2b8c4ff
  • editorError.foreground#db7579ff
  • editorGroup.border#1f2a3fff
  • editorGroup.dropBackground#18243aff
  • editorGroupHeader.noTabsBackground#18243aff
  • editorGroupHeader.tabsBackground#1f2a3fff
  • editorGutter.addedBackground#00491fff
  • editorGutter.background#18243aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#731525ff
  • editorGutter.modifiedBackground#023e73ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1f2a3fff
  • editorHoverWidget.border#1f2a3fff
  • editorIndentGuide.activeBackground#323c51ff
  • editorIndentGuide.background#273247ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7d8394ff
  • editorLineNumber.foreground#5b6376ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#db7579ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007345ff
  • editorOverviewRuler.border#1f2a3fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a2424aff
  • editorOverviewRuler.errorForeground#db7579bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3e659eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#18243aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1f2a3fff
  • editorSuggestWidget.border#1f2a3fff
  • editorSuggestWidget.foreground#f2f4fcff
  • editorSuggestWidget.highlightForeground#f2f4fcff
  • editorSuggestWidget.selectedBackground#273247ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1f2a3fff
  • editorWidget.border#1f2a3fff
  • errorForeground#db7579ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6185c2ff
  • foreground#e4e7f0ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7d8394ff
  • gitDecoration.modifiedResourceForeground#e5ab6cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#63cb96ff
  • input.background#18243aff
  • input.foreground#f2f4fcff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#dba3f2ff
  • inputValidation.errorBackground#55000dff
  • inputValidation.errorBorder#812430ff
  • inputValidation.infoBackground#18243aff
  • inputValidation.infoBorder#3e485cff
  • inputValidation.warningBackground#411800ff
  • inputValidation.warningBorder#683c00ff
  • list.activeSelectionBackground#273247ff
  • list.activeSelectionForeground#f2f4fcff
  • list.dropBackground#18243aff
  • list.errorForeground#db7579ff
  • list.focusBackground#273247ff
  • list.highlightForeground#f2f4fcff
  • list.hoverBackground#273247ff
  • list.inactiveFocusBackground#273247ff
  • list.inactiveSelectionBackground#273247ff
  • list.inactiveSelectionForeground#f2f4fcff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1f2a3fff
  • menu.foreground#c4c8d3ff
  • menu.selectionBackground#273247ff
  • menu.selectionForeground#f2f4fcff
  • menu.separatorBackground#3e485cff
  • menubar.selectionBackground#273247ff
  • menubar.selectionForeground#f2f4fcff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1f2a3fff
  • notificationLink.foreground#dba3f2ff
  • notifications.background#1f2a3fff
  • notifications.border#1f2a3fff
  • panel.background#1f2a3fff
  • panel.border#1f2a3fff
  • panel.dropBackground#18243aff
  • panelTitle.activeBorder#dba3f2ff
  • panelTitle.activeForeground#f2f4fcff
  • panelTitle.inactiveForeground#b2b8c4ff
  • peekView.border#1f2a3fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1f2a3fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#18243aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1f2a3fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000f24ff
  • scrollbarSlider.activeBackground#5b6376bf
  • scrollbarSlider.background#3e485cbf
  • scrollbarSlider.hoverBackground#4c5568bf
  • settings.checkboxBackground#18243aff
  • settings.checkboxBorder#5b6376ff
  • settings.checkboxForeground#f2f4fcff
  • settings.dropdownBackground#1f2a3fff
  • settings.dropdownBorder#1f2a3fff
  • settings.dropdownForeground#f2f4fcff
  • settings.dropdownListBorder#323c51ff
  • settings.headerForeground#d4f6ffff
  • settings.modifiedItemIndicator#6185c2ff
  • settings.numberInputBackground#1f2a3fff
  • settings.numberInputForeground#f2f4fcff
  • settings.textInputBackground#1f2a3fff
  • settings.textInputForeground#f2f4fcff
  • sideBar.background#1f2a3fff
  • sideBar.dropBackground#18243aff
  • sideBar.foreground#b2b8c4ff
  • sideBarSectionHeader.background#1f2a3fff
  • sideBarSectionHeader.foreground#5b6376ff
  • sideBarTitle.foreground#5b6376ff
  • statusBar.background#273247ff
  • statusBar.debuggingBackground#8d5507ff
  • statusBar.debuggingForeground#b2b8c4ff
  • statusBar.foreground#b2b8c4ff
  • statusBar.noFolderBackground#672e82ff
  • statusBar.noFolderForeground#b2b8c4ff
  • tab.activeBackground#1f2a3fff
  • tab.activeBorder#dba3f2ff
  • tab.activeForeground#f2f4fcff
  • tab.activeModifiedBorder#dba3f2bf
  • tab.border#1f2a3fff
  • tab.inactiveBackground#1f2a3fff
  • tab.inactiveForeground#b2b8c4ff
  • tab.inactiveModifiedBorder#dba3f2bf
  • tab.unfocusedActiveForeground#f2f4fcff
  • tab.unfocusedActiveModifiedBorder#dba3f280
  • tab.unfocusedInactiveForeground#b2b8c4ff
  • tab.unfocusedInactiveModifiedBorder#dba3f280
  • terminal.ansiBlack#18243aff
  • terminal.ansiBlue#a8caffff
  • terminal.ansiBrightBlack#5b6376ff
  • terminal.ansiBrightBlue#a8caffff
  • terminal.ansiBrightCyan#42daffff
  • terminal.ansiBrightGreen#75dda6ff
  • terminal.ansiBrightMagenta#e7b8f9ff
  • terminal.ansiBrightRed#ffa9abff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#f8bc7cff
  • terminal.ansiCyan#42daffff
  • terminal.ansiGreen#007345ff
  • terminal.ansiMagenta#e7b8f9ff
  • terminal.ansiRed#a2424aff
  • terminal.ansiWhite#e4e7f0ff
  • terminal.ansiYellow#f8bc7cff
  • terminal.background#18243aff
  • terminal.border#1f2a3fff
  • terminal.foreground#e4e7f0ff
  • terminal.selectionBackground#6185c240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1f2a3fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#dba3f2ff
  • textLink.foreground#dba3f2ff
  • textPreformat.foreground#e7b8f9ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1f2a3fff
  • titleBar.activeForeground#b2b8c4ff
  • titleBar.inactiveBackground#1f2a3fff
  • titleBar.inactiveForeground#5b6376ff
  • widget.shadow#0d1a2eff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...