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.activeBackground#ccf0d4
  • activityBar.background#bddbc4
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#777777
  • editor.background#ccf0d4
  • editor.findMatchBackground#b0c5e3cc
  • editor.findMatchHighlightBackground#ffb442cc
  • editor.foreground#000000
  • editor.lineHighlightBackground#d7f7d3
  • editor.selectionBackground#ebeb48
  • editor.wordHighlightBackground#eceba3cc
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#bddbc4
  • editorIndentGuide.activeBackground#ff0000
  • editorIndentGuide.background#d3d3d3
  • editorLineNumber.foreground#333333
  • editorWhitespace.foreground#ffffff
  • editorWidget.background#ccf0d4
  • list.activeSelectionBackground#ebeb48
  • list.activeSelectionForeground#000000
  • list.focusBackground#eceba3cc
  • list.focusForeground#0b3913
  • list.hoverBackground#eceba3cc
  • list.hoverForeground#0b3913
  • list.inactiveFocusBackground#d7f7d3
  • list.inactiveSelectionBackground#e4ffe1
  • list.inactiveSelectionForeground#000000
  • peekViewResult.matchHighlightBackground#ffb442cc
  • sideBar.background#ccf0d4
  • sideBar.border#ff0000
  • sideBar.foreground#000000c9
  • sideBarSectionHeader.foreground#000000a1
  • statusBar.background#ccf0d4
  • statusBar.debuggingBackground#ccf0d4
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#ccf0d4
  • statusBarItem.remoteBackground#ccf0d4
  • statusBarItem.remoteForeground#333333
  • tab.activeBorderTop#bddbc4
  • tab.activeModifiedBorder#ccf0d4
  • tab.border#bddbc4
  • tab.inactiveBackground#bddbc4
  • tab.inactiveForeground#777777
  • titleBar.activeBackground#ccf0d4
  • titleBar.inactiveBackground#ccf0d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class, entity.name.type.interface#000000bold
entity.other.inherited-class#000000
entity.name.function,meta.definition.method.ts entity.name.function.ts#000000bold
constant.other#009900italic
comment,comment.block.documentation.js,comment.line.double-slash.js,entity.name.type.instance.jsdoc,variable.other.jsdoc#969696
storage.type.class.jsdoc,keyword.other.documentation#969696bold
string.regexp.js#9933CC
keyword,storage,constant.language,entity.name.tag,punctuation.definition.tagstorage.type.function.js,storage.type.js,variable.language.this,variable.language.java,variable.language.super.ts,keyword.control,keyword.operator.new,keyword.operator.expression.typeof.js,keyword.operator.expression.delete.js,keyword.operator.expression.instanceof.js,keyword.other.import,keyword.other.import.static,keyword.other.package,support.type.primitive.ts#0000E6
support.type.property-name.json,entity.other.attribute-name,meta.object-literal.key,variable.other.property,variable.other.object.property,variable.other.constant.property.js,variable.other.constant.object.property.js,support.variable.property.dom.js,variable.object.property#009900
string,punctuation.definition.string.begin.js,punctuation.definition.string.end.js,string.quoted.single.js,string.quoted.double.js#CE7B00
punctation,punctuation.terminator.statement.js,punctuation.separator.key-value.js,punctuation.separator.comma.js,punctuation.definition.block.js,punctuation.accessor.js,punctuation.definition.parameters.begin.js,punctuation.definition.parameters.end.js#000000
support.variable.dom.ts#9F0D79
keyword.operator,storage.type.function.arrow#000000
variable,meta.function-call.ts entity.name.function.ts,meta.function-call.js entity.name.function.js,support.function,support.variable.property.js,storage.modifier.import,storage.modifier.package,storage.type.annotation,storage.type.generic,storage.type.object.array,storage.type.java#000000plain
support.class.js#000000
meta.tag.sgml.doctype.html,meta.tag.sgml.doctype.xml,keyword.other.doctype.xml,variable.language.documentroot.xml#628FB5
entity.name.tag, punctuation.definition.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#0000E6
support.type.property-name.css#0000E6
keyword.other#000000
keyword.control.at-rule.keyframes.css#000000bold
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
entity.other.attribute-name,meta.function-call.js entity.name.function.js#0000E6
variable,support.type.property-name.json,entity.other.attribute-name,meta.object-literal.key,variable.other.property,variable.other.object.property,variable.other.constant.property.js,variable.other.constant.object.property.js,support.variable.property.dom.js,variable.object.property#000000
variable#000000
keyword.operator#0000E6
entity.name.function.js#0000E6
meta.object-literal.key,support.function#0000E6
keyword.control,storage.type.js#005F00italic
support.type.property-name.json#0000E6
string,string.quoted.single.js,string.quoted.double.js,punctuation.definition.string.begin.js,punctuation.definition.string.end.js#005F28
comment.block.documentation.js#027786
asdf
markup.bold.markdownbold
heading.1.markdown#C90000bold
heading.2.markdown#0000E6bold
heading.3.markdown#005F00bold
heading.4.markdownbold
Steno Light Theme by alesh-houdek - VS Code Theme