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.activeBorder#00c8ff
  • activityBar.activeFocusBorder#00c8ff
  • activityBar.background#00151d
  • activityBar.border#769ecc6c
  • activityBar.dropBorder#4EB3D0
  • activityBar.foreground#93c5fd
  • activityBar.inactiveForeground#769eccde
  • activityBarBadge.background#069b69
  • activityBarBadge.foreground#ffffff
  • badge.background#02212edc
  • badge.foreground#1399be
  • button.background#069b69
  • button.foreground#ffffff
  • button.secondaryBackground#94ffa2d8
  • checkbox.background#253352cb
  • checkbox.border#253352ab
  • checkbox.foreground#00c8ff
  • dart.closingLabels#5e7ca3e7
  • dart.flutterUiGuides#dcf7fcf3
  • debugToolBar.background#011627
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#c5e47833
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#02161f
  • editor.findMatchBackground#047857
  • editor.findMatchBorder#66969942
  • editor.findMatchHighlightBackground#1f293754
  • editor.foldBackground#29435c56
  • editor.foreground#9dc1ebec
  • editor.lineHighlightBackground#8cbbc421
  • editor.selectionBackground#3f83b4e5
  • editorCodeLens.foreground#7b9bc0a9
  • editorCursor.foreground#9dc0eb
  • editorGroup.border#769ecc6c
  • editorGroup.dropBackground#07025228
  • editorGroup.dropIntoPromptBackground#00121f
  • editorGroupHeader.tabsBackground#02212ea4
  • editorGutter.addedBackground#9CCC65
  • editorGutter.deletedBackground#EF5350
  • editorGutter.foldingControlForeground#86b9f3e7
  • editorGutter.modifiedBackground#e2b93d
  • editorIndentGuide.activeBackground1#19a4e080
  • editorIndentGuide.activeBackground2#306ef550
  • editorIndentGuide.background1#306ef56b
  • editorLightBulb.foreground#ffc400
  • editorLineNumber.activeForeground#86b9f3
  • editorLineNumber.dimmedForeground#86b9f3b4
  • editorLineNumber.foreground#86b9f383
  • editorRuler.foreground#ff910071
  • editorSuggestWidget.background#02212ef1
  • editorSuggestWidget.border#02212ef1
  • editorWarning.foreground#b39554
  • editorWidget.background#00121fe8
  • editorWidget.border#02212e
  • extensionButton.prominentBackground#301c52cc
  • extensionButton.prominentForeground#dcf7fc
  • extensionButton.prominentHoverBackground#c25757
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#c5e478ff
  • input.background#111827
  • list.hoverBackground#19569c5e
  • list.inactiveSelectionBackground#29435c
  • list.inactiveSelectionForeground#dcf7fc
  • notificationCenter.border#29435c
  • notificationLink.foreground#80CBC4
  • notifications.background#01111d
  • notifications.border#01111d
  • notifications.foreground#dcf7fc
  • notificationToast.border#29435c
  • peekView.border#2ab1e681
  • peekViewEditor.background#001425b4
  • peekViewResult.background#000C18
  • peekViewResult.fileForeground#b2cae6ee
  • peekViewResult.lineForeground#ffac5eb2
  • peekViewTitle.background#00151dcc
  • peekViewTitleDescription.foreground#dcf7fc7e
  • peekViewTitleLabel.foreground#dcf7fcd0
  • pickerGroup.border#011627
  • pickerGroup.foreground#d1aaff
  • scrollbarSlider.activeBackground#66969996
  • scrollbarSlider.background#66969940
  • scrollbarSlider.hoverBackground#66969970
  • search.resultsInfoForeground#fff
  • sideBar.background#01111de5
  • sideBar.border#66969922
  • sideBar.foreground#f8fafc
  • sideBarSectionHeader.background#111827
  • sideBarTitle.foreground#eef5fc
  • source.elm#5f7e97
  • statusBar.background#111827
  • statusBar.debuggingBackground#111827c7
  • statusBar.foreground#93c5fd
  • string.quoted.single.js#ffffff
  • tab.activeBackground#00151d
  • tab.hoverBackground#00151dcc
  • tab.inactiveBackground#001033
  • terminal.ansiBlack#011627
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#df4442
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#c5e478
  • terminal.border#193d66ea
  • terminal.hoverHighlightBackground#16335f4d
  • terminal.selectionBackground#1b8fdd7a
  • terminal.tab.activeBorder#0178ff
  • terminalCommandDecoration.errorBackground#ff3333
  • terminalCommandDecoration.successBackground#00ff62d7
  • terminalCursor.background#234d70
  • terminalCursor.foreground#f8fafc
  • textCodeBlock.background#817c7c
  • titleBar.activeBackground#01111de5
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • toolbar.hoverBackground#0371bb46
  • tree.indentGuidesStroke#66969942
  • walkThrough.embeddedEditorBackground#011627
  • welcomePage.progress.background#44494e
  • welcomePage.tileBackground#111827ef
  • welcomePage.tileBorder#111827ef
  • welcomePage.tileHoverBackground#1f2b44f1
  • widget.border#00141b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.inline-graphql#DD2266
entity.type.graphql#ff00ffe5
source.js.embedded.graphql#3366FF
string.quoted.graphql#DD2266
entity.type.graphql#00FF00
source.js.jsx, source.jsx, source.js#fd428aef
source.gitignore, source.ignore, support.type.primitive.graphql#fa6a31
comment.line.gitignore#3572A5
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#91b4ff
constant#ec82dae8
constant.language, punctuation.definition.constant, variable.other.constant#f87de4e0
constant.character, constant.other#ca69c5
string.quoted, variable.other.readwrite.js#08b140d0
support.constant.math#cbe785
keyword#bd5edade
string#08b140d0
string.regexp, string.regexp keyword.other#5492aa
comment, punctuation.definition.comment, punctuation.whitespace.comment.leading.graphql#6795a8d5italic
variable, string constant.other.placeholder, keyword.operation.graphql#fddf34fb
constant.other.color#7ca2c2dc
invalid, invalid.illegal#ff5370d8
keyword, storage.type, storage.modifier#ca8375
storage.type.function.arrow.js#ff3281
entity.other.inherited-class#ff8420c2 underline
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, source.graphql, support.type.sys-types#0099ffee
entity.name.class, meta.class entity.name.type.class#c7aa85
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5ee7ffde
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ec676dd0
entity.name.function, variable.function, support.function, function, Function#ff6b7fad
meta.function-call#be9259
keyword.other.special-method, meta.function-call#ff70e0ce
meta.block variable.other#f791e1ce
support.other.variable, string.other.link#971f61e3
constant.numeric, constant.numeric.float, constant.character.escape, constant.character#FD80A8
constant.language, support.constant, constant.escape, variable.parameter, keyword.other.unit, keyword.other.constant_function_argument#f7ce38
constant.numeric.tag_attribute, constant.language.tag_attribute, support.constant.tag_attribute, constant.character.tag_attribute, constant.escape.tag_attribute, variable.parameter.tag_attribute, keyword.other.unit.tag_attribute, keyword.other.tag_attribute#28c457
constant.numeric.number, constant.language.number, support.constant.number, constant.character.number, constant.escape.number, variable.parameter.number, keyword.other.unit.number, keyword.other.number#ca4492f1
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#23a54eea
text.plain#b2bbc5d5
entity.name.classunderline
keyword.operator#66d3bf
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.arithmetic#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
keyword.operator.ternary#c792ea
constant.language.null#ff5874ea
meta.delimiter.period#c792ea
punctuation.definition.string.begin.markdown#ff5874
constant.language.boolean#ff4f6c
object.comma#ffffff
support.type#4593b3
support.type.property-name#000000
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#51abff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ec3f59
variable.language#e05050d5italic
entity.name.method.js#965af7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#516ef1
entity.other.attribute-name#9bc735c7
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#daaa50c5italic
entity.other.attribute-name.class#daae5cd7
source.sass keyword.control#3c69cc
markup.inserted#9ac25e
markup.deleted#ff5c77
constant.character.escape#ee97ff
*url*, *link*, *uri*underline
support.function, support.constant#6998ff
support.constant.meta.property-value#7fdbca
support.type, support.class#c5e478
support.variable.dom#cfee7f
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2974ffe3italic
source.js constant.other.object.key.js string.unquoted.label.js#f47effdeitalic
keyword.control.conditional.js, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.comparison#fd7627f1
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#ff961dcb
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#cea089
support.function#aa78e4
variable.language#7fdbcaea
support.variable.property#7fdbcae8
variable.interpolation#ec5f67
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d6deeb
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#8544ff
italic#c792eaitalic
bold#c5e478bold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#d6deebe3
entity.name.type.class.cs, storage.type.cs#ffcb8b
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#d6deeb
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#c5e478
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff6363
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#c5e478
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#c5e478
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#c5e478
source.elixir .punctuation.binary.elixir#c792ea
constant.keyword.clojure#7fdbca
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#c792ea
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fdbcaff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#d6deeb
variable.parameter#ffcb8b
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7fdbcaff
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#93b5ff
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#7ea5c5
variable.other.jsdoc, variable.other.phpdoc#86d2f3
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#c3ddf1
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7cc9a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#db8970
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d36376e1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cf6a6fdc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c792eae7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#b6d8ff
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8ead5e
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#f78c6ceaunderline
markup.quote punctuation.definition.blockquote.markdown#8c9ca8
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#a097977e
punctuation.definition.fenced.markdown#b18e8e96
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#79bebe
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#81adca
variable.other.key.toml#fd5c1cec
source.toml#31b1e7c5
constant.language.boolean.toml#d62084cc
comment.line.number-sign.toml#19a4e080italic
comment.block.toml#1b8fdd7aitalic
entity.name.function.graphql, meta.arguments.graphql, keyword.operator.toml #ff7b00
source.js.embedded.graphql, variable.graphql#ff532dd5
variable.inline-graphql, constant.other.date.toml#3366FF
string.quoted.double.toml#00ff6a94
konsole Night by Enos lyznne - VS Code Theme