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#268bd2
  • activityBar.background#002c38
  • activityBar.foreground#93a1a1
  • badge.background#268bd2CC
  • badge.foreground#fdf6e3
  • button.background#268bd2CC
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#00212B
  • dropdown.background#001c24
  • dropdown.border#268bd2CC
  • editor.background#001920
  • editor.findMatchBackground#CB4B1640
  • editor.findMatchHighlightBackground#85990040
  • editor.foreground#bbbbbb
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#B5890040
  • editor.selectionHighlightBackground#586e7540
  • editor.wordHighlightBackground#004454AA
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorBracketHighlight.foreground1#cdcdcdff
  • editorBracketHighlight.foreground2#b58900ff
  • editorBracketHighlight.foreground3#d33682ff
  • editorCursor.background#eee8d5
  • editorCursor.foreground#DC322FCC
  • editorGroup.border#00212B
  • editorGroup.dropBackground#2AA19844
  • editorGroupHeader.tabsBackground#002f3d
  • editorHoverWidget.background#002f3d
  • editorIndentGuide.activeBackground#C3E1E140
  • editorIndentGuide.background#93A1A133
  • editorInlayHint.background#047aa699
  • editorInlayHint.foreground#ffffffcc
  • editorInlayHint.parameterBackground#047aa699
  • editorInlayHint.parameterForeground#ffffffcc
  • editorInlayHint.typeBackground#047aa699
  • editorInlayHint.typeForeground#ffffffcc
  • editorLineNumber.activeForeground#93a1a1
  • editorLineNumber.foreground#586e75
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#001c24
  • errorForeground#ffeaea
  • focusBorder#268bd2CC
  • input.background#002c38
  • input.foreground#93A1A1
  • input.placeholderForeground#93A1A1AA
  • inputOption.activeBorder#268bd2CC
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005A6F
  • list.dropBackground#00445488
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454AA
  • list.hoverForeground#BBBBBB
  • list.inactiveSelectionBackground#00445488
  • minimap.selectionHighlight#274642
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#001c24
  • peekViewTitle.background#001c24
  • pickerGroup.border#268bd2CC
  • pickerGroup.foreground#268bd2CC
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#047aa6
  • quickInput.foreground#839496
  • quickInputList.focusBackground#005A6F
  • selection.background#268bd259
  • sideBar.background#001c24
  • sideBar.foreground#839496
  • sideBarTitle.foreground#93A1A1
  • statusBar.background#2aa198
  • statusBar.debuggingBackground#859900
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#586e75
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.prominentBackground#002c38
  • statusBarItem.prominentHoverBackground#002c38
  • statusBarItem.remoteBackground#2aa198
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#001920
  • tab.activeForeground#d6dbdb
  • tab.border#003847
  • tab.inactiveBackground#002f3d
  • tab.inactiveForeground#93A1A1
  • tab.lastPinnedBorder#2AA19844
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.foreground#839496
  • titleBar.activeBackground#001c24

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#839496—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496—
comment#586E75italic
string#2AA198—
string.regexp#DC322F—
constant.numeric#D33682—
variable.language, variable.other#268BD2—
keyword#859900—
storage#93A1A1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
entity.name.function#268BD2—
punctuation.definition.variable#859900—
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F—
constant.language, meta.preprocessor#B58900—
support.function.construct, keyword.other.new#CB4B16—
constant.character, constant.other#CB4B16—
entity.other.inherited-class, punctuation.separator.namespace.ruby#6C71C4—
variable.parameter——
entity.name.tag#268BD2—
punctuation.definition.tag#586E75—
entity.other.attribute-name#93A1A1—
support.function#268BD2—
punctuation.separator.continuation#DC322F—
support.constant, support.variable——
support.type, support.class#859900—
support.type.exception#CB4B16—
support.other.variable——
invalid#DC322F—
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900—
markup.quote#859900—
markup.list#B58900—
markup.bold, markup.italic#D33682—
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2
source, text#93a1a1
comment.block.documentation storage.type.class, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, comment.block.documentation variable.other#657b83
comment.block.documentation variable.other#657b83bold italic
string constant.character.escape.backslash#6c71c4bold
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#cb4b16—
storage#93a1a1—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css#6c71c4—
storage.type.function.arrow#CB4B16—
string.regexp#DC322F—
punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.separator.continuation#CB4B16—
entity.other.inherited-class#6c71c4—
source.js meta.definition.variable variable.other, source.jsx meta.definition.variable variable.other, source.ts meta.definition.variable variable.other, source.tsx meta.definition.variable variable.other, source.java meta.definition.variable variable.other#268BD2—
source.js variable.other, source.jsx variable.other, source.ts variable.other, source.tsx variable.other, source.java variable.other#93A1A1—
variable.other.object.property, variable.other.property#93A1A1—
support.type.primitive#839496—
meta.import variable.other#93a1a1—
support.function.construct, keyword.other.new#CB4B16—
entity.name.class, entity.name.namespace, entity.name.scope-resolution#CB4B16—
entity.name.type#839496—
entity.other.attribute-name#b58900—
comment, storage.modifier, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, storage.type.scala, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, variable.other.field, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export, source.vue meta.directive punctuation.separator.key-value, keyword.local.lua, markup.list, markup.mark.constrained markup.mark, markup.block.open—italic
keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.function.python, storage.type.annotation, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.function.builtin.rust, storage.type.function.coffee, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, storage.type.objc, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, punctuation.separator.method, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby, keyword.function.go, keyword.other.fn.rust, markup.other.anchor, markup.list.bullet, markup.list punctuation.definition—bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, markup.quote punctuation.definition, markup.fenced_code punctuation.definition, fenced_code.block.language—bold italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, keyword.control.default, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, keyword.control.lua—