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#FF6A86
  • activityBar.inactiveForeground#5D5D5D
  • activityBarBadge.background#DD2F4F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF5977
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#B0B0B0
  • button.background#FF2950
  • button.hoverBackground#FF4B6C
  • 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#FF6A86
  • 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#E1E1E1
  • gitDecoration.ignoredResourceForeground#848484
  • input.border#ffffff10
  • input.foreground#E1E1E1
  • inputOption.activeBackground#3A3A3A
  • inputOption.activeBorder#eeffff30
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#F3F3F3
  • list.focusBackground#1A1A1A
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#252525
  • list.hoverForeground#F3F3F3
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#F3F3F3
  • menu.background#212121
  • menu.foreground#999999
  • menu.selectionBackground#2A2A2A
  • menu.separatorBackground#ffffff25
  • menubar.selectionForeground#F3F3F3
  • panelTitle.activeBorder#FFB3C1
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#858585
  • peekView.border#444
  • peekViewEditor.background#ffffff10
  • peekViewResult.background#ffffff10
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FFB3C1
  • quickInput.foreground#999999
  • quickInputList.focusBackground#1A1A1A
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4E4E4E
  • scrollbarSlider.background#eeffff20
  • selection.background#535353
  • settings.headerForeground#F3F3F3
  • settings.modifiedItemIndicator#FF8097
  • 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#DD2F4F
  • 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#B32942
  • 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#FF6A86
support.function#D495FF
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#77E751bold
strong, heading.2.markdown#FF8CC3bold
strong, heading.3.markdown#FFB05Bbold
strong, heading.4.markdown#77BBFFbold
strong, heading.5.markdown#FFE56Cbold
strong, heading.6.markdown#51E3E8bold
markup.italic.markdown#D495FFitalic
meta.link.inline.markdown#6CFF67underline
meta.paragraph.markdown#BBBBBB
string, markup.fenced_code, markup.inline#FC7CE7
comment, string.quoted.docstring.multi#838589
variable#E6E6E6
variable.language.this#D495FF
variable.language#FF9263
constant.character#FF6A86
constant.language, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#82B8FF
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#FBCF68
storage.modifier, storage.control.clojure, entity.name.function.clojure, support.function.node#D495FF
storage.modifier#FF6A86
support.class#D495FF
constant.character.format.placeholder#D495FF
keyword#FF6A86
storage.type#FF6A86
variable.parameter.function#FF9263
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#A6E567
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#82B8FF
support.variable#82B8FF
support.constant.property#D495FF
punctuation.definition.tag.begin.html, meta.tag.structure.html.end.html, text.html.derivative#DADADA
entity.name.tag#FF6A86
keyword.operator#FF6A86
meta.function-call.arguments#E6E6E6
variable.parameter#FF9263
meta.function-call#D495FF
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