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#32333aff
  • activityBar.dropBackground#2c2d35ff
  • activityBar.foreground#7c9ce4ff
  • activityBar.inactiveForeground#636468ff
  • activityBarBadge.background#7c9ce4bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#7c9ce4bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2c2d35ff
  • breadcrumb.focusForeground#f0f0f0ff
  • breadcrumb.foreground#7f7f82ff
  • breadcrumbPicker.background#32333aff
  • button.background#4065a8ff
  • button.foreground#ffffffff
  • button.hoverBackground#5477bbff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#32333aff
  • debugToolBar.background#2c2d35ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#32333aff
  • dropdown.border#32333aff
  • dropdown.foreground#f0f0f0ff
  • editor.background#2c2d35ff
  • editor.findMatchBackground#54658c40
  • editor.findMatchHighlightBackground#54658c40
  • editor.findRangeHighlightBackground#54658c40
  • editor.focusedStackFrameHighlightBackground#54658c40
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#54658c40
  • editor.inactiveSelectionBackground#54658c20
  • editor.lineHighlightBackground#32333aff
  • editor.lineHighlightBorder#32333aff
  • editor.rangeHighlightBackground#54658c40
  • editor.selectionBackground#54658c40
  • editor.selectionHighlightBackground#54658c20
  • editor.snippetFinalTabstopHighlightBorder#54658c40
  • editor.snippetTabstopHighlightBackground#54658c40
  • editor.stackFrameHighlightBackground#54658c40
  • editor.wordHighlightBackground#54658c20
  • editor.wordHighlightStrongBackground#54658c20
  • editorActiveLineNumber.foreground#7f7f82ff
  • editorBracketMatch.background#54658c20
  • editorBracketMatch.border#7c9ce4ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#fdcd2bff
  • editorError.foreground#d33a57ff
  • editorGroup.border#32333aff
  • editorGroup.dropBackground#2c2d35ff
  • editorGroupHeader.noTabsBackground#2c2d35ff
  • editorGroupHeader.tabsBackground#32333aff
  • editorGutter.addedBackground#102600ff
  • editorGutter.background#2c2d35ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#620000ff
  • editorGutter.modifiedBackground#082041ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#32333aff
  • editorHoverWidget.border#32333aff
  • editorIndentGuide.activeBackground#424349ff
  • editorIndentGuide.background#393a41ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7f7f82ff
  • editorLineNumber.foreground#636468ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d33a57ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#2f4d04ff
  • editorOverviewRuler.border#32333aff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#95002aff
  • editorOverviewRuler.errorForeground#d33a57bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#34456aff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2c2d35ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#32333aff
  • editorSuggestWidget.border#32333aff
  • editorSuggestWidget.foreground#f0f0f0ff
  • editorSuggestWidget.highlightForeground#f0f0f0ff
  • editorSuggestWidget.selectedBackground#393a41ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#32333aff
  • editorWidget.border#32333aff
  • errorForeground#d33a57ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#54658cff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7f7f82ff
  • gitDecoration.modifiedResourceForeground#be9443ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#87a55cff
  • input.background#2c2d35ff
  • input.foreground#f0f0f0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#7c9ce4ff
  • inputValidation.errorBackground#440000ff
  • inputValidation.errorBorder#710012ff
  • inputValidation.infoBackground#2c2d35ff
  • inputValidation.infoBorder#4c4d53ff
  • inputValidation.warningBackground#270000ff
  • inputValidation.warningBorder#422400ff
  • list.activeSelectionBackground#393a41ff
  • list.activeSelectionForeground#f0f0f0ff
  • list.dropBackground#2c2d35ff
  • list.errorForeground#d33a57ff
  • list.focusBackground#393a41ff
  • list.highlightForeground#f0f0f0ff
  • list.hoverBackground#393a41ff
  • list.inactiveFocusBackground#393a41ff
  • list.inactiveSelectionBackground#393a41ff
  • list.inactiveSelectionForeground#f0f0f0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#32333aff
  • menu.foreground#bebebeff
  • menu.selectionBackground#393a41ff
  • menu.selectionForeground#f0f0f0ff
  • menu.separatorBackground#4c4d53ff
  • menubar.selectionBackground#393a41ff
  • menubar.selectionForeground#f0f0f0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#32333aff
  • notificationLink.foreground#7c9ce4ff
  • notifications.background#32333aff
  • notifications.border#32333aff
  • panel.background#32333aff
  • panel.border#32333aff
  • panel.dropBackground#2c2d35ff
  • panelTitle.activeBorder#7c9ce4ff
  • panelTitle.activeForeground#f0f0f0ff
  • panelTitle.inactiveForeground#adadadff
  • peekView.border#32333aff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#32333aff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2c2d35ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#32333aff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#17191fff
  • scrollbarSlider.activeBackground#636468bf
  • scrollbarSlider.background#4c4d53bf
  • scrollbarSlider.hoverBackground#57585dbf
  • settings.checkboxBackground#2c2d35ff
  • settings.checkboxBorder#636468ff
  • settings.checkboxForeground#f0f0f0ff
  • settings.dropdownBackground#32333aff
  • settings.dropdownBorder#32333aff
  • settings.dropdownForeground#f0f0f0ff
  • settings.dropdownListBorder#424349ff
  • settings.headerForeground#dcecffff
  • settings.modifiedItemIndicator#54658cff
  • settings.numberInputBackground#32333aff
  • settings.numberInputForeground#f0f0f0ff
  • settings.textInputBackground#32333aff
  • settings.textInputForeground#f0f0f0ff
  • sideBar.background#32333aff
  • sideBar.dropBackground#2c2d35ff
  • sideBar.foreground#adadadff
  • sideBarSectionHeader.background#32333aff
  • sideBarSectionHeader.foreground#636468ff
  • sideBarTitle.foreground#636468ff
  • statusBar.background#393a41ff
  • statusBar.debuggingBackground#821f01ff
  • statusBar.debuggingForeground#adadadff
  • statusBar.foreground#adadadff
  • statusBar.noFolderBackground#421657ff
  • statusBar.noFolderForeground#adadadff
  • tab.activeBackground#32333aff
  • tab.activeBorder#7c9ce4ff
  • tab.activeForeground#f0f0f0ff
  • tab.activeModifiedBorder#7c9ce4bf
  • tab.border#32333aff
  • tab.inactiveBackground#32333aff
  • tab.inactiveForeground#adadadff
  • tab.inactiveModifiedBorder#7c9ce4bf
  • tab.unfocusedActiveForeground#f0f0f0ff
  • tab.unfocusedActiveModifiedBorder#7c9ce480
  • tab.unfocusedInactiveForeground#adadadff
  • tab.unfocusedInactiveModifiedBorder#7c9ce480
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#8aaaf3ff
  • terminal.ansiBrightBlack#6a6e8aff
  • terminal.ansiBrightBlue#8aaaf3ff
  • terminal.ansiBrightCyan#9bdbf5ff
  • terminal.ansiBrightGreen#c7e699ff
  • terminal.ansiBrightMagenta#cd9eebff
  • terminal.ansiBrightRed#f65d73ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#fbcc78ff
  • terminal.ansiCyan#9bdbf5ff
  • terminal.ansiGreen#c7e699ff
  • terminal.ansiMagenta#cd9eebff
  • terminal.ansiRed#f65d73ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#fbcc78ff
  • terminal.background#2c2d35ff
  • terminal.border#32333aff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#54658c40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#32333aff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#7c9ce4ff
  • textLink.foreground#7c9ce4ff
  • textPreformat.foreground#cd9eebff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#32333aff
  • titleBar.activeForeground#adadadff
  • titleBar.inactiveBackground#32333aff
  • titleBar.inactiveForeground#636468ff
  • widget.shadow#21232aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#a9acc1ff
