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#121823ff
  • activityBar.dropBackground#09101dff
  • activityBar.foreground#ce9fe1ff
  • activityBar.inactiveForeground#51545cff
  • activityBarBadge.background#ce9fe1bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#ce9fe1bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#09101dff
  • breadcrumb.focusForeground#f3f3f3ff
  • breadcrumb.foreground#75777cff
  • breadcrumbPicker.background#121823ff
  • button.background#9266a5ff
  • button.foreground#ffffffff
  • button.hoverBackground#a679b9ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#121823ff
  • debugToolBar.background#09101dff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#121823ff
  • dropdown.border#121823ff
  • dropdown.foreground#f3f3f3ff
  • editor.background#09101dff
  • editor.findMatchBackground#5d78a940
  • editor.findMatchHighlightBackground#5d78a940
  • editor.findRangeHighlightBackground#5d78a940
  • editor.focusedStackFrameHighlightBackground#5d78a940
  • editor.foreground#e5e5e5ff
  • editor.hoverHighlightBackground#5d78a940
  • editor.inactiveSelectionBackground#5d78a920
  • editor.lineHighlightBackground#121823ff
  • editor.lineHighlightBorder#121823ff
  • editor.rangeHighlightBackground#5d78a940
  • editor.selectionBackground#5d78a940
  • editor.selectionHighlightBackground#5d78a920
  • editor.snippetFinalTabstopHighlightBorder#5d78a940
  • editor.snippetTabstopHighlightBackground#5d78a940
  • editor.stackFrameHighlightBackground#5d78a940
  • editor.wordHighlightBackground#5d78a920
  • editor.wordHighlightStrongBackground#5d78a920
  • editorActiveLineNumber.foreground#75777cff
  • editorBracketMatch.background#5d78a920
  • editorBracketMatch.border#97b1e5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#afb0b0ff
  • editorError.foreground#c67072ff
  • editorGroup.border#121823ff
  • editorGroup.dropBackground#09101dff
  • editorGroupHeader.noTabsBackground#09101dff
  • editorGroupHeader.tabsBackground#121823ff
  • editorGutter.addedBackground#003513ff
  • editorGutter.background#09101dff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#560818ff
  • editorGutter.modifiedBackground#002b55ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#121823ff
  • editorHoverWidget.border#121823ff
  • editorIndentGuide.activeBackground#252a34ff
  • editorIndentGuide.background#1b202bff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#75777cff
  • editorLineNumber.foreground#51545cff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c67072ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00613bff
  • editorOverviewRuler.border#121823ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#88393fff
  • editorOverviewRuler.errorForeground#c67072bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#385583ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#09101dff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#121823ff
  • editorSuggestWidget.border#121823ff
  • editorSuggestWidget.foreground#f3f3f3ff
  • editorSuggestWidget.highlightForeground#f3f3f3ff
  • editorSuggestWidget.selectedBackground#1b202bff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#121823ff
  • editorWidget.border#121823ff
  • errorForeground#c67072ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5d78a9ff
  • foreground#e5e5e5ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#75777cff
  • gitDecoration.modifiedResourceForeground#d7a570ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6cc194ff
  • input.background#09101dff
  • input.foreground#f3f3f3ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#ce9fe1ff
  • inputValidation.errorBackground#380000ff
  • inputValidation.errorBorder#651923ff
  • inputValidation.infoBackground#09101dff
  • inputValidation.infoBorder#323640ff
  • inputValidation.warningBackground#2c0400ff
  • inputValidation.warningBorder#512d00ff
  • list.activeSelectionBackground#1b202bff
  • list.activeSelectionForeground#f3f3f3ff
  • list.dropBackground#09101dff
  • list.errorForeground#c67072ff
  • list.focusBackground#1b202bff
  • list.highlightForeground#f3f3f3ff
  • list.hoverBackground#1b202bff
  • list.inactiveFocusBackground#1b202bff
  • list.inactiveSelectionBackground#1b202bff
  • list.inactiveSelectionForeground#f3f3f3ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#121823ff
  • menu.foreground#c2c2c2ff
  • menu.selectionBackground#1b202bff
  • menu.selectionForeground#f3f3f3ff
  • menu.separatorBackground#323640ff
  • menubar.selectionBackground#1b202bff
  • menubar.selectionForeground#f3f3f3ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#121823ff
  • notificationLink.foreground#ce9fe1ff
  • notifications.background#121823ff
  • notifications.border#121823ff
  • panel.background#121823ff
  • panel.border#121823ff
  • panel.dropBackground#09101dff
  • panelTitle.activeBorder#ce9fe1ff
  • panelTitle.activeForeground#f3f3f3ff
  • panelTitle.inactiveForeground#afb0b0ff
  • peekView.border#121823ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#121823ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#09101dff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#121823ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000113ff
  • scrollbarSlider.activeBackground#51545cbf
  • scrollbarSlider.background#323640bf
  • scrollbarSlider.hoverBackground#41444dbf
  • settings.checkboxBackground#09101dff
  • settings.checkboxBorder#51545cff
  • settings.checkboxForeground#f3f3f3ff
  • settings.dropdownBackground#121823ff
  • settings.dropdownBorder#121823ff
  • settings.dropdownForeground#f3f3f3ff
  • settings.dropdownListBorder#252a34ff
  • settings.headerForeground#daf5ffff
  • settings.modifiedItemIndicator#5d78a9ff
  • settings.numberInputBackground#121823ff
  • settings.numberInputForeground#f3f3f3ff
  • settings.textInputBackground#121823ff
  • settings.textInputForeground#f3f3f3ff
  • sideBar.background#121823ff
  • sideBar.dropBackground#09101dff
  • sideBar.foreground#afb0b0ff
  • sideBarSectionHeader.background#121823ff
  • sideBarSectionHeader.foreground#51545cff
  • sideBarTitle.foreground#51545cff
  • statusBar.background#1b202bff
  • statusBar.debuggingBackground#784807ff
  • statusBar.debuggingForeground#afb0b0ff
  • statusBar.foreground#afb0b0ff
  • statusBar.noFolderBackground#512067ff
  • statusBar.noFolderForeground#afb0b0ff
  • tab.activeBackground#121823ff
  • tab.activeBorder#ce9fe1ff
  • tab.activeForeground#f3f3f3ff
  • tab.activeModifiedBorder#ce9fe1bf
  • tab.border#121823ff
  • tab.inactiveBackground#121823ff
  • tab.inactiveForeground#afb0b0ff
  • tab.inactiveModifiedBorder#ce9fe1bf
  • tab.unfocusedActiveForeground#f3f3f3ff
  • tab.unfocusedActiveModifiedBorder#ce9fe180
  • tab.unfocusedInactiveForeground#afb0b0ff
  • tab.unfocusedInactiveModifiedBorder#ce9fe180
  • terminal.ansiBlack#09101dff
  • terminal.ansiBlue#aac4f9ff
  • terminal.ansiBrightBlack#51545cff
  • terminal.ansiBrightBlue#aac4f9ff
  • terminal.ansiBrightCyan#5fd2f3ff
  • terminal.ansiBrightGreen#7ed4a6ff
  • terminal.ansiBrightMagenta#dbb6eaff
  • terminal.ansiBrightRed#ffa9aaff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ecb882ff
  • terminal.ansiCyan#5fd2f3ff
  • terminal.ansiGreen#00613bff
  • terminal.ansiMagenta#dbb6eaff
  • terminal.ansiRed#88393fff
  • terminal.ansiWhite#e5e5e5ff
  • terminal.ansiYellow#ecb882ff
  • terminal.background#09101dff
  • terminal.border#121823ff
  • terminal.foreground#e5e5e5ff
  • terminal.selectionBackground#5d78a940
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#121823ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#ce9fe1ff
  • textLink.foreground#ce9fe1ff
  • textPreformat.foreground#dbb6eaff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#121823ff
  • titleBar.activeForeground#afb0b0ff
  • titleBar.inactiveBackground#121823ff
  • titleBar.inactiveForeground#51545cff
  • widget.shadow#000113ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme