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#181e29ff
  • activityBar.dropBackground#111723ff
  • activityBar.foreground#d1a2e4ff
  • activityBar.inactiveForeground#565961ff
  • activityBarBadge.background#d1a2e4bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d1a2e4bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#111723ff
  • breadcrumb.focusForeground#f4f4f4ff
  • breadcrumb.foreground#797b80ff
  • breadcrumbPicker.background#181e29ff
  • button.background#976ba9ff
  • button.foreground#ffffffff
  • button.hoverBackground#aa7dbcff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#181e29ff
  • debugToolBar.background#111723ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#181e29ff
  • dropdown.border#181e29ff
  • dropdown.foreground#f4f4f4ff
  • editor.background#111723ff
  • editor.findMatchBackground#617cad40
  • editor.findMatchHighlightBackground#617cad40
  • editor.findRangeHighlightBackground#617cad40
  • editor.focusedStackFrameHighlightBackground#617cad40
  • editor.foreground#e6e6e6ff
  • editor.hoverHighlightBackground#617cad40
  • editor.inactiveSelectionBackground#617cad20
  • editor.lineHighlightBackground#181e29ff
  • editor.lineHighlightBorder#181e29ff
  • editor.rangeHighlightBackground#617cad40
  • editor.selectionBackground#617cad40
  • editor.selectionHighlightBackground#617cad20
  • editor.snippetFinalTabstopHighlightBorder#617cad40
  • editor.snippetTabstopHighlightBackground#617cad40
  • editor.stackFrameHighlightBackground#617cad40
  • editor.wordHighlightBackground#617cad20
  • editor.wordHighlightStrongBackground#617cad20
  • editorActiveLineNumber.foreground#797b80ff
  • editorBracketMatch.background#617cad20
  • editorBracketMatch.border#99b4e8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b2b2b3ff
  • editorError.foreground#ca7476ff
  • editorGroup.border#181e29ff
  • editorGroup.dropBackground#111723ff
  • editorGroupHeader.noTabsBackground#111723ff
  • editorGroupHeader.tabsBackground#181e29ff
  • editorGutter.addedBackground#003b19ff
  • editorGutter.background#111723ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5d111dff
  • editorGutter.modifiedBackground#09315bff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#181e29ff
  • editorHoverWidget.border#181e29ff
  • editorIndentGuide.activeBackground#2b303aff
  • editorIndentGuide.background#212631ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#797b80ff
  • editorLineNumber.foreground#565961ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ca7476ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006640ff
  • editorOverviewRuler.border#181e29ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8e3f43ff
  • editorOverviewRuler.errorForeground#ca7476bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3d5a88ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#111723ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#181e29ff
  • editorSuggestWidget.border#181e29ff
  • editorSuggestWidget.foreground#f4f4f4ff
  • editorSuggestWidget.highlightForeground#f4f4f4ff
  • editorSuggestWidget.selectedBackground#212631ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#181e29ff
  • editorWidget.border#181e29ff
  • errorForeground#ca7476ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#617cadff
  • foreground#e6e6e6ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#797b80ff
  • gitDecoration.modifiedResourceForeground#daa873ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6ec396ff
  • input.background#111723ff
  • input.foreground#f4f4f4ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d1a2e4ff
  • inputValidation.errorBackground#3f0000ff
  • inputValidation.errorBorder#6c1f28ff
  • inputValidation.infoBackground#111723ff
  • inputValidation.infoBorder#383c46ff
  • inputValidation.warningBackground#310d00ff
  • inputValidation.warningBorder#573300ff
  • list.activeSelectionBackground#212631ff
  • list.activeSelectionForeground#f4f4f4ff
  • list.dropBackground#111723ff
  • list.errorForeground#ca7476ff
  • list.focusBackground#212631ff
  • list.highlightForeground#f4f4f4ff
  • list.hoverBackground#212631ff
  • list.inactiveFocusBackground#212631ff
  • list.inactiveSelectionBackground#212631ff
  • list.inactiveSelectionForeground#f4f4f4ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#181e29ff
  • menu.foreground#c4c4c4ff
  • menu.selectionBackground#212631ff
  • menu.selectionForeground#f4f4f4ff
  • menu.separatorBackground#383c46ff
  • menubar.selectionBackground#212631ff
  • menubar.selectionForeground#f4f4f4ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#181e29ff
  • notificationLink.foreground#d1a2e4ff
  • notifications.background#181e29ff
  • notifications.border#181e29ff
  • panel.background#181e29ff
  • panel.border#181e29ff
  • panel.dropBackground#111723ff
  • panelTitle.activeBorder#d1a2e4ff
  • panelTitle.activeForeground#f4f4f4ff
  • panelTitle.inactiveForeground#b2b2b3ff
  • peekView.border#181e29ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#181e29ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#111723ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#181e29ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000113ff
  • scrollbarSlider.activeBackground#565961bf
  • scrollbarSlider.background#383c46bf
  • scrollbarSlider.hoverBackground#464a53bf
  • settings.checkboxBackground#111723ff
  • settings.checkboxBorder#565961ff
  • settings.checkboxForeground#f4f4f4ff
  • settings.dropdownBackground#181e29ff
  • settings.dropdownBorder#181e29ff
  • settings.dropdownForeground#f4f4f4ff
  • settings.dropdownListBorder#2b303aff
  • settings.headerForeground#dbf5ffff
  • settings.modifiedItemIndicator#617cadff
  • settings.numberInputBackground#181e29ff
  • settings.numberInputForeground#f4f4f4ff
  • settings.textInputBackground#181e29ff
  • settings.textInputForeground#f4f4f4ff
  • sideBar.background#181e29ff
  • sideBar.dropBackground#111723ff
  • sideBar.foreground#b2b2b3ff
  • sideBarSectionHeader.background#181e29ff
  • sideBarSectionHeader.foreground#565961ff
  • sideBarTitle.foreground#565961ff
  • statusBar.background#212631ff
  • statusBar.debuggingBackground#7d4d0dff
  • statusBar.debuggingForeground#b2b2b3ff
  • statusBar.foreground#b2b2b3ff
  • statusBar.noFolderBackground#57266eff
  • statusBar.noFolderForeground#b2b2b3ff
  • tab.activeBackground#181e29ff
  • tab.activeBorder#d1a2e4ff
  • tab.activeForeground#f4f4f4ff
  • tab.activeModifiedBorder#d1a2e4bf
  • tab.border#181e29ff
  • tab.inactiveBackground#181e29ff
  • tab.inactiveForeground#b2b2b3ff
  • tab.inactiveModifiedBorder#d1a2e4bf
  • tab.unfocusedActiveForeground#f4f4f4ff
  • tab.unfocusedActiveModifiedBorder#d1a2e480
  • tab.unfocusedInactiveForeground#b2b2b3ff
  • tab.unfocusedInactiveModifiedBorder#d1a2e480
  • terminal.ansiBlack#111723ff
  • terminal.ansiBlue#acc6fbff
  • terminal.ansiBrightBlack#565961ff
  • terminal.ansiBrightBlue#acc6fbff
  • terminal.ansiBrightCyan#61d4f5ff
  • terminal.ansiBrightGreen#80d6a8ff
  • terminal.ansiBrightMagenta#ddb8ecff
  • terminal.ansiBrightRed#ffababff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#eeba84ff
  • terminal.ansiCyan#61d4f5ff
  • terminal.ansiGreen#006640ff
  • terminal.ansiMagenta#ddb8ecff
  • terminal.ansiRed#8e3f43ff
  • terminal.ansiWhite#e6e6e6ff
  • terminal.ansiYellow#eeba84ff
  • terminal.background#111723ff
  • terminal.border#181e29ff
  • terminal.foreground#e6e6e6ff
  • terminal.selectionBackground#617cad40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#181e29ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d1a2e4ff
  • textLink.foreground#d1a2e4ff
  • textPreformat.foreground#ddb8ecff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#181e29ff
  • titleBar.activeForeground#b2b2b3ff
  • titleBar.inactiveBackground#181e29ff
  • titleBar.inactiveForeground#565961ff
  • widget.shadow#030b19ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...