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.statementbold
source.ignore#d85e5e
storage.modifier#935e00bold
storage.type#935e00bold underline
storage.type.functionbold 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.jsbold
support.function.console.js#935e00underline
support.function.js
support.type.object.console.jsitalic
variable.language.self.lua, variable.language.this#aaaaaaitalic
storage.type.class.jsdocbold
punctuation.separator.dictionary.pair.json.commentsbold
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.cssunderline
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.statementbold
source.ignore#d85e5e
storage.modifier#935e00bold
storage.type#935e00bold underline
storage.type.functionbold 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.jsbold
support.function.console.js#935e00underline
support.function.js
support.type.object.console.jsitalic
variable.language.self.lua, variable.language.super, variable.language.this#aaaaaaitalic
storage.type.class.jsdocbold
punctuation.separator.dictionary.pair.json.commentsbold
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.cssunderline
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