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#000000
  • editor.background#000000
  • editor.findMatchBackground#FBBF2460
  • editor.findMatchHighlightBackground#FBBF2430
  • editor.selectionBackground#60A5FA30
  • editor.selectionHighlightBackground#60A5FA20
  • editorBracketMatch.background#60A5FA40
  • editorBracketMatch.border#60A5FA
  • editorError.border#EF444480
  • editorError.foreground#EF4444
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.background#000000
  • editorHint.foreground#34D399
  • editorHoverWidget.border#1F2937
  • editorIndentGuide.activeBackground1#000000
  • editorIndentGuide.background1#1F2937
  • editorInfo.foreground#60A5FA
  • editorLineNumber.activeForeground#9CA3AF
  • editorLineNumber.foreground#374151
  • editorSuggestWidget.background#0F0F0F
  • editorSuggestWidget.border#1F2937
  • editorSuggestWidget.selectedBackground#1F2937
  • editorWarning.border#FBBF2480
  • editorWarning.foreground#FBBF24
  • editorWidget.border#1F2937
  • menu.background#000000
  • menu.border#424242
  • minimap.background#000000
  • notifications.border#1F2937
  • panel.background#000000
  • panel.border#1F2937
  • scrollbarSlider.activeBackground#1F293780
  • scrollbarSlider.background#1F293740
  • scrollbarSlider.hoverBackground#1F293760
  • sideBar.background#000000
  • statusBar.background#000000
  • tab.inactiveBackground#000000
  • terminal.background#000000
  • terminalCursor.background#000000
  • terminalCursor.foreground#60A5FA
  • titleBar.activeBackground#000000
  • titleBar.inactiveBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#E5E7EB
