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#2C2C2E
  • activityBar.foreground#EBEBF5
  • activityBar.inactiveForeground#8E8E93
  • activityBarBadge.background#0A84FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#48484A
  • badge.foreground#EBEBF5
  • button.background#0A84FF
  • button.foreground#FFFFFF
  • button.hoverBackground#409CFF
  • dropdown.background#2C2C2E
  • dropdown.border#48484A
  • dropdown.foreground#EBEBF5
  • editor.background#2D2D30
  • editor.foreground#D0D0D0
  • editor.inactiveSelectionBackground#FFFFFF38
  • editor.lineHighlightBackground#3A3A3C55
  • editor.selectionBackground#87adff45
  • editorBracketMatch.background#3A3A3C
  • editorBracketMatch.border#6BB2CC
  • editorCursor.foreground#EBEBF5
  • editorError.foreground#FF453A
  • editorGutter.addedBackground#30D158
  • editorGutter.background#2D2D30
  • editorGutter.deletedBackground#FF453A
  • editorGutter.modifiedBackground#0A84FF
  • editorIndentGuide.activeBackground#636366
  • editorIndentGuide.background#3A3A3C
  • editorInfo.foreground#0A84FF
  • editorLineNumber.activeForeground#AEAEB2
  • editorLineNumber.foreground#636366
  • editorSuggestWidget.background#2C2C2E
  • editorSuggestWidget.border#48484A
  • editorSuggestWidget.selectedBackground#3A3A3C
  • editorWarning.foreground#FFD60A
  • editorWhitespace.foreground#48484A
  • editorWidget.background#2C2C2E
  • editorWidget.border#48484A
  • focusBorder#0A84FF
  • input.background#2C2C2E
  • input.border#48484A
  • input.foreground#EBEBF5
  • inputOption.activeBorder#0A84FF
  • list.activeSelectionBackground#3A3A3C
  • list.activeSelectionForeground#EBEBF5
  • list.hoverBackground#2C2C2E
  • list.inactiveSelectionBackground#2C2C2E
  • menu.background#2C2C2E
  • menu.foreground#EBEBF5
  • menu.selectionBackground#3A3A3C
  • menubar.selectionBackground#3A3A3C
  • minimap.background#2D2D30
  • notificationCenter.border#48484A
  • notifications.background#2C2C2E
  • notifications.border#48484A
  • notificationToast.border#48484A
  • panel.background#2D2D30
  • panel.border#48484A
  • panelTitle.activeBorder#0A84FF
  • panelTitle.activeForeground#EBEBF5
  • panelTitle.inactiveForeground#8E8E93
  • peekView.border#48484A
  • peekViewEditor.background#2D2D30
  • peekViewResult.background#2C2C2E
  • peekViewTitle.background#2C2C2E
  • progressBar.background#0A84FF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#636366AA
  • scrollbarSlider.background#48484A66
  • scrollbarSlider.hoverBackground#63636688
  • sideBar.background#1d1d1d
  • sideBar.foreground#EBEBF5
  • sideBarSectionHeader.background#1d1d1d
  • sideBarSectionHeader.foreground#8E8E93
  • sideBarTitle.foreground#AEAEB2
  • statusBar.background#2C2C2E
  • statusBar.debuggingBackground#EF8876
  • statusBar.foreground#EBEBF5
  • statusBar.noFolderBackground#2C2C2E
  • statusBarItem.prominentBackground#3A3A3C
  • tab.activeBackground#2D2D30
  • tab.activeBorderTop#0A84FF
  • tab.activeForeground#EBEBF5
  • tab.border#3A3A3C
  • tab.inactiveBackground#2C2C2E
  • tab.inactiveForeground#8E8E93
  • tab.unfocusedActiveBorderTop#636366
  • terminal.ansiBlack#2D2D30
  • terminal.ansiBlue#0A84FF
  • terminal.ansiBrightBlack#636366
  • terminal.ansiBrightBlue#6BB2CC
  • terminal.ansiBrightCyan#6BB2CC
  • terminal.ansiBrightGreen#32D74B
  • terminal.ansiBrightMagenta#FF9FCC
  • terminal.ansiBrightRed#FF6961
  • terminal.ansiBrightWhite#F5F5F7
  • terminal.ansiBrightYellow#FFD60A
  • terminal.ansiCyan#6BB2CC
  • terminal.ansiGreen#30D158
  • terminal.ansiMagenta#FF7AB2
  • terminal.ansiRed#FF453A
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#FFD60A
  • terminal.background#2D2D30
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#2C2C2E
  • titleBar.activeForeground#EBEBF5
  • titleBar.inactiveBackground#2C2C2E
  • titleBar.inactiveForeground#8E8E93
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#6C7986
comment.block.documentation, comment.line.documentation#6C7986
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#FF7AB2
keyword.operator, punctuation.accessor#D0D0D0
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#AEAEB2
punctuation.definition.preprocessor.swift, meta.preprocessor.conditional.swift#EF8876
string, string.quoted, string.template#EF8876
punctuation.definition.template-expression, punctuation.section.embedded, constant.character.escape, constant.other.placeholder#FFD60A
punctuation.section.embedded.begin.swift, punctuation.section.embedded.end.swift#EBEBF5
constant.numeric, constant.language, constant.character, support.constant#DACC88
entity.name.type, entity.name.class, entity.name.enum, entity.name.struct, entity.name.interface, entity.other.inherited-class, support.type, support.class#6BB2CC
entity.name.function, support.function, variable.function#6BB2CC
support.function.any-method.swift#AB84E5
support.function.availability-condition.swift#FF7AB2
meta.function-call.swift, meta.function-call#EBEBF5
variable, variable.parameter, variable.other#D0D0D0
variable.language#FF7AB2
entity.other.attribute-name, meta.attribute, storage.type.annotation, punctuation.definition.annotation#FF6482
invalid, invalid.illegal#FF453A
entity.name.tag, meta.tag.sgml#6BB2CC
text.html.basic entity.other.attribute-name, text.html entity.other.attribute-name, text.xml entity.other.attribute-name#EF8876
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#6BB2CC
support.type.property-name.json#6BB2CC
string.regexp#EF8876
markup.heading, markdown.heading#6BB2CC
markup.underline.link, string.other.link.title.markdown#0A84FF
markup.inserted, markup.inserted.git_gutter#30D158
markup.deleted, markup.deleted.git_gutter#FF453A
markup.changed, markup.changed.git_gutter#FFD60A
punctuation.definition.attribute.swift, storage.modifier.attribute.swift, storage.modifier.swift, storage.modifier.async.swift, storage.modifier.exception.swift, meta.attribute.swift#D4BBFA
support.type.swift, meta.definition.type.enum.swift, meta.type-name.swift, entity.other.inherited-class.swift, meta.inheritance-list.more-types, meta.inheritance-clause.swift#D4BBFA
meta.definition.type.protocol.swift#BFF6E9
punctuation.definition.string.begin.swift, punctuation.definition.string.end.swift, string.quoted.double.single-line.swift#EF8876
punctuation.definition.identifier.swift, variable.other.enummember.swift, meta.definition.type.body.swift, meta.definition.type.class.swift#8BE0FE
variable.parameter.function.swift, support.variable.parameter.swift#6BB2CC
entity.name.type.swift#8BE0FE
meta.import.swift#FFFFFF
punctuation.separator.parameters.swift, source.swift punctuation.separator#FFFFFF
punctuation.separator.key-value, punctuation.separator.key-value.swift, punctuation.separator.argument-label.swift, punctuation.separator.argument-label.begin.swift, punctuation.separator.inheritance-clause.swift, keyword.operator.ternary.swift#FFFFFF
meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.parameters.begin.swift, punctuation.definition.parameters.end.swift, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.arguments.begin.swift, punctuation.definition.arguments.end.swift, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.definition.type.begin.swift, punctuation.definition.type.end.swift, punctuation.definition.generic.begin, punctuation.definition.generic.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.section.scope.begin.swift, punctuation.section.scope.end.swift, punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.function.begin, punctuation.section.function.end, punctuation.section.function.begin.swift, punctuation.section.function.end.swift, punctuation.definition.precedencegroup.begin.swift, punctuation.definition.precedencegroup.end.swift, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#FFFFFF
meta.definition.type.body.swift punctuation.definition.arguments.begin.swift, meta.definition.type.body.swift punctuation.definition.arguments.end.swift, meta.definition.type.body.swift punctuation.section.scope.begin.swift, meta.definition.type.body.swift punctuation.section.scope.end.swift, meta.definition.type.body.swift punctuation.definition.type.begin.swift, meta.definition.type.body.swift punctuation.definition.type.end.swift, meta.definition.type.body.swift punctuation.definition.generic.begin.swift, meta.definition.type.body.swift punctuation.definition.generic.end.swift, meta.definition.type.class.swift punctuation.definition.arguments.begin.swift, meta.definition.type.class.swift punctuation.definition.arguments.end.swift, meta.definition.type.class.swift punctuation.section.scope.begin.swift, meta.definition.type.class.swift punctuation.section.scope.end.swift, meta.definition.type.class.swift punctuation.definition.type.begin.swift, meta.definition.type.class.swift punctuation.definition.type.end.swift, meta.definition.type.class.swift punctuation.definition.generic.begin.swift, meta.definition.type.class.swift punctuation.definition.generic.end.swift, meta.definition.type.enum.swift punctuation.definition.arguments.begin.swift, meta.definition.type.enum.swift punctuation.definition.arguments.end.swift, meta.definition.type.enum.swift punctuation.section.scope.begin.swift, meta.definition.type.enum.swift punctuation.section.scope.end.swift, meta.definition.type.enum.swift punctuation.definition.type.begin.swift, meta.definition.type.enum.swift punctuation.definition.type.end.swift, meta.definition.type.enum.swift punctuation.definition.generic.begin.swift, meta.definition.type.enum.swift punctuation.definition.generic.end.swift#FFFFFF
meta.subscript-expression.swift punctuation.definition.arguments.begin.swift, meta.subscript-expression.swift punctuation.definition.arguments.end.swift#FFFFFF
Xcode Color by Tanaka Mikihisa - VS Code Theme