Skip to main content
Coding Theme

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#0e1e40ff
  • activityBar.dropBackground#05183aff
  • activityBar.foreground#5094fdff
  • activityBar.inactiveForeground#495276ff
  • activityBarBadge.background#5094fdbf
  • activityBarBadge.foreground#f8feffff
  • badge.background#5094fdbf
  • badge.foreground#f8feffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#05183aff
  • breadcrumb.focusForeground#e7edffff
  • breadcrumb.foreground#677094ff
  • breadcrumbPicker.background#0e1e40ff
  • button.background#0058b9ff
  • button.foreground#f8feffff
  • button.hoverBackground#006bcfff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0e1e40ff
  • debugToolBar.background#05183aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0e1e40ff
  • dropdown.border#0e1e40ff
  • dropdown.foreground#e7edffff
  • editor.background#05183aff
  • editor.findMatchBackground#26589d40
  • editor.findMatchHighlightBackground#26589d40
  • editor.findRangeHighlightBackground#26589d40
  • editor.focusedStackFrameHighlightBackground#26589d40
  • editor.foreground#d4dbfdff
  • editor.hoverHighlightBackground#26589d40
  • editor.inactiveSelectionBackground#26589d20
  • editor.lineHighlightBackground#0e1e40ff
  • editor.lineHighlightBorder#0e1e40ff
  • editor.rangeHighlightBackground#26589d40
  • editor.selectionBackground#26589d40
  • editor.selectionHighlightBackground#26589d20
  • editor.snippetFinalTabstopHighlightBorder#26589d40
  • editor.snippetTabstopHighlightBackground#26589d40
  • editor.stackFrameHighlightBackground#26589d40
  • editor.wordHighlightBackground#26589d20
  • editor.wordHighlightStrongBackground#26589d20
  • editorActiveLineNumber.foreground#677094ff
  • editorBracketMatch.background#26589d20
  • editorBracketMatch.border#5094fdff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcb00ff
  • editorError.foreground#da0043ff
  • editorGroup.border#0e1e40ff
  • editorGroup.dropBackground#05183aff
  • editorGroupHeader.noTabsBackground#05183aff
  • editorGroupHeader.tabsBackground#0e1e40ff
  • editorGutter.addedBackground#001900ff
  • editorGutter.background#05183aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5a0000ff
  • editorGutter.modifiedBackground#000e48ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0e1e40ff
  • editorHoverWidget.border#0e1e40ff
  • editorIndentGuide.activeBackground#222f52ff
  • editorIndentGuide.background#182648ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#677094ff
  • editorLineNumber.foreground#495276ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#da0043ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#0e3f00ff
  • editorOverviewRuler.border#0e1e40ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#930016ff
  • editorOverviewRuler.errorForeground#da0043bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#003677ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#05183aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0e1e40ff
  • editorSuggestWidget.border#0e1e40ff
  • editorSuggestWidget.foreground#e7edffff
  • editorSuggestWidget.highlightForeground#e7edffff
  • editorSuggestWidget.selectedBackground#182648ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0e1e40ff
  • editorWidget.border#0e1e40ff
  • errorForeground#da0043ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#26589dff
  • foreground#d4dbfdff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#677094ff
  • gitDecoration.modifiedResourceForeground#bd8800ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6fa02cff
  • input.background#05183aff
  • input.foreground#e7edffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#5094fdff
  • inputValidation.errorBackground#530000ff
  • inputValidation.errorBorder#6a0000ff
  • inputValidation.infoBackground#05183aff
  • inputValidation.infoBorder#2e395dff
  • inputValidation.warningBackground#2f0000ff
  • inputValidation.warningBorder#390f00ff
  • list.activeSelectionBackground#182648ff
  • list.activeSelectionForeground#e7edffff
  • list.dropBackground#05183aff
  • list.errorForeground#da0043ff
  • list.focusBackground#182648ff
  • list.highlightForeground#e7edffff
  • list.hoverBackground#182648ff
  • list.inactiveFocusBackground#182648ff
  • list.inactiveSelectionBackground#182648ff
  • list.inactiveSelectionForeground#e7edffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0e1e40ff
  • menu.foreground#aeb5d8ff
  • menu.selectionBackground#182648ff
  • menu.selectionForeground#e7edffff
  • menu.separatorBackground#2e395dff
  • menubar.selectionBackground#182648ff
  • menubar.selectionForeground#e7edffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0e1e40ff
  • notificationLink.foreground#5094fdff
  • notifications.background#0e1e40ff
  • notifications.border#0e1e40ff
  • panel.background#0e1e40ff
  • panel.border#0e1e40ff
  • panel.dropBackground#05183aff
  • panelTitle.activeBorder#5094fdff
  • panelTitle.activeForeground#e7edffff
  • panelTitle.inactiveForeground#9ca3c7ff
  • peekView.border#0e1e40ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0e1e40ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#05183aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0e1e40ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000027ff
  • scrollbarSlider.activeBackground#495276bf
  • scrollbarSlider.background#2e395dbf
  • scrollbarSlider.hoverBackground#3b4569bf
  • settings.checkboxBackground#05183aff
  • settings.checkboxBorder#495276ff
  • settings.checkboxForeground#e7edffff
  • settings.dropdownBackground#0e1e40ff
  • settings.dropdownBorder#0e1e40ff
  • settings.dropdownForeground#e7edffff
  • settings.dropdownListBorder#222f52ff
  • settings.headerForeground#c8ebffff
  • settings.modifiedItemIndicator#26589dff
  • settings.numberInputBackground#0e1e40ff
  • settings.numberInputForeground#e7edffff
  • settings.textInputBackground#0e1e40ff
  • settings.textInputForeground#e7edffff
  • sideBar.background#0e1e40ff
  • sideBar.dropBackground#05183aff
  • sideBar.foreground#9ca3c7ff
  • sideBarSectionHeader.background#0e1e40ff
  • sideBarSectionHeader.foreground#495276ff
  • sideBarTitle.foreground#495276ff
  • statusBar.background#182648ff
  • statusBar.debuggingBackground#7d0000ff
  • statusBar.debuggingForeground#9ca3c7ff
  • statusBar.foreground#9ca3c7ff
  • statusBar.noFolderBackground#340057ff
  • statusBar.noFolderForeground#9ca3c7ff
  • tab.activeBackground#0e1e40ff
  • tab.activeBorder#5094fdff
  • tab.activeForeground#e7edffff
  • tab.activeModifiedBorder#5094fdbf
  • tab.border#0e1e40ff
  • tab.inactiveBackground#0e1e40ff
  • tab.inactiveForeground#9ca3c7ff
  • tab.inactiveModifiedBorder#5094fdbf
  • tab.unfocusedActiveForeground#e7edffff
  • tab.unfocusedActiveModifiedBorder#5094fd80
  • tab.unfocusedInactiveForeground#9ca3c7ff
  • tab.unfocusedInactiveModifiedBorder#5094fd80
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#6daaffff
  • terminal.ansiBrightBlack#5e6dabff
  • terminal.ansiBrightBlue#6daaffff
  • terminal.ansiBrightCyan#54e2ffff
  • terminal.ansiBrightGreen#baeb75ff
  • terminal.ansiBrightMagenta#d08dfeff
  • terminal.ansiBrightRed#ff386aff
  • terminal.ansiBrightWhite#f5ffffff
  • terminal.ansiBrightYellow#ffc94eff
  • terminal.ansiCyan#54e2ffff
  • terminal.ansiGreen#baeb75ff
  • terminal.ansiMagenta#d08dfeff
  • terminal.ansiRed#ff386aff
  • terminal.ansiWhite#f5ffffff
  • terminal.ansiYellow#ffc94eff
  • terminal.background#05183aff
  • terminal.border#0e1e40ff
  • terminal.foreground#d4dbfdff
  • terminal.selectionBackground#26589d40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0e1e40ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#5094fdff
  • textLink.foreground#5094fdff
  • textPreformat.foreground#d08dfeff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0e1e40ff
  • titleBar.activeForeground#9ca3c7ff
  • titleBar.inactiveBackground#0e1e40ff
  • titleBar.inactiveForeground#495276ff
  • widget.shadow#000c2fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#9fabe5ff
