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.activeBorder#f9826c
  • activityBar.background#d8dee9
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#2a85cf
  • activityBarBadge.foreground#ffffff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#159739
  • button.foreground#ffffff
  • button.hoverBackground#138934
  • checkbox.background#fafbfc
  • checkbox.border#d1d5da
  • debugToolBar.background#ffffff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fafbfc
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#ffffff
  • editor.background#eceff4
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#fafbfc
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#34d05840
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#fffbdd
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorGroup.border#e1e4e8
  • editorGroup.dropBackground#e5e9f0
  • editorGroup.emptyBackground#e5e9f0
  • editorGroupHeader.noTabsBackground#e5e9f0
  • editorGroupHeader.tabsBackground#e5e9f0
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#d7dbe0
  • editorIndentGuide.background#eff2f6
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#f6f8fa
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • inlineTitleBar.background#e5e9f0
  • input.background#fafbfc
  • input.border#e1e4e8
  • input.foreground#2f363d
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#2f363d
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#2f363d
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#2f363d
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#2f363d
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#e5e9f0
  • sideBar.border#d8dee9
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#d8dee9
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#e5e9f0
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#e5e9f0
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#eceff4
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#d8dee9
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#e5e9f0
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#ffffff
  • terminal.foreground#586069
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#032F62
  • textLink.foreground#032F62
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#e5e9f0
  • titleBar.activeForeground#2f363d
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6A737D
constant, entity.name.constant, variable.other.constant, variable.language#0c60a5
entity, entity.name#6F42C1
variable.parameter.function#24292E
entity.name.tag#22863A
keyword#D73A49
storage.modifier.package, storage.modifier.import, storage.type.java#24292E
string, punctuation.definition.string, string punctuation.section.embedded source#032F62
support#0c60a5
meta.property-name#6F42C1
variable#E36209
invalid.broken#B31D28italic
invalid.deprecated#B31D28italic
invalid.illegal#B31D28italic
invalid.unimplemented#B31D28italic
carriage-return#FAFBFCitalic underline
message.error#B31D28
string source#24292E
source.regexp, string.regexp#032F62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032F62
string.regexp constant.character.escape#22863Abold
support.constant#0c60a5
support.variable#6F42C1
meta.module-reference#0c60a5
punctuation.definition.list.begin.markdown#E36209
markup.heading, markup.heading entity.name#6F42C1bold
markup.quote#22863A
markup.italic#24292Eitalic
markup.bold#24292Ebold
markup.raw#6F42C1
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#B31D28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863A
markup.changed, punctuation.definition.changed#E36209
markup.ignored, markup.untracked#F6F8FA
meta.diff.range#6F42C1bold
meta.diff.header#6F42C1
meta.separator#6F42C1bold
meta.output#6F42C1
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#B31D28
constant.other.reference.link, string.other.link#032F62underline
variable.parameter.function#3B4252
comment, punctuation.definition.comment#748599
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#0D7579
none#3B4252
keyword.operator#CB5C69
keyword, keyword.control#0D7579
variable#3B4252
entity.name.function, meta.require, support.function.any-method#0D7579
meta.class, support.class, entity.name.class, entity.name.type.class#0D7579
keyword.other.special-method#0D7579
storage, storage.type#0c60a5
support.function#0c60a5
string, constant.other.symbol, entity.other.inherited-class#509546
constant.numeric#3B4252
constant#3B4252
entity.name.tag#0D7579
entity.other.attribute-name#0D7579
meta.selector#3B4252
markup.heading punctuation.definition.heading, entity.name.section#3B4252
keyword.other.unit#3B4252
markup.raw.inline#509546
string.other.link#CB5C69
meta.link#FF9B39
markup.list#CB5C69
markup.quote#FF9B39
meta.separator#3B42527
markup.inserted#509546
markup.deleted#CB5C69
markup.changed#A769BD
string.regexp#0D7579
constant.character.escape#27C0B2
punctuation.section.embedded, variable.interpolation#3B42527
invalid.illegal#CD3131
entity, entity.name#509546
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080

Shiki preview

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

Loading...

Nord Light - Coding Theme