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#00152cff
  • activityBar.dropBackground#000c26ff
  • activityBar.foreground#0098eaff
  • activityBar.inactiveForeground#3c4a63ff
  • activityBarBadge.background#0098eabf
  • activityBarBadge.foreground#f6ffffff
  • badge.background#0098eabf
  • badge.foreground#f6ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#000c26ff
  • breadcrumb.focusForeground#e4edffff
  • breadcrumb.foreground#5c6982ff
  • breadcrumbPicker.background#00152cff
  • button.background#0059a4ff
  • button.foreground#f6ffffff
  • button.hoverBackground#006dbbff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#00152cff
  • debugToolBar.background#000c26ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#00152cff
  • dropdown.border#00152cff
  • dropdown.foreground#e4edffff
  • editor.background#000c26ff
  • editor.findMatchBackground#00568a40
  • editor.findMatchHighlightBackground#00568a40
  • editor.findRangeHighlightBackground#00568a40
  • editor.focusedStackFrameHighlightBackground#00568a40
  • editor.foreground#d0daf0ff
  • editor.hoverHighlightBackground#00568a40
  • editor.inactiveSelectionBackground#00568a20
  • editor.lineHighlightBackground#00152cff
  • editor.lineHighlightBorder#00152cff
  • editor.rangeHighlightBackground#00568a40
  • editor.selectionBackground#00568a40
  • editor.selectionHighlightBackground#00568a20
  • editor.snippetFinalTabstopHighlightBorder#00568a40
  • editor.snippetTabstopHighlightBackground#00568a40
  • editor.stackFrameHighlightBackground#00568a40
  • editor.wordHighlightBackground#00568a20
  • editor.wordHighlightStrongBackground#00568a20
  • editorActiveLineNumber.foreground#5c6982ff
  • editorBracketMatch.background#00568a20
  • editorBracketMatch.border#0098eaff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#298bffff
  • editorError.foreground#ba2543ff
  • editorGroup.border#00152cff
  • editorGroup.dropBackground#000c26ff
  • editorGroupHeader.noTabsBackground#000c26ff
  • editorGroupHeader.tabsBackground#00152cff
  • editorGutter.addedBackground#001400ff
  • editorGutter.background#000c26ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#430000ff
  • editorGutter.modifiedBackground#000b37ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#00152cff
  • editorHoverWidget.border#00152cff
  • editorIndentGuide.activeBackground#14263eff
  • editorIndentGuide.background#081c34ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#5c6982ff
  • editorLineNumber.foreground#3c4a63ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ba2543ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#003700ff
  • editorOverviewRuler.border#00152cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#730012ff
  • editorOverviewRuler.errorForeground#ba2543bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#003363ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#000c26ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#00152cff
  • editorSuggestWidget.border#00152cff
  • editorSuggestWidget.foreground#e4edffff
  • editorSuggestWidget.highlightForeground#e4edffff
  • editorSuggestWidget.selectedBackground#081c34ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#00152cff
  • editorWidget.border#00152cff
  • errorForeground#ba2543ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#00568aff
  • foreground#d0daf0ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#5c6982ff
  • gitDecoration.modifiedResourceForeground#af862aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#629c3cff
  • input.background#000c26ff
  • input.foreground#e4edffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#0098eaff
  • inputValidation.errorBackground#430000ff
  • inputValidation.errorBorder#4d0000ff
  • inputValidation.infoBackground#000c26ff
  • inputValidation.infoBorder#203149ff
  • inputValidation.warningBackground#280000ff
  • inputValidation.warningBorder#2d0700ff
  • list.activeSelectionBackground#081c34ff
  • list.activeSelectionForeground#e4edffff
  • list.dropBackground#000c26ff
  • list.errorForeground#ba2543ff
  • list.focusBackground#081c34ff
  • list.highlightForeground#e4edffff
  • list.hoverBackground#081c34ff
  • list.inactiveFocusBackground#081c34ff
  • list.inactiveSelectionBackground#081c34ff
  • list.inactiveSelectionForeground#e4edffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#00152cff
  • menu.foreground#a7b3c9ff
  • menu.selectionBackground#081c34ff
  • menu.selectionForeground#e4edffff
  • menu.separatorBackground#203149ff
  • menubar.selectionBackground#081c34ff
  • menubar.selectionForeground#e4edffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#00152cff
  • notificationLink.foreground#0098eaff
  • notifications.background#00152cff
  • notifications.border#00152cff
  • panel.background#00152cff
  • panel.border#00152cff
  • panel.dropBackground#000c26ff
  • panelTitle.activeBorder#0098eaff
  • panelTitle.activeForeground#e4edffff
  • panelTitle.inactiveForeground#949fb7ff
  • peekView.border#00152cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#00152cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000c26ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00152cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000220ff
  • scrollbarSlider.activeBackground#3c4a63bf
  • scrollbarSlider.background#203149bf
  • scrollbarSlider.hoverBackground#2e3d55bf
  • settings.checkboxBackground#000c26ff
  • settings.checkboxBorder#3c4a63ff
  • settings.checkboxForeground#e4edffff
  • settings.dropdownBackground#00152cff
  • settings.dropdownBorder#00152cff
  • settings.dropdownForeground#e4edffff
  • settings.dropdownListBorder#14263eff
  • settings.headerForeground#aff1ffff
  • settings.modifiedItemIndicator#00568aff
  • settings.numberInputBackground#00152cff
  • settings.numberInputForeground#e4edffff
  • settings.textInputBackground#00152cff
  • settings.textInputForeground#e4edffff
  • sideBar.background#00152cff
  • sideBar.dropBackground#000c26ff
  • sideBar.foreground#949fb7ff
  • sideBarSectionHeader.background#00152cff
  • sideBarSectionHeader.foreground#3c4a63ff
  • sideBarTitle.foreground#3c4a63ff
  • statusBar.background#081c34ff
  • statusBar.debuggingBackground#730000ff
  • statusBar.debuggingForeground#949fb7ff
  • statusBar.foreground#949fb7ff
  • statusBar.noFolderBackground#2a004dff
  • statusBar.noFolderForeground#949fb7ff
  • tab.activeBackground#00152cff
  • tab.activeBorder#0098eaff
  • tab.activeForeground#e4edffff
  • tab.activeModifiedBorder#0098eabf
  • tab.border#00152cff
  • tab.inactiveBackground#00152cff
  • tab.inactiveForeground#949fb7ff
  • tab.inactiveModifiedBorder#0098eabf
  • tab.unfocusedActiveForeground#e4edffff
  • tab.unfocusedActiveModifiedBorder#0098ea80
  • tab.unfocusedInactiveForeground#949fb7ff
  • tab.unfocusedInactiveModifiedBorder#0098ea80
  • terminal.ansiBlack#20324cff
  • terminal.ansiBlue#25b2ffff
  • terminal.ansiBrightBlack#7385a5ff
  • terminal.ansiBrightBlue#298bffff
  • terminal.ansiBrightCyan#00bbcdff
  • terminal.ansiBrightGreen#8cc663ff
  • terminal.ansiBrightMagenta#df7dfdff
  • terminal.ansiBrightRed#ff2b3cff
  • terminal.ansiBrightWhite#cbdbf9ff
  • terminal.ansiBrightYellow#ecbe61ff
  • terminal.ansiCyan#00bbcdff
  • terminal.ansiGreen#8cc663ff
  • terminal.ansiMagenta#df7dfdff
  • terminal.ansiRed#f15d6eff
  • terminal.ansiWhite#cbdbf9ff
  • terminal.ansiYellow#ecbe61ff
  • terminal.background#000c26ff
  • terminal.border#00152cff
  • terminal.foreground#d0daf0ff
  • terminal.selectionBackground#00568a40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#00152cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#0098eaff
  • textLink.foreground#0098eaff
  • textPreformat.foreground#df7dfdff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#00152cff
  • titleBar.activeForeground#949fb7ff
  • titleBar.inactiveBackground#00152cff
  • titleBar.inactiveForeground#3c4a63ff
  • widget.shadow#000220ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – One Dark Pro - Coding Theme