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#0F111A
  • activityBar.border#0F111A
  • activityBar.foreground#BAAFC0
  • activityBarBadge.background#5766b1
  • badge.background#5766b1
  • button.background#3B4366B0
  • button.hoverBackground#6875B3A0
  • contrastBorder#0000
  • debugExceptionWidget.background#f39c129a
  • debugExceptionWidget.border#f39c129a
  • debugToolBar.background#372F3C
  • diffEditor.insertedTextBackground#315f2c27
  • diffEditor.removedTextBackground#5e1f1f46
  • dropdown.background#2B303B
  • dropdown.border#363C49
  • editor.background#0F111A
  • editor.findMatchBackground#6875b394
  • editor.findMatchHighlightBackground#6875B3
  • editor.foreground#D5CED9
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#1D2133
  • editor.lineHighlightBorder#1D2133
  • editor.rangeHighlightBackground#372F3C
  • editor.selectionBackground#212736
  • editor.selectionHighlightBackground#42394780
  • editor.wordHighlightBackground#4F4355
  • editor.wordHighlightStrongBackground#DB45A280
  • editorBracketMatch.background#746F77
  • editorBracketMatch.border#746F77
  • editorCodeLens.foreground#746F77
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#ff5757
  • editorGroup.dropBackground#495061D7
  • editorGroup.emptyBackground#0F111A
  • editorGroupHeader.tabsBackground#0F111A
  • editorGutter.addedBackground#315f2c
  • editorGutter.deletedBackground#831313
  • editorGutter.modifiedBackground#3B79C7BB
  • editorHoverWidget.background#131622
  • editorHoverWidget.border#0B0D14
  • editorIndentGuide.background#3F3544
  • editorInlayHint.background#6875b331
  • editorInlayHint.foreground#D5CED9
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#746F77
  • editorLink.activeForeground#3B79C7
  • editorOverviewRuler.border#0F111A
  • editorRuler.foreground#4F4355
  • editorSuggestWidget.background#131622
  • editorSuggestWidget.border#0B0D14
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#f39c12
  • editorWhitespace.foreground#3F3544
  • editorWidget.background#131622
  • editorWidget.border#131622
  • errorForeground#ff5757
  • extensionButton.prominentBackground#3B4366B0
  • extensionButton.prominentHoverBackground#6875B3A0
  • focusBorder#0B0D14
  • foreground#D5CED9
  • input.background#2B303B
  • input.placeholderForeground#746F77
  • inputOption.activeBorder#C668BA
  • inputValidation.errorBackground#ff5757
  • inputValidation.errorBorder#ff5757
  • inputValidation.infoBackground#3A6395
  • inputValidation.infoBorder#3A6395
  • inputValidation.warningBackground#7e4b00
  • inputValidation.warningBorder#7e4b00
  • list.activeSelectionBackground#6875B3A0
  • list.activeSelectionForeground#F3EFE0
  • list.dropBackground#3a404e
  • list.errorForeground#ff5757
  • list.focusBackground#282b35
  • list.focusForeground#ffffff
  • list.hoverBackground#3a404e
  • list.hoverForeground#eeeeee
  • list.warningForeground#f39c12
  • merge.currentContentBackground#F9267240
  • merge.currentHeaderBackground#F92672
  • merge.incomingContentBackground#3B79C740
  • merge.incomingHeaderBackground#3B79C7BB
  • notifications.background#131622
  • notificationsErrorIcon.foreground#ff5757
  • notificationsInfoIcon.foreground#5766b1
  • notificationsWarningIcon.foreground#f39c12
  • panel.background#0F111A
  • panel.border#5766b1f1
  • panelTitle.activeBorder#3B4366B0
  • panelTitle.inactiveForeground#746F77
  • peekView.border#0F111A
  • peekViewEditor.background#1A1C22
  • peekViewEditor.matchHighlightBackground#f39c129a
  • peekViewResult.background#1A1C22
  • peekViewResult.matchHighlightBackground#f39c129a
  • peekViewResult.selectionBackground#0F111A
  • peekViewTitle.background#1A1C22
  • peekViewTitleDescription.foreground#746F77
  • pickerGroup.border#4F4355
  • pickerGroup.foreground#746F77
  • progressBar.background#C668BA
  • scrollbar.shadow#0B0D14
  • scrollbarSlider.activeBackground#5A5C66B0
  • scrollbarSlider.background#2D2E33e0
  • scrollbarSlider.hoverBackground#3B4366A0
  • selection.background#746F77
  • sideBar.background#0F111A
  • sideBar.foreground#F3EFE0
  • sideBarSectionHeader.background#0F111A
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#0F111A
  • statusBar.debuggingBackground#ff5757
  • statusBar.noFolderBackground#0F111A
  • statusBarItem.activeBackground#3B4366
  • statusBarItem.hoverBackground#6875B3B0
  • statusBarItem.prominentBackground#3B4366B0
  • statusBarItem.prominentHoverBackground#6875B3A0
  • tab.activeBackground#0F111A
  • tab.activeForeground#FFFFFF
  • tab.border#0B0D14
  • tab.inactiveBackground#0B0D14
  • tab.inactiveForeground#8F93A2
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5766b1
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3B4366
  • terminal.ansiBrightCyan#46acc5
  • terminal.ansiBrightGreen#53DB7A
  • terminal.ansiBrightMagenta#AB68DB
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#F5B44C
  • terminal.ansiCyan#108cac
  • terminal.ansiGreen#53DB7A
  • terminal.ansiMagenta#AB68DB
  • terminal.ansiRed#ff5757
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#F5B44C
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#3B4366B0
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#3B79C7
  • titleBar.activeBackground#0F111A
  • titleBar.inactiveBackground#0F111A
  • walkThrough.embeddedEditorBackground#0F111A
  • widget.shadow#0B0D14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header#5f6167
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, string.quoted.double.dockerfile#f8cf5d
variable, property, support.class, keyword.operator, support.constant, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name, keyword.other.special-method.dockerfile, markup.italic, markup.underline.link.markdown#5FA5DB
markup.bold, constant, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit#f39c12
text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string#f85d5d
markup.heading, variable.language.this.js, variable.language.special.self.python#46e6de
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag#f8518e
storage, storage.type, support.type, support.class, keyword, meta.link, meta.image, source.js support.type#9073a5
string.regexp, markup.changed#3A75C4
source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted#f85353
string, markup.list, text.html.php string, markup.inline.raw, markup.inserted, source.dockerfile, text.html.markdown string, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#e0af6f
variable.parameter.ts, entity.name.type.tsitalic
comment, markup.quote.markdown, meta.diff, meta.diff.header#5f6167
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, string.quoted.double.dockerfile#f8cf5d
variable, property, support.class, keyword.operator, support.constant, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name, keyword.other.special-method.dockerfile, markup.italic, markup.underline.link.markdown#5FA5DB
markup.bold, constant, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit#f39c12
text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string#f85d5d
markup.heading, variable.language.this.js, variable.language.special.self.python#46e6de
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag#f8518e
storage, storage.type, support.type, support.class, keyword, meta.link, meta.image, source.js support.type#9073a5
string.regexp, markup.changed#3A75C4
source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted#f85353
string, markup.list, text.html.php string, markup.inline.raw, markup.inserted, source.dockerfile, text.html.markdown string, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#e0af6f
variable.parameter.ts, entity.name.type.tsitalic
Dionysuz Theme by devzgabriel - VS Code Theme