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#0a182bff
  • activityBar.dropBackground#021125ff
  • activityBar.foreground#c38cd9ff
  • activityBar.inactiveForeground#444d5fff
  • activityBarBadge.background#c38cd9bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#c38cd9bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#021125ff
  • breadcrumb.focusForeground#eaedf5ff
  • breadcrumb.foreground#646b7cff
  • breadcrumbPicker.background#0a182bff
  • button.background#8a57a0ff
  • button.foreground#fdffffff
  • button.hoverBackground#9c68b2ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0a182bff
  • debugToolBar.background#021125ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0a182bff
  • dropdown.border#0a182bff
  • dropdown.foreground#eaedf5ff
  • editor.background#021125ff
  • editor.findMatchBackground#476da740
  • editor.findMatchHighlightBackground#476da740
  • editor.findRangeHighlightBackground#476da740
  • editor.focusedStackFrameHighlightBackground#476da740
  • editor.foreground#d7dae3ff
  • editor.hoverHighlightBackground#476da740
  • editor.inactiveSelectionBackground#476da720
  • editor.lineHighlightBackground#0a182bff
  • editor.lineHighlightBorder#0a182bff
  • editor.rangeHighlightBackground#476da740
  • editor.selectionBackground#476da740
  • editor.selectionHighlightBackground#476da720
  • editor.snippetFinalTabstopHighlightBorder#476da740
  • editor.snippetTabstopHighlightBackground#476da740
  • editor.stackFrameHighlightBackground#476da740
  • editor.wordHighlightBackground#476da720
  • editor.wordHighlightStrongBackground#476da720
  • editorActiveLineNumber.foreground#646b7cff
  • editorBracketMatch.background#476da720
  • editorBracketMatch.border#7fa2e1ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9ba0aeff
  • editorError.foreground#bf5c61ff
  • editorGroup.border#0a182bff
  • editorGroup.dropBackground#021125ff
  • editorGroupHeader.noTabsBackground#021125ff
  • editorGroupHeader.tabsBackground#0a182bff
  • editorGutter.addedBackground#00340cff
  • editorGutter.background#021125ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5a0013ff
  • editorGutter.modifiedBackground#002a5cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0a182bff
  • editorHoverWidget.border#0a182bff
  • editorIndentGuide.activeBackground#1e293cff
  • editorIndentGuide.background#141f33ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#646b7cff
  • editorLineNumber.foreground#444d5fff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#bf5c61ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005b2fff
  • editorOverviewRuler.border#0a182bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#882a34ff
  • editorOverviewRuler.errorForeground#bf5c61bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#224e86ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#021125ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0a182bff
  • editorSuggestWidget.border#0a182bff
  • editorSuggestWidget.foreground#eaedf5ff
  • editorSuggestWidget.highlightForeground#eaedf5ff
  • editorSuggestWidget.selectedBackground#141f33ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0a182bff
  • editorWidget.border#0a182bff
  • errorForeground#bf5c61ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#476da7ff
  • foreground#d7dae3ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#646b7cff
  • gitDecoration.modifiedResourceForeground#cc9456ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#4ab380ff
  • input.background#021125ff
  • input.foreground#eaedf5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c38cd9ff
  • inputValidation.errorBackground#3d0000ff
  • inputValidation.errorBorder#68061dff
  • inputValidation.infoBackground#021125ff
  • inputValidation.infoBorder#293347ff
  • inputValidation.warningBackground#300100ff
  • inputValidation.warningBorder#512800ff
  • list.activeSelectionBackground#141f33ff
  • list.activeSelectionForeground#eaedf5ff
  • list.dropBackground#021125ff
  • list.errorForeground#bf5c61ff
  • list.focusBackground#141f33ff
  • list.highlightForeground#eaedf5ff
  • list.hoverBackground#141f33ff
  • list.inactiveFocusBackground#141f33ff
  • list.inactiveSelectionBackground#141f33ff
  • list.inactiveSelectionForeground#eaedf5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0a182bff
  • menu.foreground#afb3bfff
  • menu.selectionBackground#141f33ff
  • menu.selectionForeground#eaedf5ff
  • menu.separatorBackground#293347ff
  • menubar.selectionBackground#141f33ff
  • menubar.selectionForeground#eaedf5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0a182bff
  • notificationLink.foreground#c38cd9ff
  • notifications.background#0a182bff
  • notifications.border#0a182bff
  • panel.background#0a182bff
  • panel.border#0a182bff
  • panel.dropBackground#021125ff
  • panelTitle.activeBorder#c38cd9ff
  • panelTitle.activeForeground#eaedf5ff
  • panelTitle.inactiveForeground#9ba0aeff
  • peekView.border#0a182bff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0a182bff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#021125ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0a182bff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00011cff
  • scrollbarSlider.activeBackground#444d5fbf
  • scrollbarSlider.background#293347bf
  • scrollbarSlider.hoverBackground#363f52bf
  • settings.checkboxBackground#021125ff
  • settings.checkboxBorder#444d5fff
  • settings.checkboxForeground#eaedf5ff
  • settings.dropdownBackground#0a182bff
  • settings.dropdownBorder#0a182bff
  • settings.dropdownForeground#eaedf5ff
  • settings.dropdownListBorder#1e293cff
  • settings.headerForeground#cdefffff
  • settings.modifiedItemIndicator#476da7ff
  • settings.numberInputBackground#0a182bff
  • settings.numberInputForeground#eaedf5ff
  • settings.textInputBackground#0a182bff
  • settings.textInputForeground#eaedf5ff
  • sideBar.background#0a182bff
  • sideBar.dropBackground#021125ff
  • sideBar.foreground#9ba0aeff
  • sideBarSectionHeader.background#0a182bff
  • sideBarSectionHeader.foreground#444d5fff
  • sideBarTitle.foreground#444d5fff
  • statusBar.background#141f33ff
  • statusBar.debuggingBackground#733f00ff
  • statusBar.debuggingForeground#9ba0aeff
  • statusBar.foreground#9ba0aeff
  • statusBar.noFolderBackground#50176bff
  • statusBar.noFolderForeground#9ba0aeff
  • tab.activeBackground#0a182bff
  • tab.activeBorder#c38cd9ff
  • tab.activeForeground#eaedf5ff
  • tab.activeModifiedBorder#c38cd9bf
  • tab.border#0a182bff
  • tab.inactiveBackground#0a182bff
  • tab.inactiveForeground#9ba0aeff
  • tab.inactiveModifiedBorder#c38cd9bf
  • tab.unfocusedActiveForeground#eaedf5ff
  • tab.unfocusedActiveModifiedBorder#c38cd980
  • tab.unfocusedInactiveForeground#9ba0aeff
  • tab.unfocusedInactiveModifiedBorder#c38cd980
  • terminal.ansiBlack#021125ff
  • terminal.ansiBlue#93b5f5ff
  • terminal.ansiBrightBlack#444d5fff
  • terminal.ansiBrightBlue#93b5f5ff
  • terminal.ansiBrightCyan#15c5ecff
  • terminal.ansiBrightGreen#5fc792ff
  • terminal.ansiBrightMagenta#d1a3e3ff
  • terminal.ansiBrightRed#fe9497ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#e1a768ff
  • terminal.ansiCyan#15c5ecff
  • terminal.ansiGreen#005b2fff
  • terminal.ansiMagenta#d1a3e3ff
  • terminal.ansiRed#882a34ff
  • terminal.ansiWhite#d7dae3ff
  • terminal.ansiYellow#e1a768ff
  • terminal.background#021125ff
  • terminal.border#0a182bff
  • terminal.foreground#d7dae3ff
  • terminal.selectionBackground#476da740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0a182bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c38cd9ff
  • textLink.foreground#c38cd9ff
  • textPreformat.foreground#d1a3e3ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0a182bff
  • titleBar.activeForeground#9ba0aeff
  • titleBar.inactiveBackground#0a182bff
  • titleBar.inactiveForeground#444d5fff
  • widget.shadow#00011cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme