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#2c374dff
  • activityBar.dropBackground#253248ff
  • activityBar.foreground#d29be9ff
  • activityBar.inactiveForeground#5f677bff
  • activityBarBadge.background#d29be9bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#d29be9bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#253248ff
  • breadcrumb.focusForeground#edf0f8ff
  • breadcrumb.foreground#7b8293ff
  • breadcrumbPicker.background#2c374dff
  • button.background#a26eb9ff
  • button.foreground#fdffffff
  • button.hoverBackground#b27cc8ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2c374dff
  • debugToolBar.background#253248ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2c374dff
  • dropdown.border#2c374dff
  • dropdown.foreground#edf0f8ff
  • editor.background#253248ff
  • editor.findMatchBackground#5f84c040
  • editor.findMatchHighlightBackground#5f84c040
  • editor.findRangeHighlightBackground#5f84c040
  • editor.focusedStackFrameHighlightBackground#5f84c040
  • editor.foreground#dde0e9ff
  • editor.hoverHighlightBackground#5f84c040
  • editor.inactiveSelectionBackground#5f84c020
  • editor.lineHighlightBackground#2c374dff
  • editor.lineHighlightBorder#2c374dff
  • editor.rangeHighlightBackground#5f84c040
  • editor.selectionBackground#5f84c040
  • editor.selectionHighlightBackground#5f84c020
  • editor.snippetFinalTabstopHighlightBorder#5f84c040
  • editor.snippetTabstopHighlightBackground#5f84c040
  • editor.stackFrameHighlightBackground#5f84c040
  • editor.wordHighlightBackground#5f84c020
  • editor.wordHighlightStrongBackground#5f84c020
  • editorActiveLineNumber.foreground#7b8293ff
  • editorBracketMatch.background#5f84c020
  • editorBracketMatch.border#8eb1f1ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#aaafbdff
  • editorError.foreground#d77175ff
  • editorGroup.border#2c374dff
  • editorGroup.dropBackground#253248ff
  • editorGroupHeader.noTabsBackground#253248ff
  • editorGroupHeader.tabsBackground#2c374dff
  • editorGutter.addedBackground#00552aff
  • editorGutter.background#253248ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#80232fff
  • editorGutter.modifiedBackground#19487fff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2c374dff
  • editorHoverWidget.border#2c374dff
  • editorIndentGuide.activeBackground#3d475cff
  • editorIndentGuide.background#333e54ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7b8293ff
  • editorLineNumber.foreground#5f677bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d77175ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007749ff
  • editorOverviewRuler.border#2c374dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a7474dff
  • editorOverviewRuler.errorForeground#d77175bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#4269a3ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#253248ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2c374dff
  • editorSuggestWidget.border#2c374dff
  • editorSuggestWidget.foreground#edf0f8ff
  • editorSuggestWidget.highlightForeground#edf0f8ff
  • editorSuggestWidget.selectedBackground#333e54ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2c374dff
  • editorWidget.border#2c374dff
  • errorForeground#d77175ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5f84c0ff
  • foreground#dde0e9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7b8293ff
  • gitDecoration.modifiedResourceForeground#dca364ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5bc38eff
  • input.background#253248ff
  • input.foreground#edf0f8ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d29be9ff
  • inputValidation.errorBackground#66031bff
  • inputValidation.errorBorder#8c2e38ff
  • inputValidation.infoBackground#253248ff
  • inputValidation.infoBorder#475165ff
  • inputValidation.warningBackground#4f2600ff
  • inputValidation.warningBorder#734507ff
  • list.activeSelectionBackground#333e54ff
  • list.activeSelectionForeground#edf0f8ff
  • list.dropBackground#253248ff
  • list.errorForeground#d77175ff
  • list.focusBackground#333e54ff
  • list.highlightForeground#edf0f8ff
  • list.hoverBackground#333e54ff
  • list.inactiveFocusBackground#333e54ff
  • list.inactiveSelectionBackground#333e54ff
  • list.inactiveSelectionForeground#edf0f8ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2c374dff
  • menu.foreground#bbc0ccff
  • menu.selectionBackground#333e54ff
  • menu.selectionForeground#edf0f8ff
  • menu.separatorBackground#475165ff
  • menubar.selectionBackground#333e54ff
  • menubar.selectionForeground#edf0f8ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2c374dff
  • notificationLink.foreground#d29be9ff
  • notifications.background#2c374dff
  • notifications.border#2c374dff
  • panel.background#2c374dff
  • panel.border#2c374dff
  • panel.dropBackground#253248ff
  • panelTitle.activeBorder#d29be9ff
  • panelTitle.activeForeground#edf0f8ff
  • panelTitle.inactiveForeground#aaafbdff
  • peekView.border#2c374dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2c374dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#253248ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2c374dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0f1d31ff
  • scrollbarSlider.activeBackground#5f677bbf
  • scrollbarSlider.background#475165bf
  • scrollbarSlider.hoverBackground#525c70bf
  • settings.checkboxBackground#253248ff
  • settings.checkboxBorder#5f677bff
  • settings.checkboxForeground#edf0f8ff
  • settings.dropdownBackground#2c374dff
  • settings.dropdownBorder#2c374dff
  • settings.dropdownForeground#edf0f8ff
  • settings.dropdownListBorder#3d475cff
  • settings.headerForeground#d0f2ffff
  • settings.modifiedItemIndicator#5f84c0ff
  • settings.numberInputBackground#2c374dff
  • settings.numberInputForeground#edf0f8ff
  • settings.textInputBackground#2c374dff
  • settings.textInputForeground#edf0f8ff
  • sideBar.background#2c374dff
  • sideBar.dropBackground#253248ff
  • sideBar.foreground#aaafbdff
  • sideBarSectionHeader.background#2c374dff
  • sideBarSectionHeader.foreground#5f677bff
  • sideBarTitle.foreground#5f677bff
  • statusBar.background#333e54ff
  • statusBar.debuggingBackground#92590dff
  • statusBar.debuggingForeground#aaafbdff
  • statusBar.foreground#aaafbdff
  • statusBar.noFolderBackground#71378cff
  • statusBar.noFolderForeground#aaafbdff
  • tab.activeBackground#2c374dff
  • tab.activeBorder#d29be9ff
  • tab.activeForeground#edf0f8ff
  • tab.activeModifiedBorder#d29be9bf
  • tab.border#2c374dff
  • tab.inactiveBackground#2c374dff
  • tab.inactiveForeground#aaafbdff
  • tab.inactiveModifiedBorder#d29be9bf
  • tab.unfocusedActiveForeground#edf0f8ff
  • tab.unfocusedActiveModifiedBorder#d29be980
  • tab.unfocusedInactiveForeground#aaafbdff
  • tab.unfocusedInactiveModifiedBorder#d29be980
  • terminal.ansiBlack#253248ff
  • terminal.ansiBlue#9fc1ffff
  • terminal.ansiBrightBlack#5f677bff
  • terminal.ansiBrightBlue#9fc1ffff
  • terminal.ansiBrightCyan#33d1f8ff
  • terminal.ansiBrightGreen#6cd39eff
  • terminal.ansiBrightMagenta#ddafefff
  • terminal.ansiBrightRed#ffa0a2ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#eeb373ff
  • terminal.ansiCyan#33d1f8ff
  • terminal.ansiGreen#007749ff
  • terminal.ansiMagenta#ddafefff
  • terminal.ansiRed#a7474dff
  • terminal.ansiWhite#dde0e9ff
  • terminal.ansiYellow#eeb373ff
  • terminal.background#253248ff
  • terminal.border#2c374dff
  • terminal.foreground#dde0e9ff
  • terminal.selectionBackground#5f84c040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2c374dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d29be9ff
  • textLink.foreground#d29be9ff
  • textPreformat.foreground#ddafefff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2c374dff
  • titleBar.activeForeground#aaafbdff
  • titleBar.inactiveBackground#2c374dff
  • titleBar.inactiveForeground#5f677bff
  • widget.shadow#1a273cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme