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#2e3440
  • activityBar.dropBackground#3b4252
  • activityBar.foreground#d8dee9
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#2e3440
  • badge.background#88c0d0
  • badge.foreground#2e3440
  • button.background#434c5e
  • button.foreground#d8dee9
  • button.hoverBackground#4c566a
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#2e3440
  • debugToolBar.background#3b4252
  • diffEditor.insertedTextBackground#a3be8c4d
  • diffEditor.insertedTextBorder#a3be8c4d
  • diffEditor.removedTextBackground#bf616a4d
  • diffEditor.removedTextBorder#bf616a4d
  • dropdown.background#3b4252
  • dropdown.border#3b4252
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#88c0d066
  • editor.findMatchHighlightBackground#88c0d033
  • editor.findRangeHighlightBackground#88c0d033
  • editor.foreground#b5df6d
  • editor.hoverHighlightBackground#3b4252
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.lineHighlightBackground#434c5e52
  • editor.lineHighlightBorder#434c5e52
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.wordHighlightBackground#ed3d6366
  • editor.wordHighlightStrongBackground#ed3d6399
  • editorBracketMatch.background#2e344000
  • editorBracketMatch.border#88c0d0
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#d8dee9
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.background#2e3440
  • editorGroup.border#3b425200
  • editorGroup.dropBackground#3b425299
  • editorGroupHeader.noTabsBackground#2e3440
  • editorGroupHeader.tabsBackground#2e3440
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#d7ef8f
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorLineNumber.foreground#d8dee966
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#d7ef8fc0
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.currentContentForeground#3b4252
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#88c0d066
  • editorOverviewRuler.incomingContentForeground#3b4252
  • editorOverviewRuler.infoForeground#ed3d63
  • editorOverviewRuler.modifiedForeground#d7ef8f
  • editorOverviewRuler.rangeHighlightForeground#88c0d066
  • editorOverviewRuler.selectionHighlightForeground#88c0d066
  • editorOverviewRuler.warningForeground#d7ef8f
  • editorOverviewRuler.wordHighlightForeground#88c0d066
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d066
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#2e3440
  • editorSuggestWidget.border#3b4252
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#88c0d0
  • editorSuggestWidget.selectedBackground#434c5e
  • editorWarning.border#d7ef8f00
  • editorWarning.foreground#d7ef8f
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#2e3440
  • editorWidgetBorder#3b4252
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#d8dee9
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#3b4252
  • foreground#d8dee9
  • input.background#3b4252
  • input.border#3b4252
  • input.foreground#d8dee9
  • input.placeholderForeground#d8dee999
  • inputOption.activeBorder#88c0d0
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#ed3d63
  • inputValidation.infoBorder#ed3d63
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • list.activeSelectionBackground#88c0d0
  • list.activeSelectionForeground#2e3440
  • list.dropBackground#88c0d099
  • list.errorForeground#bf616a
  • list.focusBackground#88c0d099
  • list.focusForeground#d8dee9
  • list.highlightForeground#88c0d0
  • list.hoverBackground#3b4252
  • list.hoverForeground#eceff4
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#d8dee9
  • list.warningForeground#d7ef8f
  • merge.border#3b425200
  • merge.currentContentBackground#ed3d634d
  • merge.currentHeaderBackground#ed3d6366
  • merge.incomingContentBackground#8fbcbb4d
  • merge.incomingHeaderBackground#8fbcbb66
  • notification.background#3b4252
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#d8dee9
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#bf616a
  • notification.errorForeground#2e3440
  • notification.foreground#d8dee9
  • notification.infoBackground#88c0d0
  • notification.infoForeground#2e3440
  • notification.warningBackground#d7ef8f
  • notification.warningForeground#2e3440
  • panel.background#2e3440
  • panel.border#3b4252
  • panelTitle.activeBorder#88c0d000
  • panelTitle.activeForeground#88c0d0
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#4c566a
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#88c0d0cc
  • peekViewEditorGutter.background#2e3440
  • peekViewResult.background#2e3440
  • peekViewResult.fileForeground#88c0d0
  • peekViewResult.lineForeground#d8dee966
  • peekViewResult.matchHighlightBackground#88c0d0cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#3b4252
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#88c0d0
  • pickerGroup.border#3b4252
  • pickerGroup.foreground#d8dee9
  • progressBar.background#88c0d0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#88c0d099
  • sideBar.background#2e3440
  • sideBar.border#3b4252
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#3b4252
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#3b4252
  • statusBar.border#3b425200
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#d8dee9
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#3b4252
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#3b4252
  • statusBarItem.prominentHoverBackground#434c5e
  • tab.activeBackground#3b4252
  • tab.activeBorder#88c0d000
  • tab.activeForeground#d8dee9
  • tab.border#3b425200
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#d8dee966
  • tab.unfocusedActiveBorder#88c0d000
  • tab.unfocusedActiveForeground#d8dee999
  • tab.unfocusedHoverBackground#3b4252b3
  • tab.unfocusedHoverBorder#88c0d000
  • tab.unfocusedInactiveForeground#d8dee966
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#ed3d63
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#ed3d63
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#d7ef8f
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#d7ef8f
  • terminal.background#2e3440
  • terminal.foreground#d8dee9
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d8dee966
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d8dee9ff
emphasisitalic
strongbold
comment#4C566A
constant.character#d7ef8f
constant.character.escape#d7ef8f
constant.language#ed3d63
constant.numeric#f7ee31
constant.regexp#d7ef8f
entity.name.class, entity.name.type.class#8FBCBB
entity.name.class.js, entity.name.type.class.js#d7ef8f
entity.name.function#d7ef8f
entity.name.tag#ed3d63
entity.other.attribute-name#8FBCBB
entity.other.inherited-class#8FBCBBbold
invalid.deprecated#D8DEE9
invalid.illegal#D8DEE9
keyword#99ae23
keyword.operator#ed3d63
keyword.other.new#ed3d63
markup.boldbold
markup.changed#d7ef8f
markup.deleted#BF616A
markup.inserted#A3BE8C
meta.preprocessor#5E81AC
punctuation, meta.brace.round.js, meta.brace.square.js#93c63d
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#bf616a
punctuation.definition.tag#ed3d63
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#4c566aff
punctuation.section#bf616a
punctuation.section.embedded.begin, punctuation.section.embedded.end#bf616a
punctuation.terminator#93c63d
punctuation.definition.variable#bf616a
storage#ed3d63
string#b0e8b3
string.regexp#d7ef8f
support.class#42aa53
support.constant#ed3d63
support.function#88C0D0
support.function.construct#ed3d63
support.type#8FBCBB
support.type.exception#8FBCBB
token.debug-token#b48ead
token.error-token#bf616a
token.info-token#88c0d0
token.warn-token#d7ef8f
variable.other#D8DEE9
variable.language#ed3d63
variable.parameter#D8DEE9
punctuation.separator.pointer-access.c#ed3d63
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#8FBCBB
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#B48EAD
source.css meta.property-value#88C0D0
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#ed3d63
source.css support.type.property-name#D8DEE9
source.diff meta.diff.range.context#8FBCBB
source.diff meta.diff.header.from-file#8FBCBB
source.diff punctuation.definition.from-file#8FBCBB
source.diff punctuation.definition.range#8FBCBB
source.diff punctuation.definition.separator#ed3d63
source.go constant.other.placeholder.go#d7ef8f
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#ed3d63
source.java constant.other#D8DEE9
source.java keyword.other.documentation#8FBCBB
source.java keyword.other.documentation.author.javadoc#8FBCBB
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#8FBCBB
source.java keyword.other.documentation.see.javadoc#8FBCBB
source.java meta.method-call meta.method#88C0D0
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#8FBCBB
source.java meta.tag.template.value.javadoc#88C0D0
source.java punctuation.definition.keyword.javadoc#8FBCBB
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#4C566A
source.java storage.modifier.import#8FBCBB
source.java storage.modifier.package#8FBCBB
source.java storage.type#8FBCBB
source.java storage.type.annotation#D08770
source.java storage.type.generic#8FBCBB
source.java storage.type.primitive#ed3d63
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#88C0D0
source.js storage.type.class.jsdoc#8FBCBB
source.js string.template punctuation.definition.template-expression#5E81AC
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#D8DEE9
source.js support.type.primitive#ed3d63
source.js meta.var.expr variable.other.object#8FBCBB
source.js variable.other.readwrite.alias#8FBCBB
text.html.basic constant.character.entity.html#d7ef8f
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#ed3d63
source.properties entity.name.section.group-title.ini#88C0D0
source.properties punctuation.separator.key-value.ini#ed3d63
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#8FBCBB
markup.heading#88C0D0
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#8FBCBB
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#ed3d63
text.html.markdown beginning.punctuation.definition.quote#8FBCBB
text.html.markdown markup.quote#4C566A
text.html.markdown punctuation.definition.heading#ed3d63
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#ed3d63
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#88C0D0
source.php meta.function-call, source.php meta.function-call.object#88C0D0
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call, source.python meta.function-call.generic#88C0D0
source.python support.type#88C0D0
source.python variable.parameter.function.language#D8DEE9
source.python meta.function.parameters variable.parameter.function.language.special.self#ed3d63
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#ed3d63
source.css.scss variable.interpolation#D8DEE9italic
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#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#D8DEE9
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#88C0D0
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#8FBCBB
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#8FBCBB
source.ts support.variable, source.tsx support.variable#D8DEE9
text.xml entity.name.tag.namespace#8FBCBB
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#8FBCBB
support.type.property-name.css, support.type.vendored.property-name.cs∞s, support.constant.vendored.property-value.css, meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, meta.export.ts meta.block.ts variable.other.readwrite.alias.ts, meta.export.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.export.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, entity.other.attribute-name, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, punctuation.section.embedded, keyword.operator.type.annotation, variable.object.property.ts, variable.object.property.js, variable.object.property.jsx, variable.object.property.tsx, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, variable.scss, variable.sass, variable.other.less, variable.parameter.url.scss, variable.parameter.url.sass, parameter, string, italic, quote, keyword, storage, language, constant.language, variable.language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic
keyword.operator

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

AppEngine Theme - Coding Theme