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#1C1B1A
  • activityBar.border#343331
  • activityBar.foreground#CECDC3
  • activityBarBadge.background#4385BE
  • activityBarBadge.foreground#100F0F
  • badge.background#4385BE
  • badge.foreground#100F0F
  • button.background#4385BE
  • button.foreground#100F0F
  • dropdown.background#282726
  • dropdown.border#403E3C
  • dropdown.foreground#CECDC3
  • editor.background#100F0F
  • editor.foreground#CECDC3
  • editor.hoverHighlightBackground#343331
  • editor.lineHighlightBackground#100F0F
  • editor.selectionBackground#403E3C
  • editor.wordHighlightBackground#343331
  • editor.wordHighlightStrongBackground#403E3C
  • editorBracketMatch.background#343331
  • editorBracketMatch.border#343331
  • editorCursor.foreground#CECDC3
  • editorGroupHeader.tabsBackground#1C1B1A
  • editorGutter.addedBackground#66800B
  • editorGutter.background#100F0F
  • editorGutter.deletedBackground#AF3029
  • editorGutter.modifiedBackground#205EA6
  • editorIndentGuide.background#282726
  • editorInlayHint.background#100F0F
  • editorInlayHint.foreground#CECDC3
  • editorLineNumber.background#100F0F
  • editorLineNumber.foreground#878580
  • editorLink.activeForeground#205EA6
  • editorOverviewRuler.addedForeground#879A39
  • editorOverviewRuler.deletedForeground#D14D41
  • editorOverviewRuler.errorForeground#D14D41
  • editorOverviewRuler.findMatchForeground#4385BE
  • editorOverviewRuler.infoForeground#4385BE
  • editorOverviewRuler.modifiedForeground#4385BE
  • editorOverviewRuler.warningForeground#D0A215
  • editorRuler.foreground#282726
  • editorSuggestWidget.foreground#CECDC3
  • editorSuggestWidget.highlightForeground#CE5D97
  • editorSuggestWidget.selectedBackground#575653
  • editorWhitespace.foreground#403E3C
  • editorWidget.background#343331
  • editorWidget.border#343331
  • extensionButton.prominentBackground#879A39
  • extensionButton.prominentForeground#CECDC3
  • extensionButton.prominentHoverBackground#879A39
  • focusBorder#4385BE
  • foreground#CECDC3
  • gitDecoration.conflictingResourceForeground#DA702C
  • gitDecoration.deletedResourceForeground#D14D41
  • gitDecoration.ignoredResourceForeground#575653
  • gitDecoration.modifiedResourceForeground#D0A215
  • gitDecoration.untrackedResourceForeground#3AA99F
  • input.background#403E3C
  • input.border#343331
  • input.foreground#CECDC3
  • input.placeholderForeground#878580
  • inputOption.activeBorder#4385BE
  • list.activeSelectionBackground#575653
  • list.activeSelectionForeground#CECDC3
  • list.focusBackground#282726
  • list.hoverBackground#343331
  • list.inactiveSelectionBackground#282726
  • panel.background#282726
  • panel.border#343331
  • panelTitle.activeBorder#4385BE
  • panelTitle.inactiveForeground#878580
  • peekView.border#343331
  • peekViewEditor.background#282726
  • peekViewEditor.matchHighlightBackground#575653
  • peekViewEditorGutter.background#343331
  • peekViewResult.background#403E3C
  • peekViewResult.fileForeground#CECDC3
  • peekViewResult.lineForeground#878580
  • peekViewResult.matchHighlightBackground#343331
  • peekViewResult.selectionBackground#575653
  • peekViewResult.selectionForeground#CECDC3
  • peekViewTitle.background#575653
  • peekViewTitleDescription.foreground#575653
  • peekViewTitleLabel.foreground#CECDC3
  • progressBar.background#4385BE
  • scrollbar.shadow#343331
  • scrollbarSlider.activeBackground#282726
  • scrollbarSlider.background#403E3C
  • scrollbarSlider.hoverBackground#575653
  • sideBar.background#1C1B1A
  • sideBar.border#343331
  • sideBar.foreground#CECDC3
  • sideBarSectionHeader.background#1C1B1A
  • sideBarSectionHeader.border#343331
  • sideBarSectionHeader.foreground#CECDC3
  • statusBar.background#1C1B1A
  • statusBar.border#343331
  • statusBar.foreground#CECDC3
  • statusBar.noFolderBackground#343331
  • tab.activeModifiedBorder#D0A215
  • tab.border#343331
  • tab.inactiveBackground#1C1B1A
  • tab.inactiveForeground#878580
  • tab.inactiveModifiedBorder#4385BE
  • tab.unfocusedActiveModifiedBorder#AD8301
  • tab.unfocusedInactiveModifiedBorder#205EA6
  • terminal.ansiBlack#100F0F
  • terminal.ansiBlue#4385BE
  • terminal.ansiBrightBlack#343331
  • terminal.ansiBrightBlue#4385BE
  • terminal.ansiBrightCyan#3AA99F
  • terminal.ansiBrightGreen#879A39
  • terminal.ansiBrightMagenta#CE5D97
  • terminal.ansiBrightRed#D14D41
  • terminal.ansiBrightWhite#CECDC3
  • terminal.ansiBrightYellow#D0A215
  • terminal.ansiCyan#24837B
  • terminal.ansiGreen#66800B
  • terminal.ansiMagenta#A02F6F
  • terminal.ansiRed#AF3029
  • terminal.ansiWhite#CECDC3
  • terminal.ansiYellow#AD8301
  • terminal.background#1C1B1A
  • terminal.foreground#CECDC3
  • titleBar.activeBackground#1C1B1A
  • titleBar.border#343331

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#878580
comment.block.documentation, comment.block.documentation variable.other#878580italic
comment.block.documentation entity.name.type#CECDC3
comment.block.documentation storage.type#878580italic
string, punctuation.definition.string.template#3AA99F
constant.numeric#8B7EC8
constant.language#D0A215
constant.character, constant.other#3AA99F
variable.language.this#CE5D97
keyword.control, keyword.operator.new#879A39
keyword.control.as#CECDC3
keyword, keyword.operator.less, keyword.control.import, keyword.control.from#D14D41
variable.other.object#879A39
meta.tag.without-attributes.js.jsx#CECDC3
variable.other.object.property#CECDC3
variable.other.readwrite#CECDC3
storage.modifier#4385BE
keyword.operator#CECDC3
punctuation, meta.brace#878580
punctuation.definition.comment#878580
punctuation.definition.tag#878580
string.quoted punctuation.definition.string#3AA99F
string.regexp, string.regexp punctuation.definition.string#3AA99F
storage#CE5D97
storage.type#4385BE
storage.type.class#4385BE
entity.name.class#4385BEunderline
meta.require, support.function.any-method, variable.function#CECDC3
meta.definition.method, entity.name.function.js.jsx, entity.name.function.tsx#DA702C
entity.name.function#DA702C
entity.name.function.js, entity.name.function.ts#DA702C
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.expression#D14D41
variable.parameter#CECDC3
source.css.scss, source.css#3AA99F
entity.other.attribute-name#D0A215
entity.other.inherited-class#879A39
support.function, support.variable.dom#D0A215
support.constant#3AA99F
support.type#CECDC3
support.class#CECDC3
invalid#D14D41
invalid.deprecated#D14D41
invalid.illegal#878580
meta.diff, meta.diff.header#878580
markup.deleted#D14D41
markup.inserted#879A39
markup.changed#D0A215
constant.numeric.line-number.find-in-files - match#879A39
entity.name.filename.find-in-files#D0A215
keyword.other#CECDC3
meta.property-value, support.constant.property-value, constant.other.color#4385BE
meta.property-value punctuation.separator.key-value#878580
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#CE5D97
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#CE5D97
meta.object-literal.key#DA702C
variable.parameter.function.coffee#4385BE
markup.deleted.git_gutter#D14D41
markup.inserted.git_gutter
markup.changed.git_gutter#D0A215
meta.template.expression#4385BE
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#8B7EC8
keyword.operator.expression.keyof#CE5D97
entity.name.type, support.type.python#D0A215
entity.name.type.class#DA702C
token.info-token#4385BE
token.warn-token#D0A215
token.error-token#D14D41
token.debug-token#8B7EC8
entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, entity.name.tag.style.html.vue, entity.name.tag.script.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.block.any.html#4385BE
support.class.component.tsx, support.class.component.js.jsx#CE5D97
support.type.primitive.tsx, support.type.primitive.ts#D14D41
storage.modifier.tsx#CE5D97
entity.other.inherited-class.tsx#D0A215
meta.object.member variable.other.readwrite.tsx#CECDC3
meta.structure.dictionary.json string.quoted.double.json#878580
meta.structure.dictionary.value.json string.quoted.double.json#3AA99F
meta.structure.dictionary.json, punctuation.definition.string#3AA99F
meta.structure.dictionary.json, support.type.property-name.json#CE5D97
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.mdx, punctuation.definition.list.end.markdown, punctuation.definition.list.end.mdx, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.begin.mdx, punctuation.definition.quote.end.markdown, punctuation.definition.quote.end.mdx, meta.separator.markdown, meta.separator.mdx, markup.inline.raw.string.markdown, markup.raw.code.text.mdx#D0A215
entity.name.section.markdown, entity.name.section.mdx#D0A215
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#CE5D97
markup.raw.inline.markdown, markup.raw.inline.mdx#4385BE
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#CE5D97
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#CE5D97
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#CE5D97
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#CE5D97
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#CE5D97
markup.italic.markdown, markup.italic.mdxitalic
markup.bold.markdown, markup.bold.mdxbold
markup.raw.block.markdown, markup.raw.block.mdx#4385BE
keyword.other.rust#8B7EC8
keyword.other.fn.rust#CE5D97
punctuation.section.embedded.begin.php, keyword.other.class.php#CE5D97
support.class.php#CECDC3
entity.name.function.php#DA702C
meta.use.php#879A39
keyword.other.definition.ini#D0A215
support.type.primitive.prisma#D0A215
support.constant.constant.prisma#CE5D97
variable.language.relations.prisma#879A39
entity.name.tag.yaml#CE5D97
variable.other.object.property.java#8B7EC8
storage.modifier.java#4385BE
storage.type.java#D0A215
keyword.other.package.java, keyword.other.import.java#CE5D97
storage.modifier.package.java#D0A215
storage.modifier.import.java#CECDC3
punctuation.separator.java#CECDC3
meta.tag.xml#3AA99F
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#CE5D97
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#D0A215
variable.parameter.function.swift#878580
entity.name.function.swift#D0A215
variable.parameter.function.swift, meta.parameter-clause.swift#878580
support.function.go#4385BE
keyword.operator.address.go, keyword.operator.pointer.go#D0A215
keyword.channel.go#8B7EC8
storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.boolean.go, storage.type.byte.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.complex.go#D0A215
entity.name.tag.astro#4385BE
support.class.component.astro#CE5D97
support.function.builtin.python, meta.function-call.generic.python#DA702C
entity.name.function.decorator.python#D0A215
entity.name.function.rust#DA702C