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#0f0f0fff
  • activityBar.dropBackground#050505ff
  • activityBar.foreground#7097bdff
  • activityBar.inactiveForeground#474747ff
  • activityBarBadge.background#7097bdbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#7097bdbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#050505ff
  • breadcrumb.focusForeground#ecececff
  • breadcrumb.foreground#666666ff
  • breadcrumbPicker.background#0f0f0fff
  • button.background#325b7dff
  • button.foreground#ffffffff
  • button.hoverBackground#466e91ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0f0f0fff
  • debugToolBar.background#050505ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0f0f0fff
  • dropdown.border#0f0f0fff
  • dropdown.foreground#ecececff
  • editor.background#050505ff
  • editor.findMatchBackground#45577b40
  • editor.findMatchHighlightBackground#45577b40
  • editor.findRangeHighlightBackground#45577b40
  • editor.focusedStackFrameHighlightBackground#45577b40
  • editor.foreground#d9d9d9ff
  • editor.hoverHighlightBackground#45577b40
  • editor.inactiveSelectionBackground#45577b20
  • editor.lineHighlightBackground#0f0f0fff
  • editor.lineHighlightBorder#0f0f0fff
  • editor.rangeHighlightBackground#45577b40
  • editor.selectionBackground#45577b40
  • editor.selectionHighlightBackground#45577b20
  • editor.snippetFinalTabstopHighlightBorder#45577b40
  • editor.snippetTabstopHighlightBackground#45577b40
  • editor.stackFrameHighlightBackground#45577b40
  • editor.wordHighlightBackground#45577b20
  • editor.wordHighlightStrongBackground#45577b20
  • editorActiveLineNumber.foreground#666666ff
  • editorBracketMatch.background#45577b20
  • editorBracketMatch.border#6e94d8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#afafafff
  • editorError.foreground#b83d37ff
  • editorGroup.border#0f0f0fff
  • editorGroup.dropBackground#050505ff
  • editorGroupHeader.noTabsBackground#050505ff
  • editorGroupHeader.tabsBackground#0f0f0fff
  • editorGutter.addedBackground#001e00ff
  • editorGutter.background#050505ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#440000ff
  • editorGutter.modifiedBackground#000d2cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0f0f0fff
  • editorHoverWidget.border#0f0f0fff
  • editorIndentGuide.activeBackground#222222ff
  • editorIndentGuide.background#181818ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#666666ff
  • editorLineNumber.foreground#474747ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b83d37ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004218ff
  • editorOverviewRuler.border#0f0f0fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#750005ff
  • editorOverviewRuler.errorForeground#b83d37bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#213657ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#050505ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0f0f0fff
  • editorSuggestWidget.border#0f0f0fff
  • editorSuggestWidget.foreground#ecececff
  • editorSuggestWidget.highlightForeground#ecececff
  • editorSuggestWidget.selectedBackground#181818ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0f0f0fff
  • editorWidget.border#0f0f0fff
  • errorForeground#b83d37ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#45577bff
  • foreground#d9d9d9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#666666ff
  • gitDecoration.modifiedResourceForeground#959700ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#3aa572ff
  • input.background#050505ff
  • input.foreground#ecececff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#7097bdff
  • inputValidation.errorBackground#3f0000ff
  • inputValidation.errorBorder#510000ff
  • inputValidation.infoBackground#050505ff
  • inputValidation.infoBorder#2d2d2dff
  • inputValidation.warningBackground#180600ff
  • inputValidation.warningBorder#261c00ff
  • list.activeSelectionBackground#181818ff
  • list.activeSelectionForeground#ecececff
  • list.dropBackground#050505ff
  • list.errorForeground#b83d37ff
  • list.focusBackground#181818ff
  • list.highlightForeground#ecececff
  • list.hoverBackground#181818ff
  • list.inactiveFocusBackground#181818ff
  • list.inactiveSelectionBackground#181818ff
  • list.inactiveSelectionForeground#ecececff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0f0f0fff
  • menu.foreground#b1b1b1ff
  • menu.selectionBackground#181818ff
  • menu.selectionForeground#ecececff
  • menu.separatorBackground#2d2d2dff
  • menubar.selectionBackground#181818ff
  • menubar.selectionForeground#ecececff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0f0f0fff
  • notificationLink.foreground#7097bdff
  • notifications.background#0f0f0fff
  • notifications.border#0f0f0fff
  • panel.background#0f0f0fff
  • panel.border#0f0f0fff
  • panel.dropBackground#050505ff
  • panelTitle.activeBorder#7097bdff
  • panelTitle.activeForeground#ecececff
  • panelTitle.inactiveForeground#9d9d9dff
  • peekView.border#0f0f0fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0f0f0fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#050505ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0f0f0fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000ff
  • scrollbarSlider.activeBackground#474747bf
  • scrollbarSlider.background#2d2d2dbf
  • scrollbarSlider.hoverBackground#393939bf
  • settings.checkboxBackground#050505ff
  • settings.checkboxBorder#474747ff
  • settings.checkboxForeground#ecececff
  • settings.dropdownBackground#0f0f0fff
  • settings.dropdownBorder#0f0f0fff
  • settings.dropdownForeground#ecececff
  • settings.dropdownListBorder#222222ff
  • settings.headerForeground#d9ebffff
  • settings.modifiedItemIndicator#45577bff
  • settings.numberInputBackground#0f0f0fff
  • settings.numberInputForeground#ecececff
  • settings.textInputBackground#0f0f0fff
  • settings.textInputForeground#ecececff
  • sideBar.background#0f0f0fff
  • sideBar.dropBackground#050505ff
  • sideBar.foreground#9d9d9dff
  • sideBarSectionHeader.background#0f0f0fff
  • sideBarSectionHeader.foreground#474747ff
  • sideBarTitle.foreground#474747ff
  • statusBar.background#181818ff
  • statusBar.debuggingBackground#681300ff
  • statusBar.debuggingForeground#9d9d9dff
  • statusBar.foreground#9d9d9dff
  • statusBar.noFolderBackground#2b083cff
  • statusBar.noFolderForeground#9d9d9dff
  • tab.activeBackground#0f0f0fff
  • tab.activeBorder#7097bdff
  • tab.activeForeground#ecececff
  • tab.activeModifiedBorder#7097bdbf
  • tab.border#0f0f0fff
  • tab.inactiveBackground#0f0f0fff
  • tab.inactiveForeground#9d9d9dff
  • tab.inactiveModifiedBorder#7097bdbf
  • tab.unfocusedActiveForeground#ecececff
  • tab.unfocusedActiveModifiedBorder#7097bd80
  • tab.unfocusedInactiveForeground#9d9d9dff
  • tab.unfocusedInactiveModifiedBorder#7097bd80
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#4871b1ff
  • terminal.ansiBrightBlack#666666ff
  • terminal.ansiBrightBlue#5c8dd3ff
  • terminal.ansiBrightCyan#69b3caff
  • terminal.ansiBrightGreen#5bcc95ff
  • terminal.ansiBrightMagenta#e983e6ff
  • terminal.ansiBrightRed#e25d57ff
  • terminal.ansiBrightWhite#e5e5e5ff
  • terminal.ansiBrightYellow#f6f467ff
  • terminal.ansiCyan#5da3bcff
  • terminal.ansiGreen#4fb883ff
  • terminal.ansiMagenta#e983e6ff
  • terminal.ansiRed#bf443cff
  • terminal.ansiWhite#e5e5e5ff
  • terminal.ansiYellow#e6e448ff
  • terminal.background#050505ff
  • terminal.border#0f0f0fff
  • terminal.foreground#d9d9d9ff
  • terminal.selectionBackground#45577b40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0f0f0fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#7097bdff
  • textLink.foreground#7097bdff
  • textPreformat.foreground#e983e6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0f0f0fff
  • titleBar.activeForeground#9d9d9dff
  • titleBar.inactiveBackground#0f0f0fff
  • titleBar.inactiveForeground#474747ff
  • widget.shadow#000000ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Dark+ by Alexander Teinum - VS Code Theme