Skip to main content
CodingTheme

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#0F1224
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#06060C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#0F1224
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#0F1224
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#2E303EB3
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#0F1224
  • editorCursor.foreground#E95378
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#0F1224
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#b2a94eB3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#D5D8DA1A
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#b2a94e80
  • editorOverviewRuler.warningForeground#d75f5f80
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#d75f5fB3
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#d75f5fB3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#d75f5f
  • input.background#2E303E
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.highlightForeground#E95378
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#d75f5fB3
  • panelTitle.activeBorder#E95378
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#E95378E6
  • progressBar.background#E95378
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#0F1224
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#0F1224
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#0F1224
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#0F1224
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#E95378
  • tab.border#0F122400
  • tab.inactiveBackground#0F1224
  • terminal.ansiBlue#4564ed
  • terminal.ansiBrightBlue#4a6cff
  • terminal.ansiBrightCyan#3cb5c7
  • terminal.ansiBrightGreen#57c585
  • terminal.ansiBrightMagenta#b267f5
  • terminal.ansiBrightRed#f26b6b
  • terminal.ansiBrightYellow#bfb554
  • terminal.ansiCyan#36a4b4
  • terminal.ansiGreen#50b67b
  • terminal.ansiMagenta#a05add
  • terminal.ansiRed#d75f5f
  • terminal.ansiYellow#b2a94e
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • titleBar.activeBackground#0F1224
  • titleBar.inactiveBackground#0F1224
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#7f7fd7
comment#7f7fd799italic
constant#F09483E6
constant.character.escape#25B0BCE6
entity.name.function#25B0BCE6
entity.name.tag#8A7DFFeebold
entity.other.attribute-name#F09483E6bold
entity.other.inherited-class, entity.name.type.class, variable.language.this#C2F26Baa
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#EE7DFFaa
keyword.control#F2B26Baabold
keyword.operator, punctuation.accessor, punctuation.separator#7f7fd7ee
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#7f7fd7E6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
meta.interface, meta.return.type, meta.type.annotation, meta.type.parameters#F2E66Baa
markup.heading, entity.name.section#F26B6BE6
markup.bold#7f7fd7E6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage.type, storage.modifier#4D74FFeebold
string.quoted, string.template#FAB795E6
string.regexp#F09483E6
string.other.link#F09483E6
support.function#25B0BCE6
support.variable#F26B6BE6
support.type.property-name, meta.object-literal.key#8A7DFFE6
punctuation.parenthesis, punctuation.definition.parameters, meta.brace.round#d6d6ff77
punctuation.curlybrace, meta.parameter.object-binding-pattern, punctuation.definition.dictionary, punctuation.definition.array, punctuation.definition.block#d6d6ff66
punctuation.definition.string, punctuation.support.type.property-name#8A7DFF99
support.type.property-name.css#BBBBBB
variable.languageitalic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#d6d6ff66bold
punctuation.definition.template-expression#7f7fd7E6
punctuation.section.embedded#7f7fd7E6
punctuation.definition.list#F09483E6

Shiki preview

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

Loading...

Unicorn Theme by Unicorn - VS Code Theme