Skip to main content
Coding Theme

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.activeBorder#66392a
  • activityBar.background#66392a
  • activityBarBadge.background#af6f9b
  • activityBarBadge.foreground#DCDCCC
  • badge.background#af6f9b
  • badge.foreground#DCDCCC
  • button.background#af6f9b
  • button.foreground#DCDCCC
  • debugExceptionWidget.background#ff9f2e60
  • debugExceptionWidget.border#ff9f2e60
  • dropdown.background#66392a
  • dropdown.border#dd95b960
  • dropdown.foreground#DCDCCC
  • editor.background#705050
  • editor.findMatchBackground#dd95b960
  • editor.findMatchHighlightBackground#c86c9a60
  • editor.findMatchHighlightBorder#DCDCCC
  • editor.foreground#DCDCCC
  • editor.lineHighlightBackground#c86c9a60
  • editor.selectionBackground#dd95b960
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#66392a
  • editorGroupHeader.noTabsBackground#66392a
  • editorGroupHeader.tabsBackground#66392a
  • editorHoverWidget.background#423848
  • editorHoverWidget.border#423848
  • editorLineNumber.foreground#DCDCCC
  • editorLink.activeForeground#DCA3A3
  • editorRuler.foreground#a8757b
  • editorSuggestWidget.background#372f3c
  • editorSuggestWidget.border#372f3c
  • editorSuggestWidget.selectedBackground#423848
  • editorWhitespace.foreground#a8757b
  • editorWidget.background#66392a
  • errorForeground#DCDCCC
  • focusBorder#af6f9b
  • foreground#DCDCCC
  • input.background#66392a
  • input.border#836060
  • input.foreground#DCDCCC
  • list.activeSelectionBackground#c86c9a60
  • list.activeSelectionForeground#DCDCCC
  • list.dropBackground#c86c9a60
  • list.focusBackground#dd95b960
  • list.hoverBackground#dd95b960
  • list.hoverForeground#DCDCCC
  • list.inactiveFocusBackground#dd95b960
  • list.inactiveSelectionBackground#c86c9a60
  • list.inactiveSelectionForeground#DCDCCC
  • notifications.background#66392a
  • panel.background#705150
  • peekView.border#c86c9a60
  • peekViewEditor.background#836060
  • peekViewEditor.matchHighlightBackground#ff9f2e60
  • peekViewResult.background#2a242d
  • peekViewResult.matchHighlightBackground#ff9f2e60
  • peekViewResult.selectionBackground#372f3c
  • peekViewTitle.background#66392a
  • peekViewTitleDescription.foreground#bcb3e7
  • pickerGroup.border#836060
  • pickerGroup.foreground#bcb3e7
  • scrollbar.shadow#836060
  • scrollbarSlider.activeBackground#66392acc
  • scrollbarSlider.background#66392a77
  • scrollbarSlider.hoverBackground#66392aaa
  • sideBar.background#836060
  • sideBar.border#66392a
  • sideBar.dropBackground#66392a
  • sideBar.foreground#DCDCCC
  • sideBarSectionHeader.background#705150
  • statusBar.background#8e76b8
  • statusBar.debuggingBackground#fd9f8f
  • statusBar.debuggingForeground#DCDCCC
  • statusBar.foreground#DCDCCC
  • statusBar.noFolderBackground#8e76b8
  • statusBar.noFolderForeground#DCDCCC
  • tab.activeBackground#705150
  • tab.border#66392a
  • tab.inactiveBackground#66392a
  • tab.inactiveForeground#DCDCCC
  • tab.unfocusedHoverBackground#a58f8f
  • terminal.ansiBrightBlack#8CD0D3
  • terminal.ansiGreen#afecad
  • terminal.ansiRed#fd9f8f
  • textLink.activeForeground#DCA3A3
  • textLink.foreground#DCA3A3
  • titleBar.activeBackground#66392a
  • titleBar.activeForeground#DCDCCC
  • titleBar.inactiveBackground#663737
  • titleBar.inactiveForeground#b9b9b9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#F0DFAF
string#F0DFAF
constant.numeric#60B48A
constant.language#60B48A
constant.character, constant.other#60B48A
variable
keyword#DCA3A3
storage#DCA3A3
storage.type#8CD0D3italic
entity.name.class#F0DFAFunderline
variable.language.this#D5C6F0
entity.other.inherited-class#F0DFAFitalic underline
entity.name.function#F0DFAF
variable.parameter#EC93D3italic
entity.name.tag#DCA3A3
entity.other.attribute-name#F0DFAF
support.function#8CD0D3
support.constant#8CD0D3
support.type, support.class#8CD0D3italic
support.other.variable
invalid#DCA3A3
invalid.deprecated#DFDFCB
meta.diff, meta.diff.header#F0DFAFitalic
markup.deleted#EC93D3
markup.changed#EC93D3
markup.inserted#60B48A
markup.quote#EC93D3
markup.bold#8CD0D3bold
markup.italic#8CD0D3italic
markup.inline.raw#F0DFAF
markup.heading.markdown#DDBB88bold
text.html.php punctuation.section.embedded.begin.php, text.html.php punctuation.section.embedded.end.php#D5C6F0
source.java storage.modifier.import, source.java storage.modifier.package#DDA0B4
source.java keyword.other.documentation.javadoc.java#9966B8
source.clojure meta.symbol#BEB0CC
source.clojure entity.global, source.clojure meta.definition.global#af6f9b
source.clojure constant.keyword#C19FD8
source.clojure meta.symbol meta.expression, source.clojure meta.vector#DF7E9F
source.python variable.language.special.self.python, source.python variable.language.special.cls.python#af6f9b
source.python string.quoted.docstring.multi.python#F0DFAF
source.python meta.function.python support.function.builtin.python#F0DFAF
source.python keyword.operator.logical.python, source.python keyword.operator.comparison.python#60B48A
source.python meta.function.decorator.python, source.python entity.name.function.decorator.python#8CD0D3italic
source.python meta.function.parameters.python, source.python keyword.operator.unpacking.parameter.python#8CD0D3italic
string.unquoted.plain.out.yaml#DEC0E2
string.quoted.double.yaml#8CD0D3
comment.line.number-sign.yaml#A186CF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#DCA3A3
token.debug-token#af6f9b
mauvey by nhuang131 - VS Code Theme