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#151514
  • activityBar.border#7C4DAB80
  • activityBar.foreground#82AAFF
  • activityBar.inactiveForeground#8B94B8
  • activityBarBadge.background#82AAFF
  • activityBarBadge.foreground#151514
  • badge.background#FF8DD9
  • badge.foreground#151514
  • breadcrumbs.activeSelectionForeground#82AAFF
  • breadcrumbs.focusForeground#FFFFFF
  • breadcrumbs.foreground#8B94B8
  • chat.requestBorder#393349
  • chat.slashCommandBackground#232322
  • chat.slashCommandForeground#FFFFFF
  • diffEditor.insertedTextBackground#52D98F22
  • diffEditor.removedTextBackground#C9949222
  • dropdown.background#141314
  • dropdown.border#7C4DAB80
  • dropdown.foreground#FFFFFF
  • editor.background#151514
  • editor.findMatchBackground#FFD70044
  • editor.findMatchHighlightBackground#FFD70022
  • editor.findRangeHighlightBackground#82AAFF22
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#82AAFF11
  • editor.lineHighlightBackground#232322
  • editor.lineHighlightBorder#393349
  • editor.rangeHighlightBackground#341d1da0
  • editor.selectionBackground#393349
  • editorBracketMatch.background#393349
  • editorBracketMatch.border#7F00FF
  • editorCodeLens.foreground#B5C3C4
  • editorError.foreground#C99492
  • editorGroup.border#7C4DAB80
  • editorGroupHeader.tabsBackground#141314
  • editorHoverWidget.background#141314
  • editorHoverWidget.border#7C4DAB80
  • editorHoverWidget.foreground#FFFFFF
  • editorInfo.foreground#82AAFF
  • editorOverviewRuler.currentContentForeground#52D98F80
  • editorOverviewRuler.errorForeground#C99492
  • editorOverviewRuler.incomingContentForeground#2990FF80
  • editorOverviewRuler.infoForeground#82AAFF
  • editorOverviewRuler.warningForeground#D9B38C
  • editorSuggestWidget.background#141314
  • editorSuggestWidget.border#7C4DAB80
  • editorSuggestWidget.foreground#FFFFFF
  • editorWarning.foreground#D9B38C
  • editorWidget.background#141314
  • editorWidget.border#7C4DAB80
  • editorWidget.foreground#FFFFFF
  • inlineChat.background#141314
  • inlineChat.border#393349
  • inlineChat.regionHighlight#232322
  • inlineChatInput.background#232322
  • inlineChatInput.border#7C4DAB80
  • inlineChatInput.foreground#FFFFFF
  • input.background#232322
  • input.border#7C4DAB80
  • input.foreground#FFFFFF
  • input.placeholderForeground#8B94B8
  • inputOption.activeBorder#82AAFF
  • inputValidation.errorBorder#FF8DD9
  • inputValidation.infoBorder#52D98F
  • inputValidation.warningBorder#FFD700
  • list.activeSelectionBackground#232322
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#393349
  • list.focusOutline#82AAFF
  • list.highlightForeground#FFCB6B
  • list.hoverBackground#393349
  • list.inactiveSelectionBackground#232322
  • list.inactiveSelectionForeground#8B94B8
  • merge.currentContentBackground#52D98F11
  • merge.currentHeaderBackground#52D98F33
  • merge.incomingContentBackground#2990FF11
  • merge.incomingHeaderBackground#2990FF33
  • notificationCenterHeader.background#232322
  • notificationLink.foreground#82AAFF
  • notifications.background#232322
  • notifications.border#B07CC3
  • notificationToast.background#232322
  • panel.background#141314
  • panel.border#7C4DAB80
  • panelTitle.activeBorder#7C4DAB80
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8B94B8
  • peekView.border#7C4DAB80
  • peekViewEditor.background#151514
  • peekViewResult.background#141314
  • peekViewResult.matchHighlightBackground#FFD70033
  • peekViewResult.selectionBackground#393349
  • peekViewResult.selectionForeground#151514
  • peekViewTitle.background#141314
  • peekViewTitleLabel.foreground#FFFFFF
  • progressBar.background#00FFD0
  • quickInput.background#141314
  • quickInput.border#7C4DAB80
  • quickInput.foreground#FFFFFF
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#393349CC
  • scrollbarSlider.background#39334980
  • scrollbarSlider.hoverBackground#393349B3
  • settings.dropdownBackground#141314
  • settings.dropdownBorder#7C4DAB80
  • settings.headerForeground#82AAFF
  • settings.modifiedItemIndicator#FF8DD9
  • settings.numberInputBackground#141314
  • settings.numberInputBorder#7C4DAB80
  • settings.textInputBackground#141314
  • settings.textInputBorder#7C4DAB80
  • sideBar.background#151514
  • sideBar.border#7C4DAB80
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#151514
  • statusBar.border#7C4DAB80
  • statusBar.debuggingBackground#232322
  • statusBar.debuggingForeground#FFDD29
  • statusBar.foreground#00FFD0
  • statusBar.noFolderBackground#151514
  • statusBar.noFolderForeground#00FFD0
  • statusBarItem.hoverBackground#393349
  • statusBarItem.remoteBackground#232322
  • statusBarItem.remoteForeground#00FFD0
  • statusBarItem.remoteHoverBackground#393349
  • tab.activeBackground#18171A
  • tab.activeBorder#82AAFF
  • tab.activeBorderBottom#82AAFF
  • tab.activeForeground#FFFFFF
  • tab.border#7C4DAB80
  • tab.hoverBackground#232022
  • tab.inactiveBackground#18171A
  • tab.inactiveForeground#8B94B8
  • tab.unfocusedActiveBackground#18171A
  • tab.unfocusedActiveBorderTop#7C4DAB80
  • terminal.ansiBlack#232322
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#8B94B8
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#00D0E6
  • terminal.ansiBrightGreen#52D98F
  • terminal.ansiBrightMagenta#B07CC3
  • terminal.ansiBrightRed#C99492
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00D0E6
  • terminal.ansiGreen#52D98F
  • terminal.ansiMagenta#B07CC3
  • terminal.ansiRed#C99492
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFD700
  • terminal.background#151514
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#393349
  • titleBar.activeBackground#151514
  • titleBar.inactiveBackground#151514
  • tree.indentGuidesStroke#393349
  • welcomePage.background#151514

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable, entity.name.variable#ffffff
comment, punctuation.definition.comment#5A826Bitalic
comment.block.documentation#B5C3C4
storage.type.class.jsdoc, variable.other.jsdoc, punctuation.definition.tag, keyword.other.phpdoc#82AAFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#00D0E6
string, punctuation.definition.string#52D98F
invalid, invalid.illegal, invalid.deprecated#C99492
comment.keyword, comment.keyword.todo, keyword.other.todo, meta.todo#FF8DD9bold
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#B07CC3
keyword.control.directive, entity.name.function.preprocessor#B07CC3
keyword.operator, punctuation, meta.brace, punctuation.terminator, punctuation.separator#00D0E6
punctuation.section.embedded.begin, punctuation.section.embedded.end#00D0E6
punctuation.accessor#ffffff
entity.name.function, support.function, meta.function-call.generic, entity.name.method, entity.name.function.member#82AAFF
variable.parameter, meta.function-call.arguments#C99492italic
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.type, support.class, storage.type.cs, storage.type.java#FFDD29
entity.name.namespace, entity.name.package, entity.name.module, entity.name.scope-resolution#FFDD29
entity.other.inherited-class#FFDD29italic
entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#FFDD29
entity.name.function.test, support.function.test, keyword.control.test#52D98F
constant.numeric, constant.language, constant.character.numeric, support.constant, variable.other.constant.clojure#D9B38C
constant.character.escape, string.regexp#00D0E6
support.type.property-name, entity.other.attribute-name, meta.object-literal.key, support.variable.property, variable.other.property, variable.other.object.property#C99492
meta.decorator, entity.name.decorator, storage.type.annotation, punctuation.definition.annotation, punctuation.definition.entity.css, keyword.control.directive#FF8DD9
variable.other.special.shell#D9B38C
constant.character.format.placeholder.other.python#00D0E6
constant.keyword.clojure#D9B38C
symbol.clojure, support.function.clojure, meta.symbol.clojure, variable.function.clojure, entity.name.function.clojure, support.function.special.clojure, entity.name.function.macro.clojure#82AAFF
entity.global.clojure, entity.name.namespace.clojure, support.namespace.clojure, meta.namespace.clojure#FFDD29
storage.control.clojure, support.function.special.clojure, keyword.control.clojure, keyword.other.special-method.clojure, meta.special.clojure, meta.special-form.clojure, meta.form.clojure, entity.name.function.macro.clojure, support.function.macro.clojure, meta.macro.clojure#FF8DD9
entity.name.variable.clojure, variable.parameter.clojure, meta.binding.name.clojure#C99492italic
meta.metadata.simple.clojure, meta.metadata.clojure, storage.modifier.metadata.clojure#FF8DD9italic
storage.type.go#FFDD29
support.macro.rust#FF8DD9
entity.name.lifetime.rust, storage.modifier.lifetime.rust#D9B38Citalic
support.type.property-name.css#82AAFF
support.constant.property-value.css#FFD700
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFDD29
keyword.other.unit#D9B38C
punctuation.terminator.rule.css, punctuation.separator.key-value.css#00D0E6
entity.name.tag.html#FFDD29
entity.other.attribute-name.html#C99492
string.quoted.double.html, string.quoted.single.html#52D98F
comment.block.html#5A826Bitalic
source.js.embedded, meta.embedded.block.js#FF8DD9
source.css.styled#FFD700
entity.name.type.graphql#FFDD29
meta.field.graphql#82AAFF
variable.parameter.graphql#C99492italic
string.quoted.double.graphql#52D98F
support.function.special.clojure, keyword.control.clojure, keyword.other.special-method.clojure, meta.special.clojure, meta.special-form.clojure, meta.form.clojure#FF8DD9
entity.name.function.macro.clojure, support.function.macro.clojure, meta.macro.clojure#B07CC3
variable.function.clojure, meta.symbol.clojure, symbol.clojure, support.function.clojure, entity.name.function.clojure#82AAFF
constant.keyword.clojure, constant.other.keyword.clojure#D9B38C
entity.name.namespace.clojure, support.namespace.clojure#FFDD29
meta.metadata.clojure, storage.modifier.metadata.clojure#FF8DD9
constant.language.reader.clojure#B07CC3
meta.symbol.clojure, symbol.clojure#82AAFF
string.quoted.double.clojure, string.quoted.single.clojure#52D98F
constant.numeric.clojure#D9B38C
constant.language.boolean.clojure, constant.language.nil.clojure#FFD700
variable.other.global.clojure#FFB86B
variable.other.local.clojure#FFFFFF
constant.character.clojure#52D98F
string.regexp.clojure#00D0E6
punctuation.section.list.begin.clojure, punctuation.section.list.end.clojure, punctuation.section.vector.begin.clojure, punctuation.section.vector.end.clojure, punctuation.section.map.begin.clojure, punctuation.section.map.end.clojure, punctuation.section.set.begin.clojure, punctuation.section.set.end.clojure#8B94B8
comment.line.semicolon.clojure#5A826Bitalic
storage.type.zig, entity.name.type.zig#FFDD29
entity.name.function.zig#82AAFF
entity.other.attribute-name.alpine#FF8DD9
support.type.flowtype#FFDD29
storage.type.c, storage.type.cpp, entity.name.type.class.cpp#FFDD29
entity.name.function.cpp, entity.name.function.c#82AAFF
entity.name.function.preprocessor, keyword.control.directive#B07CC3
comment.keyword.todo, comment.keyword.fixme#FFD700bold
comment.keyword.question#82AAFFitalic
comment.keyword.alert#FF8DD9bold
markup.coverage.covered#52D98F
markup.coverage.uncovered#C99492
markup.heading.markdown#FFDD29bold
markup.underline.link.markdown#82AAFFunderline
keyword.other.dockerfile#B07CC3
support.type.property-name.env#FFDD29
string.unquoted.env#52D98F
keyword.other.documentation.doxygen#B07CC3
support.type.property-name.editorconfig#FFDD29
markup.error#FF8DD9bold
markup.warning#FFD700bold
meta.eslint-rule#B07CC3
entity.name.function.go#82AAFF
invalid.illegal.gremlin#FF8DD9underline
meta.tag.match#FFDD29
meta.indent.rainbow#B07CC3
meta.intellicode.suggestion#8B94B8italic
entity.name.function.jest#FF8DD9
support.type.property-name.json#FFDD29
meta.magic.jupyter#B07CC3
support.type.property-name.yaml.kubernetes#FFDD29
entity.name.type.class.java#FFDD29
meta.annotation.lombok#FF8DD9
support.module.node#82AAFF
markup.info.output#52D98F
markup.warning.output#FFD700
markup.error.output#FF8DD9
support.path#82AAFF
meta.portal.data#FFDD29
meta.kernel.pycuda#B07CC3
meta.lint.ruff#FF8DD9
entity.name.type.class.ruby#FFDD29
support.macro.rust#FF8DD9
variable.other.shell#FFDD29
entity.name.tag.svelte#FFDD29
entity.other.attribute-name.svelte#C99492
meta.symbol.icon#FF8DD9
entity.class.tailwind#52D98F
keyword.other.todo#FFD700bold
entity.name.tag.xml#FFDD29
entity.other.attribute-name.xml#C99492
entity.name.tag.yaml#FFDD29
Something Theme by Monadica - VS Code Theme