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#13151a
  • activityBar.foreground#bfc9db
  • activityBarBadge.background#00eaff
  • activityBarBadge.foreground#0a0c10
  • badge.background#00eaff
  • badge.foreground#0a0c10
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#16181d
  • breadcrumb.foreground#bfc9db99
  • breadcrumbPicker.background#13151a
  • button.background#00eaff
  • button.foreground#0a0c10
  • button.hoverBackground#1de9ff
  • button.secondaryBackground#232733
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2c3140
  • debugExceptionWidget.background#232733
  • debugExceptionWidget.border#13151a
  • debugToolBar.background#181a1f
  • diffEditor.insertedTextBackground#a3ff8c33
  • diffEditor.removedTextBackground#ff7de933
  • dropdown.background#13151a
  • dropdown.border#232733
  • dropdown.foreground#ffffff
  • editor.background#16181d
  • editor.findMatchBackground#00eaff88
  • editor.findMatchHighlightBackground#00eaff44
  • editor.findRangeHighlightBackground#00eaff33
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#181a1ffe
  • editor.inactiveSelectionBackground#232733bb
  • editor.lineHighlightBackground#00eaff22
  • editor.lineHighlightBorder#00eaff44
  • editor.rangeHighlightBackground#23273399
  • editor.selectionBackground#00eaff99
  • editor.selectionHighlightBackground#232733cc
  • editor.snippetFinalTabstopHighlightBorder#00eaff
  • editor.snippetTabstopHighlightBackground#00eaff55
  • editor.wordHighlightBackground#00eaff55
  • editor.wordHighlightStrongBackground#00eaff99
  • editorBracketMatch.background#13151a00
  • editorBracketMatch.border#00eaff99
  • editorCodeLens.foreground#7b88a1
  • editorCursor.foreground#00eaff
  • editorError.border#ff3b3b
  • editorError.foreground#ff3b3b
  • editorGroup.border#232733
  • editorGroup.dropBackground#232733cc
  • editorGroup.emptyBackground#13151a
  • editorGroupHeader.noTabsBackground#13151a
  • editorGroupHeader.tabsBackground#13151a
  • editorGroupHeader.tabsBorder#ffffff22
  • editorGutter.addedBackground#a3ff8c
  • editorGutter.background#16181d
  • editorGutter.deletedBackground#ff7de9
  • editorGutter.modifiedBackground#ffe066
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#232733
  • editorIndentGuide.activeBackground1#00eaff99
  • editorIndentGuide.background1#23273380
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#7b88a1
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#7b88a1
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#7b88a1
  • editorLineNumber.activeForeground#00eaff
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#00eaff
  • editorMarkerNavigation.background#00eaffcc
  • editorMarkerNavigationError.background#ff3b3bcc
  • editorMarkerNavigationWarning.background#ffe066cc
  • editorOverviewRuler.addedForeground#a3ff8c99
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#ff3b3b
  • editorOverviewRuler.currentContentForeground#ff3b3b
  • editorOverviewRuler.deletedForeground#ff7de999
  • editorOverviewRuler.errorForeground#ff3b3b
  • editorOverviewRuler.findMatchForeground#00eaff99
  • editorOverviewRuler.incomingContentForeground#ff3b3b
  • editorOverviewRuler.infoForeground#00eaff99
  • editorOverviewRuler.modifiedForeground#ffe06699
  • editorOverviewRuler.rangeHighlightForeground#00eaff33
  • editorOverviewRuler.selectionHighlightForeground#00eaff33
  • editorOverviewRuler.warningForeground#ffe066
  • editorOverviewRuler.wordHighlightForeground#00eaff33
  • editorOverviewRuler.wordHighlightStrongForeground#00eaff44
  • editorRuler.foreground#232733
  • editorSuggestWidget.background#13151a
  • editorSuggestWidget.border#232733
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#00eaff
  • editorSuggestWidget.selectedBackground#00eaff33
  • editorWarning.border#ffe06600
  • editorWarning.foreground#ffe066
  • editorWhitespace.foreground#4c566a99
  • editorWidget.background#13151a
  • editorWidget.resizeBorder#00eaff
  • errorForeground#ff3b3b
  • extensionButton.prominentBackground#232733
  • extensionButton.prominentForeground#0a0c10
  • extensionButton.prominentHoverBackground#2c3140
  • focusBorder#00eaff
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#a3ff8c
  • gitDecoration.deletedResourceForeground#ff7de9
  • gitDecoration.ignoredResourceForeground#4b5163
  • gitDecoration.modifiedResourceForeground#ffe066
  • gitDecoration.untrackedResourceForeground#00eaff
  • input.background#232733cc
  • input.border#232733
  • input.foreground#ffffff
  • input.placeholderForeground#bfc9db99
  • inputOption.activeBorder#00eaff
  • inputValidation.errorBackground#ff3b3b
  • inputValidation.errorBorder#ff3b3b
  • inputValidation.infoBackground#00eaff
  • inputValidation.infoBorder#00eaff
  • inputValidation.infoForeground#0a0c10
  • inputValidation.warningBackground#ffe066
  • inputValidation.warningBorder#ffe066
  • list.activeSelectionBackground#232733
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#bfc9db99
  • list.dropBackground#00eaff55
  • list.errorForeground#ff3b3b
  • list.focusBackground#00eaff33
  • list.focusForeground#ffffff
  • list.highlightForeground#00eaff
  • list.hoverBackground#232733cc
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#232733
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#bfc9db99
  • list.warningForeground#ffe066
  • menu.background#13151a
  • menu.foreground#bfc9db
  • menu.separatorBackground#00eaff
  • menubar.selectionBackground#00eaff33
  • merge.border#232733
  • merge.currentContentBackground#00eaff33
  • merge.currentHeaderBackground#00eaff55
  • merge.incomingContentBackground#a3ff8c33
  • merge.incomingHeaderBackground#a3ff8c55
  • notificationLink.foreground#00eaff
  • notifications.background#13151a
  • notifications.foreground#ffffff
  • panel.background#13151a
  • panel.border#00eaff22
  • panelTitle.activeBorder#00eaff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#bfc9db
  • peekView.border#00eaff
  • peekViewEditor.background#13151a
  • peekViewEditor.matchHighlightBackground#00eaffcc
  • peekViewEditorGutter.background#13151a
  • peekViewResult.background#13151a
  • peekViewResult.fileForeground#00eaff
  • peekViewResult.lineForeground#bfc9db99
  • peekViewResult.matchHighlightBackground#00eaffcc
  • peekViewResult.selectionBackground#232733
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#232733
  • peekViewTitleDescription.foreground#ffffff
  • peekViewTitleLabel.foreground#00eaff
  • pickerGroup.border#232733
  • pickerGroup.foreground#ffffff
  • progressBar.background#00eaff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00eaff99
  • scrollbarSlider.background#00eaff33
  • scrollbarSlider.hoverBackground#00eaff55
  • selection.background#00eaff33
  • sideBar.background#13151a
  • sideBar.border#00eaff22
  • sideBar.foreground#bfc9db
  • sideBarSectionHeader.background#13151a
  • sideBarSectionHeader.foreground#7b88a1
  • sideBarTitle.foreground#bfc9db
  • statusBar.background#13151a
  • statusBar.border#00eaff22
  • statusBar.debuggingBackground#232733
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#bfc9db
  • statusBar.noFolderBackground#13151a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#232733
  • statusBarItem.hoverBackground#232733
  • statusBarItem.prominentBackground#232733
  • statusBarItem.prominentHoverBackground#232733
  • tab.activeBackground#16181d
  • tab.activeBorder#16181d
  • tab.activeBorderTop#00eaff
  • tab.activeForeground#ffffff
  • tab.border#00eaff22
  • tab.hoverBackground#00eaff11
  • tab.inactiveBackground#13151a
  • tab.inactiveForeground#7b88a1
  • tab.unfocusedActiveBorder#00eaff11
  • tab.unfocusedActiveForeground#bfc9db
  • tab.unfocusedHoverBackground#232733cc
  • tab.unfocusedHoverBorder#00eaff11
  • tab.unfocusedInactiveForeground#bfc9db99
  • terminal.ansiBlack#232733
  • terminal.ansiBlue#00eaff
  • terminal.ansiBrightBlack#7b88a1
  • terminal.ansiBrightBlue#00eaff
  • terminal.ansiBrightCyan#00eaff
  • terminal.ansiBrightGreen#a3ff8c
  • terminal.ansiBrightMagenta#ff7de9
  • terminal.ansiBrightRed#ff3b3b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe066
  • terminal.ansiCyan#00eaff
  • terminal.ansiGreen#a3ff8c
  • terminal.ansiMagenta#ff7de9
  • terminal.ansiRed#ff3b3b
  • terminal.ansiWhite#bfc9db
  • terminal.ansiYellow#ffe066
  • terminal.background#13151a
  • terminal.foreground#ffffff
  • terminal.selectionBackground#00eaff55
  • terminalCursor.background#00eaff22
  • terminalCursor.foreground#00eaff
  • textLink.activeForeground#00eaff
  • textLink.foreground#00eaff
  • textPreformat.foreground#00eaff
  • textSeparator.foreground#00eaff
  • titleBar.activeBackground#13151a
  • titleBar.activeForeground#bfc9db
  • titleBar.border#00eaff22
  • titleBar.inactiveBackground#13151a
  • titleBar.inactiveForeground#bfc9db99
  • tree.indentGuidesStroke#00eaff55
  • walkThrough.embeddedEditorBackground#13151a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment#7b88a1italic
constant.character#ffe066
constant.character.escape#ffe066
constant.numeric, constant.language.boolean, constant.language#ff7de9
constant.language.boolean.true#ff7de9
constant.language.boolean.false#ff7de9
constant.language.undefined#7d7c9b
constant.language.null#7d7c9b
constant.regexp#ffe066
entity.name.class, entity.name.type.class#00eaff
entity.name.function#a3ff8c
entity.name.tag#ff7de9
entity.other.attribute-name#00eaffitalic
entity.other.inherited-class#00eaffbold
invalid.deprecated#ffe066
invalid.illegal#ff3b3b
keyword#00eaffbold
keyword.operator#00eaff
keyword.other.new#00eaff
markup.boldbold
markup.changed#ffe066bold
markup.link#00eaffunderline
markup.deleted#ff3b3bbold
punctuation.definition.deleted#ff3b3b
markup.inserted#a3ff8cbold
meta.preprocessor#00eaffbold
punctuation#ffffff
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ffffff
punctuation.definition.tag#ff7de9
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#7b88a1
punctuation.definition.inserted#a3ff8c
punctuation.definition.deleted#ff3b3b
punctuation.section#ffffff
punctuation.section.embedded.begin, punctuation.section.embedded.end#ff7de9
punctuation.terminator#ff7de9
punctuation.definition.variable#ff7de9
storage#00eaffbold
string#a3ff8c
string.regexp#ffe066
support.class#00eaff
support.constant#00eaff
support.function#a3ff8c
support.function.construct#00eaff
support.type#00eaff
support.type.exception#00eaff
token.debug-token#ff7de9
token.error-token#ff3b3b
token.info-token#00eaff
token.warn-token#ffe066
variable.other#ffffff
variable.language#00eaff
variable.parameter#ffffff
punctuation.separator.pointer-access.c#ff7de9
source.c meta.preprocessor.include, source.cpp meta.preprocessor.include#00eaffbold
source.c string.quoted.other.lt-gt.include, source.cpp 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#81A1C1
source.css support.type.property-name#D8DEE9
source.diff meta.diff.range.context#8FBCBB
meta.diff.range#ff7de9
source.diff meta.diff.header.from-file#8FBCBB
meta.diff.header.from-file#ff3b3b
meta.diff.header.to-file#a3ff8c
meta.diff.header.git#00eaff
meta.diff.index#ffe066
meta.diff.header#00eaffbold
source.diff punctuation.definition.from-file#8FBCBB
source.diff punctuation.definition.range#8FBCBB
source.diff punctuation.definition.separator#81A1C1
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#81A1C1
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#81A1C1
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#81A1C1
variable.language.this.js#B48EADitalic
meta.tag.js entity.name.tag.js support.class.component.js#81A1C1
source.js meta.var.expr variable.other.object#8FBCBB
source.js variable.other.readwrite.alias#8FBCBB
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#81A1C1
source.properties entity.name.section.group-title.ini#88C0D0
source.properties punctuation.separator.key-value.ini#81A1C1
text.html.markdown markup.fenced_code.block#7B88A1
text.html.markdown markup.fenced_code.block punctuation.definition#D8DEE9
fenced_code.block.language#D8DEE9
markup.heading#00eaffbold
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#8FBCBB
markup.inline.raw#a3ff8c
markup.italic#a3ff8citalic
markup.list#ff7de9
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#81A1C1
text.html.markdown beginning.punctuation.definition.quote#8FBCBB
text.html.markdown markup.quote#4C566Aitalic
markup.quote#ffe066italic
markup.raw#a3ff8c
text.html.markdown punctuation.definition.heading#81A1C1
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#81A1C1
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#81A1C1
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#81A1C1
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
variable, variable.other, variable.parameter#d8dee9
keyword, storage#81a1c1bold
entity.name.function, support.function#88c0d0
entity.name.type, entity.name.class, support.class, support.type#8fbcbb
punctuation#eceff4
meta.preprocessor#5e81acbold
source.c keyword.control.directive, source.cpp keyword.control.directive, source.c punctuation.definition.directive, source.cpp punctuation.definition.directive#5e81acbold
source.json meta.structure.dictionary.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.separator.dictionary.key-value.json#88c0d0
source.python entity.name.function.decorator, source.python support.function.builtin, source.python meta.function-call.generic#d08770
source.python variable.parameter.function.language.special.self#81a1c1italic
source.c entity.name.function, source.cpp entity.name.function, source.c meta.function-call, source.cpp meta.function-call#88c0d0
source.c storage.type, source.cpp storage.type, source.c entity.name.type, source.cpp entity.name.type#8fbcbb
source.c variable.other.member, source.cpp variable.other.member#d8dee9
source.cmake keyword.control#88c0d0bold
source.cmake variable#8fbcbb
source.cmake entity.name.function#81a1c1