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—
emphasis—italic
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—
ThemeDatabase All Themes by enes ozturk - VS Code Theme