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#D2B5FF
  • activityBar.background#1A1328E6
  • activityBar.foreground#E2C6FF
  • activityBar.inactiveForeground#807393
  • activityBarBadge.background#D2B5FF
  • activityBarBadge.foreground#1A1328
  • badge.background#FFFFFF14
  • badge.foreground#E1DAED
  • button.background#D2B5FFD9
  • button.foreground#1A1328
  • button.hoverBackground#E2C6FF
  • button.secondaryBackground#FFFFFF0F
  • button.secondaryForeground#E1DAED
  • button.secondaryHoverBackground#FFFFFF1A
  • descriptionForeground#988DA8
  • diffEditor.insertedTextBackground#99EAD41F
  • diffEditor.removedTextBackground#FF8DA11F
  • dropdown.background#29213FF2
  • dropdown.border#FFFFFF14
  • dropdown.foreground#EAE5F3
  • editor.background#221B35F2
  • editor.findMatchBackground#FF8DA140
  • editor.findMatchBorder#FFB3CD80
  • editor.findMatchHighlightBackground#D2B5FF26
  • editor.foreground#E1DAED
  • editor.inactiveSelectionBackground#D2B5FF24
  • editor.lineHighlightBackground#D2B5FF15
  • editor.lineHighlightBorder#D2B5FF33
  • editor.rangeHighlightBackground#D2B5FF14
  • editor.selectionBackground#D2B5FF45
  • editor.selectionHighlightBackground#FFB3CD30
  • editor.wordHighlightBackground#8ECAFF22
  • editor.wordHighlightStrongBackground#8ECAFF33
  • editorBracketHighlight.foreground1#D2B5FF
  • editorBracketHighlight.foreground2#FFB3CD
  • editorBracketHighlight.foreground3#8ECAFF
  • editorBracketHighlight.foreground4#99EAD4
  • editorBracketHighlight.foreground5#FAD089
  • editorBracketHighlight.foreground6#FF8DA1
  • editorBracketMatch.background#D2B5FF1F
  • editorBracketMatch.border#D2B5FFB3
  • editorCursor.foreground#FFB3CD
  • editorGroup.border#FFFFFF0A
  • editorGroupHeader.tabsBackground#1D162CE3
  • editorGroupHeader.tabsBorder#FFFFFF08
  • editorGutter.addedBackground#99EAD4B3
  • editorGutter.background#00000000
  • editorGutter.deletedBackground#FF8DA1B3
  • editorGutter.modifiedBackground#8ECAFFB3
  • editorHoverWidget.background#271F3CF2
  • editorHoverWidget.border#FFFFFF14
  • editorIndentGuide.activeBackground1#D2B5FF42
  • editorIndentGuide.background1#FFFFFF0D
  • editorLineNumber.activeForeground#D2B5FF
  • editorLineNumber.foreground#695E7C
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.background#271F3CF2
  • editorSuggestWidget.border#FFFFFF14
  • editorSuggestWidget.highlightForeground#D2B5FF
  • editorSuggestWidget.selectedBackground#D2B5FF21
  • editorWhitespace.foreground#FFFFFF0F
  • editorWidget.background#271F3CEB
  • editorWidget.border#FFFFFF14
  • errorForeground#FF8DA1
  • focusBorder#D2B5FF80
  • foreground#E1DAED
  • gitDecoration.addedResourceForeground#99EAD4
  • gitDecoration.deletedResourceForeground#FF8DA1
  • gitDecoration.ignoredResourceForeground#766A8A
  • gitDecoration.modifiedResourceForeground#FAD089
  • gitDecoration.untrackedResourceForeground#D2B5FF
  • icon.foreground#BFB4D1
  • input.background#FFFFFF08
  • input.border#FFFFFF14
  • input.foreground#EAE5F3
  • input.placeholderForeground#877B96
  • inputOption.activeBorder#D2B5FF
  • list.activeSelectionBackground#D2B5FF26
  • list.activeSelectionForeground#F0ECF6
  • list.highlightForeground#D2B5FF
  • list.hoverBackground#FFFFFF05
  • list.inactiveSelectionBackground#FFFFFF08
  • minimap.background#1A132899
  • panel.background#1F1930E8
  • panel.border#FFFFFF0F
  • panelTitle.activeBorder#D2B5FF
  • panelTitle.activeForeground#EAE5F3
  • panelTitle.inactiveForeground#877B96
  • peekView.border#D2B5FF99
  • peekViewEditor.background#241D37F2
  • peekViewResult.background#1F192FEB
  • peekViewResult.selectionBackground#D2B5FF24
  • peekViewTitle.background#1A1428EB
  • scrollbarSlider.activeBackground#D2B5FF36
  • scrollbarSlider.background#D2B5FF12
  • scrollbarSlider.hoverBackground#D2B5FF24
  • sideBar.background#1F1930ED
  • sideBar.border#FFFFFF0A
  • sideBar.foreground#BFB4D1
  • sideBarSectionHeader.background#FFFFFF05
  • sideBarSectionHeader.border#FFFFFF08
  • sideBarSectionHeader.foreground#BFB4D1
  • sideBarTitle.foreground#EAE5F3
  • statusBar.background#1A1328EB
  • statusBar.border#FFFFFF0A
  • statusBar.debuggingBackground#FF8DA1
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#C9BFD9
  • statusBar.noFolderBackground#1A1328EB
  • tab.activeBackground#FFFFFF0A
  • tab.activeBorderTop#D2B5FF
  • tab.activeForeground#F0ECF6
  • tab.border#FFFFFF05
  • tab.inactiveBackground#FFFFFF03
  • tab.inactiveForeground#8A7E9C
  • terminal.ansiBlack#322942
  • terminal.ansiBlue#8ECAFF
  • terminal.ansiBrightBlack#655979
  • terminal.ansiBrightBlue#BCDFFF
  • terminal.ansiBrightCyan#BFF7F3
  • terminal.ansiBrightGreen#BEF5E5
  • terminal.ansiBrightMagenta#E9D9FF
  • terminal.ansiBrightRed#FFAEC0
  • terminal.ansiBrightWhite#F0ECF6
  • terminal.ansiBrightYellow#FFE2B3
  • terminal.ansiCyan#90F3EC
  • terminal.ansiGreen#99EAD4
  • terminal.ansiMagenta#D2B5FF
  • terminal.ansiRed#FF8DA1
  • terminal.ansiWhite#C9BFD9
  • terminal.ansiYellow#FAD089
  • terminal.background#1A1328D9
  • terminal.foreground#E1DAED
  • terminalCursor.foreground#FFB3CD
  • titleBar.activeBackground#1D162CE6
  • titleBar.activeForeground#EAE5F3
  • titleBar.inactiveBackground#1A1328CC
  • titleBar.inactiveForeground#877B96
  • window.activeBorder#D2B5FF1A
  • window.inactiveBorder#FFFFFF05

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#837799
string, string.quoted, string.template#99EAD4
constant.numeric#FAD089
keyword, storage.type, storage.modifier#D2B5FF
entity.name.type, entity.name.class, entity.name.struct, support.type, support.class#FFBBE2
entity.name.function, support.function, variable.function#8ECAFF
variable, entity.name.variable#E1DAED
entity.name.tag, support.type.property-name.yaml#FF8DA1
constant.language, constant.character.escape#90F3EC
variable.parameter, meta.function-call.arguments#EAE5F3
punctuation#988DA8