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
emphasis—italic
strong—bold
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.bold—bold
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.link—underline
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—
ThemeDatabase All Themes by enes ozturk - VS Code Theme