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#0b1019ff
  • activityBar.dropBackground#000513ff
  • activityBar.foreground#3c9bdfff
  • activityBar.inactiveForeground#44474dff
  • activityBarBadge.background#3c9bdfbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#3c9bdfbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#000513ff
  • breadcrumb.focusForeground#ecececff
  • breadcrumb.foreground#64666bff
  • breadcrumbPicker.background#0b1019ff
  • button.background#005e9dff
  • button.foreground#ffffffff
  • button.hoverBackground#0071b2ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0b1019ff
  • debugToolBar.background#000513ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0b1019ff
  • dropdown.border#0b1019ff
  • dropdown.foreground#ecececff
  • editor.background#000513ff
  • editor.findMatchBackground#1f599c40
  • editor.findMatchHighlightBackground#1f599c40
  • editor.findRangeHighlightBackground#1f599c40
  • editor.focusedStackFrameHighlightBackground#1f599c40
  • editor.foreground#d9d9d9ff
  • editor.hoverHighlightBackground#1f599c40
  • editor.inactiveSelectionBackground#1f599c20
  • editor.lineHighlightBackground#0b1019ff
  • editor.lineHighlightBorder#0b1019ff
  • editor.rangeHighlightBackground#1f599c40
  • editor.selectionBackground#1f599c40
  • editor.selectionHighlightBackground#1f599c20
  • editor.snippetFinalTabstopHighlightBorder#1f599c40
  • editor.snippetTabstopHighlightBackground#1f599c40
  • editor.stackFrameHighlightBackground#1f599c40
  • editor.wordHighlightBackground#1f599c20
  • editor.wordHighlightStrongBackground#1f599c20
  • editorActiveLineNumber.foreground#64666bff
  • editorBracketMatch.background#1f599c20
  • editorBracketMatch.border#4595fbff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#aab1a3ff
  • editorError.foreground#cc1726ff
  • editorGroup.border#0b1019ff
  • editorGroup.dropBackground#000513ff
  • editorGroupHeader.noTabsBackground#000513ff
  • editorGroupHeader.tabsBackground#0b1019ff
  • editorGutter.addedBackground#002400ff
  • editorGutter.background#000513ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#520000ff
  • editorGutter.modifiedBackground#000f47ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0b1019ff
  • editorHoverWidget.border#0b1019ff
  • editorIndentGuide.activeBackground#1f2229ff
  • editorIndentGuide.background#151920ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#64666bff
  • editorLineNumber.foreground#44474dff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cc1726ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004508ff
  • editorOverviewRuler.border#0b1019ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#860000ff
  • editorOverviewRuler.errorForeground#cc1726bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#003775ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#000513ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0b1019ff
  • editorSuggestWidget.border#0b1019ff
  • editorSuggestWidget.foreground#ecececff
  • editorSuggestWidget.highlightForeground#ecececff
  • editorSuggestWidget.selectedBackground#151920ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0b1019ff
  • editorWidget.border#0b1019ff
  • errorForeground#cc1726ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#1f599cff
  • foreground#d9d9d9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#64666bff
  • gitDecoration.modifiedResourceForeground#919900ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ab63ff
  • input.background#000513ff
  • input.foreground#ecececff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#3c9bdfff
  • inputValidation.errorBackground#4b0000ff
  • inputValidation.errorBorder#610000ff
  • inputValidation.infoBackground#000513ff
  • inputValidation.infoBorder#2a2d34ff
  • inputValidation.warningBackground#1c0700ff
  • inputValidation.warningBorder#281d00ff
  • list.activeSelectionBackground#151920ff
  • list.activeSelectionForeground#ecececff
  • list.dropBackground#000513ff
  • list.errorForeground#cc1726ff
  • list.focusBackground#151920ff
  • list.highlightForeground#ecececff
  • list.hoverBackground#151920ff
  • list.inactiveFocusBackground#151920ff
  • list.inactiveSelectionBackground#151920ff
  • list.inactiveSelectionForeground#ecececff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0b1019ff
  • menu.foreground#b0b1b2ff
  • menu.selectionBackground#151920ff
  • menu.selectionForeground#ecececff
  • menu.separatorBackground#2a2d34ff
  • menubar.selectionBackground#151920ff
  • menubar.selectionForeground#ecececff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0b1019ff
  • notificationLink.foreground#3c9bdfff
  • notifications.background#0b1019ff
  • notifications.border#0b1019ff
  • panel.background#0b1019ff
  • panel.border#0b1019ff
  • panel.dropBackground#000513ff
  • panelTitle.activeBorder#3c9bdfff
  • panelTitle.activeForeground#ecececff
  • panelTitle.inactiveForeground#9c9d9fff
  • peekView.border#0b1019ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0b1019ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000513ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0b1019ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00000fff
  • scrollbarSlider.activeBackground#44474dbf
  • scrollbarSlider.background#2a2d34bf
  • scrollbarSlider.hoverBackground#363940bf
  • settings.checkboxBackground#000513ff
  • settings.checkboxBorder#44474dff
  • settings.checkboxForeground#ecececff
  • settings.dropdownBackground#0b1019ff
  • settings.dropdownBorder#0b1019ff
  • settings.dropdownForeground#ecececff
  • settings.dropdownListBorder#1f2229ff
  • settings.headerForeground#c4ecffff
  • settings.modifiedItemIndicator#1f599cff
  • settings.numberInputBackground#0b1019ff
  • settings.numberInputForeground#ecececff
  • settings.textInputBackground#0b1019ff
  • settings.textInputForeground#ecececff
  • sideBar.background#0b1019ff
  • sideBar.dropBackground#000513ff
  • sideBar.foreground#9c9d9fff
  • sideBarSectionHeader.background#0b1019ff
  • sideBarSectionHeader.foreground#44474dff
  • sideBarTitle.foreground#44474dff
  • statusBar.background#151920ff
  • statusBar.debuggingBackground#780000ff
  • statusBar.debuggingForeground#9c9d9fff
  • statusBar.foreground#9c9d9fff
  • statusBar.noFolderBackground#320050ff
  • statusBar.noFolderForeground#9c9d9fff
  • tab.activeBackground#0b1019ff
  • tab.activeBorder#3c9bdfff
  • tab.activeForeground#ecececff
  • tab.activeModifiedBorder#3c9bdfbf
  • tab.border#0b1019ff
  • tab.inactiveBackground#0b1019ff
  • tab.inactiveForeground#9c9d9fff
  • tab.inactiveModifiedBorder#3c9bdfbf
  • tab.unfocusedActiveForeground#ecececff
  • tab.unfocusedActiveModifiedBorder#3c9bdf80
  • tab.unfocusedInactiveForeground#9c9d9fff
  • tab.unfocusedInactiveModifiedBorder#3c9bdf80
  • terminal.ansiBlack#00000fff
  • terminal.ansiBlue#0073d3ff
  • terminal.ansiBrightBlack#626671ff
  • terminal.ansiBrightBlue#178ff6ff
  • terminal.ansiBrightCyan#00bae3ff
  • terminal.ansiBrightGreen#00d386ff
  • terminal.ansiBrightMagenta#fc70faff
  • terminal.ansiBrightRed#f94147ff
  • terminal.ansiBrightWhite#e0e5f2ff
  • terminal.ansiBrightYellow#f4f62aff
  • terminal.ansiCyan#00aad6ff
  • terminal.ansiGreen#00be74ff
  • terminal.ansiMagenta#fc70faff
  • terminal.ansiRed#d4232cff
  • terminal.ansiWhite#e0e5f2ff
  • terminal.ansiYellow#e4e600ff
  • terminal.background#000513ff
  • terminal.border#0b1019ff
  • terminal.foreground#d9d9d9ff
  • terminal.selectionBackground#1f599c40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0b1019ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#3c9bdfff
  • textLink.foreground#3c9bdfff
  • textPreformat.foreground#fc70faff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0b1019ff
  • titleBar.activeForeground#9c9d9fff
  • titleBar.inactiveBackground#0b1019ff
  • titleBar.inactiveForeground#44474dff
  • widget.shadow#00000fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Dark+ by Alexander Teinum - VS Code Theme