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#001c41ff
  • activityBar.dropBackground#00163aff
  • activityBar.foreground#009ebdff
  • activityBar.inactiveForeground#375178ff
  • activityBarBadge.background#009ebdbf
  • activityBarBadge.foreground#eeffffff
  • badge.background#009ebdbf
  • badge.foreground#eeffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#00163aff
  • breadcrumb.focusForeground#dcefffff
  • breadcrumb.foreground#586f97ff
  • breadcrumbPicker.background#001c41ff
  • button.background#005d7bff
  • button.foreground#eeffffff
  • button.hoverBackground#007290ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#001c41ff
  • debugToolBar.background#00163aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#001c41ff
  • dropdown.border#001c41ff
  • dropdown.foreground#dcefffff
  • editor.background#00163aff
  • editor.findMatchBackground#2c547540
  • editor.findMatchHighlightBackground#2c547540
  • editor.findRangeHighlightBackground#2c547540
  • editor.focusedStackFrameHighlightBackground#2c547540
  • editor.foreground#c9dcffff
  • editor.hoverHighlightBackground#2c547540
  • editor.inactiveSelectionBackground#2c547520
  • editor.lineHighlightBackground#001c41ff
  • editor.lineHighlightBorder#001c41ff
  • editor.rangeHighlightBackground#2c547540
  • editor.selectionBackground#2c547540
  • editor.selectionHighlightBackground#2c547520
  • editor.snippetFinalTabstopHighlightBorder#2c547540
  • editor.snippetTabstopHighlightBackground#2c547540
  • editor.stackFrameHighlightBackground#2c547540
  • editor.wordHighlightBackground#2c547520
  • editor.wordHighlightStrongBackground#2c547520
  • editorActiveLineNumber.foreground#586f97ff
  • editorBracketMatch.background#2c547520
  • editorBracketMatch.border#4495d2ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#c3e0ffff
  • editorError.foreground#b82847ff
  • editorGroup.border#001c41ff
  • editorGroup.dropBackground#00163aff
  • editorGroupHeader.noTabsBackground#00163aff
  • editorGroupHeader.tabsBackground#001c41ff
  • editorGutter.addedBackground#001200ff
  • editorGutter.background#00163aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#420000ff
  • editorGutter.modifiedBackground#000626ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#001c41ff
  • editorHoverWidget.border#001c41ff
  • editorIndentGuide.activeBackground#072d53ff
  • editorIndentGuide.background#002449ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#586f97ff
  • editorLineNumber.foreground#375178ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b82847ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#053600ff
  • editorOverviewRuler.border#001c41ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#720016ff
  • editorOverviewRuler.errorForeground#b82847bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#00314fff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#00163aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#001c41ff
  • editorSuggestWidget.border#001c41ff
  • editorSuggestWidget.foreground#dcefffff
  • editorSuggestWidget.highlightForeground#dcefffff
  • editorSuggestWidget.selectedBackground#002449ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#001c41ff
  • editorWidget.border#001c41ff
  • errorForeground#b82847ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#2c5475ff
  • foreground#c9dcffff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#586f97ff
  • gitDecoration.modifiedResourceForeground#ae8722ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6b9a46ff
  • input.background#00163aff
  • input.foreground#dcefffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#009ebdff
  • inputValidation.errorBackground#420000ff
  • inputValidation.errorBorder#4c0000ff
  • inputValidation.infoBackground#00163aff
  • inputValidation.infoBorder#19385eff
  • inputValidation.warningBackground#280000ff
  • inputValidation.warningBorder#2d0800ff
  • list.activeSelectionBackground#002449ff
  • list.activeSelectionForeground#dcefffff
  • list.dropBackground#00163aff
  • list.errorForeground#b82847ff
  • list.focusBackground#002449ff
  • list.highlightForeground#dcefffff
  • list.hoverBackground#002449ff
  • list.inactiveFocusBackground#002449ff
  • list.inactiveSelectionBackground#002449ff
  • list.inactiveSelectionForeground#dcefffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#001c41ff
  • menu.foreground#a2b6ddff
  • menu.selectionBackground#002449ff
  • menu.selectionForeground#dcefffff
  • menu.separatorBackground#19385eff
  • menubar.selectionBackground#002449ff
  • menubar.selectionForeground#dcefffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#001c41ff
  • notificationLink.foreground#009ebdff
  • notifications.background#001c41ff
  • notifications.border#001c41ff
  • panel.background#001c41ff
  • panel.border#001c41ff
  • panel.dropBackground#00163aff
  • panelTitle.activeBorder#009ebdff
  • panelTitle.activeForeground#dcefffff
  • panelTitle.inactiveForeground#8fa3cbff
  • peekView.border#001c41ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#001c41ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#00163aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#001c41ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00032cff
  • scrollbarSlider.activeBackground#375178bf
  • scrollbarSlider.background#19385ebf
  • scrollbarSlider.hoverBackground#28446bbf
  • settings.checkboxBackground#00163aff
  • settings.checkboxBorder#375178ff
  • settings.checkboxForeground#dcefffff
  • settings.dropdownBackground#001c41ff
  • settings.dropdownBorder#001c41ff
  • settings.dropdownForeground#dcefffff
  • settings.dropdownListBorder#072d53ff
  • settings.headerForeground#c8eeffff
  • settings.modifiedItemIndicator#2c5475ff
  • settings.numberInputBackground#001c41ff
  • settings.numberInputForeground#dcefffff
  • settings.textInputBackground#001c41ff
  • settings.textInputForeground#dcefffff
  • sideBar.background#001c41ff
  • sideBar.dropBackground#00163aff
  • sideBar.foreground#8fa3cbff
  • sideBarSectionHeader.background#001c41ff
  • sideBarSectionHeader.foreground#375178ff
  • sideBarTitle.foreground#375178ff
  • statusBar.background#002449ff
  • statusBar.debuggingBackground#780000ff
  • statusBar.debuggingForeground#8fa3cbff
  • statusBar.foreground#8fa3cbff
  • statusBar.noFolderBackground#2c0054ff
  • statusBar.noFolderForeground#8fa3cbff
  • tab.activeBackground#001c41ff
  • tab.activeBorder#009ebdff
  • tab.activeForeground#dcefffff
  • tab.activeModifiedBorder#009ebdbf
  • tab.border#001c41ff
  • tab.inactiveBackground#001c41ff
  • tab.inactiveForeground#8fa3cbff
  • tab.inactiveModifiedBorder#009ebdbf
  • tab.unfocusedActiveForeground#dcefffff
  • tab.unfocusedActiveModifiedBorder#009ebd80
  • tab.unfocusedInactiveForeground#8fa3cbff
  • tab.unfocusedInactiveModifiedBorder#009ebd80
  • terminal.ansiBlack#234371ff
  • terminal.ansiBlue#56a5e3ff
  • terminal.ansiBrightBlack#33578aff
  • terminal.ansiBrightBlue#56a5e3ff
  • terminal.ansiBrightCyan#4ec5c5ff
  • terminal.ansiBrightGreen#93c36dff
  • terminal.ansiBrightMagenta#d68ccaff
  • terminal.ansiBrightRed#d94a61ff
  • terminal.ansiBrightWhite#d6f2ffff
  • terminal.ansiBrightYellow#f5c963ff
  • terminal.ansiCyan#3ac8e8ff
  • terminal.ansiGreen#93c36dff
  • terminal.ansiMagenta#d68ccaff
  • terminal.ansiRed#d94a61ff
  • terminal.ansiWhite#d0ebffff
  • terminal.ansiYellow#f5c963ff
  • terminal.background#00163aff
  • terminal.border#001c41ff
  • terminal.foreground#c9dcffff
  • terminal.selectionBackground#2c547540
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#001c41ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#009ebdff
  • textLink.foreground#009ebdff
  • textPreformat.foreground#d68ccaff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#001c41ff
  • titleBar.activeForeground#8fa3cbff
  • titleBar.inactiveBackground#001c41ff
  • titleBar.inactiveForeground#375178ff
  • widget.shadow#00082fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Nord - Coding Theme