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#FFFFFF15
  • activityBar.background#252525
  • activityBar.border#FFFFFF10
  • activityBar.foreground#E7E7E7
  • activityBar.inactiveForeground#707070
  • activityBarBadge.background#0089E9
  • activityBarBadge.foreground#151515
  • activityErrorBadge.background#E05164
  • activityWarningBadge.background#CDB768
  • badge.background#353535
  • badge.foreground#A0A0A0
  • breadcrumb.background#252525
  • breadcrumb.focusForeground#43B1FF
  • breadcrumb.foreground#C0C0C0
  • button.background#0089E9
  • button.foreground#151515
  • button.hoverBackground#43B1FF
  • button.secondaryBackground#555555
  • button.secondaryForeground#E7E7E7
  • button.secondaryHoverBackground#707070
  • debugToolBar.background#353535
  • debugToolBar.border#353535
  • diffEditor.border#353535
  • diffEditor.insertedTextBackground#63A48455
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#E0516430
  • diffEditor.removedTextBorder#00000000
  • disabledForeground#707070
  • editor.background#252525
  • editor.findMatchBackground#D36E4A35
  • editor.findMatchBorder#D36E4A
  • editor.findMatchHighlightBackground#D36E4A35
  • editor.findMatchHighlightBorder#D36E4A
  • editor.findRangeHighlightBackground#0062A675
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#8C765955
  • editor.foreground#E7E7E7
  • editor.hoverHighlightBackground#0062A6AA
  • editor.inactiveSelectionBackground#15151555
  • editor.lineHighlightBackground#353535
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#A2915250
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#0062A6
  • editor.selectionHighlightBackground#0062A675
  • editor.selectionHighlightBorder#43B1FF
  • editor.wordHighlightBackground#0062A6AA
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#0062A6AA
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#63A48475
  • editorBracketMatch.border#63A48475
  • editorCodeLens.foreground#707070
  • editorCursor.background#252525
  • editorCursor.foreground#E7E7E7
  • editorError.background#E0516420
  • editorError.border#00000000
  • editorError.foreground#E05164
  • editorGroup.border#353535
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#FFFFFF10
  • editorGutter.addedBackground#63A484
  • editorGutter.background#252525
  • editorGutter.deletedBackground#E05164
  • editorGutter.foldingControlForeground#A0A0A0
  • editorGutter.modifiedBackground#43B1FF
  • editorHoverWidget.background#353535
  • editorHoverWidget.border#555555
  • editorHoverWidget.foreground#E7E7E7
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#555555
  • editorInfo.background#43B1FF00
  • editorInfo.border#00000000
  • editorInfo.foreground#43B1FF
  • editorLineNumber.activeForeground#43B1FF
  • editorLineNumber.foreground#707070
  • editorLink.activeForeground#0089E9
  • editorMarkerNavigation.background#353535
  • editorMarkerNavigationError.background#E05164
  • editorMarkerNavigationInfo.background#43B1FF
  • editorMarkerNavigationWarning.background#E2CB73
  • editorOverviewRuler.background#252525
  • editorOverviewRuler.errorForeground#E05164
  • editorOverviewRuler.infoForeground#43B1FF
  • editorOverviewRuler.warningForeground#E2CB73
  • editorRuler.foreground#353535
  • editorSuggestWidget.background#353535
  • editorSuggestWidget.border#555555
  • editorSuggestWidget.foreground#E7E7E7
  • editorSuggestWidget.highlightForeground#43B1FF
  • editorSuggestWidget.selectedBackground#0062A675
  • editorSuggestWidget.selectedForeground#E7E7E7
  • editorSuggestWidget.selectedIconForeground#EFEFEF
  • editorWarning.background#E2CB7300
  • editorWarning.border#00000000
  • editorWarning.foreground#E2CB73
  • editorWhitespace.foreground#55555555
  • editorWidget.background#353535
  • editorWidget.foreground#C0C0C0
  • editorWidget.resizeBorder#707070
  • focusBorder#43B1FF
  • foreground#E7E7E7
  • gitDecoration.addedResourceForeground#63A484
  • gitDecoration.conflictingResourceForeground#8C7659
  • gitDecoration.deletedResourceForeground#E05164
  • gitDecoration.ignoredResourceForeground#707070
  • gitDecoration.modifiedResourceForeground#D36E4A
  • gitDecoration.renamedResourceForeground#0089E9
  • gitDecoration.stageDeletedResourceForeground#E05164
  • gitDecoration.stageModifiedResourceForeground#D36E4A
  • gitDecoration.submoduleResourceForeground#43B1FF
  • gitDecoration.untrackedResourceForeground#00AB6D
  • input.background#353535
  • input.border#00000000
  • input.foreground#E7E7E7
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBackground#0062A6
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#EFEFEF
  • list.activeSelectionBackground#555555
  • list.activeSelectionForeground#E7E7E7
  • list.activeSelectionIconForeground#EFEFEF
  • list.dropBackground#555555
  • list.focusBackground#0062A6
  • list.focusForeground#EFEFEF
  • list.highlightForeground#43B1FF
  • list.hoverBackground#353535
  • list.hoverForeground#E7E7E7
  • list.inactiveSelectionBackground#555555
  • list.inactiveSelectionForeground#C0C0C0
  • listFilterWidget.background#0062A6
  • listFilterWidget.noMatchesOutline#E05164
  • markdown.extension.editor.codeSpan.background#15151555
  • markdown.extension.editor.codeSpan.border#00000000
  • menu.background#252525
  • menu.border#00000000
  • menu.foreground#E7E7E7
  • menu.selectionBackground#0089E9
  • menu.selectionBorder#00000000
  • menu.selectionForeground#151515
  • menu.separatorBackground#707070
  • menubar.selectionBackground#FFFFFF15
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#E7E7E7
  • merge.commonContentBackground#555555EE
  • merge.commonHeaderBackground#707070EE
  • merge.currentContentBackground#487554EE
  • merge.currentHeaderBackground#568E73EE
  • merge.incomingContentBackground#003B64EE
  • merge.incomingHeaderBackground#0062A6EE
  • notificationCenter.border#353535
  • notificationCenterHeader.background#353535
  • notificationCenterHeader.foreground#E7E7E7
  • notifications.background#252525
  • notifications.foreground#C0C0C0
  • notificationsErrorIcon.foreground#E05164
  • notificationsInfoIcon.foreground#43B1FF
  • notificationsWarningIcon.foreground#E2CB73
  • notificationToast.border#00000000
  • panel.background#151515
  • panel.border#353535
  • panelTitle.activeBorder#E7E7E7
  • panelTitle.activeForeground#E7E7E7
  • panelTitle.inactiveForeground#A0A0A0
  • peekView.border#0089E9
  • peekViewEditor.background#003B64
  • peekViewEditor.matchHighlightBackground#D36E4A35
  • peekViewEditor.matchHighlightBorder#D36E4A
  • peekViewEditorGutter.background#003B64
  • peekViewResult.background#252525
  • peekViewResult.fileForeground#E7E7E7
  • peekViewResult.lineForeground#E7E7E7
  • peekViewResult.matchHighlightBackground#D36E4A35
  • peekViewResult.selectionBackground#0062A6
  • peekViewResult.selectionForeground#EFEFEF
  • peekViewTitle.background#0062A6
  • peekViewTitleDescription.foreground#E7E7E7
  • peekViewTitleLabel.foreground#43B1FF
  • pickerGroup.border#0089E9
  • pickerGroup.foreground#E7E7E7
  • progressBar.background#0089E9
  • scrollbar.shadow#151515
  • scrollbarSlider.activeBackground#707070
  • scrollbarSlider.background#555555
  • scrollbarSlider.hoverBackground#707070
  • selection.background#0062A6
  • sideBar.background#151515
  • sideBar.border#FFFFFF10
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#252525
  • sideBarSectionHeader.border#FFFFFF10
  • sideBarSectionHeader.foreground#E7E7E7
  • sideBarTitle.foreground#EFEFEF
  • statusBar.background#0089E9
  • statusBar.border#00000000
  • statusBar.debuggingBackground#D36E4A
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#151515
  • statusBar.foreground#151515
  • statusBar.noFolderBackground#8C7659
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#151515
  • statusBarItem.hoverBackground#15151535
  • statusBarItem.remoteBackground#63A484
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#252525
  • tab.activeBorder#00000000
  • tab.activeBorderTop#0089E9
  • tab.activeForeground#E7E7E7
  • tab.border#FFFFFF10
  • tab.hoverBackground#252525
  • tab.hoverBorder#00000000
  • tab.hoverForeground#E7E7E7
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#43B1FF
  • terminal.ansiBrightBlack#707070
  • terminal.ansiBrightBlue#0089E9
  • terminal.ansiBrightCyan#35B9AC
  • terminal.ansiBrightGreen#00AB6D
  • terminal.ansiBrightMagenta#FF56AA
  • terminal.ansiBrightRed#E05164
  • terminal.ansiBrightWhite#EFEFEF
  • terminal.ansiBrightYellow#E2CB73
  • terminal.ansiCyan#2A9288
  • terminal.ansiGreen#006A43
  • terminal.ansiMagenta#D33A86
  • terminal.ansiRed#DA2C43
  • terminal.ansiWhite#C0C0C0
  • terminal.ansiYellow#A29152
  • terminal.border#555555
  • terminal.foreground#E7E7E7
  • terminal.selectionBackground#0062A655
  • terminalCursor.background#0089E9
  • terminalCursor.foreground#151515
  • textLink.foreground#43B1FF
  • titleBar.activeBackground#252525
  • titleBar.activeForeground#EFEFEF
  • titleBar.border#00000000
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#707070
  • tree.indentGuidesStroke#555555
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.block.documentation#A0A0A0—
comment.block.documentation variable.other.source#E05164—
comment.line.double-slash#707070—
constant.language#43B1FFbold
constant.numeric#43B1FF—
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#43B1FF—
keyword.other.import#43B1FF—
source comment.block.documentation variable.other.source——
storage.modifier#D33A86—
storage.type.annotation#8C7659italic
storage.type.primitive#43B1FF—
string.interpolated.double, string.interpolated.single#43B1FF—
support.class#9480B1bold
variable.language#866FA7italic bold
variable.name.source#43B1FF—
comment.block.json.comments#C0C0C0—
source.json.comments comment.line.double-slash.js#A0A0A0—
string.quoted.double.json#79664D—
support.type.property-name.json#0089E9—
comment.line.percentage.tex#A0A0A0—
constant.character.escape.tex#43B1FF—
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#C0C0C0—
constant.other.reference.citation.latex, constant.other.reference.label.latex#00AB6D—
entity.name.footnote.latex#A0A0A0—
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#C0C0C0—
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#9480B1bold
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#A0A0A0italic
meta.preamble.latex punctuation.definition.arguments.begin.latex, meta.preamble.latex punctuation.definition.arguments.end.latex#A0A0A0—
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#A0A0A0—
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#9480B1italic
support.function.texttt.latex#D36E4A—
text.tex.latex#E7E7E7—
text.tex.latex meta.parameter.newcommand.latex punctuation.definition.arguments.begin.latex, text.tex.latex meta.parameter.newcommand.latex punctuation.definition.arguments.end.latex#E7E7E7—
variable.parameter.function.latex#43B1FF—
comment.block.html#A0A0A0—
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#43B1FF—
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#707070—
fenced_code.block.language.markdown, punctuation.definition.markdown#E7E7E7bold
heading.1.markdown#9480B1bold
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#A0A0A0—
markup.table.markdown#E7E7E7—
markup.underline.link.image.markdown, markup.underline.link.markdown, meta.link.inline.markdown, punctuation.definition.metadata.markdown#A0A0A0—
meta.embedded.math.markdown#A0A0A0—
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#E7E7E7—
meta.separator.markdown#707070bold
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#707070—
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#A0A0A0—
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#9480B1bold
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#9480B1—
keyword.operator.access.dot.rust#E7E7E7—
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#43B1FF—
keyword.operator.borrow.and.rust#C0C0C0—
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#E7E7E7—
source.rust#E7E7E7—
storage.type.rust#D33A86—
string.quoted.double.rust#43B1FF—
source.typst#E7E7E7—
string.other.raw.typst#A0A0A0—
comment.block.xml#A0A0A0—
entity.name.tag.localname.xml#63A484bold
entity.other.attribute-name.localname.xml#D33A86—
entity.other.attribute-name.namespace.xml#0089E9—
punctuation.definition.tag.xml#63A484—
string.quoted.double.xml#79664D—
text.xml#E7E7E7—
comment.line.number-sign.yaml#A0A0A0—
constant.character.escape.yaml—bold
constant.language.boolean.yaml, constant.language.null.yaml#43B1FFbold
constant.language.merge.yaml#E05164bold
constant.numeric.float.yaml, constant.numeric.integer.yaml#43B1FF—
constant.other.timestamp.yaml#E7E7E7bold
entity.name.tag.yaml#9480B1bold
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml#D36E4A—
entity.other.document.begin.yaml, entity.other.document.end.yaml#0089E9—
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#0089E9bold
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#A0A0A0—
source.yaml meta.block-mapping.yaml string.unquoted.block.yaml, string.unquoted.plain.out.yaml#2FA69A—
storage.type.tag-handle.yaml#9480B1bold
string.quoted.double.yaml, string.quoted.single.yaml#43B1FF—
string.unquoted.plain.in.yaml#A0A0A0—
Fresh and Sober Color Theme by Marco87Dev - VS Code Theme