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#2A2A37
  • activityBar.activeBorder#2A2A37
  • activityBar.activeFocusBorder#2A2A37
  • activityBar.background#16161D
  • activityBar.border#2A2A37
  • activityBar.dropBorder#54546D
  • activityBar.foreground#C8C093
  • activityBar.inactiveForeground#c8c09391
  • activityBarBadge.background#54546D
  • activityBarBadge.foreground#DCD7BA
  • activityBarItem.profilesBackground#FF00FF
  • activityBarItem.profilesForeground#FF00FF
  • activityBarItem.profilesHoverForeground#FF00FF
  • badge.background#223249
  • badge.foreground#DCD7BA
  • button.background#223249
  • button.border#54546D
  • button.foreground#DCD7BA
  • button.hoverBackground#2D4F67
  • button.secondaryBackground#223249
  • button.secondaryForeground#DCD7BA
  • button.secondaryHoverBackground#2D4F67
  • button.separator#223249
  • checkbox.background#223249
  • checkbox.border#54546D
  • checkbox.foreground#DCD7BA
  • checkbox.selectBackground#2D4F67
  • checkbox.selectBorder#54546D
  • descriptionForeground#DCD7BA
  • disabledForeground#727169
  • dropdown.background#16161D
  • dropdown.border#54546D
  • dropdown.foreground#C8C093
  • dropdown.listBackground#16161D
  • editor.background#1F1F28
  • editor.findMatchBackground#2D4F67
  • editor.findMatchBorder#2D4F67
  • editor.findMatchHighlightBackground#658594
  • editor.findMatchHighlightBorder#658594
  • editor.findRangeHighlightBackground#223249
  • editor.findRangeHighlightBorder#223249
  • editor.foreground#DCD7BA
  • editor.hoverHighlightBackground#2D4F67
  • editor.inactiveSelectionBackground#223249
  • editor.lineHighlightBackground#2A2A37
  • editor.lineHighlightBorder#2A2A37
  • editor.linkedEditingBackground#FF00FF
  • editor.rangeHighlightBackground#223249
  • editor.rangeHighlightBorder#223249
  • editor.selectionBackground#223249
  • editor.selectionForeground#DCD7BA
  • editor.selectionHighlightBackground#2D4F67
  • editor.selectionHighlightBorder#2D4F67
  • editor.symbolHighlightBackground#223249
  • editor.symbolHighlightBorder#223249
  • editor.wordHighlightBackground#223249
  • editor.wordHighlightBorder#223249
  • editor.wordHighlightStrongBackground#2D4F67
  • editor.wordHighlightStrongBorder#2D4F67
  • editorCursor.background#DCD7BA
  • editorCursor.foreground#DCD7BA
  • editorGroup.border#2A2A37
  • editorGroup.dropBackground#16161D
  • editorGroup.dropIntoPromptBackground#1F1F28
  • editorGroup.dropIntoPromptBorder#2A2A37
  • editorGroup.dropIntoPromptForeground#DCD7BA
  • editorGroup.emptyBackground#16161D
  • editorGroup.focusedEmptyBorder#2A2A37
  • editorGroupHeader.border#2A2A37
  • editorGroupHeader.noTabsBackground#16161D
  • editorGroupHeader.tabsBackground#16161D
  • editorGroupHeader.tabsBorder#2A2A37
  • editorIndentGuide.activeBackground#2A2A37
  • editorIndentGuide.background#2A2A37
  • editorInlayHint.background#FF00FF
  • editorInlayHint.foreground#FF00FF
  • editorInlayHint.parameterBackground#FF00FF
  • editorInlayHint.parameterForeground#FF00FF
  • editorInlayHint.typeBackground#FF00FF
  • editorInlayHint.typeForeground#FF00FF
  • editorLineNumber.activeForeground#FF9E3B
  • editorLineNumber.foreground#54546D
  • editorLink.activeForeground#7FB4CA
  • editorPane.background#16161D
  • editorRuler.foreground#2A2A37
  • editorUnicodeHighlight.background#223249
  • editorUnicodeHighlight.border#223249
  • editorWhitespace.foreground#2A2A37
  • errorForeground#00FF00
  • focusBorder#54546D
  • foreground#DCD7BA
  • icon.foreground#DCD7BA
  • input.background#16161D
  • input.border#54546D
  • input.foreground#C8C093
  • input.placeholderForeground#C8C093
  • inputOption.activeBackground#223249
  • inputOption.activeBorder#54546D
  • inputOption.activeForeground#DCD7BA
  • inputOption.hoverBackground#2A2A37
  • inputValidation.errorBackground#C34043
  • inputValidation.errorBorder#E82424
  • inputValidation.errorForeground#DCD7BA
  • inputValidation.infoBackground#6A9589
  • inputValidation.infoBorder#76946A
  • inputValidation.infoForeground#DCD7BA
  • inputValidation.warningBackground#DCA561
  • inputValidation.warningBorder#FF9E3B
  • inputValidation.warningForeground#1F1F28
  • list.activeSelectionBackground#223249
  • list.activeSelectionForeground#DCD7BA
  • list.activeSelectionIconForeground#DCA561
  • list.deemphasizedForeground#DCD7BA
  • list.dropBackground#223249
  • list.errorForeground#E82424
  • list.filterMatchBackground#2D4F67
  • list.filterMatchBorder#54546D
  • list.focusAndSelectionOutline#54546D
  • list.focusBackground#223249
  • list.focusForeground#DCD7BA
  • list.focusHighlightForeground#DCD7BA
  • list.focusOutline#54546D
  • list.highlightForeground#DCD7BA
  • list.hoverBackground#223249
  • list.hoverForeground#DCD7BA
  • list.inactiveFocusBackground#223249
  • list.inactiveFocusOutline#54546D
  • list.inactiveSelectionBackground#223249
  • list.inactiveSelectionForeground#DCD7BA
  • list.inactiveSelectionIconForeground#C8C093
  • list.invalidItemForeground#00FF00
  • list.warningForeground#E82424
  • listFilterWidget.background#223249
  • listFilterWidget.noMatchesOutline#54546D
  • listFilterWidget.outline#54546D
  • listFilterWidget.shadow#16161D
  • minimap.background#1F1F28
  • minimap.errorHighlight#E82424
  • minimap.findMatchHighlight#2D4F67
  • minimap.foregroundOpacity#FF00FF
  • minimap.selectionHighlight#223249
  • minimap.selectionOccurrenceHighlight#2D4F67
  • minimap.warningHighlight#FF9E3B
  • minimapGutter.addedBackground#76946A
  • minimapGutter.deletedBackground#C34043
  • minimapGutter.modifiedBackground#DCA561
  • minimapSlider.activeBackground#16161d71
  • minimapSlider.background#16161d4b
  • minimapSlider.hoverBackground#16161d71
  • progressBar.background#6A9589
  • sash.hoverBorder#54546D
  • scrollbar.shadow#16161D
  • scrollbarSlider.activeBackground#223249
  • scrollbarSlider.background#2A2A37
  • scrollbarSlider.hoverBackground#223249
  • searchEditor.findMatchBackground#2D4F67
  • searchEditor.findMatchBorder#2D4F67
  • searchEditor.textInputBorder#54546D
  • selection.background#223249
  • sideBar.background#16161D
  • sideBar.border#2A2A37
  • sideBar.dropBackground#1F1F28
  • sideBar.foreground#C8C093
  • sideBarSectionHeader.background#2A2A37
  • sideBarSectionHeader.border#363646
  • sideBarSectionHeader.foreground#DCD7BA
  • sideBarTitle.foreground#54546D
  • sideBySideEditor.horizontalBorder#2A2A37
  • sideBySideEditor.verticalBorder#2A2A37
  • statusBar.background#16161D
  • statusBar.border#363646
  • statusBar.debuggingBackground#C34043
  • statusBar.debuggingBorder#C34043
  • statusBar.debuggingForeground#DCD7BA
  • statusBar.focusBorder#363646
  • statusBar.foreground#C8C093
  • statusBar.noFolderBackground#16161D
  • statusBar.noFolderBorder#16161D
  • statusBar.noFolderForeground#C8C093
  • statusBarItem.activeBackground#1F1F28
  • statusBarItem.compactHoverBackground#1F1F28
  • statusBarItem.errorBackground#E82424
  • statusBarItem.errorForeground#DCD7BA
  • statusBarItem.focusBorder#16161D
  • statusBarItem.hoverBackground#363646
  • statusBarItem.prominentBackground#FF00FF
  • statusBarItem.prominentForeground#FF00FF
  • statusBarItem.prominentHoverBackground#FF00FF
  • statusBarItem.remoteBackground#6A9589
  • statusBarItem.remoteForeground#DCD7BA
  • statusBarItem.warningBackground#363646
  • statusBarItem.warningForeground#DCD7BA
  • tab.activeBackground#1F1F28
  • tab.activeBorder#1F1F28
  • tab.activeBorderTop#2A2A37
  • tab.activeForeground#DCD7BA
  • tab.activeModifiedBorder#2A2A37
  • tab.border#2A2A37
  • tab.hoverBackground#16161D
  • tab.hoverBorder#2A2A37
  • tab.hoverForeground#C8C093
  • tab.inactiveBackground#16161D
  • tab.inactiveForeground#C8C093
  • tab.inactiveModifiedBorder#2A2A37
  • tab.lastPinnedBorder#2A2A37
  • tab.unfocusedActiveBackground#1F1F28
  • tab.unfocusedActiveBorder#1F1F28
  • tab.unfocusedActiveBorderTop#2A2A37
  • tab.unfocusedActiveForeground#DCD7BA
  • tab.unfocusedActiveModifiedBorder#2A2A37
  • tab.unfocusedHoverBackground#16161D
  • tab.unfocusedHoverBorder#2A2A37
  • tab.unfocusedHoverForeground#C8C093
  • tab.unfocusedInactiveBackground#16161D
  • tab.unfocusedInactiveForeground#C8C093
  • tab.unfocusedInactiveModifiedBorder#2A2A37
  • textBlockQuote.background#223249
  • textBlockQuote.border#2D4F67
  • textCodeBlock.background#223249
  • textLink.activeForeground#957FB8
  • textLink.foreground#7E9CD8
  • textPreformat.foreground#DCA561
  • textSeparator.foreground#00FF00
  • titleBar.activeBackground#16161D
  • titleBar.activeForeground#C8C093
  • titleBar.border#16161D
  • titleBar.inactiveBackground#16161D
  • titleBar.inactiveForeground#C8C093
  • toolbar.activeBackground#2D4F67
  • toolbar.hoverBackground#223249
  • toolbar.hoverOutline#223249
  • tree.indentGuidesStroke#363646
  • tree.tableColumnsBorder#2A2A37
  • tree.tableOddRowsBackground#2A2A37
  • widget.shadow#16161D
  • window.activeBorder#16161D
  • window.inactiveBorder#16161D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#727169italic
