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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6F6E69
comment.block.documentation, comment.block.documentation variable.other#6F6E69italic
comment.block.documentation entity.name.type#100F0F
comment.block.documentation storage.type#6F6E69italic
string, punctuation.definition.string.template#24837B
constant.numeric#5E409D
constant.language#AD8301
constant.character, constant.other#24837B
variable.language.this#A02F6F
keyword.control, keyword.operator.new#66800B
keyword.control.as#100F0F
keyword, keyword.operator.less, keyword.control.import, keyword.control.from#AF3029
variable.other.object#66800B
meta.tag.without-attributes.js.jsx#100F0F
variable.other.object.property#100F0F
variable.other.readwrite#100F0F
storage.modifier#205EA6
keyword.operator#100F0F
punctuation, meta.brace#6F6E69
punctuation.definition.comment#6F6E69
punctuation.definition.tag#6F6E69
string.quoted punctuation.definition.string#24837B
string.regexp, string.regexp punctuation.definition.string#24837B
storage#A02F6F
storage.type#205EA6
storage.type.class#205EA6
entity.name.class#205EA6underline
meta.require, support.function.any-method, variable.function#100F0F
meta.definition.method, entity.name.function.js.jsx, entity.name.function.tsx#BC5215
entity.name.function#BC5215
entity.name.function.js, entity.name.function.ts#BC5215
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#AF3029
variable.parameter#100F0F
source.css.scss, source.css#24837B
entity.other.attribute-name#AD8301
entity.other.inherited-class#66800B
support.function, support.variable.dom#AD8301
support.constant#24837B
support.type#100F0F
support.class#100F0F
invalid#AF3029
invalid.deprecated#AF3029
invalid.illegal#6F6E69
meta.diff, meta.diff.header#6F6E69
markup.deleted#AF3029
markup.inserted#66800B
markup.changed#AD8301
constant.numeric.line-number.find-in-files - match#66800B
entity.name.filename.find-in-files#AD8301
keyword.other#100F0F
meta.property-value, support.constant.property-value, constant.other.color#205EA6
meta.property-value punctuation.separator.key-value#6F6E69
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#A02F6F
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#A02F6F
meta.object-literal.key#BC5215
variable.parameter.function.coffee#205EA6
markup.deleted.git_gutter#AF3029
markup.inserted.git_gutter
markup.changed.git_gutter#AD8301
meta.template.expression#205EA6
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#5E409D
keyword.operator.expression.keyof#A02F6F
entity.name.type, support.type.python#AD8301
entity.name.type.class#BC5215
token.info-token#205EA6
token.warn-token#AD8301
token.error-token#AF3029
token.debug-token#5E409D
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#205EA6
support.class.component.tsx, support.class.component.js.jsx#A02F6F
support.type.primitive.tsx, support.type.primitive.ts#AF3029
storage.modifier.tsx#A02F6F
entity.other.inherited-class.tsx#AD8301
meta.object.member variable.other.readwrite.tsx#100F0F
meta.structure.dictionary.json string.quoted.double.json#6F6E69
meta.structure.dictionary.value.json string.quoted.double.json#24837B
meta.structure.dictionary.json, punctuation.definition.string#24837B
meta.structure.dictionary.json, support.type.property-name.json#A02F6F
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#AD8301
entity.name.section.markdown, entity.name.section.mdx#AD8301
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#A02F6F
markup.raw.inline.markdown, markup.raw.inline.mdx#205EA6
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#A02F6F
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#A02F6F
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#A02F6F
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#A02F6F
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#A02F6F
markup.italic.markdown, markup.italic.mdxitalic
markup.bold.markdown, markup.bold.mdxbold
markup.raw.block.markdown, markup.raw.block.mdx#205EA6
keyword.other.rust#5E409D
keyword.other.fn.rust#A02F6F
punctuation.section.embedded.begin.php, keyword.other.class.php#A02F6F
support.class.php#100F0F
entity.name.function.php#BC5215
meta.use.php#66800B
keyword.other.definition.ini#AD8301
support.type.primitive.prisma#AD8301
support.constant.constant.prisma#A02F6F
variable.language.relations.prisma#66800B
entity.name.tag.yaml#A02F6F
variable.other.object.property.java#5E409D
storage.modifier.java#205EA6
storage.type.java#AD8301
keyword.other.package.java, keyword.other.import.java#A02F6F
storage.modifier.package.java#AD8301
storage.modifier.import.java#100F0F
punctuation.separator.java#100F0F
meta.tag.xml#24837B
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#A02F6F
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#AD8301
variable.parameter.function.swift#6F6E69
entity.name.function.swift#AD8301
variable.parameter.function.swift, meta.parameter-clause.swift#6F6E69
support.function.go#205EA6
keyword.operator.address.go, keyword.operator.pointer.go#AD8301
keyword.channel.go#5E409D
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#AD8301
entity.name.tag.astro#205EA6
support.class.component.astro#A02F6F
support.function.builtin.python, meta.function-call.generic.python#BC5215
entity.name.function.decorator.python#AD8301
entity.name.function.rust#BC5215