Skip to main content
Coding Theme

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#5F5945
  • 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
—#383a42
comment#a0a1a7—
variable.parameter.function#383a42—
none—
keyword.operator—
keyword#a626a4—
variable#e45649—
entity.name.function, meta.require, support.function.any-method#0184bc—
support.class, entity.name.class, entity.name.type.class#c18401—
meta.class#c18401—
keyword.other.special-method#0184bc—
storage#a626a4—
support.function#0184bc—
string#50a14f—
constant.numeric#c18401—
none#c18401—
none#c18401—
constant#c18401—
entity.name.tag#e45649—
entity.other.attribute-name#c18401—
entity.other.attribute-name.id, punctuation.definition.entity#c18401—
meta.selector#a626a4—
markup.heading punctuation.definition.heading, entity.name.section#0184bc
markup.bold, punctuation.definition.bold#a626a4—
markup.italic, punctuation.definition.italic#a626a4—
markup.raw.inline#50a14f—
string.other.link, punctuation.definition.string.end.markdown—
meta.link#50a14f—
markup.list—
markup.quote#50a14f—
source.java meta.class.java meta.method.java#383a42—
source.java meta.class.java meta.class.body.java#383a42—
source.js meta.function.js variable.parameter.function.js#e45649—
source.js variable.other.readwrite.js#e45649—
source.js variable.other.object.js#383a42—
source.js meta.function-call.method.js variable.other.readwrite.js#e45649—
source.js meta.block.js variable.other.readwrite.js#e45649—
source.js meta.block.js variable.other.object.js#383a42—
source.js meta.block.js meta.function-call.method.js variable.other.readwrite.js#383a42—
source.js meta.function-call.method.js variable.function.js#383a42—
source.js meta.property.object.js entity.name.function.js#0184bc—
source.js support.constant.prototype.js#383a42—
meta.separator—
markup.inserted#98c379—
markup.deleted#e06c75—
markup.changed#e5c07b—
string.regexp#50a14f—
constant.character.escape#0997b3—
punctuation.section.embedded, variable.interpolation—
invalid.illegal#fafafa—
invalid.broken#fafafa—
invalid.deprecated#fafafa—
invalid.unimplemented#fafafa—
markup.italic, punctuation.definition.italic, comment, punctuation.definition.comment, string.comment, comment.block.documentation, comment.block.documentation variable, comment.block.documentation punctuation.definition, keyword.other.documentation, storage.type.class.jsdoc, comment.block, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, keyword, keyword.operator.expression, keyword.operator.new, variable.language, markup.quote, markup.inserted, markup.deleted, markup.changed, storage, constant.language, entity.name.class, entity.other.attribute-name—italic
keyword.operator, keyword.other.unit, support.type.property-name, keyword.other.special-method, entity.name.tag—normal
Sharp Atom Light by flol3622 - VS Code Theme