emphasisitalic
strongbold
comment#6B7280italic
comment.block.documentation, comment.block.documentation.ts, comment.block.documentation.js#6B7280italic
storage.type.class.jsdoc, storage.type.class.ts, punctuation.definition.block.tag.jsdoc#F472B6
entity.name.type.instance.jsdoc, variable.other.jsdoc#A78BFAitalic
variable.other.link.underline.jsdoc, variable.other.description.jsdoc#60A5FAunderline
keyword, keyword.control, storage, storage.type, storage.modifier#F472B6
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#F472B6
keyword.operator#E5E7EB
string, string.quoted, string.template#34D399
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#FBBF24
entity.name.function, support.function, meta.function-call.generic.python#60A5FA
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java, storage.type.primitive, entity.name.type.interface#A78BFA
variable, variable.other, meta.definition.variable.name, support.variable#E5E7EB
variable.other.constant, variable.other.enummember, constant.other#FB7185
variable.language, variable.language.this, variable.language.super#F472B6italic
entity.name.tag, entity.name.tag.jsx, support.class.component.jsx#FB7185
entity.other.attribute-name, entity.other.attribute-name.jsx#FBBF24
punctuation.definition.tag, punctuation.definition.tag.jsx#6B7280
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#F472B6
meta.template.expression#E5E7EB
support.type.property-name, meta.object-literal.key, variable.other.property#60A5FA
punctuation.definition.string.begin, punctuation.definition.string.end#34D399
constant.character.escape#FBBF24
punctuation.separator, punctuation.terminator, punctuation.accessor#9CA3AF
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array#E5E7EB
invalid#EF4444bold
markup.heading, entity.name.section#60A5FAbold
markup.bold#E5E7EBbold
markup.italicitalic
markup.inline.raw#34D399
markup.underline.link#60A5FAunderline
entity.name.type.module, entity.name.namespace#A78BFA
meta.import, keyword.control.import, keyword.control.export, keyword.control.from#F472B6
entity.name.type.alias, entity.name.type.interface#A78BFA
meta.type.annotation, meta.return.type#A78BFA
punctuation.definition.comment#6B7280
token.info-token#60A5FA
token.warn-token#FBBF24
token.error-token#EF4444
token.debug-token#A78BFA
support.type.primitive.tsx, entity.name.type.tsx, meta.type.parameters#A78BFA
variable.other.readwrite.tsx, variable.other.object.property.tsx#E5E7EB
entity.name.tag.tsx, support.class.component.tsx#FB7185
entity.other.attribute-name.tsx, JSXAttrs#FBBF24italic
variable.parameter, meta.function.parameters#FB7185italic
keyword.control.flow.python, keyword.control.import.python, storage.type.function.python#F472B6
support.type.python, support.function.builtin.python, support.function.magic.python#A78BFA
variable.language.special.self.python, variable.language.special.cls.python#F472B6italic
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#6B7280italic
constant.language.python#FBBF24
keyword.control.rust, storage.type.rust, storage.modifier.rust, keyword.operator.borrow.rust#F472B6
entity.name.type.rust, storage.type.core.rust, support.type.primitive.rust#A78BFA
entity.name.function.macro.rust, support.function.std.rust#60A5FA
variable.language.rust, keyword.operator.key-value.rust#F472B6italic
string.quoted.double.rust, string.quoted.single.rust#34D399
storage.modifier.java, keyword.control.java, storage.type.java, storage.type.primitive.java#F472B6
storage.type.object.array.java, storage.type.generic.java, entity.name.type.class.java#A78BFA
variable.language.java, constant.language.java#F472B6italic
entity.name.function.java, meta.method.java#60A5FA
keyword.control.lua, storage.type.function.lua, keyword.operator.lua#F472B6
entity.name.function.lua, support.function.lua#60A5FA
variable.language.lua#F472B6italic
string.quoted.single.lua, string.quoted.double.lua#34D399
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.sass, keyword.control.at-rule.css, keyword.control.at-rule.scss#FB7185
support.type.property-name.css, support.type.property-name.scss, meta.property-name.css, meta.property-name.scss#60A5FA
support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css, meta.property-value.scss#34D399
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FBBF24
variable.scss, variable.sass, entity.name.tag.reference.scss#F472B6
keyword.control.shell, storage.modifier.shell, keyword.operator.redirect.shell#F472B6
support.function.builtin.shell, entity.name.function.shell#60A5FA
variable.language.shell, variable.other.bracket.shell#F472B6
string.quoted.single.shell, string.quoted.double.shell#34D399
constant.numeric.shell, variable.other.positional.shell#FBBF24
entity.name.tag.xml, entity.name.tag.localname.xml, punctuation.definition.tag.xml#FB7185
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#FBBF24
string.quoted.double.xml, string.quoted.single.xml#34D399
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.html#6B7280
entity.name.tag.yaml, keyword.control.flow.block-scalar.literal.yaml, keyword.control.flow.block-scalar.folded.yaml#60A5FA
punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.yaml#F472B6
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#34D399
constant.language.yaml#FBBF24
support.type.property-name.json5, support.type.property-name.toml#60A5FA
string.quoted.single.json5, string.quoted.double.json5, string.quoted.single.basic.line.toml, string.quoted.double.basic.line.toml#34D399
entity.name.section.group-title.toml#FB7185
entity.name.tag.svg, entity.name.tag.localname.svg#FB7185
entity.other.attribute-name.svg, entity.other.attribute-name.localname.svg#FBBF24
keyword.control.nix, storage.type.nix, keyword.operator.nix#F472B6
entity.name.function.nix, support.function.builtin.nix#60A5FA
string.quoted.double.nix, string.quoted.single.nix#34D399
entity.name.tag.nix, variable.other.property.nix#FBBF24
meta.tag.astro, entity.name.tag.astro#FB7185
entity.other.attribute-name.astro#FBBF24
punctuation.definition.tag.astro, meta.embedded.expression.astro#F472B6
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#34D399
markup.quote.markdown, punctuation.definition.quote.begin.markdown#6B7280italic
markup.list.numbered.markdown, markup.list.unnumbered.markdown#F472B6
string.other.link.description.title.markdown, string.other.link.title.markdown#60A5FA
entity.name.section.group-title.git-commit, meta.scope.subject.git-commit#60A5FAbold
comment.line.number-sign.git-commit#6B7280italic
markup.changed.git_gutter, markup.inserted.git_gutter#34D399
markup.deleted.git_gutter#EF4444
Glyph Oled by s16dih - VS Code Theme