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#242a36ff
  • activityBar.dropBackground#1e2430ff
  • activityBar.foreground#d6a7e9ff
  • activityBar.inactiveForeground#60636bff
  • activityBarBadge.background#d6a7e9bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d6a7e9bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1e2430ff
  • breadcrumb.focusForeground#f4f4f4ff
  • breadcrumb.foreground#818389ff
  • breadcrumbPicker.background#242a36ff
  • button.background#9f73b2ff
  • button.foreground#ffffffff
  • button.hoverBackground#b284c4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#242a36ff
  • debugToolBar.background#1e2430ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#242a36ff
  • dropdown.border#242a36ff
  • dropdown.foreground#f4f4f4ff
  • editor.background#1e2430ff
  • editor.findMatchBackground#6a85b640
  • editor.findMatchHighlightBackground#6a85b640
  • editor.findRangeHighlightBackground#6a85b640
  • editor.focusedStackFrameHighlightBackground#6a85b640
  • editor.foreground#e7e7e7ff
  • editor.hoverHighlightBackground#6a85b640
  • editor.inactiveSelectionBackground#6a85b620
  • editor.lineHighlightBackground#242a36ff
  • editor.lineHighlightBorder#242a36ff
  • editor.rangeHighlightBackground#6a85b640
  • editor.selectionBackground#6a85b640
  • editor.selectionHighlightBackground#6a85b620
  • editor.snippetFinalTabstopHighlightBorder#6a85b640
  • editor.snippetTabstopHighlightBackground#6a85b640
  • editor.stackFrameHighlightBackground#6a85b640
  • editor.wordHighlightBackground#6a85b620
  • editor.wordHighlightStrongBackground#6a85b620
  • editorActiveLineNumber.foreground#818389ff
  • editorBracketMatch.background#6a85b620
  • editorBracketMatch.border#9eb9edff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b7b7b8ff
  • editorError.foreground#d27b7dff
  • editorGroup.border#242a36ff
  • editorGroup.dropBackground#1e2430ff
  • editorGroupHeader.noTabsBackground#1e2430ff
  • editorGroupHeader.tabsBackground#242a36ff
  • editorGutter.addedBackground#004824ff
  • editorGutter.background#1e2430ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6c1f28ff
  • editorGutter.modifiedBackground#1c3d69ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#242a36ff
  • editorHoverWidget.border#242a36ff
  • editorIndentGuide.activeBackground#373c47ff
  • editorIndentGuide.background#2d323eff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#818389ff
  • editorLineNumber.foreground#60636bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d27b7dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#137149ff
  • editorOverviewRuler.border#242a36ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9a494dff
  • editorOverviewRuler.errorForeground#d27b7dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#486493ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1e2430ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#242a36ff
  • editorSuggestWidget.border#242a36ff
  • editorSuggestWidget.foreground#f4f4f4ff
  • editorSuggestWidget.highlightForeground#f4f4f4ff
  • editorSuggestWidget.selectedBackground#2d323eff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#242a36ff
  • editorWidget.border#242a36ff
  • errorForeground#d27b7dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6a85b6ff
  • foreground#e7e7e7ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#818389ff
  • gitDecoration.modifiedResourceForeground#e0ad77ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c99bff
  • input.background#1e2430ff
  • input.foreground#f4f4f4ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d6a7e9ff
  • inputValidation.errorBackground#4e0011ff
  • inputValidation.errorBorder#7a2c33ff
  • inputValidation.infoBackground#1e2430ff
  • inputValidation.infoBorder#434752ff
  • inputValidation.warningBackground#3d1a00ff
  • inputValidation.warningBorder#653e0dff
  • list.activeSelectionBackground#2d323eff
  • list.activeSelectionForeground#f4f4f4ff
  • list.dropBackground#1e2430ff
  • list.errorForeground#d27b7dff
  • list.focusBackground#2d323eff
  • list.highlightForeground#f4f4f4ff
  • list.hoverBackground#2d323eff
  • list.inactiveFocusBackground#2d323eff
  • list.inactiveSelectionBackground#2d323eff
  • list.inactiveSelectionForeground#f4f4f4ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#242a36ff
  • menu.foreground#c8c8c8ff
  • menu.selectionBackground#2d323eff
  • menu.selectionForeground#f4f4f4ff
  • menu.separatorBackground#434752ff
  • menubar.selectionBackground#2d323eff
  • menubar.selectionForeground#f4f4f4ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#242a36ff
  • notificationLink.foreground#d6a7e9ff
  • notifications.background#242a36ff
  • notifications.border#242a36ff
  • panel.background#242a36ff
  • panel.border#242a36ff
  • panel.dropBackground#1e2430ff
  • panelTitle.activeBorder#d6a7e9ff
  • panelTitle.activeForeground#f4f4f4ff
  • panelTitle.inactiveForeground#b7b7b8ff
  • peekView.border#242a36ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#242a36ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e2430ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#242a36ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#070f1cff
  • scrollbarSlider.activeBackground#60636bbf
  • scrollbarSlider.background#434752bf
  • scrollbarSlider.hoverBackground#51555ebf
  • settings.checkboxBackground#1e2430ff
  • settings.checkboxBorder#60636bff
  • settings.checkboxForeground#f4f4f4ff
  • settings.dropdownBackground#242a36ff
  • settings.dropdownBorder#242a36ff
  • settings.dropdownForeground#f4f4f4ff
  • settings.dropdownListBorder#373c47ff
  • settings.headerForeground#dcf6ffff
  • settings.modifiedItemIndicator#6a85b6ff
  • settings.numberInputBackground#242a36ff
  • settings.numberInputForeground#f4f4f4ff
  • settings.textInputBackground#242a36ff
  • settings.textInputForeground#f4f4f4ff
  • sideBar.background#242a36ff
  • sideBar.dropBackground#1e2430ff
  • sideBar.foreground#b7b7b8ff
  • sideBarSectionHeader.background#242a36ff
  • sideBarSectionHeader.foreground#60636bff
  • sideBarTitle.foreground#60636bff
  • statusBar.background#2d323eff
  • statusBar.debuggingBackground#895719ff
  • statusBar.debuggingForeground#b7b7b8ff
  • statusBar.foreground#b7b7b8ff
  • statusBar.noFolderBackground#64327bff
  • statusBar.noFolderForeground#b7b7b8ff
  • tab.activeBackground#242a36ff
  • tab.activeBorder#d6a7e9ff
  • tab.activeForeground#f4f4f4ff
  • tab.activeModifiedBorder#d6a7e9bf
  • tab.border#242a36ff
  • tab.inactiveBackground#242a36ff
  • tab.inactiveForeground#b7b7b8ff
  • tab.inactiveModifiedBorder#d6a7e9bf
  • tab.unfocusedActiveForeground#f4f4f4ff
  • tab.unfocusedActiveModifiedBorder#d6a7e980
  • tab.unfocusedInactiveForeground#b7b7b8ff
  • tab.unfocusedInactiveModifiedBorder#d6a7e980
  • terminal.ansiBlack#1e2430ff
  • terminal.ansiBlue#afcaffff
  • terminal.ansiBrightBlack#60636bff
  • terminal.ansiBrightBlue#afcaffff
  • terminal.ansiBrightCyan#66d8f9ff
  • terminal.ansiBrightGreen#84daacff
  • terminal.ansiBrightMagenta#e1bbf0ff
  • terminal.ansiBrightRed#ffafafff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f2be87ff
  • terminal.ansiCyan#66d8f9ff
  • terminal.ansiGreen#137149ff
  • terminal.ansiMagenta#e1bbf0ff
  • terminal.ansiRed#9a494dff
  • terminal.ansiWhite#e7e7e7ff
  • terminal.ansiYellow#f2be87ff
  • terminal.background#1e2430ff
  • terminal.border#242a36ff
  • terminal.foreground#e7e7e7ff
  • terminal.selectionBackground#6a85b640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#242a36ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d6a7e9ff
  • textLink.foreground#d6a7e9ff
  • textPreformat.foreground#e1bbf0ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#242a36ff
  • titleBar.activeForeground#b7b7b8ff
  • titleBar.inactiveBackground#242a36ff
  • titleBar.inactiveForeground#60636bff
  • widget.shadow#141a26ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme