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#2c3e50
  • activityBar.foreground#51b1f1
  • activityBarBadge.background#1faece
  • activityBarBadge.foreground#ffffff
  • badge.background#459b9f
  • badge.foreground#f5f5f1
  • button.background#f5f5f1
  • button.foreground#303036
  • button.hoverBackground#e4e4e7
  • debugExceptionWidget.background#e4e4e7
  • debugExceptionWidget.border#f5f5f1
  • debugToolBar.background#f5f5f1
  • diffEditor.insertedTextBackground#3c8e5c4d
  • diffEditor.insertedTextBorder#3c8e5c4d
  • diffEditor.removedTextBackground#bc4e4c4d
  • diffEditor.removedTextBorder#bc4e4c4d
  • dropdown.background#efeff1
  • dropdown.border#f5f5f1
  • dropdown.foreground#303036
  • dropdown.listBackground#efeff1
  • editor.background#ffffff
  • editor.findMatchBackground#459b9f66
  • editor.findMatchHighlightBackground#459b9f33
  • editor.findRangeHighlightBackground#459b9f33
  • editor.foreground#606066
  • editor.hoverHighlightBackground#f5f5f1
  • editor.inactiveSelectionBackground#f5f5f1cc
  • editor.lineHighlightBackground#e4e4e752
  • editor.lineHighlightBorder#f5f5f152
  • editor.rangeHighlightBackground#f5f5f152
  • editor.selectionBackground#c5c5e0
  • editor.selectionHighlightBackground#bebeae
  • editor.wordHighlightBackground#0099c966
  • editor.wordHighlightStrongBackground#0099c999
  • editorBracketMatch.background#f5f5f100
  • editorBracketMatch.border#459b9f
  • editorCodeLens.foreground#e4e4e7
  • editorCursor.foreground#303036
  • editorError.border#bc4e4c00
  • editorError.foreground#bc4e4c
  • editorGroup.background#f5f5f1
  • editorGroup.border#f5f5f100
  • editorGroup.dropBackground#f5f5f199
  • editorGroupHeader.noTabsBackground#f5f5f1
  • editorGroupHeader.tabsBackground#f5f5f1
  • editorGroupHeader.tabsBorder#f5f5f100
  • editorGutter.addedBackground#3c8e5c
  • editorGutter.background#fcfcfc
  • editorGutter.deletedBackground#bc4e4c
  • editorGutter.modifiedBackground#cf912c
  • editorHoverWidget.background#efeff1
  • editorHoverWidget.border#f5f5f1
  • editorIndentGuide.activeBackground#e4e4e7
  • editorIndentGuide.background#f5f5f1b3
  • editorLineNumber.activeForeground#459b9f
  • editorLineNumber.foreground#30303666
  • editorLink.activeForeground#459b9f
  • editorMarkerNavigation.background#0099c9c0
  • editorMarkerNavigationError.background#bc4e4cc0
  • editorMarkerNavigationWarning.background#cf912cc0
  • editorOverviewRuler.addedForeground#3c8e5c
  • editorOverviewRuler.border#f5f5f1
  • editorOverviewRuler.currentContentForeground#f5f5f1
  • editorOverviewRuler.deletedForeground#bc4e4c
  • editorOverviewRuler.errorForeground#bc4e4c
  • editorOverviewRuler.findMatchForeground#459b9f66
  • editorOverviewRuler.incomingContentForeground#f5f5f1
  • editorOverviewRuler.infoForeground#0099c9
  • editorOverviewRuler.modifiedForeground#cf912c
  • editorOverviewRuler.rangeHighlightForeground#459b9f66
  • editorOverviewRuler.selectionHighlightForeground#459b9f66
  • editorOverviewRuler.warningForeground#cf912c
  • editorOverviewRuler.wordHighlightForeground#459b9f66
  • editorOverviewRuler.wordHighlightStrongForeground#459b9f66
  • editorRuler.foreground#f5f5f1
  • editorSuggestWidget.background#efeff1
  • editorSuggestWidget.border#f5f5f1
  • editorSuggestWidget.foreground#303036
  • editorSuggestWidget.highlightForeground#459b9f
  • editorSuggestWidget.selectedBackground#e4e4e7
  • editorWarning.border#cf912c00
  • editorWarning.foreground#cf912c
  • editorWhitespace.foreground#e4e4e7b3
  • editorWidget.background#f5f5f1
  • editorWidget.border#f5f5f1
  • errorForeground#bc4e4c
  • extensionButton.prominentBackground#f5f5f1
  • extensionButton.prominentForeground#303036
  • extensionButton.prominentHoverBackground#e4e4e7
  • focusBorder#f5f5f1
  • foreground#303036
  • input.background#ffffff
  • input.border#e6e6e1
  • input.foreground#303036
  • input.placeholderForeground#30303699
  • inputOption.activeBorder#459b9f
  • inputValidation.errorBackground#bc4e4c
  • inputValidation.errorBorder#bc4e4c
  • inputValidation.infoBackground#0099c9
  • inputValidation.infoBorder#0099c9
  • inputValidation.warningBackground#e4b8b7
  • inputValidation.warningBorder#e4b8b7
  • list.activeSelectionBackground#459b9f
  • list.activeSelectionForeground#f5f5f1
  • list.dropBackground#459b9f99
  • list.errorForeground#bc4e4c
  • list.focusBackground#459b9f99
  • list.focusForeground#303036
  • list.highlightForeground#459b9f
  • list.hoverBackground#f5f5f1
  • list.hoverForeground#303036
  • list.inactiveSelectionBackground#f5f5f1
  • list.inactiveSelectionForeground#303036
  • list.warningForeground#cf912c
  • listFilterWidget.background#efeff1
  • merge.border#f5f5f100
  • merge.currentContentBackground#0099c94d
  • merge.currentHeaderBackground#0099c966
  • merge.incomingContentBackground#3c8e5c4d
  • merge.incomingHeaderBackground#3c8e5c66
  • panel.background#fcfcfc
  • panel.border#e4e4e7
  • panelTitle.activeBorder#459b9f
  • panelTitle.activeForeground#459b9f
  • panelTitle.inactiveForeground#303036
  • peekView.border#e4e4e7
  • peekViewEditor.background#efeff1
  • peekViewEditor.matchHighlightBackground#459b9fcc
  • peekViewEditorGutter.background#f5f5f1
  • peekViewResult.background#f5f5f1
  • peekViewResult.fileForeground#459b9f
  • peekViewResult.lineForeground#30303666
  • peekViewResult.matchHighlightBackground#459b9fcc
  • peekViewResult.selectionBackground#e4e4e7
  • peekViewResult.selectionForeground#303036
  • peekViewTitle.background#f5f5f1
  • peekViewTitleDescription.foreground#303036
  • peekViewTitleLabel.foreground#459b9f
  • pickerGroup.border#f5f5f1
  • pickerGroup.foreground#303036
  • progressBar.background#459b9f
  • scrollbar.shadow#30303666
  • scrollbarSlider.activeBackground#e4e4e799
  • scrollbarSlider.background#e4e4e799
  • scrollbarSlider.hoverBackground#e4e4e799
  • selection.background#459b9f99
  • sideBar.background#f7f9fa
  • sideBar.border#fcfcfc
  • sideBar.foreground#303036
  • sideBarSectionHeader.background#f7f9fa
  • sideBarSectionHeader.foreground#365271
  • sideBarTitle.foreground#66819e
  • statusBar.background#51b1f1
  • statusBar.border#f5f5f100
  • statusBar.debuggingBackground#e7963b
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2c3e50
  • statusBar.noFolderBackground#1faece
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#459b9f99
  • statusBarItem.hoverBackground#459b9fb2
  • statusBarItem.prominentBackground#f5f5f1
  • statusBarItem.prominentHoverBackground#f5f5f1
  • tab.activeBackground#ffffff
  • tab.activeBorder#459b9f00
  • tab.activeForeground#303036
  • tab.border#f5f5f100
  • tab.hoverBackground#f5f5f1cc
  • tab.hoverBorder#459b9f00
  • tab.inactiveBackground#f5f5f1
  • tab.inactiveForeground#30303666
  • tab.unfocusedActiveBorder#459b9f00
  • tab.unfocusedActiveForeground#30303699
  • tab.unfocusedHoverBackground#f5f5f1b3
  • tab.unfocusedHoverBorder#459b9f00
  • tab.unfocusedInactiveForeground#30303666
  • terminal.ansiBlack#6d6d6d
  • terminal.ansiBlue#0099c9
  • terminal.ansiBrightBlack#8a8a8a
  • terminal.ansiBrightBlue#0099c9
  • terminal.ansiBrightCyan#3bc2bb
  • terminal.ansiBrightGreen#3c8e5c
  • terminal.ansiBrightMagenta#a4779c
  • terminal.ansiBrightRed#bc4e4c
  • terminal.ansiBrightWhite#303036
  • terminal.ansiBrightYellow#cf912c
  • terminal.ansiCyan#459b9f
  • terminal.ansiGreen#3c8e5c
  • terminal.ansiMagenta#a4779c
  • terminal.ansiRed#bc4e4c
  • terminal.ansiWhite#f5f5f1
  • terminal.ansiYellow#cf912c
  • terminal.background#fcfcfc
  • terminal.foreground#303036
  • titleBar.activeBackground#f5f5f1
  • titleBar.activeForeground#303036
  • titleBar.border#f5f5f100
  • titleBar.inactiveBackground#f5f5f1
  • titleBar.inactiveForeground#30303666
  • walkThrough.embeddedEditorBackground#f5f5f1
  • welcomePage.buttonBackground#f5f5f1
  • welcomePage.buttonHoverBackground#e4e4e7
  • widget.shadow#30303666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment#C7C7C7
