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#323c44ff
  • activityBar.dropBackground#2c363fff
  • activityBar.foreground#00bc9bff
  • activityBar.inactiveForeground#646b72ff
  • activityBarBadge.background#00bc9bbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00bc9bbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2c363fff
  • breadcrumb.focusForeground#f0f0f0ff
  • breadcrumb.foreground#7f858aff
  • breadcrumbPicker.background#323c44ff
  • button.background#008367ff
  • button.foreground#ffffffff
  • button.hoverBackground#009577ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#323c44ff
  • debugToolBar.background#2c363fff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#323c44ff
  • dropdown.border#323c44ff
  • dropdown.foreground#f0f0f0ff
  • editor.background#2c363fff
  • editor.findMatchBackground#1e72ae40
  • editor.findMatchHighlightBackground#1e72ae40
  • editor.findRangeHighlightBackground#1e72ae40
  • editor.focusedStackFrameHighlightBackground#1e72ae40
  • editor.foreground#e0e1e1ff
  • editor.hoverHighlightBackground#1e72ae40
  • editor.inactiveSelectionBackground#1e72ae20
  • editor.lineHighlightBackground#323c44ff
  • editor.lineHighlightBorder#323c44ff
  • editor.rangeHighlightBackground#1e72ae40
  • editor.selectionBackground#1e72ae40
  • editor.selectionHighlightBackground#1e72ae20
  • editor.snippetFinalTabstopHighlightBorder#1e72ae40
  • editor.snippetTabstopHighlightBackground#1e72ae40
  • editor.stackFrameHighlightBackground#1e72ae40
  • editor.wordHighlightBackground#1e72ae20
  • editor.wordHighlightStrongBackground#1e72ae20
  • editorActiveLineNumber.foreground#7f858aff
  • editorBracketMatch.background#1e72ae20
  • editorBracketMatch.border#1baaffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff3d81ff
  • editorError.foreground#f7005fff
  • editorGroup.border#323c44ff
  • editorGroup.dropBackground#2c363fff
  • editorGroupHeader.noTabsBackground#2c363fff
  • editorGroupHeader.tabsBackground#323c44ff
  • editorGutter.addedBackground#003925ff
  • editorGutter.background#2c363fff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#850014ff
  • editorGutter.modifiedBackground#002e62ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#323c44ff
  • editorHoverWidget.border#323c44ff
  • editorIndentGuide.activeBackground#424b53ff
  • editorIndentGuide.background#3a434bff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7f858aff
  • editorLineNumber.foreground#646b72ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f7005fff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006149ff
  • editorOverviewRuler.border#323c44ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#b90034ff
  • editorOverviewRuler.errorForeground#f7005fbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#00538cff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2c363fff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#323c44ff
  • editorSuggestWidget.border#323c44ff
  • editorSuggestWidget.foreground#f0f0f0ff
  • editorSuggestWidget.highlightForeground#f0f0f0ff
  • editorSuggestWidget.selectedBackground#3a434bff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#323c44ff
  • editorWidget.border#323c44ff
  • errorForeground#f7005fff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#1e72aeff
  • foreground#e0e1e1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7f858aff
  • gitDecoration.modifiedResourceForeground#d88f3aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00bc9bff
  • input.background#2c363fff
  • input.foreground#f0f0f0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00bc9bff
  • inputValidation.errorBackground#620000ff
  • inputValidation.errorBorder#95001eff
  • inputValidation.infoBackground#2c363fff
  • inputValidation.infoBorder#4c555cff
  • inputValidation.warningBackground#370000ff
  • inputValidation.warningBorder#5a2300ff
  • list.activeSelectionBackground#3a434bff
  • list.activeSelectionForeground#f0f0f0ff
  • list.dropBackground#2c363fff
  • list.errorForeground#f7005fff
  • list.focusBackground#3a434bff
  • list.highlightForeground#f0f0f0ff
  • list.hoverBackground#3a434bff
  • list.inactiveFocusBackground#3a434bff
  • list.inactiveSelectionBackground#3a434bff
  • list.inactiveSelectionForeground#f0f0f0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#323c44ff
  • menu.foreground#bfc1c3ff
  • menu.selectionBackground#3a434bff
  • menu.selectionForeground#f0f0f0ff
  • menu.separatorBackground#4c555cff
  • menubar.selectionBackground#3a434bff
  • menubar.selectionForeground#f0f0f0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#323c44ff
  • notificationLink.foreground#00bc9bff
  • notifications.background#323c44ff
  • notifications.border#323c44ff
  • panel.background#323c44ff
  • panel.border#323c44ff
  • panel.dropBackground#2c363fff
  • panelTitle.activeBorder#00bc9bff
  • panelTitle.activeForeground#f0f0f0ff
  • panelTitle.inactiveForeground#aeb1b4ff
  • peekView.border#323c44ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#323c44ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2c363fff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#323c44ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#172129ff
  • scrollbarSlider.activeBackground#646b72bf
  • scrollbarSlider.background#4c555cbf
  • scrollbarSlider.hoverBackground#585f67bf
  • settings.checkboxBackground#2c363fff
  • settings.checkboxBorder#646b72ff
  • settings.checkboxForeground#f0f0f0ff
  • settings.dropdownBackground#323c44ff
  • settings.dropdownBorder#323c44ff
  • settings.dropdownForeground#f0f0f0ff
  • settings.dropdownListBorder#424b53ff
  • settings.headerForeground#b4f4ffff
  • settings.modifiedItemIndicator#1e72aeff
  • settings.numberInputBackground#323c44ff
  • settings.numberInputForeground#f0f0f0ff
  • settings.textInputBackground#323c44ff
  • settings.textInputForeground#f0f0f0ff
  • sideBar.background#323c44ff
  • sideBar.dropBackground#2c363fff
  • sideBar.foreground#aeb1b4ff
  • sideBarSectionHeader.background#323c44ff
  • sideBarSectionHeader.foreground#646b72ff
  • sideBarTitle.foreground#646b72ff
  • statusBar.background#3a434bff
  • statusBar.debuggingBackground#971600ff
  • statusBar.debuggingForeground#aeb1b4ff
  • statusBar.foreground#aeb1b4ff
  • statusBar.noFolderBackground#52146fff
  • statusBar.noFolderForeground#aeb1b4ff
  • tab.activeBackground#323c44ff
  • tab.activeBorder#00bc9bff
  • tab.activeForeground#f0f0f0ff
  • tab.activeModifiedBorder#00bc9bbf
  • tab.border#323c44ff
  • tab.inactiveBackground#323c44ff
  • tab.inactiveForeground#aeb1b4ff
  • tab.inactiveModifiedBorder#00bc9bbf
  • tab.unfocusedActiveForeground#f0f0f0ff
  • tab.unfocusedActiveModifiedBorder#00bc9b80
  • tab.unfocusedInactiveForeground#aeb1b4ff
  • tab.unfocusedInactiveModifiedBorder#00bc9b80
  • terminal.ansiBlack#2c363fff
  • terminal.ansiBlue#1caaffff
  • terminal.ansiBrightBlack#717580ff
  • terminal.ansiBrightBlue#59c2ffff
  • terminal.ansiBrightCyan#bca8ffff
  • terminal.ansiBrightGreen#00fcd7ff
  • terminal.ansiBrightMagenta#ff7cc5ff
  • terminal.ansiBrightRed#ff086bff
  • terminal.ansiBrightWhite#e1e6f3ff
  • terminal.ansiBrightYellow#ffca89ff
  • terminal.ansiCyan#b281f5ff
  • terminal.ansiGreen#00fcd7ff
  • terminal.ansiMagenta#ff7cc5ff
  • terminal.ansiRed#ff086bff
  • terminal.ansiWhite#c8cdd9ff
  • terminal.ansiYellow#ffb660ff
  • terminal.background#2c363fff
  • terminal.border#323c44ff
  • terminal.foreground#e0e1e1ff
  • terminal.selectionBackground#1e72ae40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#323c44ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00bc9bff
  • textLink.foreground#00bc9bff
  • textPreformat.foreground#ff7cc5ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#323c44ff
  • titleBar.activeForeground#aeb1b4ff
  • titleBar.inactiveBackground#323c44ff
  • titleBar.inactiveForeground#646b72ff
  • widget.shadow#222b34ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Panda Theme - Coding Theme