Skip to main content
CodingTheme

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
  • editorBracketMatch.background#FCFAF3
  • editorBracketMatch.border#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
  • inlineEdit.gutterIndicator.background#D2CCB850
  • inlineEdit.gutterIndicator.primaryBackground#423E31
  • inlineEdit.gutterIndicator.primaryBorder#423E31
  • inlineEdit.gutterIndicator.primaryForeground#fff
  • inlineEdit.gutterIndicator.secondaryBackground#D2CCB8
  • inlineEdit.gutterIndicator.secondaryBorder#D2CCB8
  • inlineEdit.gutterIndicator.secondaryForeground#070603
  • inlineEdit.gutterIndicator.successfulBackground#008000
  • inlineEdit.gutterIndicator.successfulBorder#008000
  • inlineEdit.gutterIndicator.successfulForeground#fff
  • inlineEdit.modifiedBackground#4dd64d80
  • inlineEdit.modifiedBorder#006600
  • inlineEdit.modifiedChangedLineBackground#008000b0
  • inlineEdit.modifiedChangedTextBackground#006600c0
  • inlineEdit.originalBackground#ff4d4d80
  • inlineEdit.originalBorder#990000
  • inlineEdit.originalChangedLineBackground#cc0000b0
  • inlineEdit.originalChangedTextBackground#aa0000c0
  • inlineEdit.tabWillAcceptModifiedBorder#004400
  • inlineEdit.tabWillAcceptOriginalBorder#660000
  • 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.inactiveForeground#070603
  • tab.unfocusedActiveBackground#423E31a5
  • tab.unfocusedActiveBorderTop#44423a00
  • tab.unfocusedActiveForeground#fff
  • terminal.background#383732
  • terminal.foreground#F8F3E8
  • titleBar.activeBackground#EBE6D6
  • titleBar.activeForeground#070603
  • titleBar.inactiveBackground#EBE6D6
  • titleBar.inactiveForeground#070603
  • 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#767470
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#b02402
markup.inline.raw, markup.inline.raw.string, markup.fenced_code, markup.raw#cc7a00
invalid#ff0000italic bold

Shiki preview

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

Loading...

Sharp Solarized - Light High Contrast by Josh Spicer - VS Code Theme