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#1e2a3fff
  • activityBar.dropBackground#18243aff
  • activityBar.foreground#cc95e3ff
  • activityBar.inactiveForeground#545d70ff
  • activityBarBadge.background#cc95e3bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#cc95e3bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#18243aff
  • breadcrumb.focusForeground#eceff7ff
  • breadcrumb.foreground#72798aff
  • breadcrumbPicker.background#1e2a3fff
  • button.background#9965afff
  • button.foreground#fdffffff
  • button.hoverBackground#a974bfff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1e2a3fff
  • debugToolBar.background#18243aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1e2a3fff
  • dropdown.border#1e2a3fff
  • dropdown.foreground#eceff7ff
  • editor.background#18243aff
  • editor.findMatchBackground#567ab640
  • editor.findMatchHighlightBackground#567ab640
  • editor.findRangeHighlightBackground#567ab640
  • editor.focusedStackFrameHighlightBackground#567ab640
  • editor.foreground#dadee7ff
  • editor.hoverHighlightBackground#567ab640
  • editor.inactiveSelectionBackground#567ab620
  • editor.lineHighlightBackground#1e2a3fff
  • editor.lineHighlightBorder#1e2a3fff
  • editor.rangeHighlightBackground#567ab640
  • editor.selectionBackground#567ab640
  • editor.selectionHighlightBackground#567ab620
  • editor.snippetFinalTabstopHighlightBorder#567ab640
  • editor.snippetTabstopHighlightBackground#567ab640
  • editor.stackFrameHighlightBackground#567ab640
  • editor.wordHighlightBackground#567ab620
  • editor.wordHighlightStrongBackground#567ab620
  • editorActiveLineNumber.foreground#72798aff
  • editorBracketMatch.background#567ab620
  • editorBracketMatch.border#88abeaff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a4a9b7ff
  • editorError.foreground#cd696dff
  • editorGroup.border#1e2a3fff
  • editorGroup.dropBackground#18243aff
  • editorGroupHeader.noTabsBackground#18243aff
  • editorGroupHeader.tabsBackground#1e2a3fff
  • editorGutter.addedBackground#00471eff
  • editorGutter.background#18243aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#711323ff
  • editorGutter.modifiedBackground#003c71ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1e2a3fff
  • editorHoverWidget.border#1e2a3fff
  • editorIndentGuide.activeBackground#303b4fff
  • editorIndentGuide.background#263247ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#72798aff
  • editorLineNumber.foreground#545d70ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cd696dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006c3eff
  • editorOverviewRuler.border#1e2a3fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9a3b43ff
  • editorOverviewRuler.errorForeground#cd696dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#365e97ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#18243aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1e2a3fff
  • editorSuggestWidget.border#1e2a3fff
  • editorSuggestWidget.foreground#eceff7ff
  • editorSuggestWidget.highlightForeground#eceff7ff
  • editorSuggestWidget.selectedBackground#263247ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1e2a3fff
  • editorWidget.border#1e2a3fff
  • errorForeground#cd696dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#567ab6ff
  • foreground#dadee7ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#72798aff
  • gitDecoration.modifiedResourceForeground#d69d5fff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#54bc88ff
  • input.background#18243aff
  • input.foreground#eceff7ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#cc95e3ff
  • inputValidation.errorBackground#55000dff
  • inputValidation.errorBorder#7d202dff
  • inputValidation.infoBackground#18243aff
  • inputValidation.infoBorder#3b4559ff
  • inputValidation.warningBackground#411800ff
  • inputValidation.warningBorder#653900ff
  • list.activeSelectionBackground#263247ff
  • list.activeSelectionForeground#eceff7ff
  • list.dropBackground#18243aff
  • list.errorForeground#cd696dff
  • list.focusBackground#263247ff
  • list.highlightForeground#eceff7ff
  • list.hoverBackground#263247ff
  • list.inactiveFocusBackground#263247ff
  • list.inactiveSelectionBackground#263247ff
  • list.inactiveSelectionForeground#eceff7ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1e2a3fff
  • menu.foreground#b6bbc7ff
  • menu.selectionBackground#263247ff
  • menu.selectionForeground#eceff7ff
  • menu.separatorBackground#3b4559ff
  • menubar.selectionBackground#263247ff
  • menubar.selectionForeground#eceff7ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1e2a3fff
  • notificationLink.foreground#cc95e3ff
  • notifications.background#1e2a3fff
  • notifications.border#1e2a3fff
  • panel.background#1e2a3fff
  • panel.border#1e2a3fff
  • panel.dropBackground#18243aff
  • panelTitle.activeBorder#cc95e3ff
  • panelTitle.activeForeground#eceff7ff
  • panelTitle.inactiveForeground#a4a9b7ff
  • peekView.border#1e2a3fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1e2a3fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#18243aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1e2a3fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000f24ff
  • scrollbarSlider.activeBackground#545d70bf
  • scrollbarSlider.background#3b4559bf
  • scrollbarSlider.hoverBackground#475064bf
  • settings.checkboxBackground#18243aff
  • settings.checkboxBorder#545d70ff
  • settings.checkboxForeground#eceff7ff
  • settings.dropdownBackground#1e2a3fff
  • settings.dropdownBorder#1e2a3fff
  • settings.dropdownForeground#eceff7ff
  • settings.dropdownListBorder#303b4fff
  • settings.headerForeground#cff1ffff
  • settings.modifiedItemIndicator#567ab6ff
  • settings.numberInputBackground#1e2a3fff
  • settings.numberInputForeground#eceff7ff
  • settings.textInputBackground#1e2a3fff
  • settings.textInputForeground#eceff7ff
  • sideBar.background#1e2a3fff
  • sideBar.dropBackground#18243aff
  • sideBar.foreground#a4a9b7ff
  • sideBarSectionHeader.background#1e2a3fff
  • sideBarSectionHeader.foreground#545d70ff
  • sideBarTitle.foreground#545d70ff
  • statusBar.background#263247ff
  • statusBar.debuggingBackground#854e00ff
  • statusBar.debuggingForeground#a4a9b7ff
  • statusBar.foreground#a4a9b7ff
  • statusBar.noFolderBackground#642b7fff
  • statusBar.noFolderForeground#a4a9b7ff
  • tab.activeBackground#1e2a3fff
  • tab.activeBorder#cc95e3ff
  • tab.activeForeground#eceff7ff
  • tab.activeModifiedBorder#cc95e3bf
  • tab.border#1e2a3fff
  • tab.inactiveBackground#1e2a3fff
  • tab.inactiveForeground#a4a9b7ff
  • tab.inactiveModifiedBorder#cc95e3bf
  • tab.unfocusedActiveForeground#eceff7ff
  • tab.unfocusedActiveModifiedBorder#cc95e380
  • tab.unfocusedInactiveForeground#a4a9b7ff
  • tab.unfocusedInactiveModifiedBorder#cc95e380
  • terminal.ansiBlack#18243aff
  • terminal.ansiBlue#9abcfdff
  • terminal.ansiBrightBlack#545d70ff
  • terminal.ansiBrightBlue#9abcfdff
  • terminal.ansiBrightCyan#29ccf3ff
  • terminal.ansiBrightGreen#66ce99ff
  • terminal.ansiBrightMagenta#d8abeaff
  • terminal.ansiBrightRed#ff9b9eff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#e9ae6fff
  • terminal.ansiCyan#29ccf3ff
  • terminal.ansiGreen#006c3eff
  • terminal.ansiMagenta#d8abeaff
  • terminal.ansiRed#9a3b43ff
  • terminal.ansiWhite#dadee7ff
  • terminal.ansiYellow#e9ae6fff
  • terminal.background#18243aff
  • terminal.border#1e2a3fff
  • terminal.foreground#dadee7ff
  • terminal.selectionBackground#567ab640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1e2a3fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#cc95e3ff
  • textLink.foreground#cc95e3ff
  • textPreformat.foreground#d8abeaff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1e2a3fff
  • titleBar.activeForeground#a4a9b7ff
  • titleBar.inactiveBackground#1e2a3fff
  • titleBar.inactiveForeground#545d70ff
  • widget.shadow#0d1a2eff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme