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#2F333D
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • debugToolBar.background#2F333D
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#282c34
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorBracketHighlight.foreground1#957FB8
  • editorBracketHighlight.foreground2#FFA066
  • editorBracketHighlight.foreground3#7E9CD8
  • editorBracketHighlight.foreground4#D27E99
  • editorBracketHighlight.foreground5#E6C384
  • editorBracketHighlight.foreground6#7AA89F
  • editorBracketHighlight.unexpectedBracket.foreground#FF5D62
  • editorBracketMatch.border#54546D
  • editorBracketPairGuide.activeBackground1#957FB8
  • editorBracketPairGuide.activeBackground2#FFA066
  • editorBracketPairGuide.activeBackground3#7E9CD8
  • editorBracketPairGuide.activeBackground4#D27E99
  • editorBracketPairGuide.activeBackground5#E6C384
  • editorBracketPairGuide.activeBackground6#7AA89F
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#f48771
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notifications.background#21252b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252B
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#383E4A
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#7dcbc4
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#d7ba7d
  • terminal.ansiCyan#7dcbc4
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#8aaceb
  • terminal.ansiRed#EC9076
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d7ba7d
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment, string.quoted.docstring.multi.python#7c8276
string, string.template#d7ba7d
constant.numeric#8aaceb
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#8aaceb
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#abb2bf
constant.language#7dcbc4
constant.character, constant.other#7dcbc4
variable.language#EC9076
keyword, keyword.operator.logical, keyword.operator.constructor#EC9076
keyword.operator#EC9076
storage#EC9076
storage.type#7dcbc4
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#61afef
variable.other, variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#98c379
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#98c379
variable.parameter, entity.name.variable.parameter, parameter.variable#F0D879
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js#EC9076
entity.name.tag.class, entity.name.tag.id#7dcbc4
entity.other.attribute-name#98c379
support.constant#7dcbc4
support.type, support.variable#7dcbc4
support.dictionary.json#7dcbc4
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#7dcbc4
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#7dcbc4
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#d7ba7d
unit.css, unit.scss, unit.less, unit.sass#8aaceb
function.css, function.scss, function.less, function.sass#7dcbc4
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#7dcbc4
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#EC9076
markup.inserted#98c379
markup.changed#d7ba7d
constant.numeric.line-number.find-in-files - match#7dcbc4A0
entity.name.filename.find-in-files#d7ba7d
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#EC9076bold
markup.quote.markdown#98c379
meta.separator.markdown#8aacebbold
markup.inline.raw, markup.raw.block.markdown#7dcbc4
punctuation.definition.list_item.markdown#ffffffbold