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#002b36
  • activityBar.border#003847
  • activityBarBadge.background#d33682
  • badge.background#d33682
  • badge.foreground#eee8d5
  • button.background#d33682
  • button.foreground#eee8d5
  • debugExceptionWidget.background#00212b
  • debugExceptionWidget.border#2aa198
  • debugToolBar.background#00212b
  • dropdown.background#00212b
  • dropdown.border#d33682
  • dropdown.foreground#839496
  • editor.background#002b36
  • editor.findMatchHighlightBorder#8196b54d
  • editor.foreground#839496
  • editor.lineHighlightBackground#ffffff10
  • editor.lineHighlightBorder#8196b520
  • editor.selectionBackground#93a1a145
  • editor.selectionHighlightBorder#8196b540
  • editor.wordHighlightBorder#8196b54d
  • editorCursor.foreground#d33682
  • editorGroup.border#00212b
  • editorGroup.dropBackground#2aa19844
  • editorGroupHeader.tabsBackground#00212b
  • editorGroupHeader.tabsBorder#003847
  • editorHoverWidget.background#004052
  • editorIndentGuide.background1#586e7534
  • editorInlayHint.background#003847
  • editorInlayHint.foreground#cdcdcf60
  • editorInlayHint.parameterBackground#003847
  • editorInlayHint.parameterForeground#cdcdcf60
  • editorInlayHint.typeBackground#003847
  • editorInlayHint.typeForeground#cdcdcf60
  • editorLineNumber.activeForeground#eee8d5
  • editorLineNumber.foreground#586e75
  • editorLink.activeForeground#d33682
  • editorMarkerNavigationError.background#d33682
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorRuler.foreground#ffffff25
  • editorWhitespace.foreground#586e7534
  • editorWidget.background#00212b
  • errorForeground#ffeaea
  • focusBorder#2aa19899
  • foreground#839496
  • git.blame.editorDecorationForeground#586e75
  • gitDecoration.conflictingResourceForeground#839496
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#586e75
  • gitDecoration.modifiedResourceForeground#859900
  • gitDecoration.untrackedResourceForeground#2aa198
  • input.background#003847
  • input.border#00212b
  • input.foreground#839496
  • input.placeholderForeground#93a1a1aa
  • inputOption.activeBackground#d33682
  • inputOption.activeBorder#d33682
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005a6f
  • list.activeSelectionForeground#839496
  • list.dropBackground#00445488
  • list.focusBackground#005a6f
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454aa
  • list.inactiveSelectionBackground#00445488
  • notifications.background#003847
  • notifications.foreground#839496
  • panel.border#00212b
  • panelTitle.activeBorder#d33682
  • peekView.border#2aa198ab
  • peekViewEditor.background#00212b
  • peekViewEditor.matchHighlightBackground#284b53
  • peekViewResult.background#002b36
  • peekViewTitle.background#002b36
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • progressBar.background#047aa6
  • scrollbarSlider.activeBackground#1ebcc5
  • scrollbarSlider.background#1ebcc530
  • scrollbarSlider.hoverBackground#1ebcc580
  • selection.background#2aa19899
  • sideBar.background#00212b
  • sideBar.border#003847
  • sideBarSectionHeader.background#002b36
  • sideBarSectionHeader.foreground#eee8d5
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#00212b
  • statusBar.border#003847
  • statusBar.debuggingBackground#00212b
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#00212b
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • tab.activeBackground#003847
  • tab.activeBorder#d33682
  • tab.activeForeground#eee8d5
  • tab.border#00384700
  • tab.hoverBackground#002b36
  • tab.hoverBorder#d33682
  • tab.inactiveBackground#00212b
  • tab.inactiveForeground#93a1a1
  • tab.unfocusedActiveBorder#dc322f50
  • tab.unfocusedHoverBackground#002b36
  • tab.unfocusedHoverBorder#d33682
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#073642
  • terminal.ansiBrightBlue#268bd2
  • terminal.ansiBrightCyan#268bd2
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#b58900
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.foreground#839496
  • titleBar.activeBackground#002b36
  • titleBar.activeForeground#eee8d5
  • titleBar.inactiveBackground#002b36
  • titleBar.inactiveForeground#b2b2b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#839496—
