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#1c1c1cff
  • activityBar.dropBackground#151515ff
  • activityBar.foreground#00a68fff
  • activityBar.inactiveForeground#505050ff
  • activityBarBadge.background#00a68fbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00a68fbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151515ff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#6e6e6eff
  • breadcrumbPicker.background#1c1c1cff
  • button.background#006753ff
  • button.foreground#ffffffff
  • button.hoverBackground#007b66ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1c1c1cff
  • debugToolBar.background#151515ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1c1c1cff
  • dropdown.border#1c1c1cff
  • dropdown.foreground#edededff
  • editor.background#151515ff
  • editor.findMatchBackground#3d5a7740
  • editor.findMatchHighlightBackground#3d5a7740
  • editor.findRangeHighlightBackground#3d5a7740
  • editor.focusedStackFrameHighlightBackground#3d5a7740
  • editor.foreground#dbdbdbff
  • editor.hoverHighlightBackground#3d5a7740
  • editor.inactiveSelectionBackground#3d5a7720
  • editor.lineHighlightBackground#1c1c1cff
  • editor.lineHighlightBorder#1c1c1cff
  • editor.rangeHighlightBackground#3d5a7740
  • editor.selectionBackground#3d5a7740
  • editor.selectionHighlightBackground#3d5a7720
  • editor.snippetFinalTabstopHighlightBorder#3d5a7740
  • editor.snippetTabstopHighlightBackground#3d5a7740
  • editor.stackFrameHighlightBackground#3d5a7740
  • editor.wordHighlightBackground#3d5a7720
  • editor.wordHighlightStrongBackground#3d5a7720
  • editorActiveLineNumber.foreground#6e6e6eff
  • editorBracketMatch.background#3d5a7720
  • editorBracketMatch.border#5c98d2ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ed6085ff
  • editorError.foreground#c81e53ff
  • editorGroup.border#1c1c1cff
  • editorGroup.dropBackground#151515ff
  • editorGroupHeader.noTabsBackground#151515ff
  • editorGroupHeader.tabsBackground#1c1c1cff
  • editorGutter.addedBackground#001f06ff
  • editorGutter.background#151515ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#4e0000ff
  • editorGutter.modifiedBackground#000f28ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1c1c1cff
  • editorHoverWidget.border#1c1c1cff
  • editorIndentGuide.activeBackground#2c2c2cff
  • editorIndentGuide.background#232323ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6e6e6eff
  • editorLineNumber.foreground#505050ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c81e53ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004332ff
  • editorOverviewRuler.border#1c1c1cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#830022ff
  • editorOverviewRuler.errorForeground#c81e53bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#193853ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#151515ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1c1c1cff
  • editorSuggestWidget.border#1c1c1cff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#232323ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1c1c1cff
  • editorWidget.border#1c1c1cff
  • errorForeground#c81e53ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3d5a77ff
  • foreground#dbdbdbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6e6e6eff
  • gitDecoration.modifiedResourceForeground#ba8751ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00a68fff
  • input.background#151515ff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00a68fff
  • inputValidation.errorBackground#470000ff
  • inputValidation.errorBorder#5d0001ff
  • inputValidation.infoBackground#151515ff
  • inputValidation.infoBorder#373737ff
  • inputValidation.warningBackground#280000ff
  • inputValidation.warningBorder#340f00ff
  • list.activeSelectionBackground#232323ff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#151515ff
  • list.errorForeground#c81e53ff
  • 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#1c1c1cff
  • 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#1c1c1cff
  • notificationLink.foreground#00a68fff
  • notifications.background#1c1c1cff
  • notifications.border#1c1c1cff
  • panel.background#1c1c1cff
  • panel.border#1c1c1cff
  • panel.dropBackground#151515ff
  • panelTitle.activeBorder#00a68fff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#a2a2a2ff
  • peekView.border#1c1c1cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1c1c1cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#151515ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1c1c1cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000ff
  • scrollbarSlider.activeBackground#505050bf
  • scrollbarSlider.background#373737bf
  • scrollbarSlider.hoverBackground#434343bf
  • settings.checkboxBackground#151515ff
  • settings.checkboxBorder#505050ff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#1c1c1cff
  • settings.dropdownBorder#1c1c1cff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#2c2c2cff
  • settings.headerForeground#d1eeffff
  • settings.modifiedItemIndicator#3d5a77ff
  • settings.numberInputBackground#1c1c1cff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#1c1c1cff
  • settings.textInputForeground#edededff
  • sideBar.background#1c1c1cff
  • sideBar.dropBackground#151515ff
  • sideBar.foreground#a2a2a2ff
  • sideBarSectionHeader.background#1c1c1cff
  • sideBarSectionHeader.foreground#505050ff
  • sideBarTitle.foreground#505050ff
  • statusBar.background#232323ff
  • statusBar.debuggingBackground#681300ff
  • statusBar.debuggingForeground#a2a2a2ff
  • statusBar.foreground#a2a2a2ff
  • statusBar.noFolderBackground#2b083cff
  • statusBar.noFolderForeground#a2a2a2ff
  • tab.activeBackground#1c1c1cff
  • tab.activeBorder#00a68fff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#00a68fbf
  • tab.border#1c1c1cff
  • tab.inactiveBackground#1c1c1cff
  • tab.inactiveForeground#a2a2a2ff
  • tab.inactiveModifiedBorder#00a68fbf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#00a68f80
  • tab.unfocusedInactiveForeground#a2a2a2ff
  • tab.unfocusedInactiveModifiedBorder#00a68f80
  • terminal.ansiBlack#151515ff
  • terminal.ansiBlue#6ba7e2ff
  • terminal.ansiBrightBlack#757575ff
  • terminal.ansiBrightBlue#8ebee8ff
  • terminal.ansiBrightCyan#bbade8ff
  • terminal.ansiBrightGreen#6ff3d9ff
  • terminal.ansiBrightMagenta#f086b4ff
  • terminal.ansiBrightRed#ee4a71ff
  • terminal.ansiBrightWhite#e6e6e6ff
  • terminal.ansiBrightYellow#f2d0acff
  • terminal.ansiCyan#ac89d8ff
  • terminal.ansiGreen#6ff3d9ff
  • terminal.ansiMagenta#f086b4ff
  • terminal.ansiRed#ee4a71ff
  • terminal.ansiWhite#cdcdcdff
  • terminal.ansiYellow#f4bc83ff
  • terminal.background#151515ff
  • terminal.border#1c1c1cff
  • terminal.foreground#dbdbdbff
  • terminal.selectionBackground#3d5a7740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1c1c1cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00a68fff
  • textLink.foreground#00a68fff
  • textPreformat.foreground#f086b4ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1c1c1cff
  • titleBar.activeForeground#a2a2a2ff
  • titleBar.inactiveBackground#1c1c1cff
  • titleBar.inactiveForeground#505050ff
  • widget.shadow#070707ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e6e6e6ff
