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#1b1c1cff
  • activityBar.dropBackground#151617ff
  • activityBar.foreground#00ab8eff
  • activityBar.inactiveForeground#505050ff
  • activityBarBadge.background#00ab8ebf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00ab8ebf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151617ff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#6e6e6eff
  • breadcrumbPicker.background#1b1c1cff
  • button.background#006a53ff
  • button.foreground#ffffffff
  • button.hoverBackground#007f65ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1b1c1cff
  • debugToolBar.background#151617ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1b1c1cff
  • dropdown.border#1b1c1cff
  • dropdown.foreground#edededff
  • editor.background#151617ff
  • editor.findMatchBackground#1b5c8c40
  • editor.findMatchHighlightBackground#1b5c8c40
  • editor.findRangeHighlightBackground#1b5c8c40
  • editor.focusedStackFrameHighlightBackground#1b5c8c40
  • editor.foreground#dbdbdbff
  • editor.hoverHighlightBackground#1b5c8c40
  • editor.inactiveSelectionBackground#1b5c8c20
  • editor.lineHighlightBackground#1b1c1cff
  • editor.lineHighlightBorder#1b1c1cff
  • editor.rangeHighlightBackground#1b5c8c40
  • editor.selectionBackground#1b5c8c40
  • editor.selectionHighlightBackground#1b5c8c20
  • editor.snippetFinalTabstopHighlightBorder#1b5c8c40
  • editor.snippetTabstopHighlightBackground#1b5c8c40
  • editor.stackFrameHighlightBackground#1b5c8c40
  • editor.wordHighlightBackground#1b5c8c20
  • editor.wordHighlightStrongBackground#1b5c8c20
  • editorActiveLineNumber.foreground#6e6e6eff
  • editorBracketMatch.background#1b5c8c20
  • editorBracketMatch.border#2e9ae9ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ff4b82ff
  • editorError.foreground#d7004fff
  • editorGroup.border#1b1c1cff
  • editorGroup.dropBackground#151617ff
  • editorGroupHeader.noTabsBackground#151617ff
  • editorGroupHeader.tabsBackground#1b1c1cff
  • editorGutter.addedBackground#002305ff
  • editorGutter.background#151617ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#580000ff
  • editorGutter.modifiedBackground#00123aff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1b1c1cff
  • editorHoverWidget.border#1b1c1cff
  • editorIndentGuide.activeBackground#2c2c2cff
  • editorIndentGuide.background#232323ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6e6e6eff
  • editorLineNumber.foreground#505050ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d7004fff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004531ff
  • editorOverviewRuler.border#1b1c1cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#900020ff
  • editorOverviewRuler.errorForeground#d7004fbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#003a67ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#151617ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1b1c1cff
  • editorSuggestWidget.border#1b1c1cff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#232323ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1b1c1cff
  • editorWidget.border#1b1c1cff
  • errorForeground#d7004fff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#1b5c8cff
  • foreground#dbdbdbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6e6e6eff
  • gitDecoration.modifiedResourceForeground#c4833aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ab8eff
  • input.background#151617ff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00ab8eff
  • inputValidation.errorBackground#510000ff
  • inputValidation.errorBorder#680000ff
  • inputValidation.infoBackground#151617ff
  • inputValidation.infoBorder#373737ff
  • inputValidation.warningBackground#2f0000ff
  • inputValidation.warningBorder#3b0800ff
  • list.activeSelectionBackground#232323ff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#151617ff
  • list.errorForeground#d7004fff
  • list.focusBackground#232323ff
  • list.highlightForeground#edededff
  • list.hoverBackground#232323ff
  • list.inactiveFocusBackground#232323ff
  • list.inactiveSelectionBackground#232323ff
  • list.inactiveSelectionForeground#edededff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1b1c1cff
  • menu.foreground#b5b5b5ff
  • menu.selectionBackground#232323ff
  • menu.selectionForeground#edededff
  • menu.separatorBackground#373737ff
  • menubar.selectionBackground#232323ff
  • menubar.selectionForeground#edededff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1b1c1cff
  • notificationLink.foreground#00ab8eff
  • notifications.background#1b1c1cff
  • notifications.border#1b1c1cff
  • panel.background#1b1c1cff
  • panel.border#1b1c1cff
  • panel.dropBackground#151617ff
  • panelTitle.activeBorder#00ab8eff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#a2a2a2ff
  • peekView.border#1b1c1cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1b1c1cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#151617ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1b1c1cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000002ff
  • scrollbarSlider.activeBackground#505050bf
  • scrollbarSlider.background#373737bf
  • scrollbarSlider.hoverBackground#434343bf
  • settings.checkboxBackground#151617ff
  • settings.checkboxBorder#505050ff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#1b1c1cff
  • settings.dropdownBorder#1b1c1cff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#2c2c2cff
  • settings.headerForeground#bdf0ffff
  • settings.modifiedItemIndicator#1b5c8cff
  • settings.numberInputBackground#1b1c1cff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#1b1c1cff
  • settings.textInputForeground#edededff
  • sideBar.background#1b1c1cff
  • sideBar.dropBackground#151617ff
  • sideBar.foreground#a2a2a2ff
  • sideBarSectionHeader.background#1b1c1cff
  • sideBarSectionHeader.foreground#505050ff
  • sideBarTitle.foreground#505050ff
  • statusBar.background#232323ff
  • statusBar.debuggingBackground#730000ff
  • statusBar.debuggingForeground#a2a2a2ff
  • statusBar.foreground#a2a2a2ff
  • statusBar.noFolderBackground#30004aff
  • statusBar.noFolderForeground#a2a2a2ff
  • tab.activeBackground#1b1c1cff
  • tab.activeBorder#00ab8eff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#00ab8ebf
  • tab.border#1b1c1cff
  • tab.inactiveBackground#1b1c1cff
  • tab.inactiveForeground#a2a2a2ff
  • tab.inactiveModifiedBorder#00ab8ebf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#00ab8e80
  • tab.unfocusedInactiveForeground#a2a2a2ff
  • tab.unfocusedInactiveModifiedBorder#00ab8e80
  • terminal.ansiBlack#151617ff
  • terminal.ansiBlue#45a9f9ff
  • terminal.ansiBrightBlack#757575ff
  • terminal.ansiBrightBlue#6fc1ffff
  • terminal.ansiBrightCyan#bcaafeff
  • terminal.ansiBrightGreen#19f9d8ff
  • terminal.ansiBrightMagenta#ff78b8ff
  • terminal.ansiBrightRed#ff2c6dff
  • terminal.ansiBrightWhite#e6e6e6ff
  • terminal.ansiBrightYellow#ffcc95ff
  • terminal.ansiCyan#b084ebff
  • terminal.ansiGreen#19f9d8ff
  • terminal.ansiMagenta#ff78b8ff
  • terminal.ansiRed#ff2c6dff
  • terminal.ansiWhite#cdcdcdff
  • terminal.ansiYellow#ffb86cff
  • terminal.background#151617ff
  • terminal.border#1b1c1cff
  • terminal.foreground#dbdbdbff
  • terminal.selectionBackground#1b5c8c40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1b1c1cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00ab8eff
  • textLink.foreground#00ab8eff
  • textPreformat.foreground#ff78b8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1b1c1cff
  • titleBar.activeForeground#a2a2a2ff
  • titleBar.inactiveBackground#1b1c1cff
  • titleBar.inactiveForeground#505050ff
  • widget.shadow#060809ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e6e6e6ff
