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#221f2e
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#ff6767
  • activityBarBadge.foreground#06060C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#1e1b27
  • editor.findMatchBackground#000000
  • editor.findMatchHighlightBackground#1b1b1b
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.inactiveSelectionBackground#352a3b
  • editor.lineHighlightBackground#514f5265
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#ffffff41
  • editor.selectionHighlightBackground#1b1b1b
  • editor.wordHighlightBackground#a42aeb3d
  • editor.wordHighlightStrongBackground#a42aeb3d
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#FB8B24
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#1f1f1f57
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#ffffff
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#82ffd1b3
  • editorWhitespace.foreground#1f1f1f
  • editorWidget.background#35333f
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#141414
  • 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#6ec4fd
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#F43E5C80
  • 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#14121d
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#221f2e
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#35333f
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#2a263b
  • terminal.ansiBlue#7bcddd
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3fdba4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#aa8bff
  • textLink.foreground#aa8bff
  • titleBar.activeBackground#0e0e0e
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cfcfcf50italic
constant.character.escape#69cdd6e6
entity.name#FAC29AE6
entity.name.function#68fc8d
entity.name.tag#fa59b7
entity.name.type, storage.type.cs#d5b0ffbd
entity.other.attribute-name#5eff6b
entity.other.inherited-class#FAB795E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#dddddd
entity.name.type.class.ts, entity.name.type.interface.ts, entity.name.type#7ccbffitalic
variable.other.constant.property.ts, variable.other.constant.object.property.ts#e2dddd
keyword.other.unit#fc63db
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#bc25bce6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language#f773fc
keyword.operator.new#f773fcbold
text.html.derivative#b9b9b9
string.quoted, string.template, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.language.null#f1f38c
constant.language.null, constant.language.undefined#79fbffb6
string.regexp#F09483E6
string.other.link#F09483E6
support#7ddffditalic
constant.language.boolean, constant.numeric.decimal#70dafa
support.function#00d9ff
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#e4e4e4
support.type.property-name.css#d9d9d9
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag, punctuation.separator#ffffff9f
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6

Shiki preview

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

Loading...

Eclipse Lunar by Eclipse Lunar Theme - VS Code Theme