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#0e2642ff
  • activityBar.dropBackground#05203cff
  • activityBar.foreground#2fa0baff
  • activityBar.inactiveForeground#485977ff
  • activityBarBadge.background#2fa0babf
  • activityBarBadge.foreground#f4ffffff
  • badge.background#2fa0babf
  • badge.foreground#f4ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#05203cff
  • breadcrumb.focusForeground#e3efffff
  • breadcrumb.foreground#667693ff
  • breadcrumbPicker.background#0e2642ff
  • button.background#00637bff
  • button.foreground#f4ffffff
  • button.hoverBackground#00768fff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0e2642ff
  • debugToolBar.background#05203cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0e2642ff
  • dropdown.border#0e2642ff
  • dropdown.foreground#e3efffff
  • editor.background#05203cff
  • editor.findMatchBackground#405a7240
  • editor.findMatchHighlightBackground#405a7240
  • editor.findRangeHighlightBackground#405a7240
  • editor.focusedStackFrameHighlightBackground#405a7240
  • editor.foreground#d1ddf8ff
  • editor.hoverHighlightBackground#405a7240
  • editor.inactiveSelectionBackground#405a7220
  • editor.lineHighlightBackground#0e2642ff
  • editor.lineHighlightBorder#0e2642ff
  • editor.rangeHighlightBackground#405a7240
  • editor.selectionBackground#405a7240
  • editor.selectionHighlightBackground#405a7220
  • editor.snippetFinalTabstopHighlightBorder#405a7240
  • editor.snippetTabstopHighlightBackground#405a7240
  • editor.stackFrameHighlightBackground#405a7240
  • editor.wordHighlightBackground#405a7220
  • editor.wordHighlightStrongBackground#405a7220
  • editorActiveLineNumber.foreground#667693ff
  • editorBracketMatch.background#405a7220
  • editorBracketMatch.border#5c99ccff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#cbdfffff
  • editorError.foreground#b73b50ff
  • editorGroup.border#0e2642ff
  • editorGroup.dropBackground#05203cff
  • editorGroupHeader.noTabsBackground#05203cff
  • editorGroupHeader.tabsBackground#0e2642ff
  • editorGutter.addedBackground#001700ff
  • editorGutter.background#05203cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#430000ff
  • editorGutter.modifiedBackground#001024ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0e2642ff
  • editorHoverWidget.border#0e2642ff
  • editorIndentGuide.activeBackground#223653ff
  • editorIndentGuide.background#182d4aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#667693ff
  • editorLineNumber.foreground#485977ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b73b50ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#163d00ff
  • editorOverviewRuler.border#0e2642ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#76001fff
  • editorOverviewRuler.errorForeground#b73b50bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#1d384eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#05203cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0e2642ff
  • editorSuggestWidget.border#0e2642ff
  • editorSuggestWidget.foreground#e3efffff
  • editorSuggestWidget.highlightForeground#e3efffff
  • editorSuggestWidget.selectedBackground#182d4aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0e2642ff
  • editorWidget.border#0e2642ff
  • errorForeground#b73b50ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#405a72ff
  • foreground#d1ddf8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#667693ff
  • gitDecoration.modifiedResourceForeground#b08c37ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#759d56ff
  • input.background#05203cff
  • input.foreground#e3efffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#2fa0baff
  • inputValidation.errorBackground#3d0000ff
  • inputValidation.errorBorder#510000ff
  • inputValidation.infoBackground#05203cff
  • inputValidation.infoBorder#2e405eff
  • inputValidation.warningBackground#250000ff
  • inputValidation.warningBorder#301400ff
  • list.activeSelectionBackground#182d4aff
  • list.activeSelectionForeground#e3efffff
  • list.dropBackground#05203cff
  • list.errorForeground#b73b50ff
  • list.focusBackground#182d4aff
  • list.highlightForeground#e3efffff
  • list.hoverBackground#182d4aff
  • list.inactiveFocusBackground#182d4aff
  • list.inactiveSelectionBackground#182d4aff
  • list.inactiveSelectionForeground#e3efffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0e2642ff
  • menu.foreground#acb9d5ff
  • menu.selectionBackground#182d4aff
  • menu.selectionForeground#e3efffff
  • menu.separatorBackground#2e405eff
  • menubar.selectionBackground#182d4aff
  • menubar.selectionForeground#e3efffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0e2642ff
  • notificationLink.foreground#2fa0baff
  • notifications.background#0e2642ff
  • notifications.border#0e2642ff
  • panel.background#0e2642ff
  • panel.border#0e2642ff
  • panel.dropBackground#05203cff
  • panelTitle.activeBorder#2fa0baff
  • panelTitle.activeForeground#e3efffff
  • panelTitle.inactiveForeground#9aa8c4ff
  • peekView.border#0e2642ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0e2642ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#05203cff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0e2642ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000726ff
  • scrollbarSlider.activeBackground#485977bf
  • scrollbarSlider.background#2e405ebf
  • scrollbarSlider.hoverBackground#3b4c6abf
  • settings.checkboxBackground#05203cff
  • settings.checkboxBorder#485977ff
  • settings.checkboxForeground#e3efffff
  • settings.dropdownBackground#0e2642ff
  • settings.dropdownBorder#0e2642ff
  • settings.dropdownForeground#e3efffff
  • settings.dropdownListBorder#223653ff
  • settings.headerForeground#d3eeffff
  • settings.modifiedItemIndicator#405a72ff
  • settings.numberInputBackground#0e2642ff
  • settings.numberInputForeground#e3efffff
  • settings.textInputBackground#0e2642ff
  • settings.textInputForeground#e3efffff
  • sideBar.background#0e2642ff
  • sideBar.dropBackground#05203cff
  • sideBar.foreground#9aa8c4ff
  • sideBarSectionHeader.background#0e2642ff
  • sideBarSectionHeader.foreground#485977ff
  • sideBarTitle.foreground#485977ff
  • statusBar.background#182d4aff
  • statusBar.debuggingBackground#7d0000ff
  • statusBar.debuggingForeground#9aa8c4ff
  • statusBar.foreground#9aa8c4ff
  • statusBar.noFolderBackground#340057ff
  • statusBar.noFolderForeground#9aa8c4ff
  • tab.activeBackground#0e2642ff
  • tab.activeBorder#2fa0baff
  • tab.activeForeground#e3efffff
  • tab.activeModifiedBorder#2fa0babf
  • tab.border#0e2642ff
  • tab.inactiveBackground#0e2642ff
  • tab.inactiveForeground#9aa8c4ff
  • tab.inactiveModifiedBorder#2fa0babf
  • tab.unfocusedActiveForeground#e3efffff
  • tab.unfocusedActiveModifiedBorder#2fa0ba80
  • tab.unfocusedInactiveForeground#9aa8c4ff
  • tab.unfocusedInactiveModifiedBorder#2fa0ba80
  • terminal.ansiBlack#2e4366ff
  • terminal.ansiBlue#68a4d8ff
  • terminal.ansiBrightBlack#3d577fff
  • terminal.ansiBrightBlue#68a4d8ff
  • terminal.ansiBrightCyan#69c2c1ff
  • terminal.ansiBrightGreen#99c277ff
  • terminal.ansiBrightMagenta#d294c8ff
  • terminal.ansiBrightRed#d05364ff
  • terminal.ansiBrightWhite#def1ffff
  • terminal.ansiBrightYellow#f2c971ff
  • terminal.ansiCyan#5dc5e0ff
  • terminal.ansiGreen#99c277ff
  • terminal.ansiMagenta#d294c8ff
  • terminal.ansiRed#d05364ff
  • terminal.ansiWhite#d8ebffff
  • terminal.ansiYellow#f2c971ff
  • terminal.background#05203cff
  • terminal.border#0e2642ff
  • terminal.foreground#d1ddf8ff
  • terminal.selectionBackground#405a7240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0e2642ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#2fa0baff
  • textLink.foreground#2fa0baff
  • textPreformat.foreground#d294c8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0e2642ff
  • titleBar.activeForeground#9aa8c4ff
  • titleBar.inactiveBackground#0e2642ff
  • titleBar.inactiveForeground#485977ff
  • widget.shadow#001631ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Nord - Coding Theme