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#d69eecff
  • activityBar.inactiveForeground#51596bff
  • activityBarBadge.background#d69eecbf
  • activityBarBadge.foreground#fdffffff
  • badge.background#d69eecbf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0a182cff
  • breadcrumb.focusForeground#f1f4fbff
  • breadcrumb.foreground#747b8bff
  • breadcrumbPicker.background#111e32ff
  • button.background#9b67b1ff
  • button.foreground#fdffffff
  • button.hoverBackground#ae79c5ff
  • 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#f1f4fbff
  • editor.background#0a182cff
  • editor.findMatchBackground#587db840
  • editor.findMatchHighlightBackground#587db840
  • editor.findRangeHighlightBackground#587db840
  • editor.focusedStackFrameHighlightBackground#587db840
  • editor.foreground#e2e6eeff
  • editor.hoverHighlightBackground#587db840
  • editor.inactiveSelectionBackground#587db820
  • editor.lineHighlightBackground#111e32ff
  • editor.lineHighlightBorder#111e32ff
  • editor.rangeHighlightBackground#587db840
  • editor.selectionBackground#587db840
  • editor.selectionHighlightBackground#587db820
  • editor.snippetFinalTabstopHighlightBorder#587db840
  • editor.snippetTabstopHighlightBackground#587db840
  • editor.stackFrameHighlightBackground#587db840
  • editor.wordHighlightBackground#587db820
  • editor.wordHighlightStrongBackground#587db820
  • editorActiveLineNumber.foreground#747b8bff
  • editorBracketMatch.background#587db820
  • editorBracketMatch.border#92b4f4ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#adb2bfff
  • editorError.foreground#d36e72ff
  • editorGroup.border#111e32ff
  • editorGroup.dropBackground#0a182cff
  • editorGroupHeader.noTabsBackground#0a182cff
  • editorGroupHeader.tabsBackground#111e32ff
  • editorGutter.addedBackground#003c14ff
  • editorGutter.background#0a182cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#64011aff
  • editorGutter.modifiedBackground#003265ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#111e32ff
  • editorHoverWidget.border#111e32ff
  • editorIndentGuide.activeBackground#263044ff
  • editorIndentGuide.background#1b263aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#747b8bff
  • editorLineNumber.foreground#51596bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d36e72ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00683bff
  • editorOverviewRuler.border#111e32ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#963840ff
  • editorOverviewRuler.errorForeground#d36e72bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#325b93ff
  • 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#f1f4fbff
  • editorSuggestWidget.highlightForeground#f1f4fbff
  • editorSuggestWidget.selectedBackground#1b263aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#111e32ff
  • editorWidget.border#111e32ff
  • errorForeground#d36e72ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#587db8ff
  • foreground#e2e6eeff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#747b8bff
  • gitDecoration.modifiedResourceForeground#e0a667ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5ec691ff
  • input.background#0a182cff
  • input.foreground#f1f4fbff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d69eecff
  • inputValidation.errorBackground#440000ff
  • inputValidation.errorBorder#731525ff
  • inputValidation.infoBackground#0a182cff
  • inputValidation.infoBorder#333c50ff
  • inputValidation.warningBackground#340a00ff
  • inputValidation.warningBorder#5b3100ff
  • list.activeSelectionBackground#1b263aff
  • list.activeSelectionForeground#f1f4fbff
  • list.dropBackground#0a182cff
  • list.errorForeground#d36e72ff
  • list.focusBackground#1b263aff
  • list.highlightForeground#f1f4fbff
  • list.hoverBackground#1b263aff
  • list.inactiveFocusBackground#1b263aff
  • list.inactiveSelectionBackground#1b263aff
  • list.inactiveSelectionForeground#f1f4fbff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#111e32ff
  • menu.foreground#c0c5d0ff
  • menu.selectionBackground#1b263aff
  • menu.selectionForeground#f1f4fbff
  • menu.separatorBackground#333c50ff
  • menubar.selectionBackground#1b263aff
  • menubar.selectionForeground#f1f4fbff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#111e32ff
  • notificationLink.foreground#d69eecff
  • notifications.background#111e32ff
  • notifications.border#111e32ff
  • panel.background#111e32ff
  • panel.border#111e32ff
  • panel.dropBackground#0a182cff
  • panelTitle.activeBorder#d69eecff
  • panelTitle.activeForeground#f1f4fbff
  • panelTitle.inactiveForeground#adb2bfff
  • 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#51596bbf
  • scrollbarSlider.background#333c50bf
  • scrollbarSlider.hoverBackground#414a5dbf
  • settings.checkboxBackground#0a182cff
  • settings.checkboxBorder#51596bff
  • settings.checkboxForeground#f1f4fbff
  • settings.dropdownBackground#111e32ff
  • settings.dropdownBorder#111e32ff
  • settings.dropdownForeground#f1f4fbff
  • settings.dropdownListBorder#263044ff
  • settings.headerForeground#d4f5ffff
  • settings.modifiedItemIndicator#587db8ff
  • settings.numberInputBackground#111e32ff
  • settings.numberInputForeground#f1f4fbff
  • settings.textInputBackground#111e32ff
  • settings.textInputForeground#f1f4fbff
  • sideBar.background#111e32ff
  • sideBar.dropBackground#0a182cff
  • sideBar.foreground#adb2bfff
  • sideBarSectionHeader.background#111e32ff
  • sideBarSectionHeader.foreground#51596bff
  • sideBarTitle.foreground#51596bff
  • statusBar.background#1b263aff
  • statusBar.debuggingBackground#814b00ff
  • statusBar.debuggingForeground#adb2bfff
  • statusBar.foreground#adb2bfff
  • statusBar.noFolderBackground#5a2175ff
  • statusBar.noFolderForeground#adb2bfff
  • tab.activeBackground#111e32ff
  • tab.activeBorder#d69eecff
  • tab.activeForeground#f1f4fbff
  • tab.activeModifiedBorder#d69eecbf
  • tab.border#111e32ff
  • tab.inactiveBackground#111e32ff
  • tab.inactiveForeground#adb2bfff
  • tab.inactiveModifiedBorder#d69eecbf
  • tab.unfocusedActiveForeground#f1f4fbff
  • tab.unfocusedActiveModifiedBorder#d69eec80
  • tab.unfocusedInactiveForeground#adb2bfff
  • tab.unfocusedInactiveModifiedBorder#d69eec80
  • terminal.ansiBlack#0a182cff
  • terminal.ansiBlue#a4c6ffff
  • terminal.ansiBrightBlack#51596bff
  • terminal.ansiBrightBlue#a4c6ffff
  • terminal.ansiBrightCyan#3cd6feff
  • terminal.ansiBrightGreen#71d9a3ff
  • terminal.ansiBrightMagenta#e2b4f5ff
  • terminal.ansiBrightRed#ffa5a7ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#f3b878ff
  • terminal.ansiCyan#3cd6feff
  • terminal.ansiGreen#00683bff
  • terminal.ansiMagenta#e2b4f5ff
  • terminal.ansiRed#963840ff
  • terminal.ansiWhite#e2e6eeff
  • terminal.ansiYellow#f3b878ff
  • terminal.background#0a182cff
  • terminal.border#111e32ff
  • terminal.foreground#e2e6eeff
  • terminal.selectionBackground#587db840
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#111e32ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d69eecff
  • textLink.foreground#d69eecff
  • textPreformat.foreground#e2b4f5ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#111e32ff
  • titleBar.activeForeground#adb2bfff
  • titleBar.inactiveBackground#111e32ff
  • titleBar.inactiveForeground#51596bff
  • widget.shadow#000b21ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme