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#1d3242ff
  • activityBar.dropBackground#172c3dff
  • activityBar.foreground#00b996ff
  • activityBar.inactiveForeground#536473ff
  • activityBarBadge.background#00b996bf
  • activityBarBadge.foreground#f7ffffff
  • badge.background#00b996bf
  • badge.foreground#f7ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#172c3dff
  • breadcrumb.focusForeground#e7f1fbff
  • breadcrumb.foreground#6f7f8eff
  • breadcrumbPicker.background#1d3242ff
  • button.background#007c5fff
  • button.foreground#f7ffffff
  • button.hoverBackground#009071ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1d3242ff
  • debugToolBar.background#172c3dff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1d3242ff
  • dropdown.border#1d3242ff
  • dropdown.foreground#e7f1fbff
  • editor.background#172c3dff
  • editor.findMatchBackground#006cb140
  • editor.findMatchHighlightBackground#006cb140
  • editor.findRangeHighlightBackground#006cb140
  • editor.focusedStackFrameHighlightBackground#006cb140
  • editor.foreground#d5e0ebff
  • editor.hoverHighlightBackground#006cb140
  • editor.inactiveSelectionBackground#006cb120
  • editor.lineHighlightBackground#1d3242ff
  • editor.lineHighlightBorder#1d3242ff
  • editor.rangeHighlightBackground#006cb140
  • editor.selectionBackground#006cb140
  • editor.selectionHighlightBackground#006cb120
  • editor.snippetFinalTabstopHighlightBorder#006cb140
  • editor.snippetTabstopHighlightBackground#006cb140
  • editor.stackFrameHighlightBackground#006cb140
  • editor.wordHighlightBackground#006cb120
  • editor.wordHighlightStrongBackground#006cb120
  • editorActiveLineNumber.foreground#6f7f8eff
  • editorBracketMatch.background#006cb120
  • editorBracketMatch.border#00a6ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff287fff
  • editorError.foreground#f70057ff
  • editorGroup.border#1d3242ff
  • editorGroup.dropBackground#172c3dff
  • editorGroupHeader.noTabsBackground#172c3dff
  • editorGroupHeader.tabsBackground#1d3242ff
  • editorGutter.addedBackground#00321bff
  • editorGutter.background#172c3dff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#7d0003ff
  • editorGutter.modifiedBackground#002661ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1d3242ff
  • editorHoverWidget.border#1d3242ff
  • editorIndentGuide.activeBackground#2f4252ff
  • editorIndentGuide.background#26394aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6f7f8eff
  • editorLineNumber.foreground#536473ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f70057ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005940ff
  • editorOverviewRuler.border#1d3242ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#b4002bff
  • editorOverviewRuler.errorForeground#f70057bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004c8dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#172c3dff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1d3242ff
  • editorSuggestWidget.border#1d3242ff
  • editorSuggestWidget.foreground#e7f1fbff
  • editorSuggestWidget.highlightForeground#e7f1fbff
  • editorSuggestWidget.selectedBackground#26394aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1d3242ff
  • editorWidget.border#1d3242ff
  • errorForeground#f70057ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#006cb1ff
  • foreground#d5e0ebff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6f7f8eff
  • gitDecoration.modifiedResourceForeground#d88827ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b996ff
  • input.background#172c3dff
  • input.foreground#e7f1fbff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b996ff
  • inputValidation.errorBackground#5b0000ff
  • inputValidation.errorBorder#8e0015ff
  • inputValidation.infoBackground#172c3dff
  • inputValidation.infoBorder#3a4c5cff
  • inputValidation.warningBackground#350000ff
  • inputValidation.warningBorder#531600ff
  • list.activeSelectionBackground#26394aff
  • list.activeSelectionForeground#e7f1fbff
  • list.dropBackground#172c3dff
  • list.errorForeground#f70057ff
  • list.focusBackground#26394aff
  • list.highlightForeground#e7f1fbff
  • list.hoverBackground#26394aff
  • list.inactiveFocusBackground#26394aff
  • list.inactiveSelectionBackground#26394aff
  • list.inactiveSelectionForeground#e7f1fbff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1d3242ff
  • menu.foreground#b2bfcbff
  • menu.selectionBackground#26394aff
  • menu.selectionForeground#e7f1fbff
  • menu.separatorBackground#3a4c5cff
  • menubar.selectionBackground#26394aff
  • menubar.selectionForeground#e7f1fbff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1d3242ff
  • notificationLink.foreground#00b996ff
  • notifications.background#1d3242ff
  • notifications.border#1d3242ff
  • panel.background#1d3242ff
  • panel.border#1d3242ff
  • panel.dropBackground#172c3dff
  • panelTitle.activeBorder#00b996ff
  • panelTitle.activeForeground#e7f1fbff
  • panelTitle.inactiveForeground#a1aebbff
  • peekView.border#1d3242ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1d3242ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#172c3dff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1d3242ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#001827ff
  • scrollbarSlider.activeBackground#536473bf
  • scrollbarSlider.background#3a4c5cbf
  • scrollbarSlider.hoverBackground#465767bf
  • settings.checkboxBackground#172c3dff
  • settings.checkboxBorder#536473ff
  • settings.checkboxForeground#e7f1fbff
  • settings.dropdownBackground#1d3242ff
  • settings.dropdownBorder#1d3242ff
  • settings.dropdownForeground#e7f1fbff
  • settings.dropdownListBorder#2f4252ff
  • settings.headerForeground#a5f4ffff
  • settings.modifiedItemIndicator#006cb1ff
  • settings.numberInputBackground#1d3242ff
  • settings.numberInputForeground#e7f1fbff
  • settings.textInputBackground#1d3242ff
  • settings.textInputForeground#e7f1fbff
  • sideBar.background#1d3242ff
  • sideBar.dropBackground#172c3dff
  • sideBar.foreground#a1aebbff
  • sideBarSectionHeader.background#1d3242ff
  • sideBarSectionHeader.foreground#536473ff
  • sideBarTitle.foreground#536473ff
  • statusBar.background#26394aff
  • statusBar.debuggingBackground#920000ff
  • statusBar.debuggingForeground#a1aebbff
  • statusBar.foreground#a1aebbff
  • statusBar.noFolderBackground#4a006cff
  • statusBar.noFolderForeground#a1aebbff
  • tab.activeBackground#1d3242ff
  • tab.activeBorder#00b996ff
  • tab.activeForeground#e7f1fbff
  • tab.activeModifiedBorder#00b996bf
  • tab.border#1d3242ff
  • tab.inactiveBackground#1d3242ff
  • tab.inactiveForeground#a1aebbff
  • tab.inactiveModifiedBorder#00b996bf
  • tab.unfocusedActiveForeground#e7f1fbff
  • tab.unfocusedActiveModifiedBorder#00b99680
  • tab.unfocusedInactiveForeground#a1aebbff
  • tab.unfocusedInactiveModifiedBorder#00b99680
  • terminal.ansiBlack#172c3dff
  • terminal.ansiBlue#00abffff
  • terminal.ansiBrightBlack#6c768bff
  • terminal.ansiBrightBlue#39c4ffff
  • terminal.ansiBrightCyan#bca7ffff
  • terminal.ansiBrightGreen#00fed7ff
  • terminal.ansiBrightMagenta#ff6ec3ff
  • terminal.ansiBrightRed#ff0069ff
  • terminal.ansiBrightWhite#dce7ffff
  • terminal.ansiBrightYellow#ffc87dff
  • terminal.ansiCyan#b47effff
  • terminal.ansiGreen#00fed7ff
  • terminal.ansiMagenta#ff6ec3ff
  • terminal.ansiRed#ff0069ff
  • terminal.ansiWhite#c3cee6ff
  • terminal.ansiYellow#ffb453ff
  • terminal.background#172c3dff
  • terminal.border#1d3242ff
  • terminal.foreground#d5e0ebff
  • terminal.selectionBackground#006cb140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1d3242ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b996ff
  • textLink.foreground#00b996ff
  • textPreformat.foreground#ff6ec3ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1d3242ff
  • titleBar.activeForeground#a1aebbff
  • titleBar.inactiveBackground#1d3242ff
  • titleBar.inactiveForeground#536473ff
  • widget.shadow#0b2232ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dce7ffff