constant.character#cf912c
constant.character.escape#f7a21b
constant.language#0099C9
constant.numeric#a4779c
constant.regexp#cf912c
entity.name.class, entity.name.type.class#3c8E5C
entity.name.function#459B9F
entity.name.tag#0099C9
entity.other.attribute-name#3c8E5C
entity.other.inherited-class#3c8E5Cbold
invalid.deprecated#303036
invalid.illegal#303036
keyword#0099C9
keyword.operator#0099C9
keyword.other.new#0099C9
markup.boldbold
markup.changed#cf912c
markup.deleted#BC4E4C
markup.inserted#3c8E5C
meta.preprocessor#0099C9
punctuation#303036
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#303036
punctuation.definition.tag#0099C9
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#E4E4E7
punctuation.section#303036
punctuation.section.embedded.begin, punctuation.section.embedded.end#0099C9
punctuation.terminator#0099C9
punctuation.definition.variable#0099C9
storage#0099C9
string#cf912c
string.regexp#cf912c
support.class#3c8E5C
support.constant#0099C9
support.function#459B9F
support.function.construct#0099C9
support.type#3c8E5C
support.type.exception#3c8E5C
token.debug-token#a4779c
token.error-token#BC4E4C
token.info-token#459B9F
token.warn-token#cf912c
variable.other#303036
variable.language#0099C9
variable.parameter#303036
punctuation.separator.pointer-access.c#0099C9
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#3c8E5C
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#0099C9bold
source.css constant.other.color.rgb-value#a4779c
source.css meta.property-value#459B9F
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#E4B8B7
source.css punctuation.definition.keyword#0099C9
source.css support.type.property-name#303036
source.diff meta.diff.range.context#3c8E5C
source.diff meta.diff.header.from-file#3c8E5C
source.diff punctuation.definition.from-file#3c8E5C
source.diff punctuation.definition.range#3c8E5C
source.diff punctuation.definition.separator#0099C9
source.go constant.other.placeholder.go#cf912c
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#0099C9
source.java constant.other#303036
source.java keyword.other.documentation#3c8E5C
source.java keyword.other.documentation.author.javadoc#3c8E5C
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#3c8E5C
source.java keyword.other.documentation.see.javadoc#3c8E5C
source.java meta.method-call meta.method#459B9F
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#3c8E5C
source.java meta.tag.template.value.javadoc#459B9F
source.java punctuation.definition.keyword.javadoc#3c8E5C
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#E4E4E7
source.java storage.modifier.import#3c8E5C
source.java storage.modifier.package#3c8E5C
source.java storage.type#3c8E5C
source.java storage.type.annotation#E4B8B7
source.java storage.type.generic#3c8E5C
source.java storage.type.primitive#0099C9
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#E4B8B7
source.js meta.object-literal.key#459B9F
source.js storage.type.class.jsdoc#3c8E5C
source.js string.template punctuation.definition.template-expression#0099C9
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#303036
source.js support.type.primitive#0099C9
source.js meta.var.expr variable.other.object#3c8E5C
source.js variable.other.readwrite.alias#3c8E5C
text.html.basic constant.character.entity.html#cf912c
text.html.basic constant.other.inline-data#E4B8B7italic
text.html.basic meta.tag.sgml.doctype#0099C9
text.html.basic punctuation.definition.entity#0099C9
source.properties entity.name.section.group-title.ini#459B9F
source.properties punctuation.separator.key-value.ini#0099C9
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#3c8E5C
markup.heading#459B9F
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#3c8E5C
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#0099C9
text.html.markdown beginning.punctuation.definition.quote#3c8E5C
text.html.markdown markup.quote#E4E4E7
text.html.markdown punctuation.definition.heading#0099C9
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#0099C9
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#459B9F
source.php meta.function-call, source.php meta.function-call.object#459B9F
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#E4B8B7
source.python meta.function-call, source.python meta.function-call.generic#459B9F
source.python support.type#459B9F
source.python variable.parameter.function.language#303036
source.python meta.function.parameters variable.parameter.function.language.special.self#0099C9
source.rust keyword.operator.sigil.rust#d16388
source.rust storage.modifier.mut.rust#0099C9
source.rust storage.type.core.rust#4eac78italic
source.rust support.constant.core.rust#25a75f
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#0099C9
source.css.scss variable.interpolation#303036italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#E4B8B7
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#303036
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#459B9F
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#3c8E5C
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#3c8E5C
source.ts support.variable, source.tsx support.variable#303036
text.xml entity.name.tag.namespace#3c8E5C
text.xml keyword.other.doctype#0099C9
text.xml meta.tag.preprocessor entity.name.tag#0099C9
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#E4B8B7italic
source.yaml entity.name.tag#3c8E5C