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#c9ddb5
  • activityBar.activeBorder#b5a85a
  • activityBar.background#d2e0c5
  • activityBar.dropBorder#b5a85a
  • activityBar.foreground#2a4a1a
  • activityBar.inactiveForeground#4a5a3a66
  • activityBarBadge.background#9aaa4a
  • activityBarBadge.foreground#f4f9f0
  • button.background#9bb030
  • button.foreground#f4f9f0
  • button.hoverBackground#acc040
  • button.secondaryBackground#779688
  • button.secondaryForeground#f4f9f0
  • button.secondaryHoverBackground#8ba290
  • checkbox.border#7a9467
  • commandCenter.activeBackground#6b955314
  • commandCenter.activeBorder#4a5a3a4d
  • commandCenter.activeForeground#2a4a1a
  • commandCenter.background#8fb8780d
  • commandCenter.border#4a5a3a33
  • commandCenter.foreground#2a4a1a
  • commandCenter.inactiveBorder#4a5a3a26
  • commandCenter.inactiveForeground#4a5a3a99
  • editor.background#e3f0d5
  • editor.findMatchBackground#e5b750dd
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foreground#2a4a1a
  • editor.inactiveSelectionBackground#c29e9181
  • editor.lineHighlightBackground#f0f7e520
  • editor.lineHighlightBorder#c5d6b7
  • editor.selectionBackground#e0c0808a
  • editor.selectionHighlightBackground#ffb89d75
  • editor.wordHighlightBackground#5ad28c7d
  • editor.wordHighlightStrongBackground#6effaa97
  • editor.wordHighlightTextBackground#5ad28c7d
  • editorBracketHighlight.foreground1#6a7aaa
  • editorBracketHighlight.foreground2#9f8d00
  • editorBracketHighlight.foreground3#aa8866
  • editorBracketMatch.background#a0c8451a
  • editorBracketMatch.border#a5baa5
  • editorGroupHeader.noTabsBackground#e3f0d5
  • editorGroupHeader.tabsBackground#dbe8d0
  • editorGutter.addedBackground#54b15b
  • editorGutter.background#e3f0d5
  • editorGutter.deletedBackground#c57a3a
  • editorGutter.modifiedBackground#b5a85a
  • editorIndentGuide.activeBackground1#8ba877
  • editorIndentGuide.background1#c5d6b7
  • editorLink.activeForeground#00c59ac6
  • editorSuggestWidget.background#dce8ce
  • editorWidget.background#d8ebca
  • editorWidget.border#bccaab
  • editorWidget.foreground#4a5a3a
  • input.background#eff5e8
  • input.border#6a8a57
  • input.foreground#1a3a0a
  • input.placeholderForeground#5a6a4a
  • list.activeSelectionBackground#acc040
  • list.activeSelectionForeground#f4f9f0
  • list.activeSelectionIconForeground#f4f9f0
  • list.focusAndSelectionOutline#b5a85a
  • list.hoverBackground#cee0b8
  • list.inactiveSelectionBackground#c5d6b7
  • menu.border#c1d4af
  • notebook.cellBorderColor#d5e7bb
  • notebook.selectedCellBackground#c8dcc150
  • ports.iconRunningProcessForeground#9cb545
  • quickInput.background#dbe8d0
  • quickInput.foreground#2a4a1a
  • quickInputList.focusBackground#acc040
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#c5d6b720
  • searchEditor.textInputBorder#bccaab
  • settings.numberInputBorder#bccaab
  • settings.textInputBorder#bccaab
  • sideBar.background#dbe8d0
  • sideBar.dropBackground#6b95532e
  • sideBarActivityBarTop.border#5a6a4a30
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#61616130
  • sideBarStickyScroll.background#dbe8d0
  • sideBarStickyScroll.shadow#c9ddb5
  • sideBarTitle.background#dbe8d0
  • sideBarTitle.foreground#4a5a3a
  • statusBar.background#779688
  • statusBar.debuggingBackground#aa9a5a
  • statusBar.foreground#f4f9f0
  • statusBar.noFolderBackground#8a9a6a
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.remoteBackground#8bb545
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#eff5e8
  • tab.activeForeground#2a4a1a
  • tab.activeModifiedBorder#b5a85a
  • tab.border#dbe8d0
  • tab.inactiveBackground#dbe8d0
  • tab.inactiveForeground#4a5a3ab3
  • tab.inactiveModifiedBorder#b5a85a80
  • tab.lastPinnedBorder#61616130
  • tab.selectedBackground#f0f7e5a5
  • tab.selectedForeground#2a4a1ab3
  • tab.unfocusedActiveBackground#eff5e8
  • tab.unfocusedActiveForeground#2a4a1ab3
  • terminal.inactiveSelectionBackground#d5e1c8
  • titleBar.activeBackground#dbe8d0
  • titleBar.activeForeground#2a4a1a
  • titleBar.inactiveBackground#dbe8d099
  • titleBar.inactiveForeground#2a4a1a99
  • widget.border#c1d4af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#3a3a3a
emphasisitalic
strongbold
meta.diff.header#4a5a7a
comment#7a8471
constant.language#4a6aaa
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#aa6a45
constant.regexp#811F3F
entity.name.tag#8a4a2a
entity.name.selector#8a4a2a
entity.other.attribute-name#c57a3a
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#8a4a2a
invalid#aa6666
markup.underlineunderline
markup.bold#4a5a7abold
markup.heading#8a4a2abold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#6f8e22
markup.deleted#6e8932
markup.changed#5a7aaa
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#5a7aaa
markup.inline.raw#8a4a2a
punctuation.definition.tag#8a4a2a
meta.preprocessor, entity.name.function.preprocessor#4a6aaa
meta.preprocessor.string#6e8932
meta.preprocessor.numeric#aa6a45
meta.structure.dictionary.key.python#5a7aaa
storage#778723
storage.type#778723
storage.modifier, keyword.operator.noexcept#899832
string, meta.embedded.assembly#6e8932
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#4a6aaa
string.regexp#811F3F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#4a6aaa
meta.template.expression#5a7aaa
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#5a7aaa
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#c57a3a
support.type.property-name.json#5a7aaa
keyword#4a6aaa
keyword.control#4a6aaa
keyword.operator#0f5f0f
punctuation.accessor, punctuation.separator.period, meta.property-access punctuation#0f5f0f
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#4a6aaa
keyword.other.unit#aa6a45
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8a4a2a
support.function.git-rebase#5a7aaa
constant.sha.git-rebase#b5a85a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#5a7aaa
variable.language#4a6aaa
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#aa6666
token.debug-token#800080
entity.name.function, meta.function-call, support.function#899832
entity.name.class, entity.name.type.class, support.class#779688
variable.parameter, meta.parameters variable#5f7e3c
entity.name.variable, variable.other.readwrite, variable.other.property#39a91e
variable.other.object, meta.function-call.generic variable#52b488
entity.name.type, support.type, storage.type.primitive#59b2d0
punctuation.definition.string.begin, punctuation.definition.string.end#aa8a6a
support.function.builtin.python, support.type.python#54b15b
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#7a8471italic
support.type.property-name.css, meta.property-name.css#899832
support.constant.property-value.css, meta.property-value.css#6e8932
entity.name.section.markdown, markup.heading.markdown#779688bold
markup.inline.raw.markdown, fenced_code.block.language.markdown#adc045
entity.name.tag.yaml, entity.name.tag.local.yaml#54b15b
Eyes on Lichen by Brandev Devdev - VS Code Theme