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#282a36
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#1c58cf
  • activityBarBadge.foreground#ffffff
  • badge.background#2a2139
  • badge.foreground#ffffff
  • breadcrumbPicker.background#232530
  • button.background#614D85
  • debugToolBar.background#463465
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#fe445035
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#282a36
  • editor.findMatchBackground#D18616bb
  • editor.findMatchHighlightBackground#54555e
  • editor.findRangeHighlightBackground#54555e
  • editor.foreground#eff0eb
  • editor.hoverHighlightBackground#54555e
  • editor.lineHighlightBackground#2C2F3D
  • editor.lineHighlightBorder#7059AB66
  • editor.rangeHighlightBackground#54555e
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#54555e
  • editor.wordHighlightBackground#54555e
  • editor.wordHighlightStrongBackground#54555e
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#241b2f
  • editorCursor.foreground#97979b
  • editorError.foreground#fe4450
  • editorGroup.border#495495
  • editorGroup.dropBackground#232631
  • editorGroupHeader.tabsBackground#232631
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground#A148AB80
  • editorIndentGuide.background#616263
  • editorLineNumber.activeForeground#ffffffcc
  • editorLineNumber.foreground#616263
  • editorLink.activeForeground#ff5c57
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#fe445099
  • editorOverviewRuler.errorForeground#fe4450dd
  • editorOverviewRuler.findMatchForeground#D1861699
  • editorOverviewRuler.modifiedForeground#b893ce99
  • editorOverviewRuler.warningForeground#72f1b8cc
  • editorRuler.foreground#A148AB80
  • editorSuggestWidget.highlightForeground#f97e72
  • editorSuggestWidget.selectedBackground#ffffff36
  • editorWarning.foreground#72f1b8cc
  • editorWhitespace.foreground#616263
  • editorWidget.background#171520DC
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#fe4450
  • extensionButton.prominentBackground#f97e72
  • extensionButton.prominentHoverBackground#ff7edb
  • focusBorder#1f212b
  • foreground#eff0eb
  • gitDecoration.addedResourceForeground#72f1b8cc
  • gitDecoration.deletedResourceForeground#fe4450
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#b893ceee
  • gitDecoration.untrackedResourceForeground#72f1b8
  • input.background#2a2139
  • inputOption.activeBorder#ff7edb99
  • inputValidation.errorBackground#fe445080
  • inputValidation.errorBorder#fe445000
  • list.activeSelectionBackground#54555e
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#34294f66
  • list.errorForeground#fe4450E6
  • list.focusBackground#ffffff20
  • list.focusForeground#ffffff
  • list.highlightForeground#f97e72
  • list.hoverBackground#54555e
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2a213999
  • list.inactiveSelectionBackground#ffffff20
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#72f1b8bb
  • menu.background#463465
  • minimapGutter.addedBackground#09f7a099
  • minimapGutter.deletedBackground#fe4450
  • minimapGutter.modifiedBackground#b893ce
  • panelTitle.activeBorder#f97e72
  • peekView.border#5af78e
  • peekViewEditor.background#282a36
  • peekViewEditor.matchHighlightBackground#D18616bb
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#D1861655
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#f97e72ea
  • progressBar.background#f97e72
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#9d8bca20
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#ffffff20
  • sideBar.background#2C2F3D
  • sideBar.dropBackground#34294f4c
  • sideBar.foreground#ffffff99
  • sideBarSectionHeader.background#ffffff11
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#2E313D
  • statusBar.debuggingBackground#6C6E75
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#6C6E75
  • statusBar.noFolderBackground#6C6E75
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • tab.activeBackground#232631
  • tab.activeBorder#880088
  • tab.border#241b2f00
  • tab.inactiveBackground#2C2F3D
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#282a36
  • terminal.ansiBrightBlue#57c7ff
  • terminal.ansiBrightCyan#9aedfe
  • terminal.ansiBrightGreen#5af78e
  • terminal.ansiBrightMagenta#ff6ac1
  • terminal.ansiBrightRed#ff5c57
  • terminal.ansiBrightWhite#eff0eb
  • terminal.ansiBrightYellow#f3f99d
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#5af78e
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff5c57
  • terminal.ansiWhite#eff0eb
  • terminal.ansiYellow#f3f99d
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#ff7edb
  • textLink.foreground#f97e72
  • titleBar.activeBackground#282a36
  • titleBar.inactiveBackground#241b2f
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#eff0eb—
strong, markup.bold—bold
emphasis, markup.italic—italic
markup.underline—underline
comment, punctuation.definition.comment, string.quoted.docstring#777777italic
storage.type#f3f99ditalic
storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit#9aedfe—
string, meta.structure.dictionary.json string.quoted.double.json#5af78eitalic
constant.language.boolean#5af78eitalic
constant.numeric, support.constant#5af78eitalic
constant.language.null#5af78e—
constant.language.undefined#5af78e—
meta.function entity.name.function#36f9f6—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.require, variable.language.super, keyword.other.get, keyword.other.set#36f9f6italic
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function, entity.name.variable#f92aad—
variable.other.constant.property#f3f99d—
entity.name.type.class#ff5c57—
entity.other.inherited-class entity.name.type.module#ff5c57italic
variable.object.property#f3f99d—
variable.parameter—italic
meta.definition.method entity.name.function#f3f99d—
keyword, modifier, storage.modifier, support.type.object, constant.language, variable.language.this, variable.language.special.self#f9f52a—
keyword.control.import.js#ff295e—
storage.modifier, storage.type.class.js, variable.language.this, variable.language.this.js—italic
support.module, support.node#ff5c57italic
template.expression.begin, template.expression.end#ff6ac1—
support.type.exception#f3f99d—
markup.inserted.diff, meta.diff.header.to-file#5af78e—
markup.deleted.diff, meta.diff.header.from-file#ff5c57—
source.cs meta.class.identifier storage.type#ff5c57—
source.cs meta.method.identifier entity.name.function#f3f99d—
source.cs meta.method-call meta.method, source.cs entity.name.function#57c7ff—
source.cs storage.type#f3f99d—
source.cs meta.method.return-type#9aedfe—
source.cs meta.preprocessor#616263—
source.cs entity.name.type.namespace#eff0eb—
entity.other.attribute-name.class#5af78e—
entity.other.attribute-name.id#5af78e—
source.css entity.name.tag#f3f99d—
source.css support.type.property-name#ff5c57—
meta.tag, punctuation.definition.tag#eff0eb—
entity.name.tag#ff5c57—
entity.other.attribute-name#f3f99ditalic
punctuation.section.embedded#ff5c57—
keyword.other.definition.ini#ff5c57—
entity.name.section.group-title.ini#57c7ff—
source.java storage.modifier.package, source.java storage.modifier.import#eff0eb—
source.java storage.type.annotation#ff5c57italic
source.java meta.method-call meta.method#57c7ff—
source.java meta.method-call meta.inner-class meta.method#eff0eb—
source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method#57c7ff—
source.java meta.definition.variable entity.name.function#57c7ff—
source.java constant.language#5af78e—
source.js storage.modifier.async#ff6ac1—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ff5c57—
constant.language.json#ff6ac1—
markup.heading#57c7ff—
text.html.markdown meta.link.inline, meta.link.reference, markup.underline.link.image#ff5c57—
text.html.markdown markup.quote#9aedfe—
text.html.markdown beginning.punctuation.definition.list#f3f99d—
text.html.markdown markup.inline.raw#ff6ac1—
markup.italic#ff5c57italic
markup.bold#ff5c57bold
markup.bold markup.italic, markup.italic markup.bold#ff5c57italic bold
source.python keyword.operator.arithmetic#eff0eb—
source.python meta.function storage.type.function#ff6ac1—
source.python meta.function-call.arguments#eff0eb—
source.python meta.function entity.name.function.decorator#ff5c57—
source.python constant.language#5af78e—
entity.name.tag.yaml#ff5c57—
ThemeDatabase All Themes by enes ozturk - VS Code Theme