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#FF86CB
  • activityBar.inactiveForeground#5D5D5D
  • activityBarBadge.background#FF65BC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF65BC
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#B0B0B0
  • button.background#E72392
  • button.hoverBackground#FF41AD
  • 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#FF86CB
  • 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#FF86CB
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#252525
  • list.hoverForeground#F3F3F3
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#FF86CB
  • menu.background#212121
  • menu.foreground#999999
  • menu.selectionBackground#2A2A2A
  • menu.separatorBackground#ffffff25
  • menubar.selectionForeground#F3F3F3
  • panelTitle.activeBorder#FFB9E1
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#858585
  • peekView.border#444
  • peekViewEditor.background#ffffff10
  • peekViewResult.background#ffffff10
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FFB9E1
  • quickInput.foreground#999999
  • quickInputList.focusBackground#1A1A1A
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4E4E4E
  • scrollbarSlider.background#eeffff20
  • selection.background#535353
  • settings.headerForeground#F3F3F3
  • settings.modifiedItemIndicator#FFA3D7
  • 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#FF40AC
  • 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#CE3B8E
  • textLink.activeForeground#fafafa
  • textLink.foreground#5690d3
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#ffffff80
  • titleBar.border#00000000
  • widget.border#ffffff09

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#FF7EC7
support.function#D495FF
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#77BBFFbold
strong, heading.2.markdown#FFB05Bbold
strong, heading.3.markdown#77E751bold
strong, heading.4.markdown#D495FFbold
strong, heading.5.markdown#FFE56Cbold
strong, heading.6.markdown#FF6A86bold
markup.italic.markdown#D495FFitalic
meta.link.inline.markdown#6CFF67underline
string, markup.fenced_code, markup.inline#D495FF
comment, string.quoted.docstring.multi#838589
variable#E6E6E6
variable.language.this#D495FF
variable.language#D495FF
constant.character#6ABAFF
constant.language, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#72E6D3
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#6ABAFF
storage.modifier, storage.control.clojure, entity.name.function.clojure, support.function.node#6ABAFF
storage.modifier#FF7EC7
support.class#D495FF
constant.character.format.placeholder#D495FF
keyword#FF7EC7
storage.type#FF7EC7
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, constant.keyword.clojure#D495FF
entity.name.function#D495FF
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#FFC87C
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#E6E6E6
support.variable#6ABAFF
support.constant.property#D495FF
punctuation.definition.tag.begin.html, meta.tag.structure.html.end.html, text.html.derivative#DADADA
entity.name.tag#FF7EC7
keyword.operator#FF7EC7
meta.function-call.arguments#E6E6E6
variable.parameter#FC9867
meta.function-call#D495FF
source.python#E6E6E6
markup.underline.link#8EC3FF
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.metadata.markdown#85C6FF
meta.paragraph.markdown#BBBBBB
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#79B8FF