emphasisitalic
strongbold
header#000080
comment#5e6dabff
constant.language#ff825dff
constant.numeric#ff825dff
constant.regexp#d08dfeff
entity.name.tag#ff6170ff
entity.name.tag.css#ffc94eff
entity.other.attribute-name#ce8bfcff
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#ce8bfcff
invalid#f44747
markup.underlineunderline
markup.bold#ce8bfcffbold
markup.heading#ce8bfcffbold
markup.italicitalic
markup.inserted#ff825dff
markup.deleted#baeb75ff
markup.changed#ce8bfcff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#baeb75ff
punctuation.definition.tag#54e2ffff
meta.preprocessor#ce8bfcff
meta.preprocessor.string#baeb75ff
meta.preprocessor.numeric#ff825dff
meta.structure.dictionary.key.python#d4dbfdff
meta.diff.header#ce8bfcff
storage#ce8bfcff
storage.type#ce8bfcff
storage.modifier#ce8bfcff
string#baeb75ff
string.tag#baeb75ff
string.value#baeb75ff
string.regexp#baeb75ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#aeb5d8ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9fabe5ff
keyword#ce8bfcff
keyword.control#ce8bfcff
keyword.operator#aeb5d8ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ce8bfcff
keyword.other.unit#ff825dff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ce8bfcff
support.function.git-rebase#6daaffff
constant.sha.git-rebase#ff825dff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ce8bfcff
entity.name.function, support.function, support.constant.handlebars#6daaffff
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#9bbfffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9bbfffff
keyword.control#ce8bfcff
variable, meta.definition.variable.name, support.variable, entity.name.variable#9fabe5ff
meta.object-literal.key#d4dbfdff
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#baeb75ff
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#54e2ffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d08dfeff
keyword.operator.or.regexp, keyword.control.anchor.regexp#aeb5d8ff
keyword.operator.quantifier.regexp#ff825dff
constant.character#ce8bfcff
constant.character.escape#54e2ffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#baeb75ff
string.template#baeb75ff
storage.type.function#ce8bfcff
support.class.component.js#ff6170ff
variable.parameter#ff386aff
variable.other.property#d4dbfdff
support.function, support.constant.handlebars#6daaffff
support.type, support.class, support.constant.math#ffc94eff
support.type.vendored.property-name, support.type.property-name#d4dbfdff
support.function#6daaffff
variable.other.constant#ff6170ff
meta.brace.round.js, meta.brace.square.js, punctuation#54e2ffff
support.type.property-name.json#d4dbfdff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#aeb5d8ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ce8bfcff
entity.name.type.class, entity.name.type.module#9bbfffff
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#5e6dabff
markup.headingnormal
Dainty – Material Theme Palenight by Alexander Teinum - VS Code Theme