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