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#242a36ff
  • activityBar.dropBackground#1e2430ff
  • activityBar.foreground#c799daff
  • activityBar.inactiveForeground#595c65ff
  • activityBarBadge.background#c799dabf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c799dabf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1e2430ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#76797fff
  • breadcrumbPicker.background#242a36ff
  • button.background#9468a7ff
  • button.foreground#ffffffff
  • button.hoverBackground#a578b7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#242a36ff
  • debugToolBar.background#1e2430ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#242a36ff
  • dropdown.border#242a36ff
  • dropdown.foreground#efefefff
  • editor.background#1e2430ff
  • editor.findMatchBackground#5f7aab40
  • editor.findMatchHighlightBackground#5f7aab40
  • editor.findRangeHighlightBackground#5f7aab40
  • editor.focusedStackFrameHighlightBackground#5f7aab40
  • editor.foreground#dededeff
  • editor.hoverHighlightBackground#5f7aab40
  • editor.inactiveSelectionBackground#5f7aab20
  • editor.lineHighlightBackground#242a36ff
  • editor.lineHighlightBorder#242a36ff
  • editor.rangeHighlightBackground#5f7aab40
  • editor.selectionBackground#5f7aab40
  • editor.selectionHighlightBackground#5f7aab20
  • editor.snippetFinalTabstopHighlightBorder#5f7aab40
  • editor.snippetTabstopHighlightBackground#5f7aab40
  • editor.stackFrameHighlightBackground#5f7aab40
  • editor.wordHighlightBackground#5f7aab20
  • editor.wordHighlightStrongBackground#5f7aab20
  • editorActiveLineNumber.foreground#76797fff
  • editorBracketMatch.background#5f7aab20
  • editorBracketMatch.border#90abdeff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a8a9abff
  • editorError.foreground#c46f71ff
  • editorGroup.border#242a36ff
  • editorGroup.dropBackground#1e2430ff
  • editorGroupHeader.noTabsBackground#1e2430ff
  • editorGroupHeader.tabsBackground#242a36ff
  • editorGutter.addedBackground#004622ff
  • editorGutter.background#1e2430ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6a1d26ff
  • editorGutter.modifiedBackground#193b67ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#242a36ff
  • editorHoverWidget.border#242a36ff
  • editorIndentGuide.activeBackground#353a45ff
  • editorIndentGuide.background#2c313dff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#76797fff
  • editorLineNumber.foreground#595c65ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c46f71ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#056a43ff
  • editorOverviewRuler.border#242a36ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#924247ff
  • editorOverviewRuler.errorForeground#c46f71bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#415e8cff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1e2430ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#242a36ff
  • editorSuggestWidget.border#242a36ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#2c313dff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#242a36ff
  • editorWidget.border#242a36ff
  • errorForeground#c46f71ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5f7aabff
  • foreground#dededeff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#76797fff
  • gitDecoration.modifiedResourceForeground#d09f6aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#65ba8dff
  • input.background#1e2430ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c799daff
  • inputValidation.errorBackground#4e0011ff
  • inputValidation.errorBorder#762930ff
  • inputValidation.infoBackground#1e2430ff
  • inputValidation.infoBorder#40444fff
  • inputValidation.warningBackground#3d1a00ff
  • inputValidation.warningBorder#613b0aff
  • list.activeSelectionBackground#2c313dff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#1e2430ff
  • list.errorForeground#c46f71ff
  • list.focusBackground#2c313dff
  • list.highlightForeground#efefefff
  • list.hoverBackground#2c313dff
  • list.inactiveFocusBackground#2c313dff
  • list.inactiveSelectionBackground#2c313dff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#242a36ff
  • menu.foreground#bababbff
  • menu.selectionBackground#2c313dff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#40444fff
  • menubar.selectionBackground#2c313dff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#242a36ff
  • notificationLink.foreground#c799daff
  • notifications.background#242a36ff
  • notifications.border#242a36ff
  • panel.background#242a36ff
  • panel.border#242a36ff
  • panel.dropBackground#1e2430ff
  • panelTitle.activeBorder#c799daff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#a8a9abff
  • peekView.border#242a36ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#242a36ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e2430ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#242a36ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#070f1cff
  • scrollbarSlider.activeBackground#595c65bf
  • scrollbarSlider.background#40444fbf
  • scrollbarSlider.hoverBackground#4c5059bf
  • settings.checkboxBackground#1e2430ff
  • settings.checkboxBorder#595c65ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#242a36ff
  • settings.dropdownBorder#242a36ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#353a45ff
  • settings.headerForeground#d6f0ffff
  • settings.modifiedItemIndicator#5f7aabff
  • settings.numberInputBackground#242a36ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#242a36ff
  • settings.textInputForeground#efefefff
  • sideBar.background#242a36ff
  • sideBar.dropBackground#1e2430ff
  • sideBar.foreground#a8a9abff
  • sideBarSectionHeader.background#242a36ff
  • sideBarSectionHeader.foreground#595c65ff
  • sideBarTitle.foreground#595c65ff
  • statusBar.background#2c313dff
  • statusBar.debuggingBackground#815011ff
  • statusBar.debuggingForeground#a8a9abff
  • statusBar.foreground#a8a9abff
  • statusBar.noFolderBackground#602f77ff
  • statusBar.noFolderForeground#a8a9abff
  • tab.activeBackground#242a36ff
  • tab.activeBorder#c799daff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#c799dabf
  • tab.border#242a36ff
  • tab.inactiveBackground#242a36ff
  • tab.inactiveForeground#a8a9abff
  • tab.inactiveModifiedBorder#c799dabf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#c799da80
  • tab.unfocusedInactiveForeground#a8a9abff
  • tab.unfocusedInactiveModifiedBorder#c799da80
  • terminal.ansiBlack#1e2430ff
  • terminal.ansiBlue#a2bcf1ff
  • terminal.ansiBrightBlack#595c65ff
  • terminal.ansiBrightBlue#a2bcf1ff
  • terminal.ansiBrightCyan#56caebff
  • terminal.ansiBrightGreen#76cc9eff
  • terminal.ansiBrightMagenta#d3aee2ff
  • terminal.ansiBrightRed#fca1a2ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e3b07aff
  • terminal.ansiCyan#56caebff
  • terminal.ansiGreen#056a43ff
  • terminal.ansiMagenta#d3aee2ff
  • terminal.ansiRed#924247ff
  • terminal.ansiWhite#dededeff
  • terminal.ansiYellow#e3b07aff
  • terminal.background#1e2430ff
  • terminal.border#242a36ff
  • terminal.foreground#dededeff
  • terminal.selectionBackground#5f7aab40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#242a36ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c799daff
  • textLink.foreground#c799daff
  • textPreformat.foreground#d3aee2ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#242a36ff
  • titleBar.activeForeground#a8a9abff
  • titleBar.inactiveBackground#242a36ff
  • titleBar.inactiveForeground#595c65ff
  • widget.shadow#141a26ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme