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.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
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.openitalic
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.definitionbold
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.languagebold 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
Harmonized by wheredoesyourmindgo - VS Code Theme