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#00cccc30
  • activityBar.activeBorder#00ffff
  • activityBar.background#221a0e
  • activityBar.foreground#00ffff
  • activityBarBadge.background#00ff88
  • activityBarBadge.foreground#000000
  • banner.background#221a0e
  • bookmarks.lineBackground#007aff50
  • editor.background#221a0e
  • editor.foldBackground#221a0e55
  • editor.foreground#ecf0f1
  • editor.inactiveSelectionBackground#e74c3c59
  • editor.lineHighlightBackground#29211f
  • editor.selectionBackground#e74c3c70
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#e74c3c30
  • editorBracketHighlight.foreground1#ffd700
  • editorBracketHighlight.foreground2#da70d6
  • editorBracketHighlight.foreground3#87cefa
  • editorBracketHighlight.foreground4#ffd700
  • editorBracketHighlight.foreground5#da70d6
  • editorBracketHighlight.foreground6#87cefa
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.border#ffffff70
  • editorCursor.background#171717
  • editorCursor.foreground#ffe28c
  • editorGutter.background#221a0e
  • editorIndentGuide.activeBackground1#00ffff
  • editorIndentGuide.background1#00ffff50
  • editorInfo.background#221a0e55
  • editorLineNumber.foreground#606060
  • editorPane.background#221a0e
  • editorStickyScroll.background#204203
  • editorStickyScrollHover.background#444444
  • editorUnnecessaryCode.border#ff0000c0
  • editorUnnecessaryCode.opacity#00000040
  • editorWhitespace.foreground#f3ffb51a
  • focusBorder#00ffff90
  • input.background#333333
  • input.border#ff7f50
  • input.foreground#ffffff
  • menu.background#221a0e
  • minimap.background#221a0e
  • panel.background#221a0e
  • sideBar.background#221a0e
  • sideBar.border#00ffff90
  • statusBar.background#0f0f0f
  • statusBar.foreground#cccccc
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#e74c3c00
  • tab.activeBorderTop#e74c3c
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#00ffff
  • tab.border#e74c3c
  • tab.inactiveForeground#777777
  • tab.inactiveModifiedBorder#00ffff99
  • tab.lastPinnedBorder#ffffff
  • tab.unfocusedActiveBorder#e74c3c00
  • tab.unfocusedActiveBorderTop#e74c3c
  • tab.unfocusedActiveForeground#ff666650
  • tab.unfocusedActiveModifiedBorder#fad43c70
  • terminal.background#221a0e
  • terminal.foreground#4ea58c
  • terminal.selectionBackground#e74c3c70
  • terminalCursor.background#171717
  • terminalCursor.foreground#ffe28c
  • terminalStickyScroll.background#181818c0
  • window.activeBorder#00ff00
  • window.inactiveBorder#ff000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#3e564ditalic
