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#283139ff
  • activityBar.dropBackground#222b34ff
  • activityBar.foreground#00b797ff
  • activityBar.inactiveForeground#5b6269ff
  • activityBarBadge.background#00b797bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00b797bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#222b34ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#787e83ff
  • breadcrumbPicker.background#283139ff
  • button.background#007b60ff
  • button.foreground#ffffffff
  • button.hoverBackground#008e71ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#283139ff
  • debugToolBar.background#222b34ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#283139ff
  • dropdown.border#283139ff
  • dropdown.foreground#efefefff
  • editor.background#222b34ff
  • editor.findMatchBackground#0e6ba640
  • editor.findMatchHighlightBackground#0e6ba640
  • editor.findRangeHighlightBackground#0e6ba640
  • editor.focusedStackFrameHighlightBackground#0e6ba640
  • editor.foreground#dedfdfff
  • editor.hoverHighlightBackground#0e6ba640
  • editor.inactiveSelectionBackground#0e6ba620
  • editor.lineHighlightBackground#283139ff
  • editor.lineHighlightBorder#283139ff
  • editor.rangeHighlightBackground#0e6ba640
  • editor.selectionBackground#0e6ba640
  • editor.selectionHighlightBackground#0e6ba620
  • editor.snippetFinalTabstopHighlightBorder#0e6ba640
  • editor.snippetTabstopHighlightBackground#0e6ba640
  • editor.stackFrameHighlightBackground#0e6ba640
  • editor.wordHighlightBackground#0e6ba620
  • editor.wordHighlightStrongBackground#0e6ba620
  • editorActiveLineNumber.foreground#787e83ff
  • editorBracketMatch.background#0e6ba620
  • editorBracketMatch.border#05a5ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff3d81ff
  • editorError.foreground#ef0059ff
  • editorGroup.border#283139ff
  • editorGroup.dropBackground#222b34ff
  • editorGroupHeader.noTabsBackground#222b34ff
  • editorGroupHeader.tabsBackground#283139ff
  • editorGutter.addedBackground#00301cff
  • editorGutter.background#222b34ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#770005ff
  • editorGutter.modifiedBackground#002557ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#283139ff
  • editorHoverWidget.border#283139ff
  • editorIndentGuide.activeBackground#384149ff
  • editorIndentGuide.background#2f3840ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#787e83ff
  • editorLineNumber.foreground#5b6269ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ef0059ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005841ff
  • editorOverviewRuler.border#283139ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#ad002cff
  • editorOverviewRuler.errorForeground#ef0059bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004b83ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#222b34ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#283139ff
  • editorSuggestWidget.border#283139ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#2f3840ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#283139ff
  • editorWidget.border#283139ff
  • errorForeground#ef0059ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0e6ba6ff
  • foreground#dedfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#787e83ff
  • gitDecoration.modifiedResourceForeground#d38a36ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b797ff
  • input.background#222b34ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b797ff
  • inputValidation.errorBackground#560000ff
  • inputValidation.errorBorder#880016ff
  • inputValidation.infoBackground#222b34ff
  • inputValidation.infoBorder#434b52ff
  • inputValidation.warningBackground#320000ff
  • inputValidation.warningBorder#501900ff
  • list.activeSelectionBackground#2f3840ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#222b34ff
  • list.errorForeground#ef0059ff
  • list.focusBackground#2f3840ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#2f3840ff
  • list.inactiveFocusBackground#2f3840ff
  • list.inactiveSelectionBackground#2f3840ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#283139ff
  • menu.foreground#bbbdbfff
  • menu.selectionBackground#2f3840ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#434b52ff
  • menubar.selectionBackground#2f3840ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#283139ff
  • notificationLink.foreground#00b797ff
  • notifications.background#283139ff
  • notifications.border#283139ff
  • panel.background#283139ff
  • panel.border#283139ff
  • panel.dropBackground#222b34ff
  • panelTitle.activeBorder#00b797ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#a9acb0ff
  • peekView.border#283139ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#283139ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#222b34ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#283139ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0d171fff
  • scrollbarSlider.activeBackground#5b6269bf
  • scrollbarSlider.background#434b52bf
  • scrollbarSlider.hoverBackground#4f565dbf
  • settings.checkboxBackground#222b34ff
  • settings.checkboxBorder#5b6269ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#283139ff
  • settings.dropdownBorder#283139ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#384149ff
  • settings.headerForeground#b3f3ffff
  • settings.modifiedItemIndicator#0e6ba6ff
  • settings.numberInputBackground#283139ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#283139ff
  • settings.textInputForeground#efefefff
  • sideBar.background#283139ff
  • sideBar.dropBackground#222b34ff
  • sideBar.foreground#a9acb0ff
  • sideBarSectionHeader.background#283139ff
  • sideBarSectionHeader.foreground#5b6269ff
  • sideBarTitle.foreground#5b6269ff
  • statusBar.background#2f3840ff
  • statusBar.debuggingBackground#8c0400ff
  • statusBar.debuggingForeground#a9acb0ff
  • statusBar.foreground#a9acb0ff
  • statusBar.noFolderBackground#470765ff
  • statusBar.noFolderForeground#a9acb0ff
  • tab.activeBackground#283139ff
  • tab.activeBorder#00b797ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#00b797bf
  • tab.border#283139ff
  • tab.inactiveBackground#283139ff
  • tab.inactiveForeground#a9acb0ff
  • tab.inactiveModifiedBorder#00b797bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#00b79780
  • tab.unfocusedInactiveForeground#a9acb0ff
  • tab.unfocusedInactiveModifiedBorder#00b79780
  • terminal.ansiBlack#222b34ff
  • terminal.ansiBlue#1caaffff
  • terminal.ansiBrightBlack#717580ff
  • terminal.ansiBrightBlue#59c2ffff
  • terminal.ansiBrightCyan#bca8ffff
  • terminal.ansiBrightGreen#00fcd7ff
  • terminal.ansiBrightMagenta#ff78c1ff
  • terminal.ansiBrightRed#ff086bff
  • terminal.ansiBrightWhite#e1e6f3ff
  • terminal.ansiBrightYellow#ffca89ff
  • terminal.ansiCyan#b281f5ff
  • terminal.ansiGreen#00fcd7ff
  • terminal.ansiMagenta#ff78c1ff
  • terminal.ansiRed#ff086bff
  • terminal.ansiWhite#c8cdd9ff
  • terminal.ansiYellow#ffb660ff
  • terminal.background#222b34ff
  • terminal.border#283139ff
  • terminal.foreground#dedfdfff
  • terminal.selectionBackground#0e6ba640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#283139ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b797ff
  • textLink.foreground#00b797ff
  • textPreformat.foreground#ff78c1ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#283139ff
  • titleBar.activeForeground#a9acb0ff
  • titleBar.inactiveBackground#283139ff
  • titleBar.inactiveForeground#5b6269ff
  • widget.shadow#172129ff

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#ff78c1ff
entity.name.tag#05a5ffff
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#989ca0ff
meta.preprocessor#ff6db7ff
meta.preprocessor.string#00fcd7ff
meta.preprocessor.numeric#ffb660ff
meta.structure.dictionary.key.python#dedfdfff
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#89cbffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#89cbffff
keyword.control#ff6db7ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e1e6f3ff
meta.object-literal.key#dedfdfff
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#989ca0ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff78c1ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e1e6f3ff
keyword.operator.quantifier.regexp#ffb660ff
constant.character#ff6db7ff
constant.character.escape#989ca0ff
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#05a5ffff
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#dedfdfff
support.function#59c2ffff
variable.other.constant#ff94c2ff
meta.brace.round.js, meta.brace.square.js, punctuation#989ca0ff
support.type.property-name.json#dedfdfff
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#89cbffff
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