emphasisitalic
strongbold
header#000080
comment#6a6e8aff
constant.language#ef9174ff
constant.numeric#ef9174ff
constant.regexp#cd9eebff
entity.name.tag#e7787cff
entity.name.tag.css#fbcc78ff
entity.other.attribute-name#c395e1ff
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#c395e1ff
invalid#f44747
markup.underlineunderline
markup.bold#c395e1ffbold
markup.heading#c395e1ffbold
markup.italicitalic
markup.inserted#ef9174ff
markup.deleted#c7e699ff
markup.changed#c395e1ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#c7e699ff
punctuation.definition.tag#9bdbf5ff
meta.preprocessor#c395e1ff
meta.preprocessor.string#c7e699ff
meta.preprocessor.numeric#ef9174ff
meta.structure.dictionary.key.python#dfdfdfff
meta.diff.header#c395e1ff
storage#c395e1ff
storage.type#c395e1ff
storage.modifier#c395e1ff
string#c7e699ff
string.tag#c7e699ff
string.value#c7e699ff
string.regexp#c7e699ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#bebebeff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a9acc1ff
keyword#c395e1ff
keyword.control#c395e1ff
keyword.operator#bebebeff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#c395e1ff
keyword.other.unit#ef9174ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c395e1ff
support.function.git-rebase#8aaaf3ff
constant.sha.git-rebase#ef9174ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#c395e1ff
entity.name.function, support.function, support.constant.handlebars#8aaaf3ff
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#b4c4f0ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#b4c4f0ff
keyword.control#c395e1ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#a9acc1ff
meta.object-literal.key#dfdfdfff
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#c7e699ff
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#9bdbf5ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#cd9eebff
keyword.operator.or.regexp, keyword.control.anchor.regexp#bebebeff
keyword.operator.quantifier.regexp#ef9174ff
constant.character#c395e1ff
constant.character.escape#9bdbf5ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#c7e699ff
string.template#c7e699ff
storage.type.function#c395e1ff
support.class.component.js#e7787cff
variable.parameter#f65d73ff
variable.other.property#dfdfdfff
support.function, support.constant.handlebars#8aaaf3ff
support.type, support.class, support.constant.math#fbcc78ff
support.type.vendored.property-name, support.type.property-name#dfdfdfff
support.function#8aaaf3ff
variable.other.constant#e7787cff
meta.brace.round.js, meta.brace.square.js, punctuation#9bdbf5ff
support.type.property-name.json#dfdfdfff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#bebebeff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#c395e1ff
entity.name.type.class, entity.name.type.module#b4c4f0ff
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#6a6e8aff
markup.headingnormal

Shiki preview

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

Loading...

Dainty – Material Theme Palenight - Coding Theme