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.activeBackground#7aa2f733
  • activityBar.activeBorder#7aa2f7
  • activityBar.background#1f2335
  • activityBar.border#16161e
  • activityBar.dropBackground#7aa2f765
  • activityBar.foreground#7aa2f7
  • activityBar.inactiveForeground#7aa2f777
  • activityBarBadge.background#7aa2f7
  • activityBarBadge.foreground#1f2335
  • badge.background#7aa2f7
  • badge.foreground#1f2335
  • button.background#7aa2f7
  • button.foreground#1f2335
  • button.hoverBackground#3d59a1
  • debugToolBar.background#1f2335
  • descriptionForeground#a9b1d6
  • diffEditor.insertedTextBackground#8BC34A30
  • dropdown.background#292e42
  • dropdown.border#292e42
  • dropdown.foreground#a9b1d6
  • editor.background#16161e
  • editor.findMatchBackground#7aa2f725
  • editor.findMatchHighlightBackground#3d59a179
  • editor.findRangeHighlightBackground#7aa2f722
  • editor.foreground#c0caf5
  • editor.hoverHighlightBackground#7aa2f73f
  • editor.inactiveSelectionBackground#3b426133
  • editor.lineHighlightBackground#292e42
  • editor.lineHighlightBorder#292e42
  • editor.rangeHighlightBackground#7aa2f722
  • editor.selectionBackground#3b4261
  • editor.selectionHighlightBackground#7aa2f733
  • editor.wordHighlightBackground#e0af6833
  • editor.wordHighlightStrongBackground#e0af6833
  • editorBracketMatch.background#7aa2f722
  • editorBracketMatch.border#7aa2f7
  • editorCodeLens.foreground#565f89
  • editorCursor.foreground#c0caf5
  • editorError.border#1f2335
  • editorError.foreground#f7768e
  • editorGroup.border#1f2335
  • editorGroup.dropBackground#292e4233
  • editorGroup.emptyBackground#292e4233
  • editorGroupHeader.noTabsBackground#292e42
  • editorGroupHeader.tabsBackground#292e42
  • editorGroupHeader.tabsBorder#292e42
  • editorGutter.addedBackground#9ece6a
  • editorGutter.background#16161e
  • editorGutter.deletedBackground#f7768e
  • editorGutter.modifiedBackground#e0af68
  • editorHint.border#73daca00
  • editorHint.foreground#73daca
  • editorHoverWidget.background#1f2335
  • editorHoverWidget.border#1f2335
  • editorIndentGuide.activeBackground#bb9af7
  • editorIndentGuide.background#3b4261
  • editorInfo.border#1f2335
  • editorInfo.foreground#7aa2f7
  • editorLineNumber.activeForeground#a9b1d6
  • editorLineNumber.foreground#737aa2
  • editorLink.activeForeground#7aa2f7
  • editorMarkerNavigation.background#1f233529
  • editorMarkerNavigationError.background#f7768e
  • editorMarkerNavigationWarning.background#e0af68
  • editorRuler.foreground#394b70
  • editorSuggestWidget.background#1f2335
  • editorSuggestWidget.border#1f2335
  • editorSuggestWidget.foreground#a9b1d6
  • editorSuggestWidget.highlightForeground#7aa2f7
  • editorSuggestWidget.selectedBackground#292e42
  • editorWarning.border#1f2335
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#ffffff21
  • editorWidget.background#292e42
  • editorWidget.border#1f2335
  • errorForeground#f7768e
  • gitDecoration.addedResourceForeground#9ece6a
  • gitDecoration.conflictingResourceForeground#ff9e64
  • gitDecoration.deletedResourceForeground#914c54
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#6183bb
  • gitDecoration.submoduleResourceForeground#ff9e64
  • gitDecoration.untrackedResourceForeground#449dab
  • input.background#1f2335
  • input.border#292e42
  • input.foreground#c0caf5
  • input.placeholderForeground#737aa2
  • inputOption.activeBorder#7aa2f7
  • inputValidation.errorBackground#1f2335ee
  • inputValidation.errorBorder#292e42
  • inputValidation.errorForeground#f7768e
  • inputValidation.infoBackground#1abc9cee
  • inputValidation.infoBorder#292e42
  • inputValidation.infoForeground#7dcfff
  • inputValidation.warningBackground#292e42cc
  • inputValidation.warningBorder#292e42
  • inputValidation.warningForeground#e0af68
  • notification.background#1f2335
  • notification.buttonBackground#7aa2f7
  • notification.buttonHoverBackground#3d59a1
  • notification.errorBackground#f7768e
  • notification.errorForeground#1f2335
  • notification.foreground#c0caf5
  • notification.infoBackground#1abc9c
  • notification.infoForeground#1f2335
  • notification.warningBackground#e0af68
  • notification.warningForeground#1f2335
  • panel.background#1f2335
  • panel.border#7aa2f7
  • panelSection.border#292e42
  • panelSection.dropBackground#292e42
  • panelSectionHeader.background#292e42
  • panelSectionHeader.foreground#a9b1d6
  • panelTitle.activeBorder#7aa2f7
  • panelTitle.activeForeground#7aa2f7
  • panelTitle.inactiveForeground#737aa2
  • selection.background#3b4261
  • sideBar.background#1f2335
  • sideBar.border#7aa2f7
  • sideBar.dropBackground#292e42
  • sideBar.foreground#a9b1d6
  • sideBarSectionHeader.background#292e42
  • sideBarSectionHeader.border#1f2335
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#a9b1d6
  • statusBar.background#1f2335
  • statusBar.border#7aa2f7
  • statusBar.debuggingBackground#292e42
  • statusBar.debuggingBorder#ff007c
  • statusBar.debuggingForeground#ff007c
  • statusBar.foreground#a9b1d6
  • statusBar.noFolderBackground#1f2335
  • statusBar.noFolderBorder#1f2335
  • statusBar.noFolderForeground#a9b1d6
  • statusBarItem.activeBackground#7dcfff66
  • statusBarItem.hoverBackground#292e42
  • statusBarItem.prominentBackground#292e42
  • statusBarItem.prominentHoverBackground#292e42
  • tab.activeBackground#292e42
  • tab.activeBorder#1f2335
  • tab.activeBorderTop#7aa2f7
  • tab.activeForeground#c0caf5
  • tab.activeModifiedBorder#73daca
  • tab.border#1f2335
  • tab.inactiveBackground#1f2335
  • tab.inactiveForeground#737aa2
  • tab.unfocusedActiveBackground#1f2335
  • tab.unfocusedActiveBorder#1f2335
  • tab.unfocusedActiveForeground#737aa2
  • tab.unfocusedHoverBackground#7aa2f721
  • tab.unfocusedInactiveForeground#737aa2
  • terminal.ansiBlack#414868
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#737aa2
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#c0caf5
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#c0caf5
  • terminal.ansiYellow#e0af68
  • terminal.background#1f2335
  • terminal.foreground#a9b1d6
  • terminal.selectionBackground#3b4261
  • terminalCursor.background#c0caf5
  • terminalCursor.foreground#c0caf5
  • textBlockQuote.background#16161e
  • textBlockQuote.border#7aa2f7
  • textCodeBlock.background#16161e
  • textLink.activeForeground#7aa2f7
  • textLink.foreground#7aa2f7
  • textPreformat.foreground#e0af68
  • textSeparator.foreground#16161e
  • titleBar.activeBackground#292e42
  • titleBar.activeForeground#c0caf5
  • titleBar.inactiveBackground#1f2335
  • titleBar.inactiveForeground#737aa2
  • walkThrough.embeddedEditorBackground#16161e
  • welcomePage.buttonBackground#1f2335
  • welcomePage.buttonHoverBackground#292e42
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.accessor.optional, punctuation.definition.template-expression, punctuation.definition.entity, constant.character.entity, variable.other.readwrite, variable.object.property, variable.other.property#e0af68—
constant.language.boolean, support.type.builtin, constant.language.json.comments, constant.language.json#ff9e64—
keyword.control.import, keyword.operator.new, keyword.control.export#7dcfff—
string.quoted.double, string.quoted.single, string.template#9ece6a—
variable.other.readwrite.alias, entity.name.type.alias, entity.name.type, entity.name.tag#2ac3de—
meta.definition.property, meta.object.type, meta.field.declaration, meta.type.declaration, meta.definition.property, variable.other.object.property, meta.object-literal.key, entity.other.attribute-name, support.type.property-name.json#73daca—
entity.name.function, support.function#7aa2f7—
storage.type, keyword.control.flow, keyword.control.conditional, keyword.control.default#9d7cd8—
keyword.control, variable.parameter, constant.numeric.json.comments#bb9af7—
support.class.component, constant.language.null, keyword.operator.assignment, support.constant.json, keyword.operator, punctuation.accessor, support.class.error#f7768e—
variable.other.object#449dab—
comment.line.double-slash, comment.block, punctuation.definition.tag#BD5A91—
keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, 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, storage.type.generic.wildcard, source.go keyword.operator, 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, 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.definition, keyword.control.default, punctuation.section, punctuation.separator, punctuation.terminator, markup.bold.markdown, source.zig storage.type.function, variable.other.constant—bold
ionztorm theme by ionztorm - VS Code Theme