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.activeBackground#00000015
  • activityBar.background#EFEFEF
  • activityBar.border#00000010
  • activityBar.foreground#353535
  • activityBar.inactiveForeground#A0A0A0
  • activityBarBadge.background#007CD3
  • activityBarBadge.foreground#FFFFFF
  • activityErrorBadge.background#DA2C43
  • activityWarningBadge.background#C3A57C
  • badge.background#E7E7E7
  • badge.foreground#757575
  • breadcrumb.background#EFEFEF
  • breadcrumb.focusForeground#007CD3
  • breadcrumb.foreground#555555
  • button.background#007CD3
  • button.foreground#EFEFEF
  • button.hoverBackground#0062A6
  • button.secondaryBackground#757575
  • button.secondaryForeground#EFEFEF
  • button.secondaryHoverBackground#555555
  • debugToolBar.background#EDEDED
  • debugToolBar.border#EDEDED
  • diffEditor.border#E7E7E7
  • diffEditor.insertedTextBackground#AAFCD455
  • diffEditor.insertedTextBorder#FFFFFF00
  • diffEditor.removedTextBackground#DA2C4330
  • diffEditor.removedTextBorder#FFFFFF00
  • disabledForeground#A0A0A0
  • editor.background#EFEFEF
  • editor.findMatchBackground#D36E4A35
  • editor.findMatchBorder#D36E4A
  • editor.findMatchHighlightBackground#D36E4A35
  • editor.findMatchHighlightBorder#D36E4A
  • editor.findRangeHighlightBackground#C8E8FF75
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#C3A57C55
  • editor.foreground#353535
  • editor.hoverHighlightBackground#B1DFFFAA
  • editor.inactiveSelectionBackground#FFFFFFAA
  • editor.lineHighlightBackground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF00
  • editor.rangeHighlightBackground#F8DE7E50
  • editor.rangeHighlightBorder#FFFFFF00
  • editor.selectionBackground#C8E8FF
  • editor.selectionHighlightBackground#C8E8FF75
  • editor.selectionHighlightBorder#007CD3
  • editor.wordHighlightBackground#B1DFFFAA
  • editor.wordHighlightBorder#FFFFFF00
  • editor.wordHighlightStrongBackground#B1DFFFAA
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#A1FBD075
  • editorBracketMatch.border#A1FBD075
  • editorCodeLens.foreground#A0A0A0
  • editorCursor.background#EFEFEF
  • editorCursor.foreground#353535
  • editorError.background#DA2C4320
  • editorError.border#DA2C4300
  • editorError.foreground#DA2C43
  • editorGroup.border#E7E7E7
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#E7E7E7
  • editorGroupHeader.tabsBorder#00000010
  • editorGutter.addedBackground#63A484
  • editorGutter.background#EFEFEF
  • editorGutter.deletedBackground#DA2C43
  • editorGutter.foldingControlForeground#707070
  • editorGutter.modifiedBackground#169FFF
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#CDCDCD
  • editorHoverWidget.foreground#353535
  • editorIndentGuide.activeBackground1#A0A0A0
  • editorIndentGuide.background1#CDCDCD
  • editorInfo.background#2CA8FF00
  • editorInfo.border#2CA8FF00
  • editorInfo.foreground#2CA8FF
  • editorLineNumber.activeForeground#0062A6
  • editorLineNumber.foreground#A0A0A0
  • editorLink.activeForeground#0089E9
  • editorMarkerNavigation.background#FFFFFF
  • editorMarkerNavigationError.background#DA2C43
  • editorMarkerNavigationInfo.background#59BBFF
  • editorMarkerNavigationWarning.background#E2CB73
  • editorOverviewRuler.background#EFEFEF
  • editorOverviewRuler.errorForeground#DA2C43
  • editorOverviewRuler.infoForeground#59BBFF
  • editorOverviewRuler.warningForeground#E2CB73
  • editorRuler.foreground#DDDDDD
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#EFEFEF
  • editorSuggestWidget.foreground#353535
  • editorSuggestWidget.highlightForeground#007CD3
  • editorSuggestWidget.selectedBackground#B1DFFF75
  • editorSuggestWidget.selectedForeground#353535
  • editorSuggestWidget.selectedIconForeground#151515
  • editorWarning.background#E2CB7300
  • editorWarning.border#E2CB7300
  • editorWarning.foreground#E2CB73
  • editorWhitespace.foreground#FFFFFFAA
  • editorWidget.background#EDEDED
  • editorWidget.foreground#555555
  • editorWidget.resizeBorder#A0A0A0
  • focusBorder#0062A6
  • foreground#353535
  • gitDecoration.addedResourceForeground#568E73
  • gitDecoration.conflictingResourceForeground#8C7659
  • gitDecoration.deletedResourceForeground#DA2C43
  • gitDecoration.ignoredResourceForeground#A0A0A0
  • gitDecoration.modifiedResourceForeground#D36E4A
  • gitDecoration.renamedResourceForeground#007CD3
  • gitDecoration.stageDeletedResourceForeground#DA2C43
  • gitDecoration.stageModifiedResourceForeground#D36E4A
  • gitDecoration.submoduleResourceForeground#0062A6
  • gitDecoration.untrackedResourceForeground#006A43
  • input.background#FFFFFF
  • input.border#FFFFFF00
  • input.foreground#353535
  • input.placeholderForeground#757575
  • inputOption.activeBackground#B1DFFF
  • inputOption.activeBorder#FFFFFF00
  • inputOption.activeForeground#252525
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#555555
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#DDDDDD
  • list.focusBackground#DEF1FF
  • list.focusForeground#555555
  • list.highlightForeground#0062A6
  • list.hoverBackground#EFEFEF
  • list.hoverForeground#555555
  • list.inactiveSelectionBackground#DDDDDD
  • list.inactiveSelectionForeground#707070
  • listFilterWidget.background#B1DFFF
  • listFilterWidget.noMatchesOutline#E05164
  • markdown.extension.editor.codeSpan.background#FFFFFFAA
  • markdown.extension.editor.codeSpan.border#FFFFFF00
  • menu.background#EFEFEF
  • menu.border#FFFFFF00
  • menu.foreground#353535
  • menu.selectionBackground#007CD3
  • menu.selectionBorder#FFFFFF00
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#B0B0B0
  • menubar.selectionBackground#00000015
  • menubar.selectionBorder#FFFFFF00
  • menubar.selectionForeground#353535
  • merge.commonContentBackground#DDDDDDEE
  • merge.commonHeaderBackground#C0C0C0EE
  • merge.currentContentBackground#E9FEF4EE
  • merge.currentHeaderBackground#CEFDE6EE
  • merge.incomingContentBackground#DEF1FFEE
  • merge.incomingHeaderBackground#B1DFFFEE
  • notificationCenter.border#E7E7E7
  • notificationCenterHeader.background#E7E7E7
  • notificationCenterHeader.foreground#353535
  • notifications.background#EFEFEF
  • notifications.foreground#555555
  • notificationsErrorIcon.foreground#DA2C43
  • notificationsInfoIcon.foreground#59BBFF
  • notificationsWarningIcon.foreground#E2CB73
  • notificationToast.border#00000000
  • panel.background#DEDEDE
  • panel.border#E7E7E7
  • panelTitle.activeBorder#353535
  • panelTitle.activeForeground#353535
  • panelTitle.inactiveForeground#757575
  • peekView.border#007CD3
  • peekViewEditor.background#DEF1FF
  • peekViewEditor.matchHighlightBackground#D36E4A35
  • peekViewEditor.matchHighlightBorder#D36E4A
  • peekViewEditorGutter.background#DEF1FF
  • peekViewResult.background#FFFFFF
  • peekViewResult.fileForeground#353535
  • peekViewResult.lineForeground#353535
  • peekViewResult.matchHighlightBackground#D36E4A35
  • peekViewResult.selectionBackground#DEF1FF
  • peekViewResult.selectionForeground#252525
  • peekViewTitle.background#85CDFF
  • peekViewTitleDescription.foreground#FFFFFF
  • peekViewTitleLabel.foreground#0062A6
  • pickerGroup.border#007CD3
  • pickerGroup.foreground#353535
  • progressBar.background#007CD3
  • scrollbar.shadow#C0C0C0
  • scrollbarSlider.activeBackground#A0A0A0
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • selection.background#B1DFFF
  • sideBar.background#E7E7E7
  • sideBar.border#00000010
  • sideBar.foreground#555555
  • sideBarSectionHeader.background#EFEFEF
  • sideBarSectionHeader.border#00000010
  • sideBarSectionHeader.foreground#353535
  • sideBarTitle.foreground#252525
  • statusBar.background#007CD3
  • statusBar.border#FFFFFF00
  • statusBar.debuggingBackground#D36E4A
  • statusBar.debuggingBorder#FFFFFF00
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#C3A57C
  • statusBar.noFolderBorder#FFFFFF00
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF35
  • statusBarItem.remoteBackground#63A484
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#EFEFEF
  • tab.activeBorder#00000000
  • tab.activeBorderTop#007CD3
  • tab.activeForeground#555555
  • tab.border#00000010
  • tab.hoverBackground#EFEFEF
  • tab.hoverBorder#00000000
  • tab.hoverForeground#555555
  • tab.inactiveBackground#E7E7E7
  • tab.inactiveForeground#757575
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0062A6
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#0089E9
  • terminal.ansiBrightCyan#35B9AC
  • terminal.ansiBrightGreen#00AB6D
  • terminal.ansiBrightMagenta#FF56AA
  • terminal.ansiBrightRed#E05164
  • terminal.ansiBrightWhite#A0A0A0
  • terminal.ansiBrightYellow#CDB768
  • terminal.ansiCyan#2A9288
  • terminal.ansiGreen#006A43
  • terminal.ansiMagenta#D33A86
  • terminal.ansiRed#DA2C43
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#A29152
  • terminal.border#CDCDCD
  • terminal.foreground#353535
  • terminal.selectionBackground#B1DFFF55
  • terminalCursor.background#007CD3
  • terminalCursor.foreground#FFFFFF
  • textLink.foreground#007CD3
  • titleBar.activeBackground#EFEFEF
  • titleBar.activeForeground#252525
  • titleBar.border#FFFFFF00
  • titleBar.inactiveBackground#EDEDED
  • titleBar.inactiveForeground#A0A0A0
  • tree.indentGuidesStroke#DDDDDD
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.block.documentation#707070—
comment.block.documentation variable.other.source#E05164—
comment.line.double-slash#A0A0A0—
constant.language#0062A6bold
constant.numeric#0062A6—
entity.name.function#D36E4A—
keyword.operator.bitwise, keyword.operator.closure, keyword.operator.comparison, keyword.operator.ternary#0089E9—
keyword.control, keyword.operator#00AB6D—
keyword.control.catch-exception#E05164italic bold
keyword.declaration#0089E9—
keyword.operator.arithmetic#0089E9—
keyword.operator.assignment#0062A6—
keyword.other.import#43B1FF—
source comment.block.documentation variable.other.source——
storage.modifier#D33A86—
storage.type.annotation#8C7659italic
storage.type.primitive#0062A6—
string.interpolated.double, string.interpolated.single#0062A6—
support.class#694D92bold
variable.language#5B3C88italic bold
variable.name.source#0062A6—
comment.block.json.comments#555555—
source.json.comments comment.line.double-slash.js#707070—
string.quoted.double.json#79664D—
support.type.property-name.json#0089E9—
comment.line.percentage.tex#707070—
constant.character.escape.tex#0062A6—
constant.character.math.tex, support.class.math.block.tex constant.other.general.math.tex#D36E4A—
constant.other.general.math.tex, support.class.math.block.environment.latex punctuation.math.begin.bracket.curly.tex, support.class.math.block.environment.latex punctuation.math.end.bracket.curly.tex, support.class.math.block.tex punctuation.math.begin.bracket.curly.tex, support.class.math.block.tex punctuation.math.end.bracket.curly.tex#505050—
constant.other.reference.citation.latex, constant.other.reference.label.latex#00492F—
entity.name.footnote.latex#707070—
entity.name.section.latex—bold
keyword.control.cite.latex, keyword.control.ref.latex, meta.citation.latex punctuation.definition.arguments.begin.latex, meta.citation.latex punctuation.definition.arguments.end.latex, meta.reference.label.latex punctuation.definition.arguments.begin.latex, meta.reference.label.latex punctuation.definition.arguments.end.latex#006A43—
keyword.control.equation.align.latex, keyword.control.equation.newline.latex#D33A86—
keyword.control.label.latex, meta.definition.label.latex punctuation.definition.arguments.begin.latex, meta.definition.label.latex punctuation.definition.arguments.end.latex, meta.definition.label.latex variable.parameter.definition.label.latex#517890—
keyword.control.newline.tex#63A484—
keyword.control.preamble.latex#D33A86—
keyword.control.table.cell.latex, keyword.control.table.newline.latex#D33A86—
keyword.other.item.latex, meta.function.environment.list.latex punctuation.definition.brackets.tex#63A484—
markup.bold.textbf.latex—bold
markup.bold.textbf.latex markup.italic.emph.latex, markup.bold.textbf.latex markup.italic.textit.latex, markup.bold.textbf.latex punctuation.definition.emph.begin.latex, markup.bold.textbf.latex punctuation.definition.emph.end.latex, markup.bold.textbf.latex punctuation.definition.textit.begin.latex, markup.bold.textbf.latex punctuation.definition.textit.end.latex, markup.bold.textbf.latex support.function.emph.latex, markup.bold.textbf.latex support.function.textit.latex, markup.italic.emph.latex markup.bold.textbf.latex, markup.italic.emph.latex punctuation.definition.textbf.begin.latex, markup.italic.emph.latex punctuation.definition.textbf.end.latex, markup.italic.emph.latex support.function.textbf.latex, markup.italic.textit.latex markup.bold.textbf.latex, markup.italic.textit.latex punctuation.definition.textbf.begin.latex, markup.italic.textit.latex punctuation.definition.textbf.end.latex, markup.italic.textit.latex support.function.textbf.latex—italic bold
markup.italic.emph.latex—italic
markup.italic.textit.latex—italic
meta.function.begin-document.latex variable.parameter.function.latex, meta.function.begin-document.latex, meta.function.end-document.latex variable.parameter.function.latex, meta.function.end-document.latex#0089E9bold
meta.function.environment.general.latex, meta.parameter.optional.latex#555555—
meta.function.section.paragraph.latex punctuation.definition.arguments.begin.latex, meta.function.section.paragraph.latex punctuation.definition.arguments.end.latex, meta.function.section.section.latex punctuation.definition.arguments.begin.latex, meta.function.section.section.latex punctuation.definition.arguments.end.latex, meta.function.section.subsection.latex punctuation.definition.arguments.begin.latex, meta.function.section.subsection.latex punctuation.definition.arguments.end.latex, meta.function.section.subsubsection.latex punctuation.definition.arguments.begin.latex, meta.function.section.subsubsection.latex punctuation.definition.arguments.end.latex, support.function.section.latex#694D92bold
meta.function.texttt.latex punctuation.definition.texttt.begin.latex, meta.function.texttt.latex punctuation.definition.texttt.end.latex#D36E4A—
meta.math.block.tex support.class.math.block.tex, support.class.math.block.environment.latex#707070italic
meta.preamble.latex punctuation.definition.arguments.begin.latex, meta.preamble.latex punctuation.definition.arguments.end.latex#707070—
punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, support.function.be.latex#0089E9—
punctuation.definition.arguments.optional.begin.latex, punctuation.definition.arguments.optional.end.latex, variable.parameter.function.latex#707070—
punctuation.definition.emph.begin.latex, punctuation.definition.emph.end.latex, support.function.emph.latex#D36E4Aitalic
punctuation.definition.footnote.begin.latex, punctuation.definition.footnote.end.latex, punctuation.definition.marginpar.begin.latex, punctuation.definition.marginpar.end.latex, punctuation.definition.verb.latex, storage.type.function.latex, support.function.footnote.latex, support.function.general.latex, support.function.general.tex, support.function.marginpar.latex, support.function.verb.latex#D36E4A—
punctuation.definition.string.begin.latex, punctuation.definition.string.end.latex, support.class.math.block.tex punctuation.definition.string.begin.tex, support.class.math.block.tex punctuation.definition.string.end.tex#D36E4A—
punctuation.definition.textbf.begin.latex, punctuation.definition.textbf.end.latex, support.function.textbf.latex#D36E4Abold
punctuation.definition.textit.begin.latex, punctuation.definition.textit.end.latex, support.function.textit.latex#D36E4Aitalic
punctuation.math.operator.tex#0089E9—
support.class.latex#694D92italic
support.function.texttt.latex#D36E4A—
text.tex.latex#353535—
text.tex.latex meta.parameter.newcommand.latex punctuation.definition.arguments.begin.latex, text.tex.latex meta.parameter.newcommand.latex punctuation.definition.arguments.end.latex#353535—
variable.parameter.function.latex#0062A6—
comment.block.html#707070—
constant.character.entity.named#8C7659—
constant.other.reference.link.markdown, text.html.markdown meta.link.reference.def.markdown punctuation.definition.constant.markdown#0089E9—
constant.numeric.math.tex#0062A6—
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#A0A0A0—
fenced_code.block.language.markdown, punctuation.definition.markdown#353535bold
heading.1.markdown#5B3C88bold
heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown#785E9Dbold
markup.bold.markdown, punctuation.definition.bold.markdown—bold
markup.bold.markdown markup.italic.markdown, markup.heading.markdown heading.1.markdown entity.name.section.markdown markup.italic.markdown, markup.heading.markdown heading.2.markdown entity.name.section.markdown markup.italic.markdown, markup.heading.markdown heading.3.markdown entity.name.section.markdown markup.italic.markdown, markup.heading.markdown heading.4.markdown entity.name.section.markdown markup.italic.markdown, markup.heading.markdown heading.5.markdown entity.name.section.markdown markup.italic.markdown, markup.heading.markdown heading.6.markdown entity.name.section.markdown markup.italic.markdown—italic bold
markup.inline.raw.string.markdown#D36E4A—
markup.italic.markdown, punctuation.definition.italic.markdown—italic
markup.strikethrough.markdown#757575—
markup.table.markdown#353535—
markup.underline.link.image.markdown, markup.underline.link.markdown, meta.link.inline.markdown, punctuation.definition.metadata.markdown#707070—
meta.embedded.math.markdown#757575—
meta.link.inline.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, string.other.link.title.markdown#0089E9—
meta.paragraph.markdown#353535—
meta.separator.markdown#A0A0A0bold
punctuation.definition.function.math.tex#D36E4A—
punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, string.other.link.description.markdown#0089E9—
punctuation.definition.list.begin.markdown#CDB768—
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#D36E4A—
punctuation.definition.quote.begin.markdown#63A484—
punctuation.definition.table.markdown, punctuation.separator.table.markdown#A0A0A0—
text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown meta.link.reference.markdown punctuation.definition.link.title.begin.markdown, text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown meta.link.reference.markdown punctuation.definition.link.title.end.markdown, text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown meta.link.reference.markdown string.other.link.title.markdown#63A484—
comment.line.double-slash.rust#707070—
entity.name.module.rust—bold
entity.name.namespace.rust, keyword.operator.namespace.rust#2A9288bold
entity.name.type.declaration.rust, entity.name.type.enum.rust, entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.trait.rust#694D92bold
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#8C7659—
entity.name.type.numeric.rust, entity.name.type.option.rust, entity.name.type.primitive.rust, entity.name.type.result.rust, meta.attribute.rust#694D92—
keyword.operator.access.dot.rust#353535—
keyword.operator.arrow.fat.rust, keyword.operator.arrow.skinny.rust, keyword.operator.key-value.rust, keyword.operator.logical.rust, keyword.operator.math.rust, punctuation.brackets.angle.rust#0089E9—
keyword.operator.assignment.rust#0062A6—
keyword.operator.borrow.and.rust#555555—
keyword.other.fn.rust#D36E4Abold
keyword.other.rust#2A9288italic
meta.use.rust keyword.other.rust, source.rust meta.attribute.rust punctuation.definition.attribute.rust#2A9288—
punctuation.brackets.attribute.rust, punctuation.brackets.round.rust#353535—
source.rust#353535—
storage.type.rust#D33A86—
string.quoted.double.rust#0062A6—
source.typst#353535—
string.other.raw.typst#707070—
comment.block.xml#707070—
entity.name.tag.localname.xml#568E73bold
entity.other.attribute-name.localname.xml#D33A86—
entity.other.attribute-name.namespace.xml#007CD3—
punctuation.definition.tag.xml#568E73—
string.quoted.double.xml#79664D—
text.xml#353535—
comment.line.number-sign.yaml#707070—
constant.character.escape.yaml—bold
constant.language.boolean.yaml, constant.language.null.yaml#0062A6bold
constant.language.merge.yaml#DA2C43bold
constant.numeric.float.yaml, constant.numeric.integer.yaml#0062A6—
constant.other.timestamp.yaml#353535bold
entity.name.tag.yaml#5B3C88bold
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml#D36E4A—
entity.other.document.begin.yaml, entity.other.document.end.yaml#007CD3—
keyword.control.flow.block-scalar.folded.yaml, keyword.control.flow.block-scalar.literal.yaml, storage.modifier.chomping-indicator.yaml#D36E4A—
keyword.other.directive.yaml.yaml, meta.directive.yaml constant.numeric.yaml-version.yaml, punctuation.definition.directive.begin.yaml#007CD3bold
meta.block-mapping.yaml, punctuation.separator.key-value.mapping.yaml#0089E9—
punctuation.definition.alias.yaml, variable.other.alias.yaml#2FA69A—
punctuation.definition.block.sequence.item.yaml#757575—
source.yaml meta.block-mapping.yaml string.unquoted.block.yaml, string.unquoted.plain.out.yaml#2FA69A—
storage.type.tag-handle.yaml#694D92bold
string.quoted.double.yaml, string.quoted.single.yaml#0062A6—
string.unquoted.plain.in.yaml#707070—