emphasisitalic
strongbold
header#000080
comment#5e6b8fff
constant.language#ffb453ff
constant.numeric#ffb453ff
constant.regexp#ff6ec3ff
entity.name.tag#00a6ffff
entity.name.tag.css#ffc87dff
entity.other.attribute-name#ffb453ff
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#ffb453ff
invalid#f44747
markup.underlineunderline
markup.bold#ff63b9ffbold
markup.heading#ff63b9ffbold
markup.italicitalic
markup.inserted#ffb453ff
markup.deleted#00fed7ff
markup.changed#ff63b9ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#00fed7ff
punctuation.definition.tag#909eabff
meta.preprocessor#ff63b9ff
meta.preprocessor.string#00fed7ff
meta.preprocessor.numeric#ffb453ff
meta.structure.dictionary.key.python#d5e0ebff
meta.diff.header#ff63b9ff
storage#ff63b9ff
storage.type#ffb453ff
storage.modifier#ffb453ff
string#00fed7ff
string.tag#00fed7ff
string.value#00fed7ff
string.regexp#00fed7ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#dce7ffff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#dce7ffff
keyword#ff63b9ff
keyword.control#ff63b9ff
keyword.operator#dce7ffff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ff63b9ff
keyword.other.unit#ffb453ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff63b9ff
support.function.git-rebase#39c4ffff
constant.sha.git-rebase#ffb453ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff63b9ff
entity.name.function, support.function, support.constant.handlebars#39c4ffff
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#7accffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7accffff
keyword.control#ff63b9ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dce7ffff
meta.object-literal.key#d5e0ebff
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#00fed7ff
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#909eabff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff6ec3ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#dce7ffff
keyword.operator.quantifier.regexp#ffb453ff
constant.character#ff63b9ff
constant.character.escape#909eabff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#00fed7ff
string.template#00fed7ff
storage.type.function#ffb453ff
support.class.component.js#00a6ffff
variable.parameter#b2bcd3ff
variable.other.property#dce7ffff
support.function, support.constant.handlebars#39c4ffff
support.type, support.class, support.constant.math#ffc87dff
support.type.vendored.property-name, support.type.property-name#d5e0ebff
support.function#39c4ffff
variable.other.constant#ff8dc3ff
meta.brace.round.js, meta.brace.square.js, punctuation#909eabff
support.type.property-name.json#d5e0ebff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#dce7ffff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ff63b9ff
entity.name.type.class, entity.name.type.module#7accffff
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#5e6b8fff
markup.headingnormal

Shiki preview

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

Loading...

Dainty – Panda Theme - Coding Theme