keyword, storage.type.function, support.type.property-name, storage.type.js, storage.type.model.prisma, storage.type.enum.prisma, storage.type.config.prisma, storage.modifier.async.ts, keyword.control.conditional.ts, keyword.control.flow.ts, meta.object-literal.key.ts, meta.export.default.tsx, variable.other.readwrite.alias.tsx, support.function.magic.python#957FB8—
keyword.control.default.ts, keyword.control.if.php#957FB8bold
storage.type.interface.ts, storage.type.interface.tsx, storage.type.tsx, keyword.control.export.tsx, keyword.control.default.tsx, keyword.control.dart, keyword.declaration.dart, storage.type.class.python, storage.type.function.python, storage.type.class.php, storage.modifier.extends.php, storage.type.function.php#957FB8italic
entity.name.function, entity.name, variable.object.property.ts, entity.other.attribute-name.directive.ts, meta.function-call.generic.python, keyword.control.exit.php#7E9CD8—
punctuation.definition.array, punctuation.separator.array, punctuation.definition.dictionary, punctuation.separator.dictionary, punctuation.separator.comma.ts, punctuation.definition.block.ts, punctuation.definition.block.tsx, meta.brace.round.tsx, punctuation.definition.tag, punctuation.terminator.dart, unctuation.section.function, punctuation.terminator.expression.php, punctuation.definition#9CABCA—
support.function, punctuation.definition.heading.markdown, punctuation.definition.markdown, fenced_code.block.language.markdown, keyword.control.from.ts, keyword.control.import.ts, storage.type.function.arrow.ts, keyword.control.export.ts, entity.name.tag.tsx, constant.language.python, meta.indexed-name.python, constant.language.php#7FB4CA—
string.other.link.title.markdown, markup.underline.link.image.markdown#7FB4CAunderline
support.type, keyword.control.type, variable.other.object.ts, variable.other.property.ts, entity.name.type.interface.tsx, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml, storage.type.primitive.dart, storage.modifier.dart, entity.other.attribute-name.localname.svg, entity.name.type.class.python, support.other.namespace.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php, storage.modifier.php, variable.other.object.tsx#7AA89F—
string, markup.inline.raw.string, markup.fenced_code.block#98BB6C—
keyword.operator, other.source.dart, entity.name.function.decorator.python#C0A36E—
storage.modifier, variable.parameter, keyword.other.definition.ini, support.constant.constant.prisma, storage.type.ts, entity.name.type.ts, variable.object.property.tsx, meta.tag.attributes.tsx, storage.type.function.arrow.tsx, entity.name.tag.yaml, support.class.dart, meta.attribute.python, variable.other.php, keyword.other.use-as.php, variable.other.object.tsx#E6C384—
constant.numeric, markup.underline.link.markdown#D27E99—
variable.language, punctuation.definition.variable.php, keyword.control#E46876—
invalid, invalid.illegal#FF5D62—
keyword.control.import, constant.language, variable.other.assignment.prisma, variable.other.constant.property.ts, variable.parameter.ts, keyword.control.from.tsx, keyword.other.import.dart, storage.type.annotation.dart, punctuation.definition.decorator.python, constant.other.caps.python, keyword.other.use.php#FFA066—
Zaisei by Marcelo Pecin - VS Code Theme