Skip to main content
CodingTheme

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#1f2023
  • activityBar.border#393A3D
  • activityBar.foreground#bcb28d
  • activityBarBadge.background#424852
  • badge.background#535353
  • badge.foreground#eeffff
  • descriptionForeground#bcb28d
  • editor.background#1f2023
  • editor.findMatchBorder#bcb28d66
  • editor.findMatchHighlightBackground#2c5a65
  • editor.findRangeHighlightBackground#2c5a65
  • editor.foreground#d4d4b2
  • editor.lineHighlightBackground#282b31
  • editor.lineHighlightBorder#1f2023
  • editor.selectionBackground#2c5a65
  • editor.selectionHighlightBackground#2c5a65
  • editor.wordHighlightBackground#2c5a65
  • editorBracketMatch.background#ffffff00
  • editorBracketMatch.border#886b67
  • editorCursor.foreground#bcb28d
  • editorError.foreground#E03C8A
  • editorGroupHeader.tabsBackground#1f2023
  • editorGutter.background#1f2023
  • editorIndentGuide.background#2f3033
  • editorLineNumber.foreground#43474c
  • editorLink.activeForeground#999
  • editorOverviewRuler.border#1f2023
  • editorSuggestWidget.selectedBackground#243d46
  • editorWarning.foreground#e6844f
  • editorWidget.background#282b31
  • editorWidget.border#555
  • errorForeground#E03C8A
  • focusBorder#1F2023
  • foreground#bcb28d
  • gitDecoration.ignoredResourceForeground#505f55
  • list.activeSelectionBackground#243d46
  • list.activeSelectionForeground#bcb28d
  • list.errorForeground#E03C8A
  • list.focusBackground#243d46
  • list.focusForeground#bcb28d
  • list.highlightForeground#93a1a1
  • list.hoverBackground#3a3e47
  • list.hoverForeground#bcb28d
  • list.inactiveFocusBackground#243d46
  • list.inactiveSelectionBackground#243d46
  • list.inactiveSelectionForeground#bcb28d
  • list.warningForeground#e6844f
  • panel.background#1f2023
  • panelTitle.activeBorder#e6844f
  • panelTitle.activeForeground#eeffff
  • panelTitle.inactiveForeground#848484
  • selection.background#58b2dc
  • sideBar.background#1f2023
  • sideBar.border#393A3D
  • sideBar.foreground#707C74
  • sideBarSectionHeader.background#1f2023
  • sideBarSectionHeader.foreground#999
  • sideBarTitle.foreground#999
  • statusBar.background#1f2023
  • statusBar.border#393A3D
  • statusBar.debuggingBackground#bcb28d
  • statusBar.debuggingForeground#1f2023
  • statusBar.foreground#bcb28d
  • statusBar.noFolderBackground#1f2023
  • statusBar.noFolderForeground#bcb28d
  • tab.activeBackground#1f2023
  • tab.activeBorder#E6844F
  • tab.activeForeground#bcb28d
  • tab.border#1F2023
  • tab.hoverBackground#282b31
  • tab.inactiveBackground#1f2023
  • tab.inactiveForeground#bcb28d66
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2b7ed9
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#5ca9ff
  • terminal.ansiBrightCyan#27c5ec
  • terminal.ansiBrightGreen#27ec9d
  • terminal.ansiBrightMagenta#de75de
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#cccccc
  • terminal.ansiBrightYellow#ffff58
  • terminal.ansiCyan#07aed7
  • terminal.ansiGreen#22b87f
  • terminal.ansiMagenta#f248f2
  • terminal.ansiRed#ee2626
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#f5f525ef
  • terminal.background#1f2023
  • terminal.border#6f7676
  • terminal.foreground#bcb28d
  • terminal.selectionBackground#5353534c
  • terminalCursor.background#eee8d5
  • terminalCursor.foreground#657b83
  • titleBar.activeBackground#1f2023
  • titleBar.activeForeground#bcb28d
  • titleBar.border#393A3D
  • titleBar.inactiveBackground#31343c
  • titleBar.inactiveForeground#707C74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676f7d
string, string.template#c9a022
constant.numeric#c678dd
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#abb2bf
constant.language#24b5a8
constant.character, constant.other#24b5a8
variable.language#e06c75
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#24b5a8
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#ae85ce
variable.other, variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#37ae6f
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#738dfd
variable.parameter, entity.name.variable.parameter, parameter.variable#d19a66italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#37ae6f
entity.name.tag, entity.name.tag.class.js#e06c75
entity.name.tag.class, entity.name.tag.id#24b5a8
entity.other.attribute-name#37ae6f
support.constant#24b5a8
support.type, support.variable#24b5a8
support.dictionary.json#24b5a8
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#24b5a8
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#37ae6f
variable.css, variable.scss, variable.less, variable.sass#24b5a8
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#c9a022
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#24b5a8
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#24b5a8
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#37ae6f
markup.changed#c9a022
constant.numeric.line-number.find-in-files - match#24b5a8A0
entity.name.filename.find-in-files#c9a022
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#e06c75bold
markup.quote.markdown#37ae6f
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#24b5a8
punctuation.definition.list_item.markdown#ffffffbold

Shiki preview

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

Loading...