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.activeBorder#00000000
  • activityBar.background#E2E1E2
  • activityBar.border#DEDEDE
  • activityBar.foreground#0070F5
  • activityBar.inactiveForeground#636263
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#272727
  • breadcrumb.foreground#272727
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#ECF5FF
  • editor.selectionBackground#B2D7FF
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#000000
  • editorGroupHeader.border#E6E6E6
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorInlayHint.background#00000011
  • editorInlayHint.foreground#707F8C
  • editorLineNumber.activeForeground#232426
  • editorLineNumber.foreground#A6A6A6
  • editorSuggestWidget.foreground#3F3F3F
  • editorSuggestWidget.selectedForeground#FFFFFFCC
  • editorWhitespace.foreground#D6D6D6
  • editorWidget.background#E9E8E8
  • editorWidget.border#E6E6E6
  • focusBorder#8DB4FC
  • foreground#272727
  • input.background#FFFFFF
  • input.border#E6E6E6
  • input.placeholderForeground#C0C0C0
  • list.activeSelectionBackground#59A2FF
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#000000
  • list.hoverBackground#00000000
  • panel.background#EEEEEE
  • panel.border#DEDEDE
  • quickInput.foreground#3F3F3F
  • quickInputList.focusForeground#FFFFFFCC
  • scrollbar.shadow#00000000
  • selection.background#B3D7FF
  • sideBar.background#E2E1E2
  • sideBar.border#DEDEDE
  • sideBar.foreground#363636
  • statusBar.background#FFFFFF
  • statusBar.foreground#808080
  • tab.activeBackground#D2E7FF
  • tab.activeForeground#007AFF
  • tab.border#E6E6E6
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#272727
  • tab.unfocusedActiveBackground#E8F3FF
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#000000
  • titleBar.activeBackground#F5F4F4
  • titleBar.activeForeground#4A4A4A
  • titleBar.border#DEDEDE
  • titleBar.inactiveBackground#E8E8E8
  • titleBar.inactiveForeground#A8A8A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707F8C
string, punctuation.definition.string, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#D12F1B
constant.numeric#272AD8
constant.other.placeholder, constant.character.escape#000000
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, keyword.operator.sizeof, storage, variable.language, constant.language#AD3DA4bold
keyword.control.directive, punctuation.definition.directive#78492A
entity.name.type.class.php#02638C
variable.parameter#057CB0
entity.name.type, entity.other.inherited-class, storage.type.haskell#23575C
support.class, entity.other.inherited-class.php#4B21B0
keyword.type.cs, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go#4B21B0
entity.name.function, support.function#3E8087
support.function#804FB8
constant.other#804FB8
variable.other.property, variable.other.object.property, entity.name.variable.field#3E8087
entity.name.function.preprocessor#78492A
entity.name.tag#4B21B0
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css#804FB8
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit#272AD8
support.constant.property-value, support.constant.font-name#AD3DA4bold
support.constant.media.css#3E8087
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc#3E8087
markup.headingbold
markup.boldbold
markup.italicitalic
magit.header#4B21B0
magit.subheader#804FB8
magit.entity#272AD8
meta.diff.range.unified, punctuation.definition.range.diff#707F8C
markup.inserted, punctuation.definition.inserted#3E8087
markup.deleted, punctuation.definition.deleted#D12F1B
variable#000000
keyword.operator, storage.modifier.pointer#000000

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Xcode Theme - Coding Theme