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.activeBackground#e3e3e3
  • activityBar.activeBorder#00000000
  • activityBar.background#f7f7f7
  • activityBar.border#ececec
  • activityBar.foreground#6c707e
  • activityBar.inactiveForeground#6c707e
  • activityBarBadge.background#90b4fc
  • activityBarBadge.foreground#444b61
  • badge.background#90b4fc
  • badge.foreground#444b61
  • breadcrumb.background#f7f7f7
  • debugToolBar.background#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#a6d2ff
  • editor.findMatchBorder#00000044
  • editor.findMatchHighlightBackground#fcbd3866
  • editor.foreground#383838
  • editor.lineHighlightBackground#f5f8fe
  • editor.selectionBackground#a6d2ff
  • editor.selectionHighlightBackground#dddbfc7f
  • editor.wordHighlightBackground#dddbfc80
  • editor.wordHighlightStrongBackground#fcd8e87f
  • editorGroupHeader.noTabsBackground#f7f7f7
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorGutter.background#ffffff
  • editorIndentGuide.activeBackground#aeb3c2
  • editorIndentGuide.background#ececec
  • editorInlayHint.background#fafafa
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#767a8a
  • editorLineNumber.dimmedForeground#767a8a
  • editorLineNumber.foreground#b9beca
  • editorOverviewRuler.background#f7f7f7
  • editorOverviewRuler.border#f7f7f7
  • editorRuler.foreground#d8d8d8
  • editorWidget.background#f7f7f7
  • editorWidget.border#ececec
  • focusBorder#aeb3c2
  • foreground#1d1d1d
  • gitDecoration.addedResourceForeground#3e7718
  • gitDecoration.modifiedResourceForeground#0050c1
  • list.activeSelectionBackground#cfdefc
  • list.activeSelectionForeground#000000
  • list.focusAndSelectionOutline#cfdefc
  • list.focusBackground#dfdfdf
  • list.focusForeground#000000
  • list.focusOutline#dfdfdf
  • list.hoverBackground#dfdfdf
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#dfdfdf
  • list.inactiveSelectionForeground#000000
  • minimap.background#f7f7f7
  • minimapSlider.background#3a3a3a33
  • panel.background#f7f7f7
  • panel.border#ececec
  • panelSection.border#ececec
  • panelSectionHeader.background#f7f7f7
  • panelSectionHeader.border#ececec
  • scrollbarSlider.background#3a3a3a33
  • sideBar.background#f7f7f7
  • sideBar.border#ececec
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#ececec
  • statusBar.background#f7f7f7
  • statusBar.border#ececec
  • statusBar.debuggingBackground#599e5e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f7f7f7
  • statusBarItem.remoteBackground#f7f7f7
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#00000000
  • tab.activeBorder#3574f0
  • tab.activeForeground#000000
  • tab.border#00000000
  • tab.hoverForeground#000000
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#777777
  • terminal.ansiBlack#6e6e6e
  • terminal.ansiBlue#0087ff
  • terminal.ansiBrightBlack#1c1c1c
  • terminal.ansiBrightBlue#808080
  • terminal.ansiBrightCyan#8a8a8a
  • terminal.ansiBrightGreen#585858
  • terminal.ansiBrightMagenta#5f5faf
  • terminal.ansiBrightRed#d75f00
  • terminal.ansiBrightWhite#ffffd7
  • terminal.ansiBrightYellow#626262
  • terminal.ansiCyan#00afaf
  • terminal.ansiGreen#5f8700
  • terminal.ansiMagenta#af005f
  • terminal.ansiRed#d70000
  • terminal.ansiWhite#e4e4e4
  • terminal.ansiYellow#af8700
  • terminal.background#f7f7f7
  • terminal.foreground#383838
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#ececec
  • titleBar.border#ececec
  • titleBar.inactiveBackground#262626
  • tree.indentGuidesStroke#00000000
  • widget.border#ececec

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.deprecated
invalid.illegal#FF0000
keyword.operator#383838
keyword, storage#0f54d6
storage.type, support.type#0f54d6
constant.language, support.constant, variable.language#AB6526
variable, support.variable#383838
entity.name.function, support.function#00855f
entity.name.type, entity.other.inherited-class, support.class#6b2fba
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#AB6526
string#8c6c41
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#777777
string source, text source#000000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6B2FBA
entity.name.tag#6B2FBA
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#248700
string.quoted.double.html
source.css
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#008D90
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
meta.object-literal.key, meta.object-literal.key entity.name.function#862F95
variable.language#0042B6
variable.other.object.js#008D90
variable.other.object.property.js
variable.other.object.property#0093a1
variable.other.property#0093a1
variable.other.readwrite.js
variable.other.property.js
string.quoted.double.js
string.quoted.single.js
entity.name.function.js#862F95
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.block.js, meta.method.declaration.js, meta.objectliteral.js#862F95
entity.name.function.js#7D7840
variable.parameter.js#000000
keyword.operator.expression.delete.js#383838
constant.language #0042B6
storage.type.function.js#0042B6
storage.type.js#0042B6bold
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#0f54d6
comment.line.double-slash,comment.block.documentation#248700
comment, punctuation.definition.comment#248700
constant.numeric.float.yaml#383838
constant.language.boolean.yaml#383838
string.unquoted.plain.out.yaml#383838
constant.numeric.integer.yaml#383838
entity.name.tag#6B2FBA
meta.paragraph.markdown#202020
punctuation.definition.heading.markdown#0f54d6
entity.name.section.markdown#0093a1
string.other.link.title.markdown#0f54d6
markup.underline.link.markdown#00855f
punctuation.definition.metadata.markdown#8c6c41
punctuation.definition.link.title.begin.markdown#0f54d6
comment, comment.block, comment.block.documentation, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...