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.

  • actionBar.toggledBackground#dddddd
  • activityBar.background#e9cc9a
  • activityBarBadge.background#444444
  • activityBarTop.background#e9cc9a
  • badge.background#444444
  • button.background#444444
  • button.foreground#ffffff
  • checkbox.background#e9cc9a
  • commandCenter.background#e9cc9a
  • contrastActiveBorder#2f2f2f
  • contrastBorder#2f2f2f
  • debugExceptionWidget.background#e9cc9a
  • debugToolBar.background#e9cc9a
  • dropdown.background#e9cc9a
  • editor.background#e9cc9a
  • editor.lineHighlightBorder#2f2f2f
  • editorBracketHighlight.foreground1#000000
  • editorBracketHighlight.foreground2#111111
  • editorBracketHighlight.foreground3#222222
  • editorBracketHighlight.foreground4#333333
  • editorBracketHighlight.foreground5#444444
  • editorBracketHighlight.foreground6#555555
  • editorGroup.emptyBackground#e9cc9a
  • editorGroupHeader.noTabsBackground#e9cc9a
  • editorGroupHeader.tabsBackground#e9cc9a
  • editorHoverWidget.background#e9cc9a
  • editorIndentGuide.activeBackground1#00000055
  • editorIndentGuide.activeBackground2#11111155
  • editorIndentGuide.activeBackground3#22222255
  • editorIndentGuide.activeBackground4#33333355
  • editorIndentGuide.activeBackground5#44444455
  • editorIndentGuide.activeBackground6#55555555
  • editorStickyScroll.background#e9cc9a
  • editorSuggestWidget.background#e9cc9a
  • editorWidget.background#e9cc9a
  • input.background#e9cc9a
  • inputOption.activeBackground#e9cc9a
  • inputValidation.errorBackground#e9cc9a
  • inputValidation.infoBackground#e9cc9a
  • inputValidation.warningBackground#e9cc9a
  • list.activeSelectionBackground#e9cc9a
  • list.dropBackground#e9cc9a
  • list.focusBackground#e9cc9a
  • list.hoverBackground#e9cc9a
  • list.inactiveSelectionBackground#e9cc9a
  • menu.background#e9cc9a
  • menubar.selectionBackground#e9cc9a
  • notebook.cellEditorBackground#e9cc9a
  • notebook.editorBackground#e9cc9a
  • panel.background#e9cc9a
  • panelSectionHeader.background#e9cc9a
  • peekViewEditor.background#e9cc9a
  • peekViewResult.background#e9cc9a
  • sideBar.background#e9cc9a
  • sideBarSectionHeader.background#e9cc9a
  • sideBarTitle.background#e9cc9a
  • statusBar.background#000000
  • statusBar.foreground#FFFFFF
  • statusBarItem.prominentBackground#e9cc9a
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#e9cc9a
  • tab.inactiveBackground#e9cc9a
  • tab.unfocusedActiveBackground#e9cc9a
  • tab.unfocusedInactiveBackground#e9cc9a
  • terminal.background#e9cc9a
  • titleBar.activeBackground#e9cc9a
  • titleBar.inactiveBackground#e9cc9a
  • tree.tableOddRowsBackground#e9cc9a
  • welcomePage.background#e9cc9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean, constant.boolean#111111bold
comment#999999bold italic
punctuation.definition.group.begin, punctuation.definition.group.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.object.begin, punctuation.definition.object.endbold
meta.embedded, source.groovy.embedded, variable.legacy.builtin.python#111111
emphasisitalic
strongbold
meta.diff.header#222222
comment#222222
constant.language#111111
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#222222bold
constant.regexp#222222
entity.name.tag#1f1f1fbold
entity.name.selector#111111
entity.other.attribute-name#2f2f2f
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#111111
invalid#111111
markup.underlineunderline
markup.bold#111111bold
markup.heading#111111bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#222222
markup.deleted#222222
markup.changed#222222
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#222222bold
markup.inline.raw#111111
punctuation.definition.tag#111111
meta.preprocessor, entity.name.function.preprocessor#111111
meta.preprocessor.string#111111
meta.preprocessor.numeric#222222
meta.structure.dictionary.key.python#222222
storage#3f3f3fbold italic
storage.type#111111
storage.modifier, keyword.operator.noexcept#111111
string, meta.embedded.assembly#111111bold underline
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#111111bold
string.regexp#222222
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#111111
meta.template.expression#111111
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#222222
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#222222
support.type.property-name.json#222222
keyword#111111bold
keyword.control#111111bold
keyword.operator#111111
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#3f3f3fbold
keyword.other.unit#222222italic
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#111111
support.function.git-rebase#222222
constant.sha.git-rebase#222222
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#111111
variable.language#111111
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#222222
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#222222
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#222222
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#4f4f4f
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#111111
variable.other.constant, variable.other.enummember#222222
meta.object-literal.key#111111
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#222222
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#222222
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#222222
keyword.operator.quantifier.regexp#111111
keyword.operator.or.regexp, keyword.control.anchor.regexp#111111
constant.character#111111
constant.character.escape#111111
entity.name.label#111111
token.info-token#222222
token.warn-token#222222
token.error-token#222222
token.debug-token#222222
Flawuldragon by Humbanew Project - VS Code Theme