Skip to main content
Coding Theme

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#181818
  • activityBar.foreground#D8DEE9
  • activityBarBadge.background#88C0D0
  • activityBarBadge.foreground#3B4252
  • button.background#5E81AC
  • button.foreground#ECEFF4
  • button.hoverBackground#81A1C1
  • chat.avatarBackground#222222
  • chat.avatarForeground#D8DEE9
  • chat.requestBackground#181818
  • chat.requestBorder#3B4252
  • chat.slashCommandBackground#3B4252
  • chat.slashCommandForeground#86B9C7
  • editor.background#181818
  • editor.foreground#D8DEE9
  • editorBracketHighlight.foreground1#A2CB7F
  • editorBracketHighlight.foreground2#CB77BC
  • editorBracketHighlight.foreground3#88C0D0
  • editorBracketHighlight.foreground4#367CD4
  • editorBracketHighlight.foreground5#C8AE79
  • editorBracketHighlight.foreground6#66A1DC
  • editorBracketPairGuide.activeBackground1#3B425200
  • editorBracketPairGuide.activeBackground2#3B425200
  • editorBracketPairGuide.activeBackground3#3B425200
  • editorBracketPairGuide.activeBackground4#3B425200
  • editorBracketPairGuide.activeBackground5#3B425200
  • editorBracketPairGuide.activeBackground6#3B425200
  • editorBracketPairGuide.background1#3B425200
  • editorBracketPairGuide.background2#3B425200
  • editorBracketPairGuide.background3#3B425200
  • editorBracketPairGuide.background4#3B425200
  • editorBracketPairGuide.background5#3B425200
  • editorBracketPairGuide.background6#3B425200
  • editorError.foreground#BF616A
  • editorInfo.foreground#86B9C7
  • editorWarning.foreground#E4BE92
  • gitDecoration.addedResourceForeground#A3BE8C
  • gitDecoration.conflictingResourceForeground#BF616A
  • gitDecoration.deletedResourceForeground#BF616A
  • gitDecoration.ignoredResourceForeground#4C566A
  • gitDecoration.modifiedResourceForeground#E4BE92
  • gitDecoration.renamedResourceForeground#E4BE92
  • gitDecoration.stageDeletedResourceForeground#BF616A
  • gitDecoration.stageModifiedResourceForeground#75B3AC
  • gitDecoration.untrackedResourceForeground#A3BE8C
  • inlineChat.background#222222
  • inlineChat.border#3B4252
  • inlineChat.shadow#00000066
  • inlineChatInput.background#181818
  • inlineChatInput.border#3B4252
  • inlineChatInput.placeholderForeground#D8DEE980
  • input.background#181818
  • input.border#3B4252
  • input.foreground#D8DEE9
  • input.placeholderForeground#D8DEE980
  • list.activeSelectionBackground#3B4252
  • list.activeSelectionForeground#86B9C7
  • list.hoverBackground#222222
  • list.hoverForeground#D8DEE9
  • quickInput.background#222222
  • quickInput.foreground#D8DEE9
  • quickInputList.focusBackground#3B4252
  • quickInputList.focusForeground#86B9C7
  • scrollbarSlider.activeBackground#86B9C780
  • scrollbarSlider.background#4C566A80
  • scrollbarSlider.hoverBackground#5E81AC80
  • sideBar.background#222222
  • sideBar.foreground#D8DEE9
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#181818
  • statusBar.debuggingBackground#5E81AC
  • statusBar.debuggingForeground#ECEFF4
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#181818
  • statusBarItem.activeBackground#383838
  • statusBarItem.hoverBackground#222222
  • statusBarItem.prominentBackground#222222
  • statusBarItem.prominentHoverBackground#383838
  • statusBarItem.remoteBackground#181818
  • statusBarItem.remoteForeground#D8DEE9
  • statusBarItem.remoteHoverBackground#222222
  • tab.activeBackground#222222
  • tab.activeForeground#D8DEE9
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#8C98A7
  • terminal.ansiBlack#3B4252
  • terminal.ansiBlue#5E81AC
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#81A1C1
  • terminal.ansiBrightCyan#75B3AC
  • terminal.ansiBrightGreen#A3BE8C
  • terminal.ansiBrightMagenta#C98BAD
  • terminal.ansiBrightRed#BF616A
  • terminal.ansiBrightWhite#ECEFF4
  • terminal.ansiBrightYellow#E4BE92
  • terminal.ansiCyan#86B9C7
  • terminal.ansiGreen#A3BE8C
  • terminal.ansiMagenta#C98BAD
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#E5E9F0
  • terminal.ansiYellow#E4BE92
  • terminal.background#181818
  • terminal.border#3B4252
  • terminal.foreground#D8DEE9
  • terminal.selectionBackground#4C566A80
  • terminalCursor.background#D8DEE9
  • terminalCursor.foreground#D8DEE9
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.separator.array, meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma, meta.brackets, meta.array.literal, meta.tag.attributes#656D78
comment, punctuation.definition.comment#6B6B75
variable, string constant.other.placeholder#D8DEE9
constant.other.color#D8DEE9
invalid, invalid.illegal#BF616A
keyword, storage.type, storage.modifier#81A1C1
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#81A1C1
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#81A1C1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#88C0D0
meta.block variable.other#D8DEE9
support.other.variable, string.other.link#75B3AC
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#C98BAD
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#A3BE8C
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#75B3AC
support.type#75B3AC
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#C98BAD
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#86B9C7
variable.language#5E81ACitalic
entity.name.method.js#86B9C7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#86B9C7
entity.other.attribute-name#75B3AC
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#75B3ACitalic
entity.other.attribute-name.class#75B3AC
source.sass keyword.control#5E81AC
markup.inserted#A3BE8C
markup.deleted#BF616A
markup.changed#E4BE92
string.regexp#E4BE92
constant.character.escape#E4BE92
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#86B9C7italic
source.js constant.other.object.key.js string.unquoted.label.js#C98BADitalic
source.json meta.structure.dictionary.json support.type.property-name.json#81A1C1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#75B3AC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#86B9C7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5E81AC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C98BAD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E4BE92
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A3BE8C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#81A1C1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#75B3AC
text.html.markdown, punctuation.definition.list_item.markdown#D8DEE9
text.html.markdown markup.inline.raw.markdown#81A1C1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4C566A
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#86B9C7
markup.italic#D8DEE9italic
markup.bold, markup.bold string#D8DEE9bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#D8DEE9bold italic
markup.underline#C98BADunderline
markup.quote punctuation.definition.blockquote.markdown#4C566A
markup.quoteitalic
string.other.link.title.markdown#86B9C7
string.other.link.description.title.markdown#81A1C1
constant.other.reference.link.markdown#75B3AC
markup.raw.block#81A1C1
markup.raw.block.fenced.markdown#4C566A
punctuation.definition.fenced.markdown#4C566A
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#D8DEE9
variable.language.fenced.markdown#5E81AC
meta.separator#5E81ACbold
markup.table#D8DEE9
meta.array.literal#8C98A7
Aroma theme by abersager - VS Code Theme