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.activeFocusBorder#070603
  • activityBar.background#D2CCB8
  • activityBar.foreground#070603
  • activityBar.inactiveForeground#07060370
  • activityBarBadge.background#423E31
  • badge.background#423E31
  • button.background#423E31
  • contrastActiveBorder#ff000000
  • contrastBorder#232018
  • editor.background#f7f4e8
  • editor.findMatchBackground#423E31
  • editor.foreground#000
  • editor.lineHighlightBackground#FCFAF3
  • editor.lineHighlightBorder#D2CCB8
  • editor.selectionBackground#423E31
  • editorBracketHighlight.foreground1#978d72
  • editorBracketHighlight.foreground2#000
  • editorBracketHighlight.foreground3#978d72
  • editorBracketHighlight.foreground4#000
  • editorBracketHighlight.foreground5#978d72
  • editorBracketHighlight.foreground6#000
  • editorBracketHighlight.unexpectedBracket.foreground#CD3131
  • editorBracketMatch.background#FCFAF3
  • editorBracketMatch.border#7B7664
  • editorBracketPairGuide.activeBackground1#7B7664
  • editorBracketPairGuide.activeBackground2#7B7664
  • editorBracketPairGuide.activeBackground3#7B7664
  • editorBracketPairGuide.activeBackground4#7B7664
  • editorBracketPairGuide.activeBackground5#7B7664
  • editorBracketPairGuide.activeBackground6#7B7664
  • editorGroup.dropBackground#ff8c0ea5
  • editorIndentGuide.activeBackground1#cbc9c3
  • editorIndentGuide.activeBackground2#cbc9c3
  • editorIndentGuide.activeBackground3#cbc9c3
  • editorIndentGuide.activeBackground4#cbc9c3
  • editorIndentGuide.activeBackground5#cbc9c3
  • editorIndentGuide.activeBackground6#cbc9c3
  • editorIndentGuide.background1#cbc9c3
  • editorIndentGuide.background2#cbc9c3
  • editorIndentGuide.background3#cbc9c3
  • editorIndentGuide.background4#cbc9c3
  • editorIndentGuide.background5#cbc9c3
  • editorIndentGuide.background6#cbc9c3
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#ADA68F
  • editorOverviewRuler.addedForeground#ff000000
  • editorOverviewRuler.border#ff000000
  • editorStickyScrollHover.background#e4e2d8
  • editorSuggestWidget.selectedBackground#ebeae7
  • focusBorder#232018
  • list.activeSelectionBackground#23201820
  • list.hoverBackground#23201810
  • list.inactiveSelectionBackground#23201820
  • menu.selectionBackground#ebeae7
  • panel.background#f7f4e8
  • quickInputList.focusBackground#ebeae7
  • sideBar.background#EBE6D6
  • sideBar.foreground#000
  • statusBar.background#D2CCB8
  • statusBar.noFolderBackground#D2CCB8
  • tab.activeBackground#423E31
  • tab.activeBorderTop#ff000000
  • tab.activeForeground#fff
  • tab.inactiveBackground#D2CCB8
  • tab.unfocusedActiveBackground#423E31a5
  • tab.unfocusedActiveBorderTop#44423a00
  • tab.unfocusedActiveForeground#fff
  • terminal.background#383732
  • terminal.foreground#F8F3E8
  • titleBar.activeBackground#EBE6D6
  • titleBar.inactiveBackground#EBE6D6
  • tree.inactiveIndentGuidesStroke#58564c70
  • tree.indentGuidesStroke#58564c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, support.type.property-name.json#000
strong, markup.bold, markup.heading, keyword.control, storagebold
emphasis, markup.italic, commentitalic
markup.underline, variable.argument.css, variable.scssunderline
markup.strikethroughstrikethrough
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
comment, punctuation.definition.comment, comment.block.documentation, storage.type.class.jsdoc#b41036
constant.language#147641bold
storage.type.function.arrow
punctuation.definition.string.begin, punctuation.definition.string.end, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted#471acc
invalid#ff0000italic bold

Shiki preview

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

Loading...