emphasisitalic
strongbold
header#000080
comment#676b79ff
constant.language#ffb86cff
constant.numeric#ffb86cff
constant.regexp#ff78b8ff
entity.name.tag#2e9ae9ff
entity.name.tag.css#ffcc95ff
entity.other.attribute-name#ffb86cff
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#ffb86cff
invalid#f44747
markup.underlineunderline
markup.bold#ff75b5ffbold
markup.heading#ff75b5ffbold
markup.italicitalic
markup.inserted#ffb86cff
markup.deleted#19f9d8ff
markup.changed#ff75b5ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#19f9d8ff
punctuation.definition.tag#909090ff
meta.preprocessor#ff75b5ff
meta.preprocessor.string#19f9d8ff
meta.preprocessor.numeric#ffb86cff
meta.structure.dictionary.key.python#dbdbdbff
meta.diff.header#ff75b5ff
storage#ff75b5ff
storage.type#ffb86cff
storage.modifier#ffb86cff
string#19f9d8ff
string.tag#19f9d8ff
string.value#19f9d8ff
string.regexp#19f9d8ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e6e6e6ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e6e6e6ff
keyword#ff75b5ff
keyword.control#ff75b5ff
keyword.operator#e6e6e6ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ff75b5ff
keyword.other.unit#ffb86cff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff75b5ff
support.function.git-rebase#6fc1ffff
constant.sha.git-rebase#ffb86cff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff75b5ff
entity.name.function, support.function, support.constant.handlebars#6fc1ffff
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#90c4fbff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#90c4fbff
keyword.control#ff75b5ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e6e6e6ff
meta.object-literal.key#dbdbdbff
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#19f9d8ff
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#909090ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff78b8ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e6e6e6ff
keyword.operator.quantifier.regexp#ffb86cff
constant.character#ff75b5ff
constant.character.escape#909090ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#19f9d8ff
string.template#19f9d8ff
storage.type.function#ffb86cff
support.class.component.js#2e9ae9ff
variable.parameter#bbbbbbff
variable.other.property#e6e6e6ff
support.function, support.constant.handlebars#6fc1ffff
support.type, support.class, support.constant.math#ffcc95ff
support.type.vendored.property-name, support.type.property-name#dbdbdbff
support.function#6fc1ffff
variable.other.constant#ff9ac1ff
meta.brace.round.js, meta.brace.square.js, punctuation#909090ff
support.type.property-name.json#dbdbdbff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#e6e6e6ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ff75b5ff
entity.name.type.class, entity.name.type.module#90c4fbff
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#676b79ff
markup.headingnormal

Shiki preview

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

Loading...

Dainty – Panda Theme - Coding Theme