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#0D0D0D
  • activityBar.foreground#EADBCF
  • activityBar.inactiveForeground#6B6B7F
  • activityBarBadge.background#C75D4E
  • activityBarBadge.foreground#0D0D0D
  • breadcrumb.activeSelectionForeground#FBC154
  • breadcrumb.focusForeground#EADBCF
  • breadcrumb.foreground#8A8AA1
  • breadcrumbPicker.background#1A1A1ACC
  • button.background#C75D4E
  • button.foreground#0D0D0D
  • button.hoverBackground#E88E5A
  • diffEditor.insertedTextBackground#A7C4841A
  • diffEditor.removedTextBackground#C75D4E1A
  • editor.background#0D0D0D
  • editor.findMatchBackground#E88E5A55
  • editor.findMatchHighlightBackground#E88E5A33
  • editor.foreground#EADBCF
  • editor.hoverHighlightBackground#8A8AA122
  • editor.inactiveSelectionBackground#8A8AA11A
  • editor.lineHighlightBackground#1A1A1A
  • editor.lineHighlightBorder#6B6B7F33
  • editor.selectionBackground#8A8AA133
  • editor.selectionHighlightBackground#FBC1542A
  • editor.wordHighlightBackground#8A8AA122
  • editor.wordHighlightStrongBackground#A7C48422
  • editorCodeLens.foreground#6B6B7F
  • editorCursor.foreground#FBC154
  • editorHoverWidget.background#1A1A1ACC
  • editorIndentGuide.activeBackground1#8A8AA177
  • editorIndentGuide.background1#6B6B7F33
  • editorLineNumber.activeForeground#8A8AA1
  • editorLineNumber.foreground#6B6B7F
  • editorRuler.foreground#6B6B7F33
  • editorSuggestWidget.background#1A1A1ACC
  • editorWhitespace.foreground#6B6B7F44
  • editorWidget.background#1A1A1ACC
  • editorWidget.border#EADBCF22
  • errorForeground#C75D4E
  • focusBorder#C75D4E88
  • foreground#EADBCF
  • gitDecoration.addedResourceForeground#A7C484
  • gitDecoration.conflictingResourceForeground#FBC154
  • gitDecoration.deletedResourceForeground#C75D4E
  • gitDecoration.modifiedResourceForeground#8A8AA1
  • gitDecoration.untrackedResourceForeground#E88E5A
  • input.background#1A1A1ACC
  • input.border#6B6B7F
  • input.placeholderForeground#6B6B7F
  • list.activeSelectionBackground#8A8AA133
  • list.activeSelectionForeground#FBC154
  • list.focusBackground#8A8AA133
  • list.highlightForeground#FBC154
  • list.hoverBackground#8A8AA11A
  • list.inactiveSelectionBackground#8A8AA122
  • notifications.background#1A1A1ACC
  • notifications.border#EADBCF22
  • panel.background#1A1A1A
  • panel.border#00000055
  • panelTitle.activeBorder#C75D4E
  • peekView.border#C75D4E
  • peekViewEditor.background#0D0D0D99
  • peekViewResult.background#1A1A1ACC
  • selection.background#8A8AA155
  • sideBar.background#1A1A1A
  • sideBar.border#00000055
  • sideBar.foreground#EADBCF
  • sideBarSectionHeader.background#0D0D0D
  • sideBarSectionHeader.foreground#EADBCF
  • sideBarTitle.foreground#FBC154
  • statusBar.background#0D0D0D
  • statusBar.debuggingBackground#C75D4E
  • statusBar.debuggingForeground#0D0D0D
  • statusBar.foreground#EADBCF
  • statusBar.noFolderBackground#0D0D0D
  • statusBarItem.remoteBackground#FBC154
  • statusBarItem.remoteForeground#0D0D0D
  • tab.activeBackground#1A1A1A
  • tab.activeBorderTop#C75D4E
  • tab.border#0D0D0D00
  • tab.inactiveBackground#0D0D0D
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#8A8AA1
  • terminal.ansiBrightBlack#6B6B7F
  • terminal.ansiBrightBlue#b39ddb
  • terminal.ansiBrightCyan#80cbc4
  • terminal.ansiBrightGreen#c5e1a5
  • terminal.ansiBrightMagenta#f06292
  • terminal.ansiBrightRed#e57373
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff176
  • terminal.ansiCyan#A7C484
  • terminal.ansiGreen#A7C484
  • terminal.ansiMagenta#C75D4E
  • terminal.ansiRed#C75D4E
  • terminal.ansiWhite#EADBCF
  • terminal.ansiYellow#FBC154
  • terminal.background#0D0D0D
  • terminal.foreground#EADBCF
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#EADBCF
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#6B6B7F
  • tree.indentGuidesStroke#6B6B7F
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#EADBCF
comment, punctuation.definition.comment#6B6B7Fitalic
string, punctuation.definition.string#C75D4E
string.template, punctuation.definition.template-string#C75D4E
constant.numeric, constant.language#E88E5A
constant.character, constant.other#E88E5A
keyword.control, keyword.operator.new#FBC154italic
storage.type, storage.modifier#8A8AA1italic
keyword.operator#6B6B7F
punctuation, meta.brace#6B6B7F
variable, meta.definition.variable#EADBCF
variable.other.readwrite#EADBCF
variable.parameter#EADBCFitalic
variable.other.property, variable.other.object.property#EADBCF
entity.name.function, support.function#A7C484
meta.function-call, entity.name.function.call#A7C484
entity.name.class, entity.name.type.class, support.class#8A8AA1bold
entity.other.inherited-class#8A8AA1italic bold
entity.name.type, support.type, entity.name.interface#8A8AA1
entity.name.namespace, entity.name.package#8A8AA1
support.class.component#8A8AA1bold
entity.name.tag#C75D4E
entity.other.attribute-name#E88E5Aitalic
meta.decorator, storage.type.annotation#FBC154italic
keyword.control.directive#6B6B7Fitalic
support.type.property-name#8A8AA1
support.type.vendor-prefix#6B6B7Fitalic
Code Glasses by Aadityaa - VS Code Theme