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.background#0B0B1A
  • activityBar.border#00FFFF
  • activityBar.foreground#F8F8FF
  • activityBar.inactiveForeground#696969
  • button.background#FF0000
  • button.foreground#FFFFFF
  • diffEditor.diagonalFill#00FFFF10
  • diffEditor.insertedTextBackground#00FFFF20
  • diffEditor.removedTextBackground#00FFFF20
  • dropdown.background#1C1C1C
  • dropdown.border#00FFFF
  • dropdown.foreground#F8F8FF
  • editor.background#1a1a2e
  • editor.findMatchBackground#DAA52040
  • editor.findMatchHighlightBackground#DAA52020
  • editor.foreground#F8F8FF
  • editor.lineHighlightBackground#2F4F4F40
  • editor.lineHighlightBorder#00FFFF20
  • editor.rangeHighlightBackground#00FFFF10
  • editor.rangeHighlightBorder#00FFFF30
  • editor.selectionBackground#FF000040
  • editor.symbolHighlightBackground#00FFFF20
  • editor.symbolHighlightBorder#00FFFF40
  • editor.wordHighlightBackground#00FFFF20
  • editor.wordHighlightBorder#00FFFF40
  • editor.wordHighlightStrongBackground#00FFFF30
  • editor.wordHighlightStrongBorder#00FFFF50
  • editorBracketMatch.background#00FFFF20
  • editorBracketMatch.border#00FFFF
  • editorCursor.foreground#00FFFF
  • editorError.foreground#FF0000
  • editorGroup.border#00FFFF
  • editorGroup.dropBackground#00FFFF20
  • editorGroup.dropIntoPromptBackground#0B0B1A
  • editorGroup.dropIntoPromptBorder#00FFFF
  • editorGroup.dropIntoPromptForeground#F8F8FF
  • editorGroupHeader.border#00FFFF
  • editorGroupHeader.tabsBackground#0B0B1A
  • editorGutter.addedBackground#00FFFF20
  • editorGutter.deletedBackground#00FFFF20
  • editorGutter.modifiedBackground#00FFFF20
  • editorIndentGuide.activeBackground#00FFFF40
  • editorIndentGuide.background#00FFFF20
  • editorInfo.foreground#00BFFF
  • editorLineNumber.activeForeground#00FFFF
  • editorLineNumber.foreground#00FFFF40
  • editorWarning.foreground#DAA520
  • input.background#1C1C1C
  • input.border#00FFFF
  • input.foreground#F8F8FF
  • list.activeSelectionBackground#2F4F4F
  • list.activeSelectionForeground#F8F8FF
  • list.focusBackground#2F4F4F
  • list.focusForeground#F8F8FF
  • list.hoverBackground#2F4F4F40
  • list.hoverForeground#F8F8FF
  • list.inactiveSelectionBackground#2F4F4F80
  • list.inactiveSelectionForeground#808080
  • panel.background#0B0B1A
  • panel.border#00FFFF
  • panel.foreground#F8F8FF
  • panelSectionHeader.background#0B0B1A
  • panelSectionHeader.border#00FFFF
  • panelSectionHeader.foreground#F8F8FF
  • panelTitle.activeBorder#00FFFF
  • panelTitle.activeForeground#F8F8FF
  • panelTitle.inactiveForeground#696969
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#00FFFF80
  • scrollbarSlider.background#00FFFF40
  • scrollbarSlider.hoverBackground#00FFFF60
  • sideBar.background#0B0B1A
  • sideBar.border#00FFFF
  • sideBar.foreground#F8F8FF
  • sideBarSectionHeader.background#0B0B1A
  • sideBarSectionHeader.border#00FFFF
  • sideBarSectionHeader.foreground#F8F8FF
  • sideBarTitle.foreground#F8F8FF
  • statusBar.background#0B0B1A
  • statusBar.border#00FFFF
  • statusBar.debuggingBackground#DAA520
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#F8F8FF
  • statusBar.noFolderBackground#0B0B1A
  • statusBar.noFolderForeground#F8F8FF
  • tab.activeBackground#1a1a2e
  • tab.activeBorderTop#00FFFF
  • tab.activeForeground#F8F8FF
  • tab.border#00FFFF
  • tab.hoverBackground#0B0B1A
  • tab.hoverBorder#00FFFF
  • tab.inactiveBackground#0B0B1A
  • tab.inactiveForeground#696969
  • tab.unfocusedActiveBorderTop#00FFFF
  • terminal.ansiBlack#2c3e50
  • terminal.ansiBlue#2980b9
  • terminal.ansiBrightBlack#7f8c8d
  • terminal.ansiBrightBlue#3498db
  • terminal.ansiBrightCyan#1abc9c
  • terminal.ansiBrightGreen#2ecc71
  • terminal.ansiBrightMagenta#9b59b6
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightWhite#F8F8FF
  • terminal.ansiBrightYellow#e67e22
  • terminal.ansiCyan#16a085
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#8e44ad
  • terminal.ansiRed#c0392b
  • terminal.ansiWhite#F8F8FF
  • terminal.ansiYellow#d35400
  • terminal.background#0B0B1A
  • terminal.foreground#F8F8FF
  • titleBar.activeBackground#0B0B1A
  • titleBar.activeForeground#F8F8FF
  • titleBar.border#00FFFF
  • titleBar.inactiveBackground#0B0B1A
  • titleBar.inactiveForeground#696969
  • widget.border#00FFFF
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, keyword.operator, keyword.other, keyword.type, keyword.modifier, keyword.declaration, keyword.import, keyword.export, keyword.return, keyword.break, keyword.continue, keyword.throw, keyword.try, keyword.catch, keyword.finally, keyword.if, keyword.else, keyword.switch, keyword.case, keyword.default, keyword.for, keyword.while, keyword.do, keyword.goto, keyword.const, keyword.let, keyword.var, keyword.function, keyword.class, keyword.interface, keyword.enum, keyword.struct, keyword.union, keyword.type, keyword.typedef, keyword.namespace, keyword.using, keyword.package, keyword.import, keyword.export, keyword.public, keyword.private, keyword.protected, keyword.static, keyword.final, keyword.abstract, keyword.virtual, keyword.override, keyword.new, keyword.delete, keyword.this, keyword.super, keyword.self, keyword.base, keyword.as, keyword.is, keyword.in, keyword.of, keyword.from, keyword.to, keyword.by, keyword.with, keyword.without, keyword.using, keyword.where, keyword.select, keyword.from, keyword.group, keyword.by, keyword.order, keyword.by, keyword.having, keyword.join, keyword.on, keyword.into, keyword.let, keyword.where, keyword.select, keyword.distinct, keyword.skip, keyword.take, keyword.first, keyword.last, keyword.single, keyword.any, keyword.all, keyword.contains, keyword.like, keyword.in, keyword.between, keyword.not, keyword.and, keyword.or, keyword.xor, keyword.true, keyword.false, keyword.null, keyword.undefined, keyword.void, keyword.never, keyword.any, keyword.unknown, keyword.never, keyword.object, keyword.string, keyword.number, keyword.boolean, keyword.symbol, keyword.bigint, keyword.never, keyword.any, keyword.unknown, keyword.void, keyword.never, keyword.object, keyword.string, keyword.number, keyword.boolean, keyword.symbol, keyword.bigint#FF0000—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.quoted.single.block, string.quoted.double.block, string.quoted.triple.block, string.quoted.other.block, string.quoted.single.raw, string.quoted.double.raw, string.quoted.triple.raw, string.quoted.other.raw, string.quoted.single.heredoc, string.quoted.double.heredoc, string.quoted.triple.heredoc, string.quoted.other.heredoc, string.quoted.single.interpolated, string.quoted.double.interpolated, string.quoted.triple.interpolated, string.quoted.other.interpolated, string.quoted.single.template, string.quoted.double.template, string.quoted.triple.template, string.quoted.other.template, string.quoted.single.regexp, string.quoted.double.regexp, string.quoted.triple.regexp, string.quoted.other.regexp, string.quoted.single.other, string.quoted.double.other, string.quoted.triple.other, string.quoted.other.other#32CD32—
comment, comment.line, comment.block, comment.documentation, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, comment.line.character, comment.block.documentation#8A2BE2—
entity.name.function, support.function, variable.function, variable.annotation.function, meta.function, meta.function-call, meta.method, meta.method-call#00BFFF—
variable, variable.other, variable.parameter, variable.function, variable.annotation, variable.other.constant, variable.other.readwrite, variable.other.readonly, variable.other.property, variable.language, variable.language.this, variable.language.super, variable.language.self, variable.language.base#32CD32—
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.type.alias, entity.name.type.parameter, support.type, support.class, support.interface, support.struct, support.enum, support.union, support.trait, support.type.alias, support.type.parameter#8A2BE2—
constant, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.decimal, constant.character, constant.character.escape, constant.character.unicode, constant.other, constant.other.placeholder, constant.other.symbol, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity#FF6347—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.word, keyword.operator.other#00BFFF—
entity.name.tag, entity.name.tag.*, entity.name.tag.xml, entity.name.tag.xml.*, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.jsx.*, entity.name.tag.tsx.*, entity.name.tag.vue, entity.name.tag.vue.*, entity.name.tag.angular, entity.name.tag.angular.*, entity.name.tag.php, entity.name.tag.php.*, entity.name.tag.python, entity.name.tag.python.*, entity.name.tag.django, entity.name.tag.django.*, entity.name.tag.jinja, entity.name.tag.jinja.*, entity.name.tag.blade, entity.name.tag.blade.*, entity.name.tag.markdown, entity.name.tag.markdown.*, entity.name.tag.yaml, entity.name.tag.yaml.*, entity.name.tag.json, entity.name.tag.json.*, entity.name.tag.sgml, entity.name.tag.sgml.*, entity.name.tag.svg, entity.name.tag.svg.*, entity.name.tag.mathml, entity.name.tag.mathml.*, entity.name.tag.custom, entity.name.tag.custom.*#00FFFF—
punctuation.definition.tag, punctuation.definition.tag.*, punctuation.definition.tag.xml, punctuation.definition.tag.xml.*, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.jsx.*, punctuation.definition.tag.tsx.*, punctuation.definition.tag.vue, punctuation.definition.tag.vue.*, punctuation.definition.tag.angular, punctuation.definition.tag.angular.*, punctuation.definition.tag.php, punctuation.definition.tag.php.*, punctuation.definition.tag.python, punctuation.definition.tag.python.*, punctuation.definition.tag.django, punctuation.definition.tag.django.*, punctuation.definition.tag.jinja, punctuation.definition.tag.jinja.*, punctuation.definition.tag.blade, punctuation.definition.tag.blade.*, punctuation.definition.tag.markdown, punctuation.definition.tag.markdown.*, punctuation.definition.tag.yaml, punctuation.definition.tag.yaml.*, punctuation.definition.tag.json, punctuation.definition.tag.json.*, punctuation.definition.tag.sgml, punctuation.definition.tag.sgml.*, punctuation.definition.tag.svg, punctuation.definition.tag.svg.*, punctuation.definition.tag.mathml, punctuation.definition.tag.mathml.*, punctuation.definition.tag.custom, punctuation.definition.tag.custom.*, punctuation.definition.markup, punctuation.definition.markup.*, punctuation.definition.template, punctuation.definition.template.*, punctuation.definition.block, punctuation.definition.block.*, punctuation.definition.inline, punctuation.definition.inline.*#00FFFF—
entity.other.attribute-name, entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.style, entity.other.attribute-name.href, entity.other.attribute-name.src, entity.other.attribute-name.alt, entity.other.attribute-name.title, entity.other.attribute-name.other#FFEB3B—
support.type.property-name, support.constant.property-value, meta.property-name, meta.property-value, variable.other.property, variable.other.object.property#FF4500—
support.constant.property-value, meta.property-value, variable.other.property-value, constant.other.property-value#00FF7F—
markup.underline.link, markup.underline.link:visited, markup.underline.link:active, markup.underline.link:hover#00CED1—
meta.decorator, meta.decorator.other, meta.decorator.annotation, meta.decorator.attribute#8A2BE2—
support.type.built-in, support.type.primitive, support.type.system, support.type.user-defined#9B59B6—
support.function.built-in, support.function.system, support.function.console, support.function.math, support.function.string, support.function.array, support.function.object, support.function.date, support.function.regexp, support.function.json, support.function.promise, support.function.error, support.function.symbol, support.function.proxy, support.function.reflect, support.function.map, support.function.set, support.function.weakmap, support.function.weakset#00BFFF—
support.constant.built-in, support.constant.system, support.constant.math, support.constant.date, support.constant.regexp, support.constant.json, support.constant.promise, support.constant.error, support.constant.symbol, support.constant.proxy, support.constant.reflect, support.constant.map, support.constant.set, support.constant.weakmap, support.constant.weakset#FFD700—
Space Wars Theme by Murat Alpaslan - VS Code Theme