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#75715E
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#2F333D
  • dropdown.border#181A1F
  • editor.background#282c34
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • 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
  • focusBorder#2F333D
  • input.background#1d1f23
  • inputOption.activeBackground#6B717D
  • list.activeSelectionBackground#6B717D
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#6B717D
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notifications.background#21252b
  • peekView.border#2F333D
  • peekViewEditor.background#2F333D
  • peekViewResult.background#2F333D
  • peekViewTitle.background#2F333D
  • quickInputList.focusBackground#6B717D
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • selection.background#6B717D
  • settings.checkboxBorder#2F333D
  • settings.dropdownBorder#2F333D
  • settings.dropdownListBorder#6B717D
  • settings.focusedRowBorder#2F333D
  • settings.headerBorder#2F333D
  • settings.numberInputBackground#2F333D
  • settings.numberInputBorder#2F333D
  • settings.textInputBackground#2F333D
  • settings.textInputBorder#2F333D
  • 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#21252B
  • tab.inactiveBackground#21252B
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#61afef
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#61afef
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • 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#676f7d
string, string.template#e5c07b
constant.numeric#c678dd
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
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#61afef
constant.character, constant.other#61afef
variable.language#e06c75
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#61afef
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#abb2bf
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#d19a66
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js#e06c75
entity.name.tag.class, entity.name.tag.id#61afef
entity.other.attribute-name#98c379
support.constant#61afef
support.type, support.variable#61afef
support.dictionary.json#61afef
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#61afef
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#61afef
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#61afef
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#61afef
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#98c379
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#61afefA0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdown
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdown
markup.underline.link.markdown#61afef
markup.bold.markdown
markup.heading.markdown#e06c75bold
markup.quote.markdown#98c379
meta.separator.markdown#c678dd
markup.raw.inline.markdown, markup.raw.block.markdown#61afef
punctuation.definition.list_item.markdown#ffffff
tnnmigga-dark by tnnmigga - VS Code Theme