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#111e32ff
  • activityBar.dropBackground#0a182cff
  • activityBar.foreground#c68fdcff
  • activityBar.inactiveForeground#4a5265ff
  • activityBarBadge.background#c68fdcbf
  • activityBarBadge.foreground#fdffffff
  • badge.background#c68fdcbf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0a182cff
  • breadcrumb.focusForeground#ebeef5ff
  • breadcrumb.foreground#697081ff
  • breadcrumbPicker.background#111e32ff
  • button.background#8f5ca5ff
  • button.foreground#fdffffff
  • button.hoverBackground#a06cb7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#111e32ff
  • debugToolBar.background#0a182cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#111e32ff
  • dropdown.border#111e32ff
  • dropdown.foreground#ebeef5ff
  • editor.background#0a182cff
  • editor.findMatchBackground#4c71ac40
  • editor.findMatchHighlightBackground#4c71ac40
  • editor.findRangeHighlightBackground#4c71ac40
  • editor.focusedStackFrameHighlightBackground#4c71ac40
  • editor.foreground#d8dbe5ff
  • editor.hoverHighlightBackground#4c71ac40
  • editor.inactiveSelectionBackground#4c71ac20
  • editor.lineHighlightBackground#111e32ff
  • editor.lineHighlightBorder#111e32ff
  • editor.rangeHighlightBackground#4c71ac40
  • editor.selectionBackground#4c71ac40
  • editor.selectionHighlightBackground#4c71ac20
  • editor.snippetFinalTabstopHighlightBorder#4c71ac40
  • editor.snippetTabstopHighlightBackground#4c71ac40
  • editor.stackFrameHighlightBackground#4c71ac40
  • editor.wordHighlightBackground#4c71ac20
  • editor.wordHighlightStrongBackground#4c71ac20
  • editorActiveLineNumber.foreground#697081ff
  • editorBracketMatch.background#4c71ac20
  • editorBracketMatch.border#82a5e4ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9ea3b1ff
  • editorError.foreground#c46065ff
  • editorGroup.border#111e32ff
  • editorGroup.dropBackground#0a182cff
  • editorGroupHeader.noTabsBackground#0a182cff
  • editorGroupHeader.tabsBackground#111e32ff
  • editorGutter.addedBackground#003a12ff
  • editorGutter.background#0a182cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#620018ff
  • editorGutter.modifiedBackground#003063ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#111e32ff
  • editorHoverWidget.border#111e32ff
  • editorIndentGuide.activeBackground#242e42ff
  • editorIndentGuide.background#1a2539ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#697081ff
  • editorLineNumber.foreground#4a5265ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c46065ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006134ff
  • editorOverviewRuler.border#111e32ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8e3039ff
  • editorOverviewRuler.errorForeground#c46065bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#29548bff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0a182cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#111e32ff
  • editorSuggestWidget.border#111e32ff
  • editorSuggestWidget.foreground#ebeef5ff
  • editorSuggestWidget.highlightForeground#ebeef5ff
  • editorSuggestWidget.selectedBackground#1a2539ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#111e32ff
  • editorWidget.border#111e32ff
  • errorForeground#c46065ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4c71acff
  • foreground#d8dbe5ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#697081ff
  • gitDecoration.modifiedResourceForeground#cf9759ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#4eb682ff
  • input.background#0a182cff
  • input.foreground#ebeef5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c68fdcff
  • inputValidation.errorBackground#440000ff
  • inputValidation.errorBorder#6f1022ff
  • inputValidation.infoBackground#0a182cff
  • inputValidation.infoBorder#2f394dff
  • inputValidation.warningBackground#340a00ff
  • inputValidation.warningBorder#572d00ff
  • list.activeSelectionBackground#1a2539ff
  • list.activeSelectionForeground#ebeef5ff
  • list.dropBackground#0a182cff
  • list.errorForeground#c46065ff
  • list.focusBackground#1a2539ff
  • list.highlightForeground#ebeef5ff
  • list.hoverBackground#1a2539ff
  • list.inactiveFocusBackground#1a2539ff
  • list.inactiveSelectionBackground#1a2539ff
  • list.inactiveSelectionForeground#ebeef5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#111e32ff
  • menu.foreground#b1b6c2ff
  • menu.selectionBackground#1a2539ff
  • menu.selectionForeground#ebeef5ff
  • menu.separatorBackground#2f394dff
  • menubar.selectionBackground#1a2539ff
  • menubar.selectionForeground#ebeef5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#111e32ff
  • notificationLink.foreground#c68fdcff
  • notifications.background#111e32ff
  • notifications.border#111e32ff
  • panel.background#111e32ff
  • panel.border#111e32ff
  • panel.dropBackground#0a182cff
  • panelTitle.activeBorder#c68fdcff
  • panelTitle.activeForeground#ebeef5ff
  • panelTitle.inactiveForeground#9ea3b1ff
  • peekView.border#111e32ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#111e32ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0a182cff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#111e32ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00011cff
  • scrollbarSlider.activeBackground#4a5265bf
  • scrollbarSlider.background#2f394dbf
  • scrollbarSlider.hoverBackground#3c4558bf
  • settings.checkboxBackground#0a182cff
  • settings.checkboxBorder#4a5265ff
  • settings.checkboxForeground#ebeef5ff
  • settings.dropdownBackground#111e32ff
  • settings.dropdownBorder#111e32ff
  • settings.dropdownForeground#ebeef5ff
  • settings.dropdownListBorder#242e42ff
  • settings.headerForeground#cef0ffff
  • settings.modifiedItemIndicator#4c71acff
  • settings.numberInputBackground#111e32ff
  • settings.numberInputForeground#ebeef5ff
  • settings.textInputBackground#111e32ff
  • settings.textInputForeground#ebeef5ff
  • sideBar.background#111e32ff
  • sideBar.dropBackground#0a182cff
  • sideBar.foreground#9ea3b1ff
  • sideBarSectionHeader.background#111e32ff
  • sideBarSectionHeader.foreground#4a5265ff
  • sideBarTitle.foreground#4a5265ff
  • statusBar.background#1a2539ff
  • statusBar.debuggingBackground#794400ff
  • statusBar.debuggingForeground#9ea3b1ff
  • statusBar.foreground#9ea3b1ff
  • statusBar.noFolderBackground#561e71ff
  • statusBar.noFolderForeground#9ea3b1ff
  • tab.activeBackground#111e32ff
  • tab.activeBorder#c68fdcff
  • tab.activeForeground#ebeef5ff
  • tab.activeModifiedBorder#c68fdcbf
  • tab.border#111e32ff
  • tab.inactiveBackground#111e32ff
  • tab.inactiveForeground#9ea3b1ff
  • tab.inactiveModifiedBorder#c68fdcbf
  • tab.unfocusedActiveForeground#ebeef5ff
  • tab.unfocusedActiveModifiedBorder#c68fdc80
  • tab.unfocusedInactiveForeground#9ea3b1ff
  • tab.unfocusedInactiveModifiedBorder#c68fdc80
  • terminal.ansiBlack#0a182cff
  • terminal.ansiBlue#95b8f8ff
  • terminal.ansiBrightBlack#4a5265ff
  • terminal.ansiBrightBlue#95b8f8ff
  • terminal.ansiBrightCyan#1dc7eeff
  • terminal.ansiBrightGreen#61c994ff
  • terminal.ansiBrightMagenta#d3a6e5ff
  • terminal.ansiBrightRed#ff9699ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#e3a96aff
  • terminal.ansiCyan#1dc7eeff
  • terminal.ansiGreen#006134ff
  • terminal.ansiMagenta#d3a6e5ff
  • terminal.ansiRed#8e3039ff
  • terminal.ansiWhite#d8dbe5ff
  • terminal.ansiYellow#e3a96aff
  • terminal.background#0a182cff
  • terminal.border#111e32ff
  • terminal.foreground#d8dbe5ff
  • terminal.selectionBackground#4c71ac40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#111e32ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c68fdcff
  • textLink.foreground#c68fdcff
  • textPreformat.foreground#d3a6e5ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#111e32ff
  • titleBar.activeForeground#9ea3b1ff
  • titleBar.inactiveBackground#111e32ff
  • titleBar.inactiveForeground#4a5265ff
  • widget.shadow#000b21ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...