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#2B2D30
  • activityBar.border#181a1f
  • activityBar.foreground#DFE1E5
  • activityBar.inactiveForeground#9b9ea3
  • activityBarBadge.background#A3C1AD
  • activityBarBadge.foreground#2B2D30
  • badge.background#2B2D30
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • commandCenter.background#2B2D30
  • dart.closingLabels#7A7E85
  • debugToolBar.background#1e2227
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1e2227
  • dropdown.border#1e2227
  • editor.background#1E1F22
  • editor.findMatchBackground#2D543F
  • editor.findMatchBorder#2D543F
  • editor.findMatchHighlightBackground#2D543F
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#BCBEC4
  • editorBracketHighlight.foreground2#BCBEC4
  • editorBracketHighlight.foreground3#BCBEC4
  • editorBracketHighlight.foreground4#BCBEC4
  • editorBracketHighlight.foreground5#BCBEC4
  • editorBracketHighlight.foreground6#BCBEC4
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#ecdf24
  • editorError.foreground#c24038
  • editorGroup.border#1E1F22
  • editorGroupHeader.tabsBackground#1E1F22
  • editorGroupHeader.tabsBorder#1E1F22
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#4083C9
  • editorHoverWidget.background#2B2D30
  • editorHoverWidget.border#666870
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.activeBackground1#666870
  • editorIndentGuide.activeBackground2#666870
  • editorIndentGuide.activeBackground3#666870
  • editorIndentGuide.activeBackground4#666870
  • editorIndentGuide.activeBackground5#666870
  • editorIndentGuide.activeBackground6#666870
  • editorIndentGuide.background#3b4048
  • editorIndentGuide.background1#313438
  • editorIndentGuide.background2#313438
  • editorIndentGuide.background3#313438
  • editorIndentGuide.background4#313438
  • editorIndentGuide.background5#313438
  • editorIndentGuide.background6#313438
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#313438
  • editorMarkerNavigation.background#1e2227
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1e2227
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#1e2227
  • focusBorder#3e4452
  • gitDecoration.addedResourceForeground#6AAB73
  • gitDecoration.ignoredResourceForeground#636b78
  • gitDecoration.modifiedResourceForeground#56A8F5
  • input.background#1d1f23
  • input.foreground#abb2bf
  • list.activeSelectionBackground#2E4A87
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.inactiveSelectionBackground#95959547
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.background#2B2D30
  • menu.border#666870
  • menu.foreground#cbcdd1
  • menu.separatorBackground#666870
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#4083C9
  • panel.border#3e4452
  • panelSectionHeader.background#1e2227
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • quickInput.background#2B2D30
  • quickInput.border#666870
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#23272e
  • settings.headerForeground#fff
  • sideBar.background#2B2D30
  • sideBar.foreground#cbcdd1
  • sideBarSectionHeader.background#2B2D30
  • sideBarSectionHeader.border#181a1f
  • sideBarSectionHeader.foreground#cbcdd1
  • statusBar.background#2B2D30
  • statusBar.border#181a1f
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1e2227
  • statusBarItem.remoteBackground#2B2D30
  • statusBarItem.remoteForeground#9da5b4
  • tab.activeBackground#1E1F22
  • tab.activeBorder#4083C9
  • tab.activeForeground#BCBEC4
  • tab.hoverBackground#1E1F22
  • tab.hoverForeground#DFE1E5
  • tab.inactiveBackground#1E1F22
  • tab.inactiveForeground#BCBEC4
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d18f52
  • terminal.background#23272e
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#2B2D30
  • titleBar.activeForeground#9da5b4
  • titleBar.border#181a1f
  • titleBar.inactiveBackground#2B2D30
  • titleBar.inactiveForeground#9da5b4
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#666870

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.php, constant.other.class.php, entity.other.attribute-name.namespace.xml, variable.language.special.self.python, constant.language.python, constant.other.caps.python, variable.other.constant.property.ts, punctuation.definition.constant.elixir, constant.language.symbol.elixir, variable.other.constant.go, constant.language.boolean.true.ts, constant.language.elixir, constant.language.c#C77DBBitalic
variable.object.property.ts#C77DBB—
punctuation.support.type.property-name.begin.json, support.type.property-name.json, punctuation.support.type.property-name.end.json#C77DBB—
keyword, keyword.control, keyword.other.type.php, storage.type.function.php, storage.modifier.php, constant.language.php, storage.type.class.php, storage.modifier.implements.php, punctuation.section.embedded.begin.php, storage.type.php, keyword.other.new.php, keyword.other.use.php, keyword.other.namespace.php, storage.modifier.final.php, storage.modifier.extends.php, keyword.other.class.php, keyword.other.use-as.php, storage.type.interface.php, keyword.other.clone.php, keyword.operator.comparison.php, entity.name.tag.yaml, variable.language.dart, storage.modifier.dart, storage.type.class.python, storage.type.function.python, constant.language.dart, storage.type.function.async.python, storage.type.tsx, storage.type.ts, storage.type.js, storage.type.class.ts, storage.type.class.js, variable.language.this.ts, variable.language.this.js, storage.modifier.async.ts, storage.modifier.async.js, storage.type.function.ts, storage.type.function.js, keyword.control.elixir, storage.modifier.ts, storage.modifier.js, storage.type.namespace.ts, storage.type.namespace.js, storage.type.built-in.primitive.c, variable.key.dotenv#CF8E6D—
variable.language.this.php, variable.other.php, punctuation.definition.variable.php#ae9cce—
entity.name.function.php, entity.name.function.python, entity.name.function.dart, entity.name.function.tsx, entity.name.function.go, entity.name.function.elixir, entity.name.function.js, entity.name.function.ts#56A8F5—
support.function.builtin.python, support.function.magic.python#56A8F5italic
meta.method-call.static.php—italic
string, punctuation.definition.string.begin.php, punctuation.definition.string.end.php, string.quoted.single.php, string.quoted.double.php#6AAB73—
comment.line.double-slash.php, punctuation.definition.comment.php, comment.block.documentation.phpdoc.php, comment.line.double-slash.dart, punctuation.definition.comment.xml, comment.block.xml, punctuation.definition.comment.yaml, comment.line.number-sign.yaml, comment.line.number-sign.python, punctuation.definition.comment.python, punctuation.definition.comment.tsx, comment.line.double-slash.tsx, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.block.documentation.dart, comment.line.double-slash.go, punctuation.definition.comment.go, punctuation.definition.comment.elixir, comment.line.number-sign.elixir, punctuation.definition.comment.c, comment.line.double-slash.c, punctuation.definition.comment.begin.c, punctuation.definition.comment.end.c, comment.block.c, comment.line.dotenv, comment.line.number-sign.dockerfile, punctuation.definition.comment.dockerfile#7A7E85—
variable.other, variable.parameter, variable.other.readwrite, variable.other.object, string.unquoted.plain.out.yaml#d5c5c8—
constant.numeric, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#2AACB8—
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.other.inherited-class, entity.name.type.enum, entity.name.type.parameter, punctuation.terminator.expression.php, support.other.namespace.php, punctuation.separator.inheritance.php, punctuation.separator.delimiter.php, keyword.operator.class.php, support.class.builtin.php, support.class.php, entity.name.function.php, keyword.operator.string.php, keyword.operator.ternary.php, support.constant.core.php, variable.other.property.php, keyword.operator.arithmetic.elixir, keyword.operator.assignment.elixir, keyword.operator.comparison.elixir, string.unquoted.plain.out.yaml, variable.parameter.function.language.python, variable.parameter.function.language.special.self.python, variable.parameter.function-call.python, keyword.operator.closure.dart, keyword.operator.assignment.dart, keyword.operator.ternary.dart, keyword.operator.arithmetic.dart, keyword.operator.comparison.dart, keyword.operator.logical.dart, variable.other.readwrite.alias.tsx, variable.other.constant.tsx, storage.type.function.tsx, entity.other.attribute-name.tsx, keyword.operator.assignment.tsx, keyword.operator.type.annotation.tsx, keyword.operator.arithmetic.tsx, keyword.operator.spread.tsx, keyword.operator.logical.tsx, variable.other.property.tsx, variable.other.object.tsx, variable.other.object.tsx, variable.other.constant.ts, variable.other.constant.js, variable.other.readwrite.ts, variable.other.readwrite.js, variable.parameter.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.js, variable.other.object.ts, variable.other.object.js, variable.other.object.property.ts, variable.other.object.property.js, variable.parameter.go, variable.other.go, keyword.operator.arithmetic.go, keyword.operator.assignment.go, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.js, variable.parameter.ts, variable.parameter.js, variable.other.property.ts, variable.other.property.js, keyword.operator.assignment.ts, keyword.operator.assignment.js, keyword.operator.type.ts, keyword.operator.type.js, keyword.operator.comparison.ts, keyword.operator.comparison.js, keyword.operator.logical.ts, keyword.operator.logical.js, variable.other.assignment.go, keyword.operator.comparison.go, variable.other.property.go, keyword.operator.address.go, variable.other.readwrite.elixir, keyword.operator.logical.elixir, keyword.operator.assignment.c, keyword.operator.c, variable.parameter.probably.c, keyword.operator.assignment.dotenv#BCBEC4—
storage.type.annotation, storage.type.annotation.dart, meta.declaration.annotation, meta.declaration.annotation.dart, keyword.other.phpdoc.php, punctuation.definition.variable.elixir, variable.other.readwrite.module.elixir, punctuation.definition.decorator.python, support.type.python, punctuation.separator.period.python, entity.name.function.decorator.python, entity.other.attribute-name.tsx, entity.name.type.package.go, punctuation.decorator.ts, entity.name.function.ts, entity.name.function.support.go, variable.other.readwrite.module.elixir, variable.other.constant.elixir#B3AE60—
entity.name.function.dart, entity.name.function.c#56A8F5—
meta.embedded.expression.dart#BCBEC4italic
punctuation.definition.tag.xml, entity.name.tag.localname.xml#D5B778—
support.class.component.tsx#c0caf5—
storage.type.string.go, storage.type.numeric.go, entity.name.function.support.builtin.go, constant.language.null.go#CC7832—
entity.name.type.go#6FAFBD—
comment.documentation.heredoc.elixir#5F826B—
entity.name.function-call.elixir, entity.name.function.call.local.elixir, entity.name.function.call.dot.elixir#6FAFBDitalic
keyword.operator.other.elixir#8a4ae0—
entity.other.attribute-name.html, entity.other.attribute-name.svelte#d19a66—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte#F75464—
entity.name.tag.svelte, entity.name.tag.html#2AACB8—
jetbrains_like_theme by Douglas Liebl - VS Code Theme