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#121722ff
  • activityBar.dropBackground#09101dff
  • activityBar.foreground#be90d1ff
  • activityBar.inactiveForeground#494d55ff
  • activityBarBadge.background#be90d1bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#be90d1bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#09101dff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#696b71ff
  • breadcrumbPicker.background#121722ff
  • button.background#865b98ff
  • button.foreground#ffffffff
  • button.hoverBackground#986caaff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#121722ff
  • debugToolBar.background#09101dff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#121722ff
  • dropdown.border#121722ff
  • dropdown.foreground#edededff
  • editor.background#09101dff
  • editor.findMatchBackground#516d9c40
  • editor.findMatchHighlightBackground#516d9c40
  • editor.findRangeHighlightBackground#516d9c40
  • editor.focusedStackFrameHighlightBackground#516d9c40
  • editor.foreground#dadadaff
  • editor.hoverHighlightBackground#516d9c40
  • editor.inactiveSelectionBackground#516d9c20
  • editor.lineHighlightBackground#121722ff
  • editor.lineHighlightBorder#121722ff
  • editor.rangeHighlightBackground#516d9c40
  • editor.selectionBackground#516d9c40
  • editor.selectionHighlightBackground#516d9c20
  • editor.snippetFinalTabstopHighlightBorder#516d9c40
  • editor.snippetTabstopHighlightBackground#516d9c40
  • editor.stackFrameHighlightBackground#516d9c40
  • editor.wordHighlightBackground#516d9c20
  • editor.wordHighlightStrongBackground#516d9c20
  • editorActiveLineNumber.foreground#696b71ff
  • editorBracketMatch.background#516d9c20
  • editorBracketMatch.border#87a2d5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9fa0a2ff
  • editorError.foreground#b76265ff
  • editorGroup.border#121722ff
  • editorGroup.dropBackground#09101dff
  • editorGroupHeader.noTabsBackground#09101dff
  • editorGroupHeader.tabsBackground#121722ff
  • editorGutter.addedBackground#003311ff
  • editorGutter.background#09101dff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#540516ff
  • editorGutter.modifiedBackground#002a52ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#121722ff
  • editorHoverWidget.border#121722ff
  • editorIndentGuide.activeBackground#242833ff
  • editorIndentGuide.background#1a1f2aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#696b71ff
  • editorLineNumber.foreground#494d55ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b76265ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005a34ff
  • editorOverviewRuler.border#121722ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#803238ff
  • editorOverviewRuler.errorForeground#b76265bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#304e7bff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#09101dff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#121722ff
  • editorSuggestWidget.border#121722ff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#1a1f2aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#121722ff
  • editorWidget.border#121722ff
  • errorForeground#b76265ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#516d9cff
  • foreground#dadadaff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#696b71ff
  • gitDecoration.modifiedResourceForeground#c79662ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5cb185ff
  • input.background#09101dff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#be90d1ff
  • inputValidation.errorBackground#380000ff
  • inputValidation.errorBorder#611520ff
  • inputValidation.infoBackground#09101dff
  • inputValidation.infoBorder#2f333dff
  • inputValidation.warningBackground#2c0400ff
  • inputValidation.warningBorder#4d2a00ff
  • list.activeSelectionBackground#1a1f2aff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#09101dff
  • list.errorForeground#b76265ff
  • list.focusBackground#1a1f2aff
  • list.highlightForeground#edededff
  • list.hoverBackground#1a1f2aff
  • list.inactiveFocusBackground#1a1f2aff
  • list.inactiveSelectionBackground#1a1f2aff
  • list.inactiveSelectionForeground#edededff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#121722ff
  • menu.foreground#b3b3b4ff
  • menu.selectionBackground#1a1f2aff
  • menu.selectionForeground#edededff
  • menu.separatorBackground#2f333dff
  • menubar.selectionBackground#1a1f2aff
  • menubar.selectionForeground#edededff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#121722ff
  • notificationLink.foreground#be90d1ff
  • notifications.background#121722ff
  • notifications.border#121722ff
  • panel.background#121722ff
  • panel.border#121722ff
  • panel.dropBackground#09101dff
  • panelTitle.activeBorder#be90d1ff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#9fa0a2ff
  • peekView.border#121722ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#121722ff
  • 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#121722ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000113ff
  • scrollbarSlider.activeBackground#494d55bf
  • scrollbarSlider.background#2f333dbf
  • scrollbarSlider.hoverBackground#3b3f48bf
  • settings.checkboxBackground#09101dff
  • settings.checkboxBorder#494d55ff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#121722ff
  • settings.dropdownBorder#121722ff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#242833ff
  • settings.headerForeground#d4efffff
  • settings.modifiedItemIndicator#516d9cff
  • settings.numberInputBackground#121722ff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#121722ff
  • settings.textInputForeground#edededff
  • sideBar.background#121722ff
  • sideBar.dropBackground#09101dff
  • sideBar.foreground#9fa0a2ff
  • sideBarSectionHeader.background#121722ff
  • sideBarSectionHeader.foreground#494d55ff
  • sideBarTitle.foreground#494d55ff
  • statusBar.background#1a1f2aff
  • statusBar.debuggingBackground#6f4100ff
  • statusBar.debuggingForeground#9fa0a2ff
  • statusBar.foreground#9fa0a2ff
  • statusBar.noFolderBackground#4d1d64ff
  • statusBar.noFolderForeground#9fa0a2ff
  • tab.activeBackground#121722ff
  • tab.activeBorder#be90d1ff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#be90d1bf
  • tab.border#121722ff
  • tab.inactiveBackground#121722ff
  • tab.inactiveForeground#9fa0a2ff
  • tab.inactiveModifiedBorder#be90d1bf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#be90d180
  • tab.unfocusedInactiveForeground#9fa0a2ff
  • tab.unfocusedInactiveModifiedBorder#be90d180
  • terminal.ansiBlack#09101dff
  • terminal.ansiBlue#9ab5e9ff
  • terminal.ansiBrightBlack#494d55ff
  • terminal.ansiBrightBlue#9ab5e9ff
  • terminal.ansiBrightCyan#4dc2e3ff
  • terminal.ansiBrightGreen#6fc497ff
  • terminal.ansiBrightMagenta#cca7daff
  • terminal.ansiBrightRed#f49a9bff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#dba974ff
  • terminal.ansiCyan#4dc2e3ff
  • terminal.ansiGreen#005a34ff
  • terminal.ansiMagenta#cca7daff
  • terminal.ansiRed#803238ff
  • terminal.ansiWhite#dadadaff
  • terminal.ansiYellow#dba974ff
  • terminal.background#09101dff
  • terminal.border#121722ff
  • terminal.foreground#dadadaff
  • terminal.selectionBackground#516d9c40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#121722ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#be90d1ff
  • textLink.foreground#be90d1ff
  • textPreformat.foreground#cca7daff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#121722ff
  • titleBar.activeForeground#9fa0a2ff
  • titleBar.inactiveBackground#121722ff
  • titleBar.inactiveForeground#494d55ff
  • widget.shadow#000113ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme