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#1a1b1dff
  • activityBar.dropBackground#131517ff
  • activityBar.foreground#70949eff
  • activityBar.inactiveForeground#4f4f4fff
  • activityBarBadge.background#70949ebf
  • activityBarBadge.foreground#ffffffff
  • badge.background#70949ebf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#131517ff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#6e6e6eff
  • breadcrumbPicker.background#1a1b1dff
  • button.background#32555fff
  • button.foreground#ffffffff
  • button.hoverBackground#466973ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1a1b1dff
  • debugToolBar.background#131517ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1a1b1dff
  • dropdown.border#1a1b1dff
  • dropdown.foreground#edededff
  • editor.background#131517ff
  • editor.findMatchBackground#50505040
  • editor.findMatchHighlightBackground#50505040
  • editor.findRangeHighlightBackground#50505040
  • editor.focusedStackFrameHighlightBackground#50505040
  • editor.foreground#dbdbdbff
  • editor.hoverHighlightBackground#50505040
  • editor.inactiveSelectionBackground#50505020
  • editor.lineHighlightBackground#1a1b1dff
  • editor.lineHighlightBorder#1a1b1dff
  • editor.rangeHighlightBackground#50505040
  • editor.selectionBackground#50505040
  • editor.selectionHighlightBackground#50505020
  • editor.snippetFinalTabstopHighlightBorder#50505040
  • editor.snippetTabstopHighlightBackground#50505040
  • editor.stackFrameHighlightBackground#50505040
  • editor.wordHighlightBackground#50505020
  • editor.wordHighlightStrongBackground#50505020
  • editorActiveLineNumber.foreground#6e6e6eff
  • editorBracketMatch.background#50505020
  • editorBracketMatch.border#7c90a6ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ddddddff
  • editorError.foreground#974b53ff
  • editorGroup.border#1a1b1dff
  • editorGroup.dropBackground#131517ff
  • editorGroupHeader.noTabsBackground#131517ff
  • editorGroupHeader.tabsBackground#1a1b1dff
  • editorGutter.addedBackground#000900ff
  • editorGutter.background#131517ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#2f0000ff
  • editorGutter.modifiedBackground#000000ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1a1b1dff
  • editorHoverWidget.border#1a1b1dff
  • editorIndentGuide.activeBackground#2b2b2dff
  • editorIndentGuide.background#222224ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6e6e6eff
  • editorLineNumber.foreground#4f4f4fff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#974b53ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#213213ff
  • editorOverviewRuler.border#1a1b1dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#58111fff
  • editorOverviewRuler.errorForeground#974b53bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2d2d2dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#131517ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1a1b1dff
  • editorSuggestWidget.border#1a1b1dff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#222224ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1a1b1dff
  • editorWidget.border#1a1b1dff
  • errorForeground#974b53ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#505050ff
  • foreground#dbdbdbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6e6e6eff
  • gitDecoration.modifiedResourceForeground#a28a59ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#80946fff
  • input.background#131517ff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#70949eff
  • inputValidation.errorBackground#2f0000ff
  • inputValidation.errorBorder#360000ff
  • inputValidation.infoBackground#131517ff
  • inputValidation.infoBorder#363637ff
  • inputValidation.warningBackground#1b0000ff
  • inputValidation.warningBorder#230c00ff
  • list.activeSelectionBackground#222224ff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#131517ff
  • list.errorForeground#974b53ff
  • list.focusBackground#222224ff
  • list.highlightForeground#edededff
  • list.hoverBackground#222224ff
  • list.inactiveFocusBackground#222224ff
  • list.inactiveSelectionBackground#222224ff
  • list.inactiveSelectionForeground#edededff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1a1b1dff
  • menu.foreground#b5b5b5ff
  • menu.selectionBackground#222224ff
  • menu.selectionForeground#edededff
  • menu.separatorBackground#363637ff
  • menubar.selectionBackground#222224ff
  • menubar.selectionForeground#edededff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1a1b1dff
  • notificationLink.foreground#70949eff
  • notifications.background#1a1b1dff
  • notifications.border#1a1b1dff
  • panel.background#1a1b1dff
  • panel.border#1a1b1dff
  • panel.dropBackground#131517ff
  • panelTitle.activeBorder#70949eff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#a2a2a2ff
  • peekView.border#1a1b1dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1a1b1dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#131517ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1a1b1dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000005ff
  • scrollbarSlider.activeBackground#4f4f4fbf
  • scrollbarSlider.background#363637bf
  • scrollbarSlider.hoverBackground#424242bf
  • settings.checkboxBackground#131517ff
  • settings.checkboxBorder#4f4f4fff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#1a1b1dff
  • settings.dropdownBorder#1a1b1dff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#2b2b2dff
  • settings.headerForeground#e9e9e9ff
  • settings.modifiedItemIndicator#505050ff
  • settings.numberInputBackground#1a1b1dff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#1a1b1dff
  • settings.textInputForeground#edededff
  • sideBar.background#1a1b1dff
  • sideBar.dropBackground#131517ff
  • sideBar.foreground#a2a2a2ff
  • sideBarSectionHeader.background#1a1b1dff
  • sideBarSectionHeader.foreground#4f4f4fff
  • sideBarTitle.foreground#4f4f4fff
  • statusBar.background#222224ff
  • statusBar.debuggingBackground#640000ff
  • statusBar.debuggingForeground#a2a2a2ff
  • statusBar.foreground#a2a2a2ff
  • statusBar.noFolderBackground#250039ff
  • statusBar.noFolderForeground#a2a2a2ff
  • tab.activeBackground#1a1b1dff
  • tab.activeBorder#70949eff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#70949ebf
  • tab.border#1a1b1dff
  • tab.inactiveBackground#1a1b1dff
  • tab.inactiveForeground#a2a2a2ff
  • tab.inactiveModifiedBorder#70949ebf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#70949e80
  • tab.unfocusedInactiveForeground#a2a2a2ff
  • tab.unfocusedInactiveModifiedBorder#70949e80
  • terminal.ansiBlack#3f4248ff
  • terminal.ansiBlue#8ba0b6ff
  • terminal.ansiBrightBlack#515660ff
  • terminal.ansiBrightBlue#8ba0b6ff
  • terminal.ansiBrightCyan#9fb9b8ff
  • terminal.ansiBrightGreen#a8bc96ff
  • terminal.ansiBrightMagenta#b79cb2ff
  • terminal.ansiBrightRed#b6676dff
  • terminal.ansiBrightWhite#efefefff
  • terminal.ansiBrightYellow#e7cc98ff
  • terminal.ansiCyan#98bdc8ff
  • terminal.ansiGreen#a8bc96ff
  • terminal.ansiMagenta#b79cb2ff
  • terminal.ansiRed#b6676dff
  • terminal.ansiWhite#e9e9e9ff
  • terminal.ansiYellow#e7cc98ff
  • terminal.background#131517ff
  • terminal.border#1a1b1dff
  • terminal.foreground#dbdbdbff
  • terminal.selectionBackground#50505040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1a1b1dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#70949eff
  • textLink.foreground#70949eff
  • textPreformat.foreground#b79cb2ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1a1b1dff
  • titleBar.activeForeground#a2a2a2ff
  • titleBar.inactiveBackground#1a1b1dff
  • titleBar.inactiveForeground#4f4f4fff
  • widget.shadow#04060aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Nord - Coding Theme