Skip to main content
Coding Theme

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.activeBorder#D0B8E8
  • activityBar.background#1b1b1b
  • activityBar.border#6C6F934D
  • activityBar.foreground#b3bddab3
  • activityBarBadge.background#D0B8E8
  • activityBarBadge.foreground#1b1b1b
  • activityBarTop.activeBorder#D0B8E8
  • badge.background#2d2d2d
  • badge.foreground#D7D9CB
  • breadcrumbPicker.background#252525
  • button.background#2d2d2d
  • commandCenter.background#1b1b1b
  • commandCenter.border#6C6F934D
  • debugToolBar.background#1b1b1b
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#1b1b1b
  • dropdown.listBackground#1b1b1b
  • editor.background#1b1b1b
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.foreground#D7D9CB
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2d2d2d4D
  • editor.rangeHighlightBackground#2d2d2d80
  • editor.selectionBackground#7d81a342
  • editor.selectionHighlightBackground#8f93bd4d
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1b1b1b
  • editorCursor.foreground#D0B8E8
  • editorError.foreground#FBB67F
  • editorGroup.border#6C6F934D
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.border#6C6F934D
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGroupHeader.tabsBorder#6C6F934D
  • editorGutter.addedBackground#6AF891dd
  • editorGutter.deletedBackground#D0B8E8dd
  • editorGutter.modifiedBackground#F5EB73dd
  • editorIndentGuide.activeBackground#2d2d2d
  • editorIndentGuide.background#2d2d2d80
  • editorLineNumber.activeForeground#D7D9CB80
  • editorLineNumber.foreground#D7D9CB1A
  • editorOverviewRuler.addedForeground#6AF891dd
  • editorOverviewRuler.border#2d2d2dB3
  • editorOverviewRuler.bracketMatchForeground#D7D9CB80
  • editorOverviewRuler.deletedForeground#D0B8E8dd
  • editorOverviewRuler.errorForeground#FBB67Fdd
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#F5EB73dd
  • editorOverviewRuler.warningForeground#F5EB73dd
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#D0B8E8
  • editorWarning.foreground#F5EB73
  • editorWidget.background#252525
  • editorWidget.border#252525
  • errorForeground#FBB67F
  • extensionButton.prominentBackground#D0B8E8
  • extensionButton.prominentHoverBackground#D0B8E8
  • focusBorder#D0B8E8
  • foreground#D7D9CB
  • gitDecoration.addedResourceForeground#6AF891
  • gitDecoration.deletedResourceForeground#F67FC9
  • gitDecoration.ignoredResourceForeground#D7D9CB4D
  • gitDecoration.modifiedResourceForeground#F5EB73
  • gitDecoration.untrackedResourceForeground#6AF891
  • input.background#1b1b1b
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2d2d2d80
  • list.activeSelectionForeground#D7D9CB
  • list.dropBackground#6C6F9380
  • list.errorForeground#FBB67FE6
  • list.focusBackground#2d2d2d80
  • list.focusForeground#D7D9CB
  • list.highlightForeground#D0B8E8
  • list.hoverBackground#2d2d2d80
  • list.hoverForeground#D7D9CB
  • list.inactiveFocusBackground#2d2d2d80
  • list.inactiveSelectionBackground#2d2d2d4D
  • list.inactiveSelectionForeground#D7D9CB
  • list.warningForeground#F5EB73d8
  • menu.selectionBackground#6C6F9380
  • menu.selectionBorder#6C6F9380
  • minimap.errorHighlight#FBB67F
  • minimap.selectionHighlight#d0b8e882
  • minimap.warningHighlight#F5EB73
  • panel.border#6C6F934D
  • panelTitle.activeBorder#D0B8E8
  • peekView.border#6C6F934D
  • peekViewEditor.background#252525
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#252525
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2d2d2d80
  • peekViewTitle.background#252525
  • progressBar.background#D0B8E8
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • settings.checkboxBackground#1b1b1b
  • settings.checkboxBorder#6C6F934D
  • settings.dropdownBackground#1b1b1b
  • settings.dropdownBorder#6C6F934D
  • settings.modifiedItemIndicator#F5EB73
  • settings.numberInputBackground#1b1b1b
  • settings.numberInputBorder#6C6F934D
  • settings.textInputBackground#1b1b1b
  • settings.textInputBorder#6C6F934D
  • sideBar.background#1b1b1b
  • sideBar.border#6C6F934D
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D7D9CB80
  • sideBarActivityBarTop.border#6C6F934D
  • sideBarSectionHeader.background#1b1b1b
  • sideBarSectionHeader.foreground#D7D9CBB3
  • sideBarTitle.border#6C6F934D
  • statusBar.background#1b1b1b
  • statusBar.border#6C6F934D
  • statusBar.debuggingBackground#D0B8E8
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D7D9CB80
  • statusBar.noFolderBackground#191b22
  • statusBarItem.hoverBackground#2d2d2d
  • statusBarItem.prominentBackground#2d2d2d
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#2d2d2d80
  • tab.border#6C6F934D
  • tab.inactiveBackground#1b1b1b
  • terminal.ansiBlack#494949
  • terminal.ansiBlue#a5d2f8
  • terminal.ansiBrightBlack#373636
  • terminal.ansiBrightBlue#75BFFD
  • terminal.ansiBrightCyan#6AF891
  • terminal.ansiBrightGreen#9CE9CF
  • terminal.ansiBrightMagenta#D0B8E8
  • terminal.ansiBrightRed#F67FC9
  • terminal.ansiBrightWhite#FBB67F
  • terminal.ansiBrightYellow#F5EB73
  • terminal.ansiCyan#aff7c2
  • terminal.ansiGreen#c1f5e4
  • terminal.ansiMagenta#e3d7f0
  • terminal.ansiRed#f3acd7
  • terminal.ansiWhite#f8d0ae
  • terminal.ansiYellow#f5f0b8
  • terminal.foreground#D7D9CB
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D7D9CB
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#D0B8E8
  • textLink.foreground#D0B8E8
  • titleBar.activeBackground#1b1b1b
  • titleBar.border#6C6F9380
  • titleBar.inactiveBackground#1b1b1b
  • walkThrough.embeddedEditorBackground#252525
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#D7D9CB4Ditalic
variable#D0B8E8
constant#75BFFD
constant.character.escape#F67FC9
entity.name#6AF891
entity.name.function#F67FC9
entity.name.tag#D0B8E8
entity.name.type, storage.type.cs#D0B8E8
entity.other.attribute-name#F5EB73italic
entity.other.inherited-class#F5EB73
entity.other.attribute-name.id#F67FC9
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#75BFFD
entity.name.variable, variable#D0B8E8
variable.other.constant#F5EB73
keyword#F5EB73italic
keyword.operator#D7D9CB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#9CE9CF
keyword.other.unit#D0B8E8
markup.quote#75BFFDitalic
markup.heading, entity.name.section#D0B8E8
markup.bold#9CE9CFbold
markup.italic#F67FC9italic
markup.inline.raw, markup.fenced_code.block#D0B8E8
markup.underline.link#75BFFD
storage#9CE9CFitalic
string.quoted, string.template, string.unquoted#75BFFD
string.regexp#D0B8E8
string.other.link#D0B8E8
support#9CE9CF
support.function#F67FC9
support.variable#FBB67F
support.type.property-name, meta.object-literal.key#D0B8E8
support.type.property-name.css#D7D9CB
variable.language#FBB67Fitalic
variable.parameteritalic
string.template meta.embedded#D7D9CB
punctuation.definition.tag#D0B8E8
punctuation.separator#D7D9CB
punctuation.definition.template-expression#9CE9CF
punctuation.section.embedded#9CE9CF
punctuation.definition.list#D7D9CB
meta.function-call.generic.python#F67FC9
GelGel Theme by Lance Wilhelm - VS Code Theme