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#181d29ff
  • activityBar.dropBackground#111723ff
  • activityBar.foreground#c193d4ff
  • activityBar.inactiveForeground#4e525aff
  • activityBarBadge.background#c193d4bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c193d4bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#111723ff
  • breadcrumb.focusForeground#eeeeeeff
  • breadcrumb.foreground#6d7076ff
  • breadcrumbPicker.background#181d29ff
  • button.background#8b5f9dff
  • button.foreground#ffffffff
  • button.hoverBackground#9c70afff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#181d29ff
  • debugToolBar.background#111723ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#181d29ff
  • dropdown.border#181d29ff
  • dropdown.foreground#eeeeeeff
  • editor.background#111723ff
  • editor.findMatchBackground#5571a140
  • editor.findMatchHighlightBackground#5571a140
  • editor.findRangeHighlightBackground#5571a140
  • editor.focusedStackFrameHighlightBackground#5571a140
  • editor.foreground#dbdbdbff
  • editor.hoverHighlightBackground#5571a140
  • editor.inactiveSelectionBackground#5571a120
  • editor.lineHighlightBackground#181d29ff
  • editor.lineHighlightBorder#181d29ff
  • editor.rangeHighlightBackground#5571a140
  • editor.selectionBackground#5571a140
  • editor.selectionHighlightBackground#5571a120
  • editor.snippetFinalTabstopHighlightBorder#5571a140
  • editor.snippetTabstopHighlightBackground#5571a140
  • editor.stackFrameHighlightBackground#5571a140
  • editor.wordHighlightBackground#5571a120
  • editor.wordHighlightStrongBackground#5571a120
  • editorActiveLineNumber.foreground#6d7076ff
  • editorBracketMatch.background#5571a120
  • editorBracketMatch.border#8aa5d8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a2a3a5ff
  • editorError.foreground#bb6669ff
  • editorGroup.border#181d29ff
  • editorGroup.dropBackground#111723ff
  • editorGroupHeader.noTabsBackground#111723ff
  • editorGroupHeader.tabsBackground#181d29ff
  • editorGutter.addedBackground#003917ff
  • editorGutter.background#111723ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5b0e1bff
  • editorGutter.modifiedBackground#062f59ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#181d29ff
  • editorHoverWidget.border#181d29ff
  • editorIndentGuide.activeBackground#292e39ff
  • editorIndentGuide.background#202530ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6d7076ff
  • editorLineNumber.foreground#4e525aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#bb6669ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005f39ff
  • editorOverviewRuler.border#181d29ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#86373dff
  • editorOverviewRuler.errorForeground#bb6669bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#365381ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#111723ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#181d29ff
  • editorSuggestWidget.border#181d29ff
  • editorSuggestWidget.foreground#eeeeeeff
  • editorSuggestWidget.highlightForeground#eeeeeeff
  • editorSuggestWidget.selectedBackground#202530ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#181d29ff
  • editorWidget.border#181d29ff
  • errorForeground#bb6669ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5571a1ff
  • foreground#dbdbdbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6d7076ff
  • gitDecoration.modifiedResourceForeground#ca9965ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5fb487ff
  • input.background#111723ff
  • input.foreground#eeeeeeff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c193d4ff
  • inputValidation.errorBackground#3f0000ff
  • inputValidation.errorBorder#681c25ff
  • inputValidation.infoBackground#111723ff
  • inputValidation.infoBorder#343943ff
  • inputValidation.warningBackground#310d00ff
  • inputValidation.warningBorder#542f00ff
  • list.activeSelectionBackground#202530ff
  • list.activeSelectionForeground#eeeeeeff
  • list.dropBackground#111723ff
  • list.errorForeground#bb6669ff
  • list.focusBackground#202530ff
  • list.highlightForeground#eeeeeeff
  • list.hoverBackground#202530ff
  • list.inactiveFocusBackground#202530ff
  • list.inactiveSelectionBackground#202530ff
  • list.inactiveSelectionForeground#eeeeeeff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#181d29ff
  • menu.foreground#b5b6b6ff
  • menu.selectionBackground#202530ff
  • menu.selectionForeground#eeeeeeff
  • menu.separatorBackground#343943ff
  • menubar.selectionBackground#202530ff
  • menubar.selectionForeground#eeeeeeff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#181d29ff
  • notificationLink.foreground#c193d4ff
  • notifications.background#181d29ff
  • notifications.border#181d29ff
  • panel.background#181d29ff
  • panel.border#181d29ff
  • panel.dropBackground#111723ff
  • panelTitle.activeBorder#c193d4ff
  • panelTitle.activeForeground#eeeeeeff
  • panelTitle.inactiveForeground#a2a3a5ff
  • peekView.border#181d29ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#181d29ff
  • 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#181d29ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000113ff
  • scrollbarSlider.activeBackground#4e525abf
  • scrollbarSlider.background#343943bf
  • scrollbarSlider.hoverBackground#41454ebf
  • settings.checkboxBackground#111723ff
  • settings.checkboxBorder#4e525aff
  • settings.checkboxForeground#eeeeeeff
  • settings.dropdownBackground#181d29ff
  • settings.dropdownBorder#181d29ff
  • settings.dropdownForeground#eeeeeeff
  • settings.dropdownListBorder#292e39ff
  • settings.headerForeground#d5efffff
  • settings.modifiedItemIndicator#5571a1ff
  • settings.numberInputBackground#181d29ff
  • settings.numberInputForeground#eeeeeeff
  • settings.textInputBackground#181d29ff
  • settings.textInputForeground#eeeeeeff
  • sideBar.background#181d29ff
  • sideBar.dropBackground#111723ff
  • sideBar.foreground#a2a3a5ff
  • sideBarSectionHeader.background#181d29ff
  • sideBarSectionHeader.foreground#4e525aff
  • sideBarTitle.foreground#4e525aff
  • statusBar.background#202530ff
  • statusBar.debuggingBackground#754605ff
  • statusBar.debuggingForeground#a2a3a5ff
  • statusBar.foreground#a2a3a5ff
  • statusBar.noFolderBackground#53236aff
  • statusBar.noFolderForeground#a2a3a5ff
  • tab.activeBackground#181d29ff
  • tab.activeBorder#c193d4ff
  • tab.activeForeground#eeeeeeff
  • tab.activeModifiedBorder#c193d4bf
  • tab.border#181d29ff
  • tab.inactiveBackground#181d29ff
  • tab.inactiveForeground#a2a3a5ff
  • tab.inactiveModifiedBorder#c193d4bf
  • tab.unfocusedActiveForeground#eeeeeeff
  • tab.unfocusedActiveModifiedBorder#c193d480
  • tab.unfocusedInactiveForeground#a2a3a5ff
  • tab.unfocusedInactiveModifiedBorder#c193d480
  • terminal.ansiBlack#111723ff
  • terminal.ansiBlue#9db7ecff
  • terminal.ansiBrightBlack#4e525aff
  • terminal.ansiBrightBlue#9db7ecff
  • terminal.ansiBrightCyan#50c5e6ff
  • terminal.ansiBrightGreen#72c799ff
  • terminal.ansiBrightMagenta#cea9ddff
  • terminal.ansiBrightRed#f79c9dff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#deab76ff
  • terminal.ansiCyan#50c5e6ff
  • terminal.ansiGreen#005f39ff
  • terminal.ansiMagenta#cea9ddff
  • terminal.ansiRed#86373dff
  • terminal.ansiWhite#dbdbdbff
  • terminal.ansiYellow#deab76ff
  • terminal.background#111723ff
  • terminal.border#181d29ff
  • terminal.foreground#dbdbdbff
  • terminal.selectionBackground#5571a140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#181d29ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c193d4ff
  • textLink.foreground#c193d4ff
  • textPreformat.foreground#cea9ddff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#181d29ff
  • titleBar.activeForeground#a2a3a5ff
  • titleBar.inactiveBackground#181d29ff
  • titleBar.inactiveForeground#4e525aff
  • widget.shadow#030b19ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...