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#232c30
  • activityBar.border#9991
  • activityBar.foreground#369
  • activityBarBadge.background#39c
  • activityBarBadge.foreground#fff
  • button.background#39c9
  • button.foreground#abc
  • button.hoverBackground#39cc
  • checkbox.background#1c2326f6
  • checkbox.foreground#39c
  • contrastBorder#9991
  • dropdown.background#1c2326f6
  • dropdown.border#9993
  • dropdown.foreground#abc
  • dropdown.listBackground#1c2326f6
  • editor.background#232c30
  • editor.findMatchBackground#fffc3811
  • editor.findMatchBorder#fffc3833
  • editor.findMatchHighlightBackground#fffc3866
  • editor.findMatchHighlightBorder#fffc38cc
  • editor.findRangeHighlightBackground#fffc3899
  • editor.findRangeHighlightBorder#fffc38
  • editor.foreground#ddd
  • editor.inactiveSelectionBackground#6693
  • editor.lineHighlightBackground#99999909
  • editor.lineHighlightBorder#3399ff06
  • editor.rangeHighlightBackground#99999909
  • editor.rangeHighlightBorder#9991
  • editor.selectionBackground#39f3
  • editor.selectionForeground#20292f
  • editor.selectionHighlightBackground#6691
  • editor.wordHighlightBackground#3a88ec66
  • editor.wordHighlightStrongBackground#3a88eccc
  • editorBracketMatch.background#9991
  • editorBracketMatch.border#ec49
  • editorCursor.foreground#abc
  • editorError.foreground#d55
  • editorGroup.border#9993
  • editorGroupHeader.tabsBackground#9991
  • editorGroupHeader.tabsBorder#9993
  • editorGutter.addedBackground#7c1c
  • editorGutter.background#9990
  • editorGutter.deletedBackground#e22c
  • editorGutter.modifiedBackground#36ac
  • editorIndentGuide.activeBackground#9996
  • editorIndentGuide.background#9993
  • editorLineNumber.activeForeground#39f
  • editorLineNumber.foreground#9999
  • editorLink.activeForeground#26c8b1
  • editorRuler.foreground#9993
  • editorWarning.foreground#FEB958
  • editorWidget.background#232c30
  • errorForeground#e0cccc
  • focusBorder#39f9
  • foreground#abc
  • input.background#1c2326f6
  • input.border#9993
  • input.placeholderForeground#9999
  • inputOption.activeBackground#39f1
  • inputOption.activeBorder#39f9
  • list.activeSelectionBackground#369
  • list.activeSelectionForeground#fff
  • list.focusBackground#369c
  • list.focusForeground#fff
  • list.hoverBackground#369c
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#3699
  • list.inactiveSelectionForeground#fff
  • panel.background#232c30
  • panel.border#9991
  • panelInput.border#3696
  • panelTitle.activeBorder#e90c
  • panelTitle.activeForeground#39f
  • panelTitle.inactiveForeground#999c
  • peekView.border#9999
  • quickInput.background#1c2326f6
  • scrollbar.shadow#0001
  • selection.background#39f3
  • settings.checkboxBackground#1c2326f6
  • settings.checkboxBorder#3696
  • settings.checkboxForeground#39c
  • settings.dropdownBackground#1c2326f6
  • settings.dropdownBorder#3696
  • settings.dropdownListBorder#3696
  • settings.numberInputBackground#1c2326f6
  • settings.numberInputBorder#3696
  • settings.textInputBackground#1c2326f6
  • settings.textInputBorder#3696
  • sideBar.background#232c30
  • sideBar.border#9991
  • sideBarSectionHeader.background#9990
  • sideBarSectionHeader.border#9991
  • sideBarSectionHeader.foreground#369
  • sideBarTitle.foreground#369
  • statusBar.background#39c
  • statusBar.debuggingBackground#e9963c
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#369
  • statusBar.noFolderForeground#fff
  • statusBarItem.remoteBackground#396
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#232c30
  • tab.activeBorderTop#e90c
  • tab.activeForeground#39f
  • tab.activeModifiedBorder#36ac
  • tab.border#9991
  • tab.inactiveBackground#9990
  • tab.inactiveForeground#999c
  • tree.indentGuidesStroke#9996
  • widget.shadow#0002

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity, markup, variable, storage, support, meta.expression#dddd—
entity, markup, variable, storage, support, meta.expression#dddd—
entity, markup, variable, storage, support, meta.expression#dddd—
punctuation.keyword, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, storage.type.function.arrow, keyword.operator.assignment, support.function.git-rebase#09fd—
punctuation.definition.block.tag, comment storage.type, constant.regexp, entity.name.section, meta.structure.dictionary.key.python#36a—
keyword, punctuation.definition.keyword, storage.modifier, keyword.control, storage.type, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, constant.language, variable.language, entity.name.tag, support.constant.property-value#c00e—
entity.name.selector, keyword.operator.combinator, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.support.type.property-name#e90—
string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw, meta.structure.dictionary.value, meta.structure.dictionary, meta.structure.array, string.regexp keyword#099—
keyword.operator, storage.type.function.arrow, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end——
constant.numeric#0cc—
entity, markup, variable, storage, source, support, meta.expression——
entity.name.variable, keyword.other.unit, constant.other, constant.other punctuation.definition#789—
keyword.operator, punctuation#3c3—
comment storage, comment punctuation.definition#669c—
constant.sha.git-rebase#ec4—
meta.brace, punctuation.section, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.function.body.begin, punctuation.definition.function.body.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c93e—
entity, markup, variable, storage, support, meta.expression#dddd—
punctuation.keyword, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, storage.type.function.arrow, keyword.operator.assignment, support.function.git-rebase#09fd—
punctuation.definition.block.tag, comment storage.type, constant.regexp, entity.name.section, meta.structure.dictionary.key.python#36a—
keyword, punctuation.definition.keyword, storage.modifier, keyword.control, storage.type, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, constant.language, variable.language, entity.name.tag, support.constant.property-value#c00e—
entity.name.selector, keyword.operator.combinator, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.support.type.property-name#e90—
string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw, meta.structure.dictionary.value, meta.structure.dictionary, meta.structure.array, string.regexp keyword#099—
keyword.operator, storage.type.function.arrow, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end——
constant.numeric#0cc—
entity, markup, variable, storage, source, support, meta.expression——
entity.name.variable, keyword.other.unit, constant.other, constant.other punctuation.definition#789—
keyword.operator, punctuation#3c3—
comment storage, comment punctuation.definition#669c—
constant.sha.git-rebase#ec4—
meta.brace, punctuation.section, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.function.body.begin, punctuation.definition.function.body.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c93e—
comment, punctuation.definition.comment#999e—
invalid#d55—
markup.inserted#7c1—
markup.deleted#e22—
markup.changed#36a—
token.info-token#36f—
token.warn-token#c93—
token.error-token#c33—
token.debug-token#c0c—
entity, markup, variable, storage, support, meta.expression#dddd—
punctuation.keyword, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, storage.type.function.arrow, keyword.operator.assignment, support.function.git-rebase#09fd—
punctuation.definition.block.tag, comment storage.type, constant.regexp, entity.name.section, meta.structure.dictionary.key.python#36a—
keyword, punctuation.definition.keyword, storage.modifier, keyword.control, storage.type, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, constant.language, variable.language, entity.name.tag, support.constant.property-value#c00e—
entity.name.selector, keyword.operator.combinator, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.support.type.property-name#e90—
string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw, meta.structure.dictionary.value, meta.structure.dictionary, meta.structure.array, string.regexp keyword#099—
keyword.operator, storage.type.function.arrow, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end——
constant.numeric#0cc—
entity, markup, variable, storage, source, support, meta.expression——
entity.name.variable, keyword.other.unit, constant.other, constant.other punctuation.definition#789—
keyword.operator, punctuation#3c3—
comment storage, comment punctuation.definition#669c—
constant.sha.git-rebase#ec4—
meta.brace, punctuation.section, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.function.body.begin, punctuation.definition.function.body.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c93e—
comment, punctuation.definition.comment#999e—
invalid#d55—
markup.inserted#7c1—
markup.deleted#e22—
markup.changed#36a—
token.info-token#36f—
token.warn-token#c93—
token.error-token#c33—
token.debug-token#c0c—
markup.bold, markup.heading, meta.diff.header—bold
markup.italic—italic
markup.underline—underline
markup.inserted, markup.deleted, markup.inline.raw, markup.changed——
entity.name.tag——
entity, markup, variable, storage, support, meta.expression#dddd—
punctuation.keyword, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, storage.type.function.arrow, keyword.operator.assignment, support.function.git-rebase#09fd—
punctuation.definition.block.tag, comment storage.type, constant.regexp, entity.name.section, meta.structure.dictionary.key.python#36a—
keyword, punctuation.definition.keyword, storage.modifier, keyword.control, storage.type, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, constant.language, variable.language, entity.name.tag, support.constant.property-value#c00e—
entity.name.selector, keyword.operator.combinator, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.support.type.property-name#e90—
string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw, meta.structure.dictionary.value, meta.structure.dictionary, meta.structure.array, string.regexp keyword#099—
keyword.operator, storage.type.function.arrow, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end——
constant.numeric#0cc—
entity, markup, variable, storage, source, support, meta.expression——
entity.name.variable, keyword.other.unit, constant.other, constant.other punctuation.definition#789—
keyword.operator, punctuation#3c3—
comment storage, comment punctuation.definition#669c—
constant.sha.git-rebase#ec4—
meta.brace, punctuation.section, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.function.body.begin, punctuation.definition.function.body.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c93e—
comment, punctuation.definition.comment#999e—
invalid#d55—
markup.inserted#7c1—
markup.deleted#e22—
markup.changed#36a—
token.info-token#36f—
token.warn-token#c93—
token.error-token#c33—
token.debug-token#c0c—
markup.bold, markup.heading, meta.diff.header—bold
markup.italic—italic
markup.underline—underline
markup.inserted, markup.deleted, markup.inline.raw, markup.changed——
entity.name.tag——
meta.selector#c00—
meta.preprocessor#36a—
meta.preprocessor.string#a30616—
meta.preprocessor.numeric#099—
meta.structure.dictionary.key.python#36a—
meta.diff.header#509606—
SMotaal's Frictionless Theme by SMotaal - VS Code Theme