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#071e2dff
  • activityBar.dropBackground#001827ff
  • activityBar.foreground#00ae8dff
  • activityBar.inactiveForeground#425361ff
  • activityBarBadge.background#00ae8dbf
  • activityBarBadge.foreground#f7ffffff
  • badge.background#00ae8dbf
  • badge.foreground#f7ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#001827ff
  • breadcrumb.focusForeground#e5eff9ff
  • breadcrumb.foreground#61717fff
  • breadcrumbPicker.background#071e2dff
  • button.background#006d52ff
  • button.foreground#f7ffffff
  • button.hoverBackground#008264ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#071e2dff
  • debugToolBar.background#001827ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#071e2dff
  • dropdown.border#071e2dff
  • dropdown.foreground#e5eff9ff
  • editor.background#001827ff
  • editor.findMatchBackground#005ea140
  • editor.findMatchHighlightBackground#005ea140
  • editor.findRangeHighlightBackground#005ea140
  • editor.focusedStackFrameHighlightBackground#005ea140
  • editor.foreground#d2dce7ff
  • editor.hoverHighlightBackground#005ea140
  • editor.inactiveSelectionBackground#005ea120
  • editor.lineHighlightBackground#071e2dff
  • editor.lineHighlightBorder#071e2dff
  • editor.rangeHighlightBackground#005ea140
  • editor.selectionBackground#005ea140
  • editor.selectionHighlightBackground#005ea120
  • editor.snippetFinalTabstopHighlightBorder#005ea140
  • editor.snippetTabstopHighlightBackground#005ea140
  • editor.stackFrameHighlightBackground#005ea140
  • editor.wordHighlightBackground#005ea120
  • editor.wordHighlightStrongBackground#005ea120
  • editorActiveLineNumber.foreground#61717fff
  • editorBracketMatch.background#005ea120
  • editorBracketMatch.border#009dffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff287fff
  • editorError.foreground#e6004cff
  • editorGroup.border#071e2dff
  • editorGroup.dropBackground#001827ff
  • editorGroupHeader.noTabsBackground#001827ff
  • editorGroupHeader.tabsBackground#071e2dff
  • editorGutter.addedBackground#002703ff
  • editorGutter.background#001827ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#630000ff
  • editorGutter.modifiedBackground#00154cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#071e2dff
  • editorHoverWidget.border#071e2dff
  • editorIndentGuide.activeBackground#1b2f3eff
  • editorIndentGuide.background#112535ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#61717fff
  • editorLineNumber.foreground#425361ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#e6004cff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004731ff
  • editorOverviewRuler.border#071e2dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9d001eff
  • editorOverviewRuler.errorForeground#e6004cbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#003c7bff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#001827ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#071e2dff
  • editorSuggestWidget.border#071e2dff
  • editorSuggestWidget.foreground#e5eff9ff
  • editorSuggestWidget.highlightForeground#e5eff9ff
  • editorSuggestWidget.selectedBackground#112535ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#071e2dff
  • editorWidget.border#071e2dff
  • errorForeground#e6004cff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#005ea1ff
  • foreground#d2dce7ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#61717fff
  • gitDecoration.modifiedResourceForeground#cd7f1cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ae8dff
  • input.background#001827ff
  • input.foreground#e5eff9ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00ae8dff
  • inputValidation.errorBackground#5b0000ff
  • inputValidation.errorBorder#740000ff
  • inputValidation.infoBackground#001827ff
  • inputValidation.infoBorder#273949ff
  • inputValidation.warningBackground#350000ff
  • inputValidation.warningBorder#410100ff
  • list.activeSelectionBackground#112535ff
  • list.activeSelectionForeground#e5eff9ff
  • list.dropBackground#001827ff
  • list.errorForeground#e6004cff
  • list.focusBackground#112535ff
  • list.highlightForeground#e5eff9ff
  • list.hoverBackground#112535ff
  • list.inactiveFocusBackground#112535ff
  • list.inactiveSelectionBackground#112535ff
  • list.inactiveSelectionForeground#e5eff9ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#071e2dff
  • menu.foreground#aab7c3ff
  • menu.selectionBackground#112535ff
  • menu.selectionForeground#e5eff9ff
  • menu.separatorBackground#273949ff
  • menubar.selectionBackground#112535ff
  • menubar.selectionForeground#e5eff9ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#071e2dff
  • notificationLink.foreground#00ae8dff
  • notifications.background#071e2dff
  • notifications.border#071e2dff
  • panel.background#071e2dff
  • panel.border#071e2dff
  • panel.dropBackground#001827ff
  • panelTitle.activeBorder#00ae8dff
  • panelTitle.activeForeground#e5eff9ff
  • panelTitle.inactiveForeground#97a4b1ff
  • peekView.border#071e2dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#071e2dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#001827ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#071e2dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000419ff
  • scrollbarSlider.activeBackground#425361bf
  • scrollbarSlider.background#273949bf
  • scrollbarSlider.hoverBackground#344554bf
  • settings.checkboxBackground#001827ff
  • settings.checkboxBorder#425361ff
  • settings.checkboxForeground#e5eff9ff
  • settings.dropdownBackground#071e2dff
  • settings.dropdownBorder#071e2dff
  • settings.dropdownForeground#e5eff9ff
  • settings.dropdownListBorder#1b2f3eff
  • settings.headerForeground#a3f2ffff
  • settings.modifiedItemIndicator#005ea1ff
  • settings.numberInputBackground#071e2dff
  • settings.numberInputForeground#e5eff9ff
  • settings.textInputBackground#071e2dff
  • settings.textInputForeground#e5eff9ff
  • sideBar.background#071e2dff
  • sideBar.dropBackground#001827ff
  • sideBar.foreground#97a4b1ff
  • sideBarSectionHeader.background#071e2dff
  • sideBarSectionHeader.foreground#425361ff
  • sideBarTitle.foreground#425361ff
  • statusBar.background#112535ff
  • statusBar.debuggingBackground#7d0000ff
  • statusBar.debuggingForeground#97a4b1ff
  • statusBar.foreground#97a4b1ff
  • statusBar.noFolderBackground#340057ff
  • statusBar.noFolderForeground#97a4b1ff
  • tab.activeBackground#071e2dff
  • tab.activeBorder#00ae8dff
  • tab.activeForeground#e5eff9ff
  • tab.activeModifiedBorder#00ae8dbf
  • tab.border#071e2dff
  • tab.inactiveBackground#071e2dff
  • tab.inactiveForeground#97a4b1ff
  • tab.inactiveModifiedBorder#00ae8dbf
  • tab.unfocusedActiveForeground#e5eff9ff
  • tab.unfocusedActiveModifiedBorder#00ae8d80
  • tab.unfocusedInactiveForeground#97a4b1ff
  • tab.unfocusedInactiveModifiedBorder#00ae8d80
  • terminal.ansiBlack#001827ff
  • terminal.ansiBlue#00abffff
  • terminal.ansiBrightBlack#6c768bff
  • terminal.ansiBrightBlue#39c4ffff
  • terminal.ansiBrightCyan#bca7ffff
  • terminal.ansiBrightGreen#00fed7ff
  • terminal.ansiBrightMagenta#ff66bbff
  • terminal.ansiBrightRed#ff0069ff
  • terminal.ansiBrightWhite#dce7ffff
  • terminal.ansiBrightYellow#ffc87dff
  • terminal.ansiCyan#b47effff
  • terminal.ansiGreen#00fed7ff
  • terminal.ansiMagenta#ff66bbff
  • terminal.ansiRed#ff0069ff
  • terminal.ansiWhite#c3cee6ff
  • terminal.ansiYellow#ffb453ff
  • terminal.background#001827ff
  • terminal.border#071e2dff
  • terminal.foreground#d2dce7ff
  • terminal.selectionBackground#005ea140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#071e2dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00ae8dff
  • textLink.foreground#00ae8dff
  • textPreformat.foreground#ff66bbff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#071e2dff
  • titleBar.activeForeground#97a4b1ff
  • titleBar.inactiveBackground#071e2dff
  • titleBar.inactiveForeground#425361ff
  • widget.shadow#000c1dff

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#ff66bbff
entity.name.tag#009dffff
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#8492a0ff
meta.preprocessor#ff63b9ff
meta.preprocessor.string#00fed7ff
meta.preprocessor.numeric#ffb453ff
meta.structure.dictionary.key.python#d2dce7ff
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#74c6ffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#74c6ffff
keyword.control#ff63b9ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dce7ffff
meta.object-literal.key#d2dce7ff
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#8492a0ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff66bbff
keyword.operator.or.regexp, keyword.control.anchor.regexp#dce7ffff
keyword.operator.quantifier.regexp#ffb453ff
constant.character#ff63b9ff
constant.character.escape#8492a0ff
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#009dffff
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#d2dce7ff
support.function#39c4ffff
variable.other.constant#ff8dc3ff
meta.brace.round.js, meta.brace.square.js, punctuation#8492a0ff
support.type.property-name.json#d2dce7ff
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#74c6ffff
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