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#6ABAFF
  • activityBar.inactiveForeground#626262
  • activityBarBadge.background#257FCE
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6ABAFF
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#B0B0B0
  • button.background#0075DC
  • button.hoverBackground#35A1FF
  • 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#A2A2A2
  • 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#202020
  • list.activeSelectionForeground#F3F3F3
  • list.focusBackground#2A2A2A
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#202020
  • 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#7FBFF7
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#858585
  • peekView.border#444
  • peekViewEditor.background#ffffff10
  • peekViewResult.background#ffffff10
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#A4D5FF
  • quickInput.foreground#999999
  • quickInputList.focusBackground#1A1A1A
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4E4E4E
  • scrollbarSlider.background#eeffff20
  • selection.background#535353
  • settings.headerForeground#F3F3F3
  • settings.modifiedItemIndicator#85C6FF
  • 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#257FCE
  • 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#1E6CB0
  • 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#FF8336
support.function#A3DC6B
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#FF8336bold
strong, heading.2.markdown#FF80D2bold
strong, heading.3.markdown#C49CFFbold
strong, heading.4.markdown#60F360bold
strong, heading.5.markdown#FF6A86bold
strong, heading.6.markdown#FFDC42bold
markup.italic.markdown#D495FFitalic
meta.link.inline.markdown#6CFF67underline
meta.paragraph.markdown#82B8FF
string, markup.fenced_code, markup.inline#FF8336
comment, string.quoted.docstring.multi#838589
variable#E6E6E6
variable.language.this#6ABAFF
variable.language#FF6A86
constant.character#6ABAFF
constant.language, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#32F1FF
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#6ABAFF
storage.modifier#FF6A86
support.class#6ABAFF
constant.character.format.placeholder#D495FF
keyword, keyword.operator, storage.type#FF6A86
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, constant.keyword.clojure#6ABAFF
entity.name.function#A7E964
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#D495FF
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#FF6A86
meta.function-call.arguments#E6E6E6
variable.parameter#FF9661
meta.function-call#6ABAFF
source.python#E6E6E6
markup.underline.link#60F360
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.metadata.markdown#5FAAFF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#79B8FF