Skip to main content
CodingTheme

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#f78166
  • activityBar.background#141c24
  • activityBar.border#2e4052
  • activityBar.foreground#f0f4f7
  • activityBar.inactiveForeground#7d8590
  • activityBarBadge.background#3591ed
  • activityBarBadge.foreground#ffffff
  • badge.background#3591ed
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7d8590
  • breadcrumb.focusForeground#f0f4f7
  • breadcrumb.foreground#7d8590
  • breadcrumbPicker.background#1a242e
  • button.background#3591ed
  • button.foreground#ffffff
  • button.hoverBackground#56a3f0
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#2e4052
  • checkbox.background#1a242e
  • checkbox.border#2e4052
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#d29922
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#56d364
  • debugTokenExpression.error#ffa198
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#56d364
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#1a242e
  • descriptionForeground#7d8590
  • diffEditor.insertedLineBackground#23863626
  • diffEditor.insertedTextBackground#3fb9504d
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#ff7b724d
  • dropdown.background#1a242e
  • dropdown.border#2e4052
  • dropdown.foreground#f0f4f7
  • dropdown.listBackground#1a242e
  • editor.background#141c24
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#6e76811a
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#2f81f712
  • editor.selectionHighlightBackground#3fb95040
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketMatch.background#3fb95040
  • editorBracketMatch.border#3fb95099
  • editorCursor.foreground#2f81f7
  • editorGroup.border#2e4052
  • editorGroupHeader.tabsBackground#0f141a
  • editorGroupHeader.tabsBorder#2e4052
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#f0f4f73d
  • editorIndentGuide.background#f0f4f71f
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#f0f4f7
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#0f141a
  • editorWhitespace.foreground#484f58
  • editorWidget.background#1a242e
  • errorForeground#f85149
  • focusBorder#3591ed
  • foreground#f0f4f7
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7d8590
  • input.background#141c24
  • input.border#2e4052
  • input.foreground#f0f4f7
  • input.placeholderForeground#6e7681
  • keybindingLabel.foreground#f0f4f7
  • list.activeSelectionBackground#6e768166
  • list.activeSelectionForeground#f0f4f7
  • list.focusBackground#388bfd26
  • list.focusForeground#f0f4f7
  • list.highlightForeground#2f81f7
  • list.hoverBackground#6e76811a
  • list.hoverForeground#f0f4f7
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#6e768166
  • list.inactiveSelectionForeground#f0f4f7
  • minimapSlider.activeBackground#8b949e47
  • minimapSlider.background#8b949e33
  • minimapSlider.hoverBackground#8b949e3d
  • notificationCenterHeader.background#1a242e
  • notificationCenterHeader.foreground#7d8590
  • notifications.background#1a242e
  • notifications.border#2e4052
  • notifications.foreground#f0f4f7
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#2f81f7
  • notificationsWarningIcon.foreground#d29922
  • panel.background#0f141a
  • panel.border#2e4052
  • panelInput.border#2e4052
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#f0f4f7
  • panelTitle.inactiveForeground#7d8590
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#141c24
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#2e4052
  • pickerGroup.foreground#7d8590
  • progressBar.background#3591ed
  • quickInput.background#1a242e
  • quickInput.foreground#f0f4f7
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.headerForeground#f0f4f7
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#0f141a
  • sideBar.border#2e4052
  • sideBar.foreground#f0f4f7
  • sideBarSectionHeader.background#0f141a
  • sideBarSectionHeader.border#2e4052
  • sideBarSectionHeader.foreground#f0f4f7
  • sideBarTitle.foreground#f0f4f7
  • statusBar.background#141c24
  • statusBar.border#2e4052
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#3591ed80
  • statusBar.foreground#7d8590
  • statusBar.noFolderBackground#141c24
  • statusBarItem.activeBackground#f0f4f71f
  • statusBarItem.focusBorder#3591ed
  • statusBarItem.hoverBackground#f0f4f714
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#2e4052
  • statusBarItem.remoteForeground#f0f4f7
  • symbolIcon.arrayForeground#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
  • symbolIcon.constructorForeground#d2a8ff
  • symbolIcon.enumeratorForeground#f0883e
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#f0883e
  • symbolIcon.fileForeground#d29922
  • symbolIcon.folderForeground#d29922
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#3fb950
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#141c24
  • tab.activeBorder#141c24
  • tab.activeBorderTop#f78166
  • tab.activeForeground#f0f4f7
  • tab.border#2e4052
  • tab.hoverBackground#141c24
  • tab.inactiveBackground#0f141a
  • tab.inactiveForeground#7d8590
  • tab.unfocusedActiveBorder#141c24
  • tab.unfocusedActiveBorderTop#2e4052
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#f0f4f7
  • textBlockQuote.background#0f141a
  • textBlockQuote.border#2e4052
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#2f81f7
  • textLink.foreground#2f81f7
  • textPreformat.foreground#7d8590
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#141c24
  • titleBar.activeForeground#7d8590
  • titleBar.border#2e4052
  • titleBar.inactiveBackground#0f141a
  • titleBar.inactiveForeground#7d8590
  • tree.indentGuidesStroke#21262d
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#2e4052

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a8c9ff
markup.deleted.diff#ff7c79
markup.inserted.diff#cbec78
#dde6f3
comment#95aeae
string#f8cc8f
string.quoted, variable.other.readwrite.js#f8cc8f
support.constant.math#cbec78
constant.numeric, constant.character.numeric#ff9b54
constant.language, punctuation.definition.constant, variable.other.constant#82b8ff
constant.character, constant.other#82b8ff
constant.character.escape#ff9b54
string.regexp, string.regexp keyword.other#52b3ff
meta.function punctuation.separator.comma#8dadc8
variable#cbec78
punctuation.accessor, keyword#da97ff
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#da97ff
storage.type#da97ff
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffd68d
entity.other.inherited-class#cbec78
entity.name.function#da97ff
punctuation.definition.tag, meta.tag#7fe5d2
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#caece6
entity.other.attribute-name#cbec78
entity.name.tag.custom#ff9b54
support.function, support.constant#82b8ff
support.constant.meta.property-value#7fe5d2
support.type, support.class#cbec78
support.variable.dom#cbec78
invalid#e5e5e5
invalid.deprecated#e5e5e5
keyword.operator#7fe5d2
keyword.operator.relational#da97ff
keyword.operator.assignment#da97ff
keyword.operator.arithmetic#da97ff
keyword.operator.bitwise#da97ff
keyword.operator.increment#da97ff
keyword.operator.ternary#da97ff
comment.line.double-slash#95aeae
object#cbe9f5
constant.language.null#ff7189
meta.brace#dde6f3
meta.delimiter.period#da97ff
punctuation.definition.string#d1ebd5
punctuation.definition.string.begin.markdown#ff7189
constant.language.boolean#ff7189
object.comma#e5e5e5
variable.parameter.function#7fe5d2
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80d5cd
meta.property-list entity.name.tag.reference#53f2fb
constant.other.color.rgb-value punctuation.definition.constant#ff9b54
constant.other.color#f8e694
keyword.other.unit#f8e694
meta.selector#da97ff
entity.other.attribute-name.id#ffdd27
meta.property-name#80d5cd
entity.name.tag.doctype, meta.tag.sgml.doctype#da97ff
punctuation.definition.parameters#d1ebd5
keyword.control.operator#7fe5d2
keyword.operator.logical#da97ff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#bdf0e7
variable.other.object.property#ede79c
variable.other.object.js
entity.name.function#82b8ff
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, 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.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#da97ff
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#da97ff
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7fe5d2
support.function#cbec78
invalid.broken#0db4ff
invalid.unimplemented#e5e5e5
invalid.illegal#e5e5e5
variable.language#7fe5d2
support.variable.property#7fe5d2
variable.function#82b8ff
variable.interpolation#ff7981
meta.function-call#82b8ff
punctuation.section.embedded#ff8481
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#dde6f3
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d1ebd5
string.template meta.template.expression#ff8481
string.template punctuation.definition.string#dde6f3
italic#da97ff
bold#cbec78bold
quote#a3a8cd
raw#80d5cd
variable.assignment.coffee#29ebf6
variable.parameter.function.coffee#dde6f3
variable.assignment.coffee#7fe5d2
variable.other.readwrite.cs#dde6f3
entity.name.type.class.cs, storage.type.cs#ffd68d
entity.name.type.namespace.cs#b8d5e0
string.unquoted.preprocessor.message.cs#dde6f3
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffd68dbold
variable.other.object.cs#b8d5e0
entity.name.type.enum.cs#cbec78
string.interpolated.single.dart, string.interpolated.double.dart#ffd68d
support.class.dart#ffd68d
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff7272
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7fe5d2
keyword.other.unit.css#f8e694
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#ff9b54
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82b8ff
source.elixir entity.name.function#cbec78
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82b8ff
source.elixir punctuation.definition.string#cbec78
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#cbec78
source.elixir .punctuation.binary.elixir#da97ff
constant.keyword.clojure#7fe5d2
source.go meta.function-call.go#e5e5e5
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#da97ff
source.go constant.language.go, source.go constant.other.placeholder.go#ff7189
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fe5d2
meta.namespace-block.cpp#e8e6cc
storage.type.language.primitive.cpp#ff7189
meta.preprocessor.macro.cpp#dde6f3
variable.parameter#ffd68d
variable.other.readwrite.powershell#82b8ff
support.function.powershell#7fe5d2
entity.other.attribute-name.id.html#cbec78
punctuation.definition.tag.html#68f1f9
meta.tag.sgml.doctype.html#da97ff
meta.class entity.name.type.class.js#ffd68d
meta.method.declaration storage.type.js#82b8ff
terminator.js#dde6f3
meta.js punctuation.definition.js#dde6f3
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#8dadc8
variable.other.jsdoc, variable.other.phpdoc#78d6fe
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#dde6f3
variable.parameter.function.js#96a4ff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#dde6f3
variable.js, variable.other.js#dde6f3
entity.name.type.js, entity.name.type.module.js#ffd68d
support.class.js#dde6f3
support.type.property-name.json#7fe5d2
support.constant.json#cbec78
meta.structure.dictionary.value.json string.quoted.double#dd8bf2
string.quoted.double.json punctuation.definition.string.json#80d5cd
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff7189
variable.other.object.js#7fe5d2
variable.other.ruby#dde6f3
entity.name.type.class.ruby#f8cc8f
constant.language.symbol.hashkey.ruby#7fe5d2
constant.language.symbol.ruby#7fe5d2
entity.name.tag.less#7fe5d2
keyword.other.unit.css#f8e694
meta.attribute-selector.less entity.other.attribute-name.attribute#ff9b54
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82bfff
markup.italic.markdown#da97ff
markup.bold.markdown#cbec78bold
markup.quote.markdown#a3a8cd
markup.inline.raw.markdown#80d5cd
markup.underline.link.markdown, markup.underline.link.image.markdown#ff92cc
string.other.link.title.markdown, string.other.link.description.markdown#dde6f3
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82bfff
punctuation.definition.metadata.markdown#7fe5d2
beginning.punctuation.definition.list.markdown#82bfff
markup.inline.raw.string.markdown#cbec78
variable.other.php, variable.other.property.php#c6cdde
support.class.php#ffd68d
meta.function-call.php punctuation#dde6f3
variable.other.global.php#cbec78
variable.other.global.php punctuation.definition.variable#cbec78
constant.language.python#ff7189
variable.parameter.function.python, meta.function-call.arguments.python#82b8ff
meta.function-call.python, meta.function-call.generic.python#b8d5e0
punctuation.python#dde6f3
entity.name.function.decorator.python#cbec78
source.python variable.language.special#92b6f9
keyword.control#da97ff
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#cbec78
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82b8ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#c6cdde
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ff9b54
entity.name.tag.scss, entity.name.tag.sass#7fe5d2
keyword.other.unit.scss, keyword.other.unit.sass#f8e694
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#dde6f3
entity.name.type.ts, entity.name.type.tsx#ffd68d
support.class.node.ts, support.class.node.tsx#82b8ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#8dadc8
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#dde6f3
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82b8ff
meta.tag.js meta.jsx.children.tsx#82b8ff
entity.name.tag.yaml#7fe5d2
variable.other.readwrite.js, variable.parameter#dee3e8
support.class.component.js, support.class.component.tsx#ff9b54
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#dde6f3
meta.class entity.name.type.class.tsx#ffd68d
entity.name.type.tsx, entity.name.type.module.tsx#ffd68d
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#da97ff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82b8ff
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...