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.background#353535
  • activityBar.foreground#cccccc
  • button.background#aaaaaa
  • button.foreground#111111
  • dropdown.background#1a1a1a
  • dropdown.border#101010
  • editor.background#1d1d1d
  • editor.findMatchBackground#444444
  • editor.findMatchHighlightBackground#333333
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#252525
  • editor.lineHighlightBorder#1d1d1d
  • editor.selectionBackground#3c3c3c
  • editor.selectionHighlightBackground#303030
  • editor.selectionHighlightBorder#1d1d1d
  • editorBracketMatch.background#3c3c3c
  • editorBracketMatch.border#3c3c3c
  • editorCursor.background#111111
  • editorCursor.foreground#cccccc
  • editorGroup.border#333333
  • editorGroup.dropBackground#333333aa
  • editorGroupHeader.tabsBackground#222222
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#444444
  • editorWhitespace.foreground#333333
  • focusBorder#222222
  • foreground#cccccc
  • panel.background#222222
  • panel.border#333333
  • panelTitle.activeBorder#cccccc
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#777777
  • sideBar.background#222222
  • sideBar.border#333333
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#353535
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#222222
  • statusBar.border#333333
  • statusBar.debuggingBackground#7777aa
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#aaaaaa
  • statusBar.noFolderForeground#111111
  • tab.activeBackground#333333
  • tab.activeBorder#cccccc
  • tab.activeForeground#cccccc
  • tab.hoverBackground#444444
  • tab.inactiveBackground#232323
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#66AA66
variable, entity.name.function, meta.function, meta.function-call, support.type.property-name#CCCCCC
keyword, keyword.control, keyword.other, storage.type, storage.modifier, support.type.sys-types, support.type.posix-reserved, support.type.stdint, constant.language, keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.new, punctuation.separator, support.variable.glsl#999999
string, constant.numeric#AAAADD
meta.preprocessor, meta.preprocessor.include, meta.preprocessor.macro, keyword.control.directive.conditional, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.undef, constant.character.escape.line-continuation, keyword.control.directive.pragma, meta.preprocessor.pragma, keyword.control.hlsl, markup.heading#7777AA
invalid#EE3322
meta.paragraph.markdown#CCCCCC
markup.bold#AAAAAAbold
markup.italic#AAAAAAitalic
markup.inline.raw, markup.raw#AAAADD
markup.list, beginning.punctuation.definition.list.markdown#AAAAAA
entity.name.type.class#BD7ACAunderline
keyword.control.flow.return#DAA7E6italic
storage.modifier, keyword.other.class#AF7EB9
entity.name.function, keyword.other.newitalic
entity.name.variable.parameter, variable.other.readwrite#8CBDD4italic
entity.name.variable, variable#E7E7E7
storage.typeitalic
keyword.type
variable.other.object.propertyitalic
comment#587055italic
punctuation.accessor#999999
string#CEB545
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.other.object#CCCCCC
variable.other.object.property
keyword.other.interface#AF7EB9
entity.name.type.class#AF7EB9
punctuation.definition.typeparameters#999999
support.type.property-name.json#999999
string.quoted#BEB384
punctuation.terminator.statement#999999
sotil by Behzad Hosseini - VS Code Theme