Skip to main content
Coding Theme

Color themes

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#1A1A1A
  • activityBar.border#4444445A
  • activityBar.foreground#7D7D7D
  • activityBarBadge.background#8C8C8C
  • activityBarBadge.foreground#1A1A1A
  • badge.background#383838
  • badge.foreground#C1C1C1
  • breadcrumb.focusForeground#E0E0E0
  • button.background#333333
  • debugIcon.breakpointCurrentStackframeForeground#28A9FF
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#E66DFF
  • debugIcon.breakpointStackframeForeground#28A9FF
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#E66DFF
  • debugIcon.disconnectForeground#E66DFF
  • debugIcon.pauseForeground#E66DFF
  • debugIcon.restartForeground#28A9FF
  • debugIcon.startForeground#28A9FF
  • debugIcon.stepBackForeground#E66DFF
  • debugIcon.stepIntoForeground#E66DFF
  • debugIcon.stepOutForeground#E66DFF
  • debugIcon.stepOverForeground#E66DFF
  • debugIcon.stopForeground#28A9FF
  • diffEditor.insertedTextBackground#42DD7620
  • diffEditor.removedTextBackground#D62C2C25
  • editor.background#1F1F1F
  • editor.lineHighlightBorder#303030
  • editorBracketHighlight.foreground1#42DD76
  • editorBracketHighlight.foreground2#28A9FF
  • editorBracketHighlight.foreground3#FFB638
  • editorBracketHighlight.foreground4#FF7135
  • editorBracketHighlight.foreground5#E66DFF
  • editorBracketHighlight.foreground6#B58E95
  • editorBracketHighlight.unexpectedBracket.foreground#FF1277
  • editorBracketPairGuide.activeBackground1#42DD76
  • editorBracketPairGuide.activeBackground2#28A9FF
  • editorBracketPairGuide.activeBackground3#FFB638
  • editorBracketPairGuide.activeBackground4#FF7135
  • editorBracketPairGuide.activeBackground5#E66DFF
  • editorBracketPairGuide.activeBackground6#B58E95
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#1A1A1A
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.foreground#727272
  • editorRuler.foreground#2A2A2A
  • editorStickyScroll.background#1A1A1A
  • editorStickyScrollHover.background#262626
  • editorSuggestWidget.background#1A1A1A
  • focusBorder#444444
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • input.background#2A2A2A
  • input.foreground#E0E0E0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#262626
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#F5F5F5
  • panelTitle.activeBorder#1F1F1F
  • panelTitle.activeForeground#FAFAFA
  • panelTitle.inactiveForeground#484848
  • peekView.border#444444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FAFAFA
  • scrollbar.shadow#1F1F1F
  • sideBar.background#1A1A1A
  • sideBar.border#4444445A
  • sideBarSectionHeader.background#202020
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#2F1759
  • statusBar.noFolderForeground#8C8C8C
  • statusBarItem.prominentBackground#FAFAFA1A
  • statusBarItem.remoteBackground#1A1A1A00
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#FFB638
  • symbolIcon.constructorForeground#8A78FE
  • symbolIcon.enumeratorForeground#FFB638
  • symbolIcon.enumeratorMemberForeground#28A9FF
  • symbolIcon.eventForeground#FFB638
  • symbolIcon.fieldForeground#28A9FF
  • symbolIcon.functionForeground#8A78FE
  • symbolIcon.interfaceForeground#28A9FF
  • symbolIcon.methodForeground#8A78FE
  • symbolIcon.variableForeground#28A9FF
  • tab.activeBorder#1E1E1E
  • tab.activeBorderTop#8C8C8C
  • tab.activeForeground#FAFAFA
  • tab.border#1A1A1A
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#727272
  • terminal.ansiBlack#63828A
  • terminal.ansiBlue#09A1ED
  • terminal.ansiBrightBlack#303742
  • terminal.ansiBrightBlue#41B9FF
  • terminal.ansiBrightCyan#16DAD6
  • terminal.ansiBrightGreen#25DA6A
  • terminal.ansiBrightMagenta#C75AF3
  • terminal.ansiBrightRed#FF2E87
  • terminal.ansiBrightWhite#E3EEFE
  • terminal.ansiBrightYellow#FFC104
  • terminal.ansiCyan#AF79FE
  • terminal.ansiGreen#2DAE58
  • terminal.ansiMagenta#EA00D9
  • terminal.ansiRed#FF0046
  • terminal.ansiWhite#DDE4F1
  • terminal.ansiYellow#CF9C00
  • terminal.background#1A1A1A
  • textLink.activeForeground#FAFAFA
  • textLink.foreground#CCC
  • titleBar.activeBackground#1A1A1A
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier, punctuation.definition.directive.c, punctuation.definition.directive.cpp, keyword.type.go, storage.class.d, markup.deleted.git_gutter, entity.name.tag.css, punctuation.definition.keyword.css, entity.name.tag.wildcard.css, storage.modifier.mut.rust, storage.modifier.type.rust, variable.language.self.rust, storage.modifier.cs, keyword.other.this.cs, keyword.control.powershell, storage.type.powershell, meta.function.powershell, keyword.control.shell, storage.type.shell, meta.function.shell, variable.language.this.js, keyword.operator.new.js, storage.type.js, constant.language.null.js, constant.language.undefined.js, keyword.operator.ternary.js, variable.language.this.ts, keyword.operator.new.ts, storage.type.ts, storage.type.namespace.ts, variable.language.this.ts, constant.language.null.ts, constant.language.undefined.ts, keyword.operator.ternary.ts, keyword.operator.expression.of.ts#F85EB4
entity.name.type.primitive.rust, entity.name.type.numeric.rust, keyword.type.cs, support.type.primitive.js, support.type.primitive.ts#F85EB4
punctuation, keyword.operator, keyword.operator.sigil.rust, keyword.operator.access.dot.rust, keyword.operator.key-value.rust, keyword.operator.attribute.inner.rust, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.brace.round.js, meta.brace.square.js, meta.brace.round.ts, meta.brace.square.ts, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, punctuation.definition.string.markdown, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#97a2b5
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, keyword.other.common.function, entity.name.function.rust, entity.name.function.cs, support.function.powershell, support.function.shell, entity.name.function.js, entity.name.function.ts, support.function.misc.css, support.function.misc.scss#10B1FE
support.function.macro.rust, support.function.macro.builtin.rust, support.function.macro.core.rust, entity.name.type.macro.rust, entity.name.function.macro.rust, entity.name.function.macro.rules.rust, support.function.macro.julia, support.function.builtin.zig#10B1FE
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.table.toml, variable.key.table.toml, storage.type.haskell, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.c, storage.type.built-in.c, meta.function.definition.parameters.c, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, entity.name.class.kotlin, storage.type.go, storage.type.boolean.go, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go, storage.type.concrete.nim, storage.type.basic-type.d, storage.type.d, support.type.python, basicTypes.nim, meta.class.stanza.dune, storage.type.cs, entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.union.rust, entity.name.type.declaration.rust, storage.type.cs, entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.enum.cs, entity.name.type.class.js, support.class.builtin.js, support.class.component.js, entity.name.type.class.ts#42DD76
constant.other.haskell, variable.other.enummember.cpp, support.enum.core.rust, entity.name.type.option.rust, entity.name.type.result.rust, constant.language.bool.rust, entity.name.variable.enum-member.cs, constant.language.boolean.true.cs, constant.language.boolean.false.cs, constant.language.powershell, constant.language.powershell punctuation.definition.variable.powershell, constant.language.shell, constant.language.shell punctuation.definition.variable.shell, constant.language.boolean.true.js, constant.language.boolean.false.js, variable.other.enummember.ts, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.yaml, constant.language.boolean.toml#15C9C5
entity.name.type.trait.rust, entity.name.type.interface.ts#E66DFF
entity.name.type.type-parameter.cs#42DD76
variable, meta.function-call.arguments, string constant.other.placeholder, meta.function-call.java, storage.modifier.import.java, variable.other.object, variable.other.rust, entity.name.variable.local.cs, variable.other.readwrite.cs, variable.other.readwrite.js, variable.other.constant.js, , variable.css, variable.argument.css, variable.scss#c1c9eb
variable.parameter, keyword.other.self.rust, meta.parens.block.c, variable.css, entity.name.variable.parameter.cs, variable.parameter.js, variable.parameter.ts#14d7be
entity.name.variable.field.cs, variable.other.object.property.cs, variable.other.member.powershell, variable.other.member.shell, variable.other.property.js, variable.object.property.ts, variable.other.property.ts#B58E95
constant.other.caps.rust, constant.language.null.cs, support.constant.variable.powershell, support.constant.variable.powershell punctuation.definition.variable.powershell, support.constant.variable.shell, support.constant.variable.shell punctuation.definition.variable.shell, variable.other.constant.js, variable.other.constant.ts, constant.language.json, constant.other.boolean.toml#15C9C5
string, punctuation.definition.string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.quoted.double.rust, punctuation.definition.string.rust, string.quoted.double.cs, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs, string.quoted.double.powershell, string.quoted.single.powershell, punctuation.definition.string.begin.powershell, punctuation.definition.string.end.powershell, string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.quoted.single.js, string.quoted.double.js, string.template.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, string.quoted.single.ts, string.quoted.double.ts, string.template.ts, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts, string.quoted.double.css, string.quoted.double.scss, string.quoted.single.css, string.quoted.single.scss, string.quoted.single.xml, string.quoted.double.xml, string.quoted.double.json, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, string.quoted.single.yaml, string.quoted.double.yaml, string.quoted.single.basic.line.toml, string.quoted.triple.basic.block.toml, string.quoted.single.literal.line.toml, string.quoted.triple.literal.block.toml, string.quoted.single.ini, string.quoted.double.ini, punctuation.definition.string.begin.ini, punctuation.definition.string.end.ini, string.quoted.double.bnf, string.quoted.single.bnf#FFB638
constant.character.escape, constant.character.escape.rust, constant.character.escape.cs, constant.character.escape.powershell, constant.character.escape.shell, constant.character.escape.js, constant.character.escape.ts, punctuation.definition.constant.xml, constant.character.entity.xml, constant.character.escape.yaml, constant.character.escape.toml#FF7135
punctuation.definition.char.rust, string.quoted.single.char.rust, punctuation.definition.char.begin.cs, punctuation.definition.char.end.cs, string.quoted.single.cs#FF7135
constant.numeric, constant.numeric.decimal.rust, constant.numeric.bin.rust, constant.numeric.hex.rust, constant.numeric.oct.rust, punctuation.separator.dot.decimal.rust, constant.numeric.binary.cs, constant.numeric.decimal.cs, constant.numeric.hex.cs, constant.numeric.integer.powershell, constant.numeric.hex.powershell, constant.numeric.octal.powershell, constant.numeric.integer.shell, constant.numeric.hex.shell, constant.numeric.octal.shell, constant.numeric.binary.js, constant.numeric.decimal.js, constant.numeric.hex.js, constant.numeric.octal.js, constant.numeric.binary.ts, constant.numeric.decimal.ts, constant.numeric.hex.ts, constant.numeric.octal.ts, constant.numeric.css, constant.numeric.json, constant.numeric.integer.yaml, constant.numeric.float.yaml, constant.numeric.integer.toml, constant.numeric.float.toml, constant.numeric.bin.toml, constant.numeric.hex.toml, constant.numeric.oct.toml, constant.numeric.inf.toml, constant.numeric.nan.toml#FF7135
comment, punctuation.definition.comment, comment.block.cs, comment.line.double-slash.cs, comment.line.powershell, comment.line.shell, comment.block.documentation.js, comment.line.double-slash.js, comment.block.documentation.ts, comment.line.double-slash.ts, comment.block.xml, punctuation.definition.comment.xml, comment, comment.line.double-slash.js, comment.block.json, punctuation.definition.comment.yaml, comment.line.number-sign.yaml, punctuation.definition.comment.toml, comment.line.number-sign.toml, punctuation.definition.comment.ini, comment.line.semicolon.ini, comment.line.number-sign.ini, comment.line.bnf, comment.block.bnf#777777italic
meta.attribute.rust, meta.attribute.rust punctuation.definition.attribute.rust, meta.attribute.rust punctuation.brackets.attribute.rust, meta.attribute.rust punctuation.brackets.round.rust, meta.attribute.rust entity.name.type.rust, support.function.attribute.powershell, variable.parameter.attribute.powershell, support.function.attribute.shell, variable.parameter.attribute.shell#FF7135
invalid, invalid.illegal#FF2884
*url*, *link*, *uri*underline
keyword.operator.misc.question-mark.rust, keyword.operator.question.rust#F85EB4
punctuation.definition.lifetime.rust, entity.name.type.lifetime.rust, storage.modifier.lifetime.rust#E66DFF
meta.interpolation.rust, punctuation.definition.interpolation.rust#E66DFF
variable.other.metavariable.specifier.rust#9ACC12
entity.name.tag.cs, comment.block.documentation.cs punctuation.definition.tag.cs, comment.block.documentation.cs punctuation.separator.equals.cs#777777
entity.other.attribute-name.cs#FF7135
comment.block.documentation.cs#c1c9eb
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#E66DFF
variable.other.readwrite.powershell, punctuation.definition.variable.powershell, storage.modifier.scope.powershell, variable.other.readwrite.shell, punctuation.definition.variable.shell, storage.modifier.scope.shell, variable.other.assignment.shell, punctuation.definition.variable.shell#42DD76
storage.modifier.scope.powershell, support.variable.drive.powershell, storage.modifier.scope.shell, support.variable.drive.shell, punctuation.definition.variable.shell#42DD76underline
support.variable.automatic.powershell, support.variable.automatic.shell, support.variable.automatic.powershell punctuation.definition.variable.powershell, support.variable.automatic.shell punctuation.definition.variable.shell, variable.other.normal.shell#E66DFF
keyword.operator.comparison.powershell, keyword.operator.comparison.powershell, keyword.operator.logical.shell, keyword.operator.logical.shell#F85EB4
keyword.operator.documentation.powershell, keyword.operator.documentation.shell, punctuation.definition.variable.shell#c1c9eb
punctuation.section.embedded.substatement.begin.powershell, punctuation.section.embedded.substatement.end.powershell, punctuation.section.embedded.substatement.begin.shell, punctuation.section.embedded.substatement.end.shell#E66DFF
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#E66DFF
punctuation.definition.group.regexp, punctuation.definition.group.no-capture.regexp#c1c9eb
constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp, punctuation.definition.look-ahead.regexp, meta.assertion.look-ahead.regexp, meta.group.assertion.regexp#E66DFF
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js#FF7135bold
entity.other.attribute-name.js#E66DFFitalic
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#E66DFF
entity.name.tag.html#F85EB4
entity.other.attribute-name.html, entity.other.attribute-name.css#15C9C5italic
meta.attribute.id.html string.quoted.double.html, entity.other.attribute-name.id.css#FF7135bold
meta.attribute.class.html string.quoted.double.html, entity.other.attribute-name.class.css#42DD76
meta.attribute, meta.attribute-selector.css string.quoted.double.css#FFB638
meta.attribute.href.html string.quoted.double.html, meta.attribute.src.html string.quoted.double.html, meta.attribute.unrecognized.xmlns.html string.quoted.double.html#E66DFF
meta.embedded.line.css#9ACC12
entity.name.tag.css#F85EB4
support.type.property-name.css, meta.property-name.css, meta.property-name.scss, support.type.property-name.media.css#B58E95
support.constant.property-value.css#15C9C5
support.constant.font-name.css#FFB638
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#9ACC12
keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.ex.css, keyword.other.unit.ch.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.percentage.css, keyword.other.unit.mm.css, keyword.other.unit.in.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.pc.css, keyword.other.unit.deg.css, constant.other.scss#FF7135
keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css#F85EB4
support.constant.media.css#E66DFF
punctuation.definition.keyword.scss, keyword.control.at-rule.include.scss, entity.name.tag.reference.scss, entity.name.tag.wildcard.scss#F85EB4
entity.name.tag.xml, entity.name.tag.localname.xml#F85EB4
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#15C9C5italic
entity.name.tag.namespace.xml#9ACC12
entity.other.attribute-name.namespace.xml#9ACC12italic
entity.other.attribute-name.xml punctuation.separator.namespace.xmlitalic
variable.language.documentroot.xml#E66DFF
text.html.markdown, punctuation.definition.list_item.markdown#c1c9eb
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown#c1c9ebbold
markup.fenced_code.block.markdown#c1c9eb
fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown#c1c9ebbold
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#F85EB4
punctuation.definition.bold.markdown, markup.bold, markup.bold string#FF7135bold
punctuation.definition.italic.markdown, markup.italic#10B1FEitalic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#10B1FEitalic bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#FFB638italic
markup.strikethrough.markdown, punctuation.definition.strikethrough.markdown#636D83strikethrough
meta.separator.markdown#c1c9ebbold
punctuation.definition.list.begin.markdown#15C9C5
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.description.title.markdown, string.other.link.description.markdown, string.other.link.title.markdown#42DD76
markup.underline.link, constant.other.reference.link.markdown#E66DFFunderline
punctuation.definition.math.begin.markdown#9ACC12
constant.character.math.tex, constant.character.math.tex punctuation.definition.math.tex#15C9C5
support.type.property-name.json#F85EB4
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json
entity.name.tag.yaml#F85EB4
constant.other.timestamp.yaml#42DD76
constant.language.null.yaml#F85EB4
storage.type.tag-handle.yaml#F85EB4
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.alias.yaml punctuation.definition.alias.yaml#9ACC12
keyword.key.toml, support.type.property-name.toml#F85EB4
constant.other.date.toml, constant.other.datetime.toml, constant.other.datetime-with-timezone.toml, constant.other.time.date.toml, constant.other.time.time.toml, constant.other.time.datetime.local.toml, constant.other.time.datetime.offset.toml#42DD76
entity.other.attribute-name.table.toml, support.type.property-name.table.toml#9ACC12
entity.other.attribute-name.table.array.toml, support.type.property-name.array.toml#E66DFF
keyword.other.definition.ini#F85EB4
entity.name.section.group-title.ini#9ACC12
entity.name.class.bnf#42DD76
support.variable.bnf#15C9C5
entity.name.tag.njk#97a2b5
support.variable.njk#97a2b5
keyword.operator.njk, punctuation.output.njk, punctuation.tag.njk#B58E95
keyword.separator.pipe.njk, support.function.filter.njk, punctuation.tag.njk#E66DFF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...