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#2c384dff
  • activityBar.dropBackground#253248ff
  • activityBar.foreground#e0a8f7ff
  • activityBar.inactiveForeground#656e81ff
  • activityBarBadge.background#e0a8f7bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#e0a8f7bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#253248ff
  • breadcrumb.focusForeground#f2f5fcff
  • breadcrumb.foreground#858c9dff
  • breadcrumbPicker.background#2c384dff
  • button.background#ad78c3ff
  • button.foreground#fdffffff
  • button.hoverBackground#be88d4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2c384dff
  • debugToolBar.background#253248ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2c384dff
  • dropdown.border#2c384dff
  • dropdown.foreground#f2f5fcff
  • editor.background#253248ff
  • editor.findMatchBackground#6a8dcb40
  • editor.findMatchHighlightBackground#6a8dcb40
  • editor.findRangeHighlightBackground#6a8dcb40
  • editor.focusedStackFrameHighlightBackground#6a8dcb40
  • editor.foreground#e6e9f2ff
  • editor.hoverHighlightBackground#6a8dcb40
  • editor.inactiveSelectionBackground#6a8dcb20
  • editor.lineHighlightBackground#2c384dff
  • editor.lineHighlightBorder#2c384dff
  • editor.rangeHighlightBackground#6a8dcb40
  • editor.selectionBackground#6a8dcb40
  • editor.selectionHighlightBackground#6a8dcb20
  • editor.snippetFinalTabstopHighlightBorder#6a8dcb40
  • editor.snippetTabstopHighlightBackground#6a8dcb40
  • editor.stackFrameHighlightBackground#6a8dcb40
  • editor.wordHighlightBackground#6a8dcb20
  • editor.wordHighlightStrongBackground#6a8dcb20
  • editorActiveLineNumber.foreground#858c9dff
  • editorBracketMatch.background#6a8dcb20
  • editorBracketMatch.border#9cbeffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b8bdc9ff
  • editorError.foreground#e47d80ff
  • editorGroup.border#2c384dff
  • editorGroup.dropBackground#253248ff
  • editorGroupHeader.noTabsBackground#253248ff
  • editorGroupHeader.tabsBackground#2c384dff
  • editorGutter.addedBackground#00572bff
  • editorGutter.background#253248ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#822530ff
  • editorGutter.modifiedBackground#1b4a81ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2c384dff
  • editorHoverWidget.border#2c384dff
  • editorIndentGuide.activeBackground#3e495eff
  • editorIndentGuide.background#343f55ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#858c9dff
  • editorLineNumber.foreground#656e81ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#e47d80ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007e4fff
  • editorOverviewRuler.border#2c384dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#ae4d53ff
  • editorOverviewRuler.errorForeground#e47d80bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#496faaff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#253248ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2c384dff
  • editorSuggestWidget.border#2c384dff
  • editorSuggestWidget.foreground#f2f5fcff
  • editorSuggestWidget.highlightForeground#f2f5fcff
  • editorSuggestWidget.selectedBackground#343f55ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2c384dff
  • editorWidget.border#2c384dff
  • errorForeground#e47d80ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6a8dcbff
  • foreground#e6e9f2ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#858c9dff
  • gitDecoration.modifiedResourceForeground#ebb071ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#68d09bff
  • input.background#253248ff
  • input.foreground#f2f5fcff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#e0a8f7ff
  • inputValidation.errorBackground#66031bff
  • inputValidation.errorBorder#90313bff
  • inputValidation.infoBackground#253248ff
  • inputValidation.infoBorder#4a5468ff
  • inputValidation.warningBackground#4f2600ff
  • inputValidation.warningBorder#76480bff
  • list.activeSelectionBackground#343f55ff
  • list.activeSelectionForeground#f2f5fcff
  • list.dropBackground#253248ff
  • list.errorForeground#e47d80ff
  • list.focusBackground#343f55ff
  • list.highlightForeground#f2f5fcff
  • list.hoverBackground#343f55ff
  • list.inactiveFocusBackground#343f55ff
  • list.inactiveSelectionBackground#343f55ff
  • list.inactiveSelectionForeground#f2f5fcff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2c384dff
  • menu.foreground#c8ccd7ff
  • menu.selectionBackground#343f55ff
  • menu.selectionForeground#f2f5fcff
  • menu.separatorBackground#4a5468ff
  • menubar.selectionBackground#343f55ff
  • menubar.selectionForeground#f2f5fcff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2c384dff
  • notificationLink.foreground#e0a8f7ff
  • notifications.background#2c384dff
  • notifications.border#2c384dff
  • panel.background#2c384dff
  • panel.border#2c384dff
  • panel.dropBackground#253248ff
  • panelTitle.activeBorder#e0a8f7ff
  • panelTitle.activeForeground#f2f5fcff
  • panelTitle.inactiveForeground#b8bdc9ff
  • peekView.border#2c384dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2c384dff
  • 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#2c384dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0f1d31ff
  • scrollbarSlider.activeBackground#656e81bf
  • scrollbarSlider.background#4a5468bf
  • scrollbarSlider.hoverBackground#576074bf
  • settings.checkboxBackground#253248ff
  • settings.checkboxBorder#656e81ff
  • settings.checkboxForeground#f2f5fcff
  • settings.dropdownBackground#2c384dff
  • settings.dropdownBorder#2c384dff
  • settings.dropdownForeground#f2f5fcff
  • settings.dropdownListBorder#3e495eff
  • settings.headerForeground#d5f7ffff
  • settings.modifiedItemIndicator#6a8dcbff
  • settings.numberInputBackground#2c384dff
  • settings.numberInputForeground#f2f5fcff
  • settings.textInputBackground#2c384dff
  • settings.textInputForeground#f2f5fcff
  • sideBar.background#2c384dff
  • sideBar.dropBackground#253248ff
  • sideBar.foreground#b8bdc9ff
  • sideBarSectionHeader.background#2c384dff
  • sideBarSectionHeader.foreground#656e81ff
  • sideBarTitle.foreground#656e81ff
  • statusBar.background#343f55ff
  • statusBar.debuggingBackground#995f15ff
  • statusBar.debuggingForeground#b8bdc9ff
  • statusBar.foreground#b8bdc9ff
  • statusBar.noFolderBackground#753a90ff
  • statusBar.noFolderForeground#b8bdc9ff
  • tab.activeBackground#2c384dff
  • tab.activeBorder#e0a8f7ff
  • tab.activeForeground#f2f5fcff
  • tab.activeModifiedBorder#e0a8f7bf
  • tab.border#2c384dff
  • tab.inactiveBackground#2c384dff
  • tab.inactiveForeground#b8bdc9ff
  • tab.inactiveModifiedBorder#e0a8f7bf
  • tab.unfocusedActiveForeground#f2f5fcff
  • tab.unfocusedActiveModifiedBorder#e0a8f780
  • tab.unfocusedInactiveForeground#b8bdc9ff
  • tab.unfocusedInactiveModifiedBorder#e0a8f780
  • terminal.ansiBlack#253248ff
  • terminal.ansiBlue#acceffff
  • terminal.ansiBrightBlack#656e81ff
  • terminal.ansiBrightBlue#acceffff
  • terminal.ansiBrightCyan#48deffff
  • terminal.ansiBrightGreen#79e1aaff
  • terminal.ansiBrightMagenta#ebbcfdff
  • terminal.ansiBrightRed#ffadafff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#fcbf80ff
  • terminal.ansiCyan#48deffff
  • terminal.ansiGreen#007e4fff
  • terminal.ansiMagenta#ebbcfdff
  • terminal.ansiRed#ae4d53ff
  • terminal.ansiWhite#e6e9f2ff
  • terminal.ansiYellow#fcbf80ff
  • terminal.background#253248ff
  • terminal.border#2c384dff
  • terminal.foreground#e6e9f2ff
  • terminal.selectionBackground#6a8dcb40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2c384dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#e0a8f7ff
  • textLink.foreground#e0a8f7ff
  • textPreformat.foreground#ebbcfdff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2c384dff
  • titleBar.activeForeground#b8bdc9ff
  • titleBar.inactiveBackground#2c384dff
  • titleBar.inactiveForeground#656e81ff
  • widget.shadow#1a273cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme