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#191919
  • activityBar.foreground#D495FF
  • activityBar.inactiveForeground#5D5D5D
  • activityBarBadge.background#7B44C7
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7B44C7
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#B0B0B0
  • button.background#7B44C7
  • button.hoverBackground#8D53DD
  • debugIcon.breakpointCurrentStackframeForeground#79b8ff
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF7A84
  • debugIcon.breakpointStackframeForeground#79b8ff
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#FF7A84
  • debugIcon.disconnectForeground#FF7A84
  • debugIcon.pauseForeground#FF7A84
  • debugIcon.restartForeground#79b8ff
  • debugIcon.startForeground#79b8ff
  • debugIcon.stepBackForeground#FF7A84
  • debugIcon.stepIntoForeground#FF7A84
  • debugIcon.stepOutForeground#FF7A84
  • debugIcon.stepOverForeground#FF7A84
  • debugIcon.stopForeground#79b8ff
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#202020
  • editor.findMatchHighlightBorder#ffffff30
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#343434
  • editorCursor.foreground#D495FF
  • editorGroupHeader.tabsBackground#191919
  • editorGroupHeader.tabsBorder#191919
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.activeBackground1#d9b97470
  • editorIndentGuide.background#4c4c4c
  • editorIndentGuide.background1#42424270
  • editorLineNumber.activeForeground#ffffffdd
  • editorLineNumber.foreground#5B5B5B
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#191919
  • editorSuggestWidget.selectedBackground#2A2A2A
  • focusBorder#404040
  • foreground#C4C4C4
  • gitDecoration.ignoredResourceForeground#848484
  • input.background#2A2A2A
  • input.border#ffffff10
  • input.foreground#E1E1E1
  • inputOption.activeBackground#3a3a3a
  • inputOption.activeBorder#eeffff30
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#D495FF
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#252525
  • list.hoverForeground#F3F3F3
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#D495FF
  • menu.background#212121
  • menu.foreground#999999
  • menu.selectionBackground#2A2A2A
  • menu.separatorBackground#ffffff25
  • menubar.selectionForeground#F3F3F3
  • panelTitle.activeBorder#E0C9FF
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#858585
  • peekView.border#444
  • peekViewEditor.background#ffffff10
  • peekViewResult.background#ffffff10
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#E0C9FF
  • quickInput.foreground#999999
  • quickInputList.focusBackground#1A1A1A
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4E4E4E
  • scrollbarSlider.background#eeffff20
  • selection.background#535353
  • settings.headerForeground#F3F3F3
  • settings.modifiedItemIndicator#DAA2FF
  • sideBar.background#1A1A1A
  • sideBar.foreground#9F9F9F
  • sideBarSectionHeader.background#202020
  • statusBar.background#191919
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#B0B0B0
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#7B44C7
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.classForeground#FF9800
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#FF9800
  • symbolIcon.enumeratorMemberForeground#79b8ff
  • symbolIcon.eventForeground#FF9800
  • symbolIcon.fieldForeground#79b8ff
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#79b8ff
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#79b8ff
  • tab.activeBackground#ffffff12
  • tab.activeBorder#E1E1E1
  • tab.activeForeground#F3F3F3
  • tab.activeModifiedBorder#676767
  • tab.border#212121
  • tab.hoverForeground#D3D3D3
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#FFFFFF
  • terminal.ansiBlue#2472C8
  • terminal.ansiBrightBlack#FFFFFF
  • terminal.ansiBrightBlue#3B8EEA
  • terminal.ansiBrightCyan#26BFE6
  • terminal.ansiBrightGreen#23D68F
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#FC5050
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#F8F848
  • terminal.ansiCyan#16ABD0
  • terminal.ansiGreen#0DBC79
  • terminal.ansiMagenta#AC38AC
  • terminal.ansiRed#C62D2D
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#EBEB13
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#9556BF
  • textLink.activeForeground#fafafa
  • textLink.foreground#5690d3
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#ffffff80
  • titleBar.border#00000000
  • widget.border#ffffff09
  • widget.shadow#2c2c2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#B392F0
keyword.operator.accessor, meta.group.braces.round.function.arguments, markup.fenced_code meta.embedded.block#D1D1D1
meta.template.expression#D495FF
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#FF6A86bold
strong, heading.2.markdown#FF8CC3bold
strong, heading.3.markdown#FFB05Bbold
strong, heading.4.markdown#77BBFFbold
strong, heading.5.markdown#FFE56Cbold
strong, heading.6.markdown#77E751bold
markup.italic.markdown#FF6A86italic
meta.link.inline.markdown#6CFF67underline
meta.paragraph.markdown, text.html.markdown#BBBBBB
string, markup.fenced_code, markup.inline#5BE4FF
comment, string.quoted.docstring.multi#838589
variable#E6E6E6
variable.language#5BE4FF
variable.language.this#D495FF
constant.character#FFB05B
constant.language, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#6BFFB8
constant.numeric, constant.other.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json#D495FF
storage.modifier, storage.control.clojure, entity.name.function.clojure, support.function.node#5BE4FF
storage.modifier#D495FF
constant.character.format.placeholder#D495FF
keyword#FF6A86
storage.type#FF6A86
variable.parameter.function#FC9867
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, constant.keyword.clojure#5BE4FF
entity.name.function#5BE4FF
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#FFE56C
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
punctuation.separator, punctuation.definition.dict, meta.function#D1D1D1
punctuation.definition.parameters#D1D1D1
punctuation.definition.arguments#D1D1D1
punctuation.accessor, meta.function-call#D1D1D1
variable.other.property, meta.object-literal.key, meta.object.member, meta.objectliteral#6ABAFF
support.variable#D495FF
support.constant.property#D495FF
punctuation.definition.tag.begin.html, meta.tag.structure.html.end.html, text.html.derivative#DADADA
entity.name.tag#D495FF
meta.function-call.arguments#E6E6E6
variable.parameter#FC9867
meta.function-call#5BE4FF
source.python#E6E6E6
markup.underline.link#8EC3FF
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.metadata.markdown#5FAAFF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#79B8FF