constant#9999ff—
entity#98ff98—
keyword#e74c3cbold
storage#3498dbbold
string#f1c40f—
support#3498db—
variable#e6b09c—
invalid#ffffffitalic bold underline
text source——
text.html.ruby source——
entity.other.inherited-class#2ecc71italic
string.quoted source#f1c40f—
string constant#6c71c4—
string.regexp#3498db—
string variable#ffffff—
support.function#3498db—
support.constant#2ecc71—
other.preprocessor.c#3498db—
other.preprocessor.c entity#2ecc71—
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#e74c3c—
meta.selector.css entity.tag.name#1abc9c—
meta.selector.css entity.other.attribute-name.id#ff87f9—
meta.selector.css entity.other.attribute-name.class#43e689—
support.type.property-name.css#3498db—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#f2ffa1italic
meta.processor.at-rule keyword.control.at-rule#f1c40fbold
meta.property-value support.constant.named-color.css, meta.property-value constant#e74c3c—
meta.constructor.argument.css#e74c3c—
meta.diff, meta.diff.header#f8f8f8italic
markup.deleted#f8f8f8—
markup.changed#f8f8f8—
markup.inserted#f8f8f8—
sublimelinter.outline.notes——
sublimelinter.outline.illegal——
sublimelinter.outline.warning——
sublimelinter.outline.warning#ffffff—
sublimelinter.underline.warning——
sublimelinter.outline.violation——
SublimeLinter.underline.violation——
entity.other.attribute-name.id.html#ff87f9bold
entity.other.attribute-name.html#43e689—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#ffffff—
keyword.control.at-rule.import.css#f1c40fbold
variable.other.less#ffffff—
entity.other.less.mixin#9b59b6—
source.css.less keyword.unit.css#3498db—
entity.other.attribute-name.angular.html, source.angular.embedded.html#e74c3c—
constant.character.entity.html#3498db—
variable.other.readwrite.instance.coffee#e67e22—
meta.brace.round.coffee, meta.brace.square.coffee#f1c40f—
punctuation.section.embedded.coffee#5eebb8—
variable.assignment.coffee variable.assignment.coffee#ffffff—
meta.delimiter.method.period.coffee#3cadd7—
meta.brace.curly.coffee#1abc9c—
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#3c444d—
sublimelinter.gutter-mark#ffffff—
sublimelinter.mark.warning#ddb700—
sublimelinter.mark.error#d02000—
markup.deleted.git_gutter#f92672—
markup.inserted.git_gutter#a6e22e—
markup.changed.git_gutter#967efb—
markup.ignored.git_gutter#565656—
markup.untracked.git_gutter#565656—
string#d6b220—
meta.embedded.assembly#d6b220—
keyword - keyword.operator#996633—
keyword.control#996633—
storage#996633—
storage.type#996633—
entity.name.type#3498db—
entity.name.class#3498db—
support.type#3498db—
support.class#3498db—
entity.name.function#98ff98—
support.function#98ff98—
variable#e6b09c—
entity.name.variable#e6b09c—
comment#3e564ditalic
constant#9999ff—
constant.numeric#9999ff—
entity.name.function#76dd76—
entity.name.function.method#98ff98
invalid.illegal#ff5b5bbold italic
keyword.control#e74c3cbold italic
keyword.operator, keyword.operator.logical.lua, keyword.operator.logical.scss, support.type.object.module#e74c3cbold italic
keyword.control.flow.block-scalar.literal.yaml, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.increment, keyword.operator.logical, keyword.operator.lua, keyword.operator.nulltype.graphql, keyword.operator.optional, keyword.operator.or.regexp, keyword.operator.relational, keyword.operator.ternary, keyword.operator.type, keyword.operator.union#e74c3cbold
keyword.operator.assignment#44bbff—
keyword.other.important#e74c3citalic
keyword.other.special-method#e74c3cbold underline
meta.function.parameters#ecf0f1bold
meta.parameters#3498db—
punctuation.definition.arguments#ff0000bold italic underline
punctuation.definition.arguments.shell#00ffffbold italic underline
punctuation.definition.comment#3e564dbold italic
punctuation.definition.string.begin#ff922cbold
punctuation.definition.string.end#ff922cbold
punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue#bbbbbb—
punctuation.definition.variable#e6b09cbold
punctuation.section.embedded#ffffff—
punctuation.separator, punctuation.separator.continuation, punctuation.separator.parameter#ffffff—
punctuation.terminator.statement—bold
source.ignore#d85e5e—
storage.modifier#935e00bold
storage.type#935e00bold underline
storage.type.function—bold underline
string.quoted.double——
support.class#3498db—
support.function#3498dbitalic
support.function.mutator#028db8italic underline
support.type.primitive#e6b09c—
support.type.primitive.ts, support.type.primitive.tsx#3498db—
variable.other.class#aa3232—
variable.other.object#d46a6a—
variable.other.property#518a8a—
variable.other.property.static#e6b09c—
variable.other.constant#ff823fbold
variable.other.readwrite#e6b09cbold
entity.other.attribute-name.html#8ea154italic
entity.name.tag.html#e74c3cunderline
punctuation.definition.comment.html#606060bold italic
punctuation.definition.string.begin.html——
punctuation.definition.string.end.html——
punctuation.separator.key-value.html#44bbffbold
text.html.derivative#d9f0c5—
keyword.other.import.java#e74c3cbold italic
keyword.other.package.java#e74c3cbold italic
meta.function-call.java#e6b09c—
meta.method-call.java#e6b09c—
punctuation.definition.annotation.java#78dce8—
storage.type.annotation.java#78dce8—
punctuation.definition.string.begin.js——
punctuation.definition.string.end.js——
storage.type.function.arrow.js—bold
support.function.console.js#935e00underline
support.function.js——
support.type.object.console.js—italic
variable.language.self.lua, variable.language.this#aaaaaaitalic
storage.type.class.jsdoc—bold
punctuation.separator.dictionary.pair.json.comments—bold
entity.name.tag.close.jsx#e74c3cunderline
entity.name.tag.open.jsx#e74c3cunderline
entity.other.attribute-name.jsx#8ea154italic
JSXNested#d9f0c5—
keyword.operator.assignment.jsx——
punctuation.definition.string.begin.jsx#e74c3c—
punctuation.definition.string.end.jsx#e74c3c—
punctuation.definition.tag.jsx#ffffff—
meta.function.method.without-arguments.ruby#98ff98bold
meta.function.method.with-arguments.ruby#98ff98bold
source.ruby#ffe8a6—
variable.language.ruby#ff87f9bold
variable.other.readwrite.global.ruby#ff87f9bold
variable.other.readwrite.instance.ruby#e6b09c—
variable.other.ruby#92ddff—
constant.numeric.css—underline
entity.name.tag.css#007e65bold
entity.name.tag.reference.scss#00ff00—
entity.name.tag.wildcard.css#ff69b4—
keyword.control.at-rule.import.css#e74c3cbold italic
punctuation.definition.entity.css#ffffff—
support.constant.property-value.css——
support.constant.quoted.api.lua, support.constant.quoted.handler.api.lua#d6b220—
support.type.property-name#3498dbbold
entity.name.function.shell#e264fd—
meta.scope.group.shell#ffffff—
punctuation.definition.string.begin.shell#e74c3c—
punctuation.definition.string.end.shell#e74c3c—
punctuation.definition.variable.shell—
source.shell#98ff98—
variable.other.normal.shell#e6b09c—
variable.other.special.shell#e6b09c—
meta.object-literal.key#d6b220—
punctuation.decorator.ts#d626a1bold italic
punctuation.accessor.optional#cccccc—
punctuation.definition.template-expression.begin.ts#98ff98
punctuation.definition.template-expression.end.ts#98ff98
punctuation.separator.key-value#ffffff—
support.variable.property#518a8a—
text.html.vue-html#d9f0c5—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
string#d6b220—
meta.embedded.assembly#d6b220—
keyword - keyword.operator#996633—
keyword.control#996633—
storage#996633—
storage.type#996633—
entity.name.type#3498db—
entity.name.class#3498db—
support.type#3498db—
support.class#3498db—
entity.name.function#98ff98—
support.function#98ff98—
variable#e6b09c—
entity.name.variable#e6b09c—
comment#3e564ditalic
constant#9999ff—
constant.numeric#9999ff—
entity.name.function#76dd76—
entity.name.function.method#98ff98
invalid.illegal#ff5b5bbold italic
keyword.control#e74c3cbold italic
keyword.operator, keyword.operator.logical.lua, keyword.operator.logical.scss, support.type.object.module#e74c3cbold italic
keyword.control.flow.block-scalar.literal.yaml, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.existential, keyword.operator.increment, keyword.operator.logical, keyword.operator.lua, keyword.operator.nulltype.graphql, keyword.operator.optional, keyword.operator.or.regexp, keyword.operator.relational, keyword.operator.ternary, keyword.operator.type, keyword.operator.union#e74c3cbold
keyword.operator.assignment, keyword.operator.module.all#44bbff—
keyword.other.debugger, keyword.other.important#e74c3citalic
keyword.other.special-method#e74c3cbold underline
meta.function.parameters#ecf0f1bold
meta.parameters#3498db—
punctuation.definition.arguments#ff0000bold italic underline
punctuation.definition.arguments.shell#00ffffbold italic underline
punctuation.definition.comment#3e564dbold italic
punctuation.definition.string.begin#ff922cbold
punctuation.definition.string.end#ff922cbold
punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue#bbbbbb—
punctuation.definition.variable#e6b09cbold
punctuation.section.embedded#ffffff—
punctuation.separator, punctuation.separator.continuation, punctuation.separator.parameter#ffffff—
punctuation.terminator.statement—bold
source.ignore#d85e5e—
storage.modifier#935e00bold
storage.type#935e00bold underline
storage.type.function—bold underline
string.quoted.double——
support.class#3498db—
support.function#3498dbitalic
support.function.mutator#028db8italic underline
support.type.primitive#e6b09c—
support.type.primitive.ts, support.type.primitive.tsx#3498db—
variable.other.class#aa3232—
variable.other.object#d46a6a—
variable.other.link.underline.jsdoc#518a8aitalic
variable.other.property#518a8a—
variable.other.property.static#e6b09c—
variable.other.constant#ff823fbold
variable.other.readwrite#e6b09cbold
entity.other.attribute-name.html#8ea154italic
entity.name.tag.html#e74c3cunderline
punctuation.definition.comment.html#606060bold italic
punctuation.definition.string.begin.html——
punctuation.definition.string.end.html——
punctuation.separator.key-value.html#44bbffbold
text.html.derivative#d9f0c5—
keyword.other.import.java#e74c3cbold italic
keyword.other.package.java#e74c3cbold italic
meta.function-call.java#e6b09c—
meta.method-call.java#e6b09c—
punctuation.definition.annotation.java#78dce8—
storage.type.annotation.java#78dce8—
punctuation.definition.string.begin.js——
punctuation.definition.string.end.js——
storage.type.function.arrow.js—bold
support.function.console.js#935e00underline
support.function.js——
support.type.object.console.js—italic
variable.language.self.lua, variable.language.super, variable.language.this#aaaaaaitalic
storage.type.class.jsdoc—bold
punctuation.separator.dictionary.pair.json.comments—bold
entity.name.tag.close.jsx#e74c3cunderline
entity.name.tag.open.jsx#e74c3cunderline
entity.other.attribute-name.jsx#8ea154italic
JSXNested#d9f0c5—
keyword.operator.assignment.jsx——
punctuation.definition.string.begin.jsx#e74c3c—
punctuation.definition.string.end.jsx#e74c3c—
punctuation.definition.tag.jsx#ffffff—
meta.function.method.without-arguments.ruby#98ff98bold
meta.function.method.with-arguments.ruby#98ff98bold
source.ruby#ffe8a6—
variable.language.ruby#ff87f9bold
variable.other.readwrite.global.ruby#ff87f9bold
variable.other.readwrite.instance.ruby#e6b09c—
variable.other.ruby#92ddff—
constant.numeric.css—underline
entity.name.tag.css#007e65bold
entity.name.tag.reference.scss#00ff00—
entity.name.tag.wildcard.css#ff69b4—
keyword.control.at-rule.import.css#e74c3cbold italic
punctuation.definition.entity.css#ffffff—
support.constant.property-value.css——
support.constant.quoted.api.lua, support.constant.quoted.handler.api.lua#d6b220—
support.type.property-name#3498dbbold
entity.name.function.shell#e264fd—
meta.scope.group.shell#ffffff—
punctuation.definition.string.begin.shell#e74c3c—
punctuation.definition.string.end.shell#e74c3c—
punctuation.definition.variable.shell—
source.shell#98ff98—
variable.other.normal.shell#e6b09c—
variable.other.special.shell#e6b09c—
meta.object-literal.key#d6b220—
punctuation.decorator.ts#d626a1bold italic
punctuation.accessor.optional#cccccc—
punctuation.definition.template-expression.begin.ts#98ff98
punctuation.definition.template-expression.end.ts#98ff98
punctuation.separator.key-value#ffffff—
support.variable.property#518a8a—
text.html.vue-html#d9f0c5—
Day Off Color Theme by A New Level Media - VS Code Theme