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#202842ff
  • activityBar.dropBackground#1a223cff
  • activityBar.foreground#6498f7ff
  • activityBar.inactiveForeground#555b75ff
  • activityBarBadge.background#6498f7bf
  • activityBarBadge.foreground#fbfeffff
  • badge.background#6498f7bf
  • badge.foreground#fbfeffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1a223cff
  • breadcrumb.focusForeground#ebeeffff
  • breadcrumb.foreground#727791ff
  • breadcrumbPicker.background#202842ff
  • button.background#085fb6ff
  • button.foreground#fbfeffff
  • button.hoverBackground#3171cbff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#202842ff
  • debugToolBar.background#1a223cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#202842ff
  • dropdown.border#202842ff
  • dropdown.foreground#ebeeffff
  • editor.background#1a223cff
  • editor.findMatchBackground#3d5e9a40
  • editor.findMatchHighlightBackground#3d5e9a40
  • editor.findRangeHighlightBackground#3d5e9a40
  • editor.focusedStackFrameHighlightBackground#3d5e9a40
  • editor.foreground#d9ddf2ff
  • editor.hoverHighlightBackground#3d5e9a40
  • editor.inactiveSelectionBackground#3d5e9a20
  • editor.lineHighlightBackground#202842ff
  • editor.lineHighlightBorder#202842ff
  • editor.rangeHighlightBackground#3d5e9a40
  • editor.selectionBackground#3d5e9a40
  • editor.selectionHighlightBackground#3d5e9a20
  • editor.snippetFinalTabstopHighlightBorder#3d5e9a40
  • editor.snippetTabstopHighlightBackground#3d5e9a40
  • editor.stackFrameHighlightBackground#3d5e9a40
  • editor.wordHighlightBackground#3d5e9a20
  • editor.wordHighlightStrongBackground#3d5e9a20
  • editorActiveLineNumber.foreground#727791ff
  • editorBracketMatch.background#3d5e9a20
  • editorBracketMatch.border#6498f7ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcc00ff
  • editorError.foreground#db004cff
  • editorGroup.border#202842ff
  • editorGroup.dropBackground#1a223cff
  • editorGroupHeader.noTabsBackground#1a223cff
  • editorGroupHeader.tabsBackground#202842ff
  • editorGutter.addedBackground#002000ff
  • editorGutter.background#1a223cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#610000ff
  • editorGutter.modifiedBackground#001849ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#202842ff
  • editorHoverWidget.border#202842ff
  • editorIndentGuide.activeBackground#323953ff
  • editorIndentGuide.background#28304aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#727791ff
  • editorLineNumber.foreground#555b75ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#db004cff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#1c4600ff
  • editorOverviewRuler.border#202842ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#97001eff
  • editorOverviewRuler.errorForeground#db004cbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#103e76ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1a223cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#202842ff
  • editorSuggestWidget.border#202842ff
  • editorSuggestWidget.foreground#ebeeffff
  • editorSuggestWidget.highlightForeground#ebeeffff
  • editorSuggestWidget.selectedBackground#28304aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#202842ff
  • editorWidget.border#202842ff
  • errorForeground#db004cff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3d5e9aff
  • foreground#d9ddf2ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#727791ff
  • gitDecoration.modifiedResourceForeground#bf8d1eff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#79a33fff
  • input.background#1a223cff
  • input.foreground#ebeeffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#6498f7ff
  • inputValidation.errorBackground#4e0000ff
  • inputValidation.errorBorder#710000ff
  • inputValidation.infoBackground#1a223cff
  • inputValidation.infoBorder#3c435dff
  • inputValidation.warningBackground#2c0000ff
  • inputValidation.warningBorder#3e1900ff
  • list.activeSelectionBackground#28304aff
  • list.activeSelectionForeground#ebeeffff
  • list.dropBackground#1a223cff
  • list.errorForeground#db004cff
  • list.focusBackground#28304aff
  • list.highlightForeground#ebeeffff
  • list.hoverBackground#28304aff
  • list.inactiveFocusBackground#28304aff
  • list.inactiveSelectionBackground#28304aff
  • list.inactiveSelectionForeground#ebeeffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#202842ff
  • menu.foreground#b5b9d0ff
  • menu.selectionBackground#28304aff
  • menu.selectionForeground#ebeeffff
  • menu.separatorBackground#3c435dff
  • menubar.selectionBackground#28304aff
  • menubar.selectionForeground#ebeeffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#202842ff
  • notificationLink.foreground#6498f7ff
  • notifications.background#202842ff
  • notifications.border#202842ff
  • panel.background#202842ff
  • panel.border#202842ff
  • panel.dropBackground#1a223cff
  • panelTitle.activeBorder#6498f7ff
  • panelTitle.activeForeground#ebeeffff
  • panelTitle.inactiveForeground#a4a8c0ff
  • peekView.border#202842ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#202842ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1a223cff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#202842ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#030c26ff
  • scrollbarSlider.activeBackground#555b75bf
  • scrollbarSlider.background#3c435dbf
  • scrollbarSlider.hoverBackground#484e68bf
  • settings.checkboxBackground#1a223cff
  • settings.checkboxBorder#555b75ff
  • settings.checkboxForeground#ebeeffff
  • settings.dropdownBackground#202842ff
  • settings.dropdownBorder#202842ff
  • settings.dropdownForeground#ebeeffff
  • settings.dropdownListBorder#323953ff
  • settings.headerForeground#d0ecffff
  • settings.modifiedItemIndicator#3d5e9aff
  • settings.numberInputBackground#202842ff
  • settings.numberInputForeground#ebeeffff
  • settings.textInputBackground#202842ff
  • settings.textInputForeground#ebeeffff
  • sideBar.background#202842ff
  • sideBar.dropBackground#1a223cff
  • sideBar.foreground#a4a8c0ff
  • sideBarSectionHeader.background#202842ff
  • sideBarSectionHeader.foreground#555b75ff
  • sideBarTitle.foreground#555b75ff
  • statusBar.background#28304aff
  • statusBar.debuggingBackground#820000ff
  • statusBar.debuggingForeground#a4a8c0ff
  • statusBar.foreground#a4a8c0ff
  • statusBar.noFolderBackground#3d005aff
  • statusBar.noFolderForeground#a4a8c0ff
  • tab.activeBackground#202842ff
  • tab.activeBorder#6498f7ff
  • tab.activeForeground#ebeeffff
  • tab.activeModifiedBorder#6498f7bf
  • tab.border#202842ff
  • tab.inactiveBackground#202842ff
  • tab.inactiveForeground#a4a8c0ff
  • tab.inactiveModifiedBorder#6498f7bf
  • tab.unfocusedActiveForeground#ebeeffff
  • tab.unfocusedActiveModifiedBorder#6498f780
  • tab.unfocusedInactiveForeground#a4a8c0ff
  • tab.unfocusedInactiveModifiedBorder#6498f780
  • terminal.ansiBlack#00000fff
  • terminal.ansiBlue#78aaffff
  • terminal.ansiBrightBlack#636ea0ff
  • terminal.ansiBrightBlue#78aaffff
  • terminal.ansiBrightCyan#73dfffff
  • terminal.ansiBrightGreen#bfea81ff
  • terminal.ansiBrightMagenta#d094f9ff
  • terminal.ansiBrightRed#ff476dff
  • terminal.ansiBrightWhite#faffffff
  • terminal.ansiBrightYellow#ffca5dff
  • terminal.ansiCyan#73dfffff
  • terminal.ansiGreen#bfea81ff
  • terminal.ansiMagenta#d094f9ff
  • terminal.ansiRed#ff476dff
  • terminal.ansiWhite#faffffff
  • terminal.ansiYellow#ffca5dff
  • terminal.background#1a223cff
  • terminal.border#202842ff
  • terminal.foreground#d9ddf2ff
  • terminal.selectionBackground#3d5e9a40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#202842ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#6498f7ff
  • textLink.foreground#6498f7ff
  • textPreformat.foreground#d094f9ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#202842ff
  • titleBar.activeForeground#a4a8c0ff
  • titleBar.inactiveBackground#202842ff
  • titleBar.inactiveForeground#555b75ff
  • widget.shadow#0f1831ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Material Theme Palenight - Coding Theme