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#14151bff
  • activityBar.dropBackground#0b0d16ff
  • activityBar.foreground#6d8ed5ff
  • activityBar.inactiveForeground#4a4b4fff
  • activityBarBadge.background#6d8ed5bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#6d8ed5bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0b0d16ff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#69696cff
  • breadcrumbPicker.background#14151bff
  • button.background#265191ff
  • button.foreground#ffffffff
  • button.hoverBackground#3f64a6ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#14151bff
  • debugToolBar.background#0b0d16ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#14151bff
  • dropdown.border#14151bff
  • dropdown.foreground#edededff
  • editor.background#0b0d16ff
  • editor.findMatchBackground#3f507640
  • editor.findMatchHighlightBackground#3f507640
  • editor.findRangeHighlightBackground#3f507640
  • editor.focusedStackFrameHighlightBackground#3f507640
  • editor.foreground#dadadaff
  • editor.hoverHighlightBackground#3f507640
  • editor.inactiveSelectionBackground#3f507620
  • editor.lineHighlightBackground#14151bff
  • editor.lineHighlightBorder#14151bff
  • editor.rangeHighlightBackground#3f507640
  • editor.selectionBackground#3f507640
  • editor.selectionHighlightBackground#3f507620
  • editor.snippetFinalTabstopHighlightBorder#3f507640
  • editor.snippetTabstopHighlightBackground#3f507640
  • editor.stackFrameHighlightBackground#3f507640
  • editor.wordHighlightBackground#3f507620
  • editor.wordHighlightStrongBackground#3f507620
  • editorActiveLineNumber.foreground#69696cff
  • editorBracketMatch.background#3f507620
  • editorBracketMatch.border#6d8ed5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#fdcd2bff
  • editorError.foreground#bb2046ff
  • editorGroup.border#14151bff
  • editorGroup.dropBackground#0b0d16ff
  • editorGroupHeader.noTabsBackground#0b0d16ff
  • editorGroupHeader.tabsBackground#14151bff
  • editorGutter.addedBackground#000e00ff
  • editorGutter.background#0b0d16ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#440000ff
  • editorGutter.modifiedBackground#000027ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#14151bff
  • editorHoverWidget.border#14151bff
  • editorIndentGuide.activeBackground#25262cff
  • editorIndentGuide.background#1c1d23ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#69696cff
  • editorLineNumber.foreground#4a4b4fff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#bb2046ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#183400ff
  • editorOverviewRuler.border#14151bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#750015ff
  • editorOverviewRuler.errorForeground#bb2046bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#1a2e50ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0b0d16ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#14151bff
  • editorSuggestWidget.border#14151bff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#1c1d23ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#14151bff
  • editorWidget.border#14151bff
  • errorForeground#bb2046ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3f5076ff
  • foreground#dadadaff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#69696cff
  • gitDecoration.modifiedResourceForeground#af8636ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#79974eff
  • input.background#0b0d16ff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#6d8ed5ff
  • inputValidation.errorBackground#440000ff
  • inputValidation.errorBorder#4f0000ff
  • inputValidation.infoBackground#0b0d16ff
  • inputValidation.infoBorder#303136ff
  • inputValidation.warningBackground#270000ff
  • inputValidation.warningBorder#2c0700ff
  • list.activeSelectionBackground#1c1d23ff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#0b0d16ff
  • list.errorForeground#bb2046ff
  • list.focusBackground#1c1d23ff
  • list.highlightForeground#edededff
  • list.hoverBackground#1c1d23ff
  • list.inactiveFocusBackground#1c1d23ff
  • list.inactiveSelectionBackground#1c1d23ff
  • list.inactiveSelectionForeground#edededff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#14151bff
  • menu.foreground#b2b2b2ff
  • menu.selectionBackground#1c1d23ff
  • menu.selectionForeground#edededff
  • menu.separatorBackground#303136ff
  • menubar.selectionBackground#1c1d23ff
  • menubar.selectionForeground#edededff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#14151bff
  • notificationLink.foreground#6d8ed5ff
  • notifications.background#14151bff
  • notifications.border#14151bff
  • panel.background#14151bff
  • panel.border#14151bff
  • panel.dropBackground#0b0d16ff
  • panelTitle.activeBorder#6d8ed5ff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#9f9f9fff
  • peekView.border#14151bff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#14151bff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0b0d16ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#14151bff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00000cff
  • scrollbarSlider.activeBackground#4a4b4fbf
  • scrollbarSlider.background#303136bf
  • scrollbarSlider.hoverBackground#3c3d42bf
  • settings.checkboxBackground#0b0d16ff
  • settings.checkboxBorder#4a4b4fff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#14151bff
  • settings.dropdownBorder#14151bff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#25262cff
  • settings.headerForeground#d9eaffff
  • settings.modifiedItemIndicator#3f5076ff
  • settings.numberInputBackground#14151bff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#14151bff
  • settings.textInputForeground#edededff
  • sideBar.background#14151bff
  • sideBar.dropBackground#0b0d16ff
  • sideBar.foreground#9f9f9fff
  • sideBarSectionHeader.background#14151bff
  • sideBarSectionHeader.foreground#4a4b4fff
  • sideBarTitle.foreground#4a4b4fff
  • statusBar.background#1c1d23ff
  • statusBar.debuggingBackground#640000ff
  • statusBar.debuggingForeground#9f9f9fff
  • statusBar.foreground#9f9f9fff
  • statusBar.noFolderBackground#250039ff
  • statusBar.noFolderForeground#9f9f9fff
  • tab.activeBackground#14151bff
  • tab.activeBorder#6d8ed5ff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#6d8ed5bf
  • tab.border#14151bff
  • tab.inactiveBackground#14151bff
  • tab.inactiveForeground#9f9f9fff
  • tab.inactiveModifiedBorder#6d8ed5bf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#6d8ed580
  • tab.unfocusedInactiveForeground#9f9f9fff
  • tab.unfocusedInactiveModifiedBorder#6d8ed580
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#8aaaf3ff
  • terminal.ansiBrightBlack#6a6e8aff
  • terminal.ansiBrightBlue#8aaaf3ff
  • terminal.ansiBrightCyan#9bdbf5ff
  • terminal.ansiBrightGreen#c7e699ff
  • terminal.ansiBrightMagenta#c193dfff
  • terminal.ansiBrightRed#f65d73ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#fbcc78ff
  • terminal.ansiCyan#9bdbf5ff
  • terminal.ansiGreen#c7e699ff
  • terminal.ansiMagenta#c193dfff
  • terminal.ansiRed#f65d73ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#fbcc78ff
  • terminal.background#0b0d16ff
  • terminal.border#14151bff
  • terminal.foreground#dadadaff
  • terminal.selectionBackground#3f507640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#14151bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#6d8ed5ff
  • textLink.foreground#6d8ed5ff
  • textPreformat.foreground#c193dfff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#14151bff
  • titleBar.activeForeground#9f9f9fff
  • titleBar.inactiveBackground#14151bff
  • titleBar.inactiveForeground#4a4b4fff
  • widget.shadow#00000cff

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#c193dfff
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#dadadaff
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#b2b2b2ff
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#b2b2b2ff
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#abbbe8ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#abbbe8ff
keyword.control#c395e1ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#a9acc1ff
meta.object-literal.key#dadadaff
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#c193dfff
keyword.operator.or.regexp, keyword.control.anchor.regexp#b2b2b2ff
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#dadadaff
support.function, support.constant.handlebars#8aaaf3ff
support.type, support.class, support.constant.math#fbcc78ff
support.type.vendored.property-name, support.type.property-name#dadadaff
support.function#8aaaf3ff
variable.other.constant#e7787cff
meta.brace.round.js, meta.brace.square.js, punctuation#9bdbf5ff
support.type.property-name.json#dadadaff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#b2b2b2ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#c395e1ff
entity.name.type.class, entity.name.type.module#abbbe8ff
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