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-nameitalic
keyword.operator, keyword.other.unit, support.type.property-name, keyword.other.special-method, entity.name.tagnormal
Sharp Atom Light by flol3622 - VS Code Theme