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.activeBackground#252a31
  • activityBar.activeBorder#ffb347
  • activityBar.background#262a35
  • activityBar.border#0000005e
  • activityBar.foreground#748096
  • activityBar.inactiveForeground#74809670
  • activityBarBadge.background#5ad0ff
  • activityBarBadge.foreground#2a2a2a
  • banner.background#77f70f
  • button.background#77f70f
  • button.foreground#343842
  • button.hoverBackground#58c400
  • button.secondaryBackground#c0fff7
  • button.secondaryForeground#080808
  • button.secondaryHoverBackground#c0fff7
  • checkbox.background#fff890
  • checkbox.border#fff890
  • checkbox.foreground#242936
  • checkbox.selectBackground#fff890
  • checkbox.selectBorder#fff890
  • debugIcon.breakpointForeground#95e6fa
  • descriptionForeground#6c778d
  • disabledForeground#6c778d9a
  • editor.background#262a35
  • editor.findMatchBackground#9ae5fc0a
  • editor.findMatchHighlightBackground#87e7ee34
  • editor.foreground#fefefe
  • editor.inactiveSelectionBackground#9ae5fc50
  • editor.lineHighlightBorder#9debff4f
  • editor.selectionBackground#9ae5fc50
  • editorBracketHighlight.foreground1#ffb347
  • editorBracketHighlight.foreground2#ffb347
  • editorBracketHighlight.foreground3#ffb347
  • editorBracketHighlight.foreground4#ffb347
  • editorCursor.foreground#6bc7d3
  • editorGroup.dropBackground#acf5ff13
  • editorGroup.dropIntoPromptBackground#acf5ff13
  • editorGroupHeader.tabsBackground#22252e
  • editorGroupHeader.tabsBorder#1d1e1f
  • editorLineNumber.activeForeground#2fd4fd
  • editorLineNumber.foreground#2fd4fd50
  • editorStickyScroll.shadow#98f3eba1
  • editorWidget.background#262a35
  • editorWidget.border#171b24
  • editorWidget.foreground#748096
  • editorWidget.resizeBorder#6bc7d3
  • errorForeground#ca8383
  • focusBorder#6bc7d3
  • foreground#6c778d
  • icon.foreground#6c778d
  • input.background#282d3a
  • input.border#74809656
  • input.foreground#748096
  • inputValidation.errorBorder#e63535
  • inputValidation.infoBorder#c3bef0
  • inputValidation.warningBorder#ffb347
  • list.activeSelectionBackground#404e5f41
  • list.activeSelectionForeground#b1b7c2
  • list.focusOutline#ffffff00
  • list.hoverBackground#404e5f41
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#6c778d
  • list.warningForeground#e93b3b91
  • menu.background#262a35
  • menu.border#27272796
  • menu.foreground#6c778d
  • menu.selectionBackground#5365692d
  • menu.separatorBackground#90e2f775
  • menubar.selectionBackground#95e6fac7
  • minimap.errorHighlight#FF5555
  • minimap.findMatchHighlight#7df6face
  • minimap.foregroundOpacity#000000c0
  • minimap.selectionHighlight#c0fff7ef
  • minimap.selectionOccurrenceHighlight#c0fff7ef
  • minimap.warningHighlight#fff890
  • minimapGutter.addedBackground#77f70f
  • progressBar.background#95e6fa
  • sash.hoverBorder#ffcc66b3
  • scrollbarSlider.activeBackground#7496bd52
  • scrollbarSlider.background#7496bd41
  • scrollbarSlider.hoverBackground#7496bd41
  • sideBar.background#22252e
  • sideBar.border#161b25
  • sideBar.foreground#6c778d
  • sideBarActivityBarTop.border#ffae00
  • sideBarSectionHeader.background#22252e
  • sideBarSectionHeader.border#7496bd41
  • sideBarSectionHeader.foreground#6f7696
  • sideBarTitle.background#22252e
  • sideBarTitle.border#7496bd41
  • sideBarTitle.foreground#6f7696
  • statusBar.background#2c303b
  • statusBar.focusBorder#95e6faad
  • statusBar.foreground#95e6fa
  • statusBarItem.activeBackground#9bffff52
  • statusBarItem.focusBorder#6be7e752
  • tab.activeBorderTop#ffae00
  • tab.activeForeground#6e8fb9
  • tab.border#1d1e1f
  • tab.inactiveBackground#22252e
  • tab.inactiveForeground#748096
  • tab.inactiveModifiedBorder#1d1e1f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#22252e
  • terminal.border#161b25
  • terminal.foreground#fefefea6
  • terminal.tab.activeBorder#ffae00
  • terminalCursor.foreground#8BE9FD
  • textLink.activeForeground#FFCB6B
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#22252e
  • titleBar.activeForeground#fefefe
  • titleBar.border#0000004f
  • widget.shadow#95e6faa2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi.python, string.quoted.double.block.python, comment.block.documentation.python, string.quoted.docstring.python#6c778ditalic
variable, string constant.other.placeholder, constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword#FF92DF
storage.type, storage.modifier#d8598e
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, punctuation.section.block, entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, variable.other.enummember, constant.language, constant.other.enum, support.constant, variable.other.constant#a6eaff
storage.type.annotation.java, meta.annotation.java, entity.name.tag.annotation.java, storage.type.annotation, meta.decorator.python#a1e9ffbold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFFFA5
meta.block variable.other, support.other.variable, string.other.link#ffffff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter#77ffff
storage.type.primitive.java, storage.type.primitive.cs, storage.type.cs, keyword.type.cpp, storage.type, keyword.type#d8598ebold
constant.numeric, constant.language, constant.character, constant.escape, variable.parameter#b8eeff
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, meta.tag, keyword.other.template, keyword.other.substitution#7bfc7b
keyword.operator.new#ff62f7bold
support.type#edfff6
meta.object-literal.key, support.type.property.name, string.key#f6afffbold
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, variable.other.custom-property, 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, entity.name.function.constructor#ad7dfa
entity.name.tag.css, meta.selector.css entity.name.tag#db8a8abold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#ac6dffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.method.js#82AAFF
punctuation.separator.key-value, punctuation.typeAnnotation, punctuation.separator.key-value.css#e78ac5a1bold
keyword.other.unit.css, constant.numeric.css, support.constant.unit.css, keyword.other.unit, keyword.other, support.constant.property-value.css, keyword.other.css, constant.language.css#b09effitalic
entity.other.attribute-name.class, source.sass keyword.control, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name#fcc475
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
constant.character.escape, string.regexp#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6f9bf8italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
Drake Theme by rogodev - VS Code Theme