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
  • 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#FFC66D
  • editorBracketHighlight.foreground2#FFC66D
  • 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
  • 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#3fa2ae
  • terminal.ansiBrightGreen#FFC66D
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#6A8759
  • terminal.ansiCyan#3fa2ae
  • terminal.ansiGreen#FFC66D
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#CC8242
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#6A8759
  • terminal.foreground#CCCCCC
  • 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#6A8759
constant.numeric#7A9EC2
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#CC8242
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#CCCCCC
constant.language, support.type.builtin#CC8242
constant.character, constant.other#3fa2ae
variable.language#CC8242
keyword, keyword.operator.logical, keyword.operator.constructor#CC8242
keyword.operator#CC8242
storage#CC8242
storage.type#CC8242
entity.name.type.class#FFC66D
entity.name.type#7A9EC2
variable.other, variable.other.property, variable.other.block, entity.name.type.module#CCCCCC
entity.other.inherited-class#FFC66D
storage.modifier.import, storage.modifier.package#7A9EC2
entity.name.function, support.function#FFC66D
entity.name.function-call#CCCCCC
function.support.builtin, function.support.core#FFC66D
entity.name.tag, entity.name.tag.class.js#CC8242
entity.name.tag.class, entity.name.tag.id#3fa2ae
entity.other.attribute-name#FFC66D
support.constant#3fa2ae
support.constant.property-value#A5C261
support.type#7A9EC2
support.type.object.module#CC8242
support.dictionary.json#3fa2ae
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#CCCCCC
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#3fa2ae
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#FFC66D
variable.css, variable.scss, variable.less, variable.sass#3fa2ae
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#6A8759
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#3fa2ae
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#6A8759
string.detected-link#7A9EC2
meta.diff, meta.diff.header#75715E
markup.deleted#CC8242
markup.inserted#FFC66D
markup.changed#6A8759
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#6A8759
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#7A9EC2
markup.bold.markdownbold
markup.heading.markdown#CC8242bold
markup.quote.markdown#FFC66D
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#3fa2ae
punctuation.definition.list_item.markdown#ffffffbold
ThemeDatabase All Themes by enes ozturk - VS Code Theme