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.activeBorder#23d18c
  • activityBar.activeFocusBorder#23d18c
  • activityBar.background#2a2a2a
  • activityBar.border#23d18c60
  • activityBar.foreground#23d18c
  • activityBar.inactiveForeground#444446
  • activityBarBadge.background#23d18c
  • activityBarBadge.foreground#2a2a2a
  • badge.background#23d18c
  • badge.foreground#2a2a2a
  • breadcrumbPicker.background#2a2a2a
  • button.background#23d18b17
  • button.hoverBackground#23d18c60
  • debugToolBar.background#2a2a2a
  • debugToolBar.border#23d18c60
  • diffEditor.border#23d18c60
  • diffEditor.insertedTextBackground#00c8513e
  • diffEditor.removedTextBackground#e4153233
  • dropdown.background#2a2a2a
  • dropdown.listBackground#2a2a2a
  • editor.background#2a2a2a
  • editor.findMatchBackground#ff98002e
  • editor.findMatchBorder#ff9800
  • editor.findMatchHighlightBackground#ea5c0034
  • editor.findMatchHighlightBorder#ffffff99
  • editor.foldBackground#ff5d9027
  • editor.hoverHighlightBackground#a29bfe72
  • editor.lineHighlightBackground#a38eff09
  • editor.rangeHighlightBackground#2a2a2a
  • editor.selectionBackground#23d18c30
  • editor.selectionHighlightBackground#83bcff4a
  • editor.selectionHighlightBorder#83bcff
  • editor.wordHighlightBackground#a28eff50
  • editorBracketMatch.background#ff5d8f91
  • editorBracketMatch.border#ff5d8f
  • editorCursor.background#2a2a2a
  • editorError.foreground#db5c47
  • editorGroup.border#23d18c60
  • editorGroupHeader.border#2a2a2a
  • editorGroupHeader.tabsBackground#2a2a2a
  • editorGutter.addedBackground#149f68
  • editorGutter.deletedBackground#e84855
  • editorGutter.modifiedBackground#3b6fab
  • editorHoverWidget.background#2a2a2a
  • editorHoverWidget.border#23d18c60
  • editorHoverWidget.foreground#cdcdcd
  • editorIndentGuide.activeBackground#2a2a2a
  • editorIndentGuide.background#2a2a2a
  • editorLineNumber.activeForeground#23d18c
  • editorLineNumber.foreground#444446
  • editorMarkerNavigationError.background#e84855
  • editorMarkerNavigationInfo.background#83bcff
  • editorMarkerNavigationWarning.background#ffe066
  • editorOverviewRuler.border#2a2a2a
  • editorSuggestWidget.background#2a2a2a
  • editorSuggestWidget.border#23d18c60
  • editorSuggestWidget.highlightForeground#23d18c
  • editorSuggestWidget.selectedBackground#23d18c60
  • editorWidget.background#2a2a2a
  • editorWidget.border#2a2a2a
  • editorWidget.foreground#ffffff
  • focusBorder#23d18c
  • gitDecoration.addedResourceForeground#97c7a0
  • gitDecoration.conflictingResourceForeground#a29bfe
  • gitDecoration.deletedResourceForeground#e84855
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#ffe066
  • gitDecoration.stageDeletedResourceForeground#fd717c
  • gitDecoration.stageModifiedResourceForeground#fde896
  • gitDecoration.submoduleResourceForeground#83bcff
  • gitDecoration.untrackedResourceForeground#23d18c
  • input.background#2a2a2a
  • input.border#a29bfe
  • inputOption.activeBackground#f38375
  • list.activeSelectionBackground#23d18c60
  • list.activeSelectionForeground#e9dbdb
  • list.dropBackground#23d18c0e
  • list.focusBackground#DADBDB15
  • list.focusForeground#e9dbdb
  • list.highlightForeground#23d18c
  • list.hoverBackground#23d18c60
  • list.hoverForeground#e9dbdb
  • list.inactiveFocusBackground#2a2a2a
  • list.inactiveSelectionBackground#dadbdb18
  • list.inactiveSelectionForeground#e9dbdb
  • listFilterWidget.background#a29bfe66
  • listFilterWidget.noMatchesOutline#e84855
  • listFilterWidget.outline#00000000
  • menu.background#2a2a2a
  • menu.border#23d18c60
  • menu.foreground#969b9b
  • menu.selectionBackground#4949491a
  • menu.selectionForeground#23d18c
  • menu.separatorBackground#23d18c60
  • menubar.selectionBackground#23d18c40
  • menubar.selectionForeground#23d18c
  • merge.commonContentBackground#3a3764
  • merge.commonHeaderBackground#6762a9
  • notificationToast.border#23d18c60
  • panel.border#23d18c60
  • panelTitle.activeBorder#23d18c60
  • panelTitle.activeForeground#e9dbdb
  • peekView.border#23d18c60
  • peekViewEditor.background#2a2a2a
  • peekViewEditor.matchHighlightBackground#23d18c08
  • peekViewEditor.matchHighlightBorder#23d18c60
  • peekViewEditorGutter.background#2a2a2a
  • peekViewResult.background#2a2a2a
  • peekViewResult.matchHighlightBackground#23d18c60
  • peekViewResult.selectionBackground#2a2a2a
  • peekViewTitle.background#2a2a2a
  • pickerGroup.foreground#a29bfe
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#23d18c60
  • scrollbarSlider.hoverBackground#23d18c60
  • selection.background#6d6d6d40
  • sideBar.background#2a2a2a
  • sideBar.border#23d18c60
  • sideBar.foreground#969b9b
  • sideBarSectionHeader.background#dadbdb08
  • sideBarSectionHeader.border#DADBDB00
  • statusBar.background#2a2a2a
  • statusBar.debuggingBackground#23d18c
  • statusBar.debuggingForeground#f77432
  • statusBar.foreground#e9dbdb
  • statusBar.noFolderBackground#2a2a2a
  • statusBarItem.hoverBackground#23d18c
  • statusBarItem.prominentBackground#2a2a2a
  • tab.activeBackground#3f3f3f94
  • tab.activeBorder#23d18c
  • tab.activeForeground#e9dbdb
  • tab.hoverBackground#23d18c28
  • tab.inactiveBackground#2a2a2a
  • terminal.border#23d18c60
  • terminalCursor.background#2a2a2a
  • terminalCursor.foreground#23d18c
  • titleBar.activeBackground#2a2a2a
  • titleBar.activeForeground#969b9b
  • titleBar.border#00000000
  • titleBar.inactiveBackground#2a2a2a
  • tree.indentGuidesStroke#23d18c60
  • walkThrough.embeddedEditorBackground#2a2a2a
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid.deprecated.entity.other.attribute-name.html, keyword.control.as, keyword.control.at-rule, keyword.import.go, keyword.input, keyword.operator.type.annotation, keyword.other.sql.sqlite, keyword.package.go, keyword.type, punctuation.decorator, punctuation.definition, punctuation.definition.binding-pattern.object, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, support.type.object.module.js#8f8d88
punctuation.terminator.statement.js, punctuation.separator.key-value.js, punctuation.separator.comma.js, punctuation.accessor.js#acabab
Constants, constant.other.object.key.js, entity.name, entity.name.method.js, entity.name.module.js, entity.name.module.js, entity.name.tag, entity.name.tag.css, entity.name.type, entity.name.type.class, invalid, invalid.illegal, keyword.control, keyword.other.unit.px.css, punctuation.definition.binding-pattern.array, markup.bold markup.italic string, markup.bold markup.italic, markup.bold string, markup.bold, markup.deleted, markup.deleted.git_gutter, markup.italic markup.bold string, markup.italic markup.bold, markup.italic, markup.quote markup.bold string, markup.quote markup.bold, markup.underline, meta.brace.square, meta.class-method.js, meta.structure.dictionary.json, meta.structure.dictionary.value.json, meta.tag.sgml, source.js, source.json, source.sass, string.other.link, string.other.link.title.markdown, string.unquoted.label.js, support.other.variable, support.type, support.variable.object.node, tag.decorator.js punctuation.definition.tag.js, tag.decorator.js, variable.function.constructor, variable.import.parameter.js, variable.language, variable.other.class.js, variable.other.property, variable.other.readwrite.alias, variable.other.readwrite.alias.tsx, meta.object-literal.key#83BCFF
keyword.control.flow, keyword.function.go, keyword.input.graphql, keyword.type.graphql, keyword.control.at-rule.function, keyword.control.return.scss, storage.modifier, storage.modifier.async, storage.type.class, storage.type.enum, storage.type.function, storage.type.interface, storage.type.property, storage.type.type, support.function, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.end.tsx, punctuation.definition.parameters.begin.jsx, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.jsx, punctuation.definition.parameters.end.tsx, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, variable.scss, keyword.control.switch, keyword.control.trycatch, keyword.control.conditional#a29bfe
constant, constant.numeric, constant.other.caps.python, constant.other.placeholder, entity.other.attribute-name, entity.other.attribute-name.id, entity.other.attribute-name.placeholder.css, fenced_code.block.language, keyword.control.operator.css.scss, keyword.operator, keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.new, keyword.other.unit, markup.bold, markup.deleted, meta.group.regexp, punctuation.accessor.optional, punctuation.separator.key-value.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.constant, source.css, source.php, storage.type.function.arrow, support.class, support.constant, support.type.exception.python, text.html.markdown string, variable#e84855
entity.name.function, entity.name.function.sql.sqlite, entity.name.tag.yaml, keyword.other.special-method, markup.raw.block.fenced.markdown, markup.table, meta.function-call, punctuation.definition.list_item.markdown, punctuation.section.class.end, support.function.builtin.python, support.function, support.function.magic.python, support.function.misc.scss, text.html.markdown, variable.function, variable.language.fenced.markdown, variable.other.bare, entity.name.tag.js, support.class.component, keyword.control.from, keyword.control.export#23d18c
comment, comment.block.scss, constant.character.escape, constant.other.color, entity.other.attribute-name, keyword, keyword.control, keyword.operator.type.annotation.tsx, keyword.other.substitution, keyword.other.template, markup.changed, markup.quote punctuation.definition.blockquote.markdown, markup.raw.block, meta.function-call.sql.sqlite, meta.parens, meta.separator, meta.tag, punctuation, punctuation.definition.comment, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, punctuation.separator.inheritance.php, punctuation.definition.section.case-statement, string.other.link.description.title.markdown, string.regexp, variable.language.fenced.markdown#424b54
support.type.property-name.json, variable.other.env, keyword.other.definition.insert_final_newline.editorconfig, keyword.other.definition.root.editorconfig, keyword.other.definition.indent_size.editorconfig, keyword.other.definition.indent_style.editorconfig, keyword.other.definition.indent_style.editorconfig, keyword.other.definition.end_of_line.editorconfig, keyword.other.definition.charset.editorconfig, keyword.other.definition.trim_trailing_whitespace.editorconfig#23d18c
constant.character, constant.escape, constant.language, constant.numeric, entity.other.attribute-name.pseudo-class.css, keyword.other, keyword.other.unit, source.json, support.constant, support.variable.property#f0aa85
keyword.control.default, variable.other.object, keyword.control.as, keyword.operator.assignment.env, punctuation.separator.key-value.editorconfig, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.function.scss, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, punctuation.definition.media-query.begin.bracket.round, punctuation.definition.media-query.end.bracket.round, source meta.block keyword.control.loop, source switch-statement.expr switch-block.expr keyword.control.loop, storage.type, source.css, string.quoted.single.js, meta.import.js, source.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.objectliteral.js meta.object.member.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.less, source.postcss, source.sass, source.scss, source.stylus, source meta.class meta.method.declaration meta.block meta.block meta.arrow meta.block variable.other.object, source.ts meta.class.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, source.ts meta.interface.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, source.ts meta.type.declaration.ts meta.object.type.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts#ff5d8f
constant.character.escape.backslash.regexp, entity.name.type.instance.jsdoc, entity.other.attribute-name.html, entity.other.attribute-name.js.jsx, entity.other.attribute-name.tsx, entity.other.inherited-class, keyword.control.loop, meta.structure.dictionary.value.json, source.js meta.arrow.js meta.block.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.arrow.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.export.default.js meta.function.expression.js meta.block.js meta.tag.without-attributes.js meta.jsx.children.js meta.tag.without-attributes.js meta.jsx.children.js meta.tag.js meta.tag.attributes.js entity.other.attribute-name.js, source.json#f49e4c
entity.name, markup.changed.git_gutter, meta.property-value.scss, meta.use.php, support.class, support.constant.property-value.css, support.orther.namespace.use.php, support.other.namespace.php, support.type.builtin.graphql, support.type.primitive, support.type.sys-types#eab464
variable.parameter, meta.jsx.children#f38375
*link*, *uri*, *url*underline
constant.other.color, markup.inline.raw.markdown, meta.definition.property.tsx, punctuation.definition.raw.markdown, string.quoted.double.env, string.quoted.double.json, string.quoted.single.env, string.quoted.single.yaml, string.unquoted.plain.out.yaml, support.type.property-name, support.type.property-name.css, text.html.markdown, variable.graphql, variable.object.property.tsx, variable.other.jsdoc, variable.other.object.property, string#e9dbdb
constant.other.key, constant.other.object.key.js, constant.other.reference.link.markdown, constant.other.symbol, entity.name, entity.other.attribute-name, entity.other.attribute-name.class, markdown.heading, markup.heading, markup.heading, markup.heading.markdown, markup.inserted, markup.inserted.git_gutter, meta.group.braces.curly, meta.structure.dictionary.jsoYn, meta.structure.dictionary.value.json, punctuation.definition.block, punctuation.definition.binding-pattern.object, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.interpolation.begin.bracket.curly, punctuation.definition.interpolation.end.bracket.curly, punctuation.definition.heading.markdown, source.json, string.quoted.double.html, string.unquoted.label.js, text.html.basic, text.html.basic, keyword.control.import, variable.other.constant.js, variable.other.readwrite#ffe066
Daydreamer by Bulgariu Codrin - VS Code Theme