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#021535ff
  • activityBar.dropBackground#000c2fff
  • activityBar.foreground#4a8ff8ff
  • activityBar.inactiveForeground#404a6dff
  • activityBarBadge.background#4a8ff8bf
  • activityBarBadge.foreground#f8feffff
  • badge.background#4a8ff8bf
  • badge.foreground#f8feffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#000c2fff
  • breadcrumb.focusForeground#e6ecffff
  • breadcrumb.foreground#60698cff
  • breadcrumbPicker.background#021535ff
  • button.background#0052b1ff
  • button.foreground#f8feffff
  • button.hoverBackground#0065c8ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#021535ff
  • debugToolBar.background#000c2fff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#021535ff
  • dropdown.border#021535ff
  • dropdown.foreground#e6ecffff
  • editor.background#000c2fff
  • editor.findMatchBackground#1b519640
  • editor.findMatchHighlightBackground#1b519640
  • editor.findRangeHighlightBackground#1b519640
  • editor.focusedStackFrameHighlightBackground#1b519640
  • editor.foreground#d2d9fbff
  • editor.hoverHighlightBackground#1b519640
  • editor.inactiveSelectionBackground#1b519620
  • editor.lineHighlightBackground#021535ff
  • editor.lineHighlightBorder#021535ff
  • editor.rangeHighlightBackground#1b519640
  • editor.selectionBackground#1b519640
  • editor.selectionHighlightBackground#1b519620
  • editor.snippetFinalTabstopHighlightBorder#1b519640
  • editor.snippetTabstopHighlightBackground#1b519640
  • editor.stackFrameHighlightBackground#1b519640
  • editor.wordHighlightBackground#1b519620
  • editor.wordHighlightStrongBackground#1b519620
  • editorActiveLineNumber.foreground#60698cff
  • editorBracketMatch.background#1b519620
  • editorBracketMatch.border#4a8ff8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcb00ff
  • editorError.foreground#d2003eff
  • editorGroup.border#021535ff
  • editorGroup.dropBackground#000c2fff
  • editorGroupHeader.noTabsBackground#000c2fff
  • editorGroupHeader.tabsBackground#021535ff
  • editorGutter.addedBackground#001300ff
  • editorGutter.background#000c2fff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#530000ff
  • editorGutter.modifiedBackground#000241ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#021535ff
  • editorHoverWidget.border#021535ff
  • editorIndentGuide.activeBackground#182647ff
  • editorIndentGuide.background#0c1c3eff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#60698cff
  • editorLineNumber.foreground#404a6dff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d2003eff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#093700ff
  • editorOverviewRuler.border#021535ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#88000eff
  • editorOverviewRuler.errorForeground#d2003ebf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#002f6eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#000c2fff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#021535ff
  • editorSuggestWidget.border#021535ff
  • editorSuggestWidget.foreground#e6ecffff
  • editorSuggestWidget.highlightForeground#e6ecffff
  • editorSuggestWidget.selectedBackground#0c1c3eff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#021535ff
  • editorWidget.border#021535ff
  • errorForeground#d2003eff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#1b5196ff
  • foreground#d2d9fbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#60698cff
  • gitDecoration.modifiedResourceForeground#b88300ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6b9b27ff
  • input.background#000c2fff
  • input.foreground#e6ecffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#4a8ff8ff
  • inputValidation.errorBackground#530000ff
  • inputValidation.errorBorder#5f0000ff
  • inputValidation.infoBackground#000c2fff
  • inputValidation.infoBorder#243053ff
  • inputValidation.warningBackground#2f0000ff
  • inputValidation.warningBorder#340300ff
  • list.activeSelectionBackground#0c1c3eff
  • list.activeSelectionForeground#e6ecffff
  • list.dropBackground#000c2fff
  • list.errorForeground#d2003eff
  • list.focusBackground#0c1c3eff
  • list.highlightForeground#e6ecffff
  • list.hoverBackground#0c1c3eff
  • list.inactiveFocusBackground#0c1c3eff
  • list.inactiveSelectionBackground#0c1c3eff
  • list.inactiveSelectionForeground#e6ecffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#021535ff
  • menu.foreground#aab1d4ff
  • menu.selectionBackground#0c1c3eff
  • menu.selectionForeground#e6ecffff
  • menu.separatorBackground#243053ff
  • menubar.selectionBackground#0c1c3eff
  • menubar.selectionForeground#e6ecffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#021535ff
  • notificationLink.foreground#4a8ff8ff
  • notifications.background#021535ff
  • notifications.border#021535ff
  • panel.background#021535ff
  • panel.border#021535ff
  • panel.dropBackground#000c2fff
  • panelTitle.activeBorder#4a8ff8ff
  • panelTitle.activeForeground#e6ecffff
  • panelTitle.inactiveForeground#979ec2ff
  • peekView.border#021535ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#021535ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000c2fff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#021535ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000027ff
  • scrollbarSlider.activeBackground#404a6dbf
  • scrollbarSlider.background#243053bf
  • scrollbarSlider.hoverBackground#323c60bf
  • settings.checkboxBackground#000c2fff
  • settings.checkboxBorder#404a6dff
  • settings.checkboxForeground#e6ecffff
  • settings.dropdownBackground#021535ff
  • settings.dropdownBorder#021535ff
  • settings.dropdownForeground#e6ecffff
  • settings.dropdownListBorder#182647ff
  • settings.headerForeground#c7eaffff
  • settings.modifiedItemIndicator#1b5196ff
  • settings.numberInputBackground#021535ff
  • settings.numberInputForeground#e6ecffff
  • settings.textInputBackground#021535ff
  • settings.textInputForeground#e6ecffff
  • sideBar.background#021535ff
  • sideBar.dropBackground#000c2fff
  • sideBar.foreground#979ec2ff
  • sideBarSectionHeader.background#021535ff
  • sideBarSectionHeader.foreground#404a6dff
  • sideBarTitle.foreground#404a6dff
  • statusBar.background#0c1c3eff
  • statusBar.debuggingBackground#730000ff
  • statusBar.debuggingForeground#979ec2ff
  • statusBar.foreground#979ec2ff
  • statusBar.noFolderBackground#2a004dff
  • statusBar.noFolderForeground#979ec2ff
  • tab.activeBackground#021535ff
  • tab.activeBorder#4a8ff8ff
  • tab.activeForeground#e6ecffff
  • tab.activeModifiedBorder#4a8ff8bf
  • tab.border#021535ff
  • tab.inactiveBackground#021535ff
  • tab.inactiveForeground#979ec2ff
  • tab.inactiveModifiedBorder#4a8ff8bf
  • tab.unfocusedActiveForeground#e6ecffff
  • tab.unfocusedActiveModifiedBorder#4a8ff880
  • tab.unfocusedInactiveForeground#979ec2ff
  • tab.unfocusedInactiveModifiedBorder#4a8ff880
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#6daaffff
  • terminal.ansiBrightBlack#5e6dabff
  • terminal.ansiBrightBlue#6daaffff
  • terminal.ansiBrightCyan#54e2ffff
  • terminal.ansiBrightGreen#baeb75ff
  • terminal.ansiBrightMagenta#cc89faff
  • terminal.ansiBrightRed#ff386aff
  • terminal.ansiBrightWhite#f5ffffff
  • terminal.ansiBrightYellow#ffc94eff
  • terminal.ansiCyan#54e2ffff
  • terminal.ansiGreen#baeb75ff
  • terminal.ansiMagenta#cc89faff
  • terminal.ansiRed#ff386aff
  • terminal.ansiWhite#f5ffffff
  • terminal.ansiYellow#ffc94eff
  • terminal.background#000c2fff
  • terminal.border#021535ff
  • terminal.foreground#d2d9fbff
  • terminal.selectionBackground#1b519640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#021535ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#4a8ff8ff
  • textLink.foreground#4a8ff8ff
  • textPreformat.foreground#cc89faff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#021535ff
  • titleBar.activeForeground#979ec2ff
  • titleBar.inactiveBackground#021535ff
  • titleBar.inactiveForeground#404a6dff
  • widget.shadow#000027ff

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#cc89faff
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#d2d9fbff
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#aab1d4ff
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#aab1d4ff
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#98bcffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#98bcffff
keyword.control#ce8bfcff
variable, meta.definition.variable.name, support.variable, entity.name.variable#9fabe5ff
meta.object-literal.key#d2d9fbff
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#cc89faff
keyword.operator.or.regexp, keyword.control.anchor.regexp#aab1d4ff
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#d2d9fbff
support.function, support.constant.handlebars#6daaffff
support.type, support.class, support.constant.math#ffc94eff
support.type.vendored.property-name, support.type.property-name#d2d9fbff
support.function#6daaffff
variable.other.constant#ff6170ff
meta.brace.round.js, meta.brace.square.js, punctuation#54e2ffff
support.type.property-name.json#d2d9fbff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#aab1d4ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ce8bfcff
entity.name.type.class, entity.name.type.module#98bcffff
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

Shiki preview

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

Loading...

Dainty – Material Theme Palenight - Coding Theme