emphasisitalic
strongbold
header#000080
comment#6b6b6bff
constant.language#f4bc83ff
constant.numeric#f4bc83ff
constant.regexp#f086b4ff
entity.name.tag#5c98d2ff
entity.name.tag.css#f2d0acff
entity.other.attribute-name#f4bc83ff
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#f4bc83ff
invalid#f44747
markup.underlineunderline
markup.bold#ed83b1ffbold
markup.heading#ed83b1ffbold
markup.italicitalic
markup.inserted#f4bc83ff
markup.deleted#6ff3d9ff
markup.changed#ed83b1ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#6ff3d9ff
punctuation.definition.tag#909090ff
meta.preprocessor#ed83b1ff
meta.preprocessor.string#6ff3d9ff
meta.preprocessor.numeric#f4bc83ff
meta.structure.dictionary.key.python#dbdbdbff
meta.diff.header#ed83b1ff
storage#ed83b1ff
storage.type#f4bc83ff
storage.modifier#f4bc83ff
string#6ff3d9ff
string.tag#6ff3d9ff
string.value#6ff3d9ff
string.regexp#6ff3d9ff
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#ed83b1ff
keyword.control#ed83b1ff
keyword.operator#e6e6e6ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ed83b1ff
keyword.other.unit#f4bc83ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ed83b1ff
support.function.git-rebase#8ebee8ff
constant.sha.git-rebase#f4bc83ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ed83b1ff
entity.name.function, support.function, support.constant.handlebars#8ebee8ff
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#a5c1e4ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a5c1e4ff
keyword.control#ed83b1ff
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#6ff3d9ff
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#f086b4ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e6e6e6ff
keyword.operator.quantifier.regexp#f4bc83ff
constant.character#ed83b1ff
constant.character.escape#909090ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#6ff3d9ff
string.template#6ff3d9ff
storage.type.function#f4bc83ff
support.class.component.js#5c98d2ff
variable.parameter#bbbbbbff
variable.other.property#e6e6e6ff
support.function, support.constant.handlebars#8ebee8ff
support.type, support.class, support.constant.math#f2d0acff
support.type.vendored.property-name, support.type.property-name#dbdbdbff
support.function#8ebee8ff
variable.other.constant#eba5bfff
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#ed83b1ff
entity.name.type.class, entity.name.type.module#a5c1e4ff
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#6b6b6bff
markup.headingnormal

Shiki preview

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

Loading...

Dainty – Panda Theme - Coding Theme