variable, variable.parameter, variable.legacy.builtin.python, variable.other, variable.other.property, entity.name.namespace, entity.other.attribute-name, meta.embedded, markup.list, source.groovy.embedded, string meta.image.inline.markdown, punctuation.definition.string, support.class.php, support.type.property-name.css, variable.other.readwrite.js, variable.other.object.js, variable.other.constant.js, keyword.operator.key-value.rust, keyword.operator.access.dot.rust, keyword.operator.namespace.rust, keyword.other.definition.ini, source.toml, support.type.property-name.toml#839496—
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text, constant.numeric.line-number.find-in-files, markup.quote, meta.documentation, meta.diff, meta.diff.header, punctuation.definition.tag#586e75—
string, string.regexp, string.quoted.double, string.quoted.single, keyword.control.label.latex, keyword.control.ref.latex, entity.name.filename.find-in-files, markup.changed, markup.inline.raw, punctuation.section.embedded.begin, punctuation.section.embedded.end, text.tex.latex constant.other.math.tex, text.tex.latex constant.other.general.math.tex, constant.other.general.math.tex, constant.other.general.math.tex, constant.character.math.tex, support.function.general.tex, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, markup.underline.link.markdown, meta.link.reference constant.other.reference.link.markdown, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, string.quoted.other.lt-gt.include.c, meta.preprocessor.c.include, punctuation.definition.string.begin.c, punctuation.definition.string.end.c#2aa198—
constant.numeric, constant.character, constant.language, constant.other, entity.other.inherited-class, constant.other.reference.link.markdown, punctuation.definition.list.begin.markdown, keyword.constant.bool.zig, keyword.constant.default.zig#6c71c4—
keyword, keyword.control, keyword.other.protobuf, variable.language, entity.name.tag.css, entity.name.tag.scss, markup.bold, markup.italic, source.less keyword.control.html.elements, source.sass keyword.control.untitled, meta.shebang.shell, punctuation.definition.comment.shebang.shell#d33682—
entity.name.tag, entity.name.function, entity.name.section, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.tag.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.tag.pseudo-class, meta.brace.square, meta.diff.range, markup.heading, markup.heading.setext, support.function.perl, punctuation.section.brackets, entity.name.section.group-title.ini, support.type.property-name.table.toml, meta.table.toml#268bd2—
keyword.operator, keyword.control.import, keyword.control.import.from, keyword.other.unit, keyword.other.special-method, markup.inserted, markup.inserted.git_gutter, storage, storage.type, storage.modifier, storage.modifier.c++, string.other.math.tex, support, support.function, support.type, support.class, support.function.be.latex, entity.name.command.shell, punctuation.definition.variable, keyword.control.from.js, keyword.control.export.js, keyword.control.default.js, storage.type.class.python, storage.type.function.python, storage.modifier.global.python, markup.underline.link.markdown, markup.underline.link.image.markdown, punctuation.definition.quote.begin.markdown, keyword.go.mod, keyword.map.go, keyword.var.go, keyword.type.go, keyword.const.go, keyword.struct.go, keyword.channel.go, keyword.package.go, keyword.function.go, keyword.interface.go, keyword.control.import.go, entity.name.type.any.go, constant.other.placeholder.go, keyword.other.rust, meta.attribute.rust, meta.macro.rust, meta.interpolation.rust, support.type.primitive.rust, entity.name.type.option.rust, entity.name.type.result.rust, entity.name.type.primitive.rust, entity.name.function.macro.rust, entity.name.function.macro.rules.rust, entity.name.type.protobuf, keyword.other.directive.protobuf, keyword.storage.zig, keyword.structure.zig, keyword.statement.zig, keyword.default.zig, keyword.type.zig, keyword.type.integer.zig, source.ini, support.type.property-name.array.toml, meta.array.table.toml#859900—
variable.function, entity.name.class, entity.name.type, entity.name.type.zig, entity.name.scope-resolution, entity.other.attribute-name.id, entity.other.attribute-name.class, string.other.math.tex, markup.heading, markup.changed.git_gutter, meta.preprocessor, meta.group.braces.tex, meta.tag.xml entity.other.attribute-name, meta.array support.function.construct.php, text.html.basic entity.other.attribute-name.html, support.constant.color, support.function.be.latex, support.function.magic.php, support.function.builtin.zig, punctuation.definition.heading.markdown, invalid.deprecated.color.w3c-non-standard-color-name.scss, keyword.control.directive.define.c, keyword.control.directive.include.c, support.type.posix-reserved.c, meta.preprocessor.macro.c, keyword.operator.new.js, keyword.operator.delete.js, keyword.operator.void.js, keyword.operator.in.js, keyword.operator.of.js, keyword.operator.instanceof.js, keyword.operator.expression.typeof.js, keyword.operator.expression.void.js, keyword.operator.expression.delete.js, keyword.operator.relational.js, support.type.exception.python, support.variable.magic.python, support.function.magic.python, support.function.builtin.python#b58900—
#cb4b16—
entity.other.attribute-name, meta.scope.for-in-loop.shell, meta.scope.case-block.shell, meta.scope.case-body.shell, variable.other.loop.shell#93a1a1—
meta.brace.round, meta.brace.curly, punctuation.section, punctuation.section.block, punctuation.definition.parameters, punctuation.section.group, meta.selector.css, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html#657b83—
invalid, other.package.exclude, other.remove, markup.deleted, markup.deleted.git_gutter, punctuation.separator.continuation, punctuation.section.group.tex, punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, punctuation.definition.arguments.latex, punctuation.definition.constant.math.tex, punctuation.definition.string.begin.tex, punctuation.definition.string.end.tex, punctuation.definition.logical-expression.shell, variable.parameter.definition.label.latex#dc322f—
markup.bold, markup.heading, markup.heading.setext—bold
markup.italic—italic
markup.strikethrough—strikethrough
Solarized Pro by noble-gase - VS Code Theme