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#c594c51f
  • activityBar.activeBorder#19f9d8
  • activityBar.background#1e2126
  • activityBar.dropBackground#c594c51f
  • activityBar.foreground#f9f9f9
  • activityBar.inactiveForeground#9ea7b0
  • activityBarBadge.background#19f9d8
  • activityBarBadge.foreground#22252b
  • badge.background#f9f9f9
  • badge.foreground#10161c
  • breadcrumb.activeSelectionForeground#f9f9f9
  • breadcrumb.background#272a30
  • breadcrumb.focusForeground#f9f9f9
  • breadcrumb.foreground#9ea7b0
  • breadcrumbPicker.background#22252b
  • button.background#ff6188
  • button.foreground#fff
  • button.hoverBackground#ff6188
  • descriptionForeground#9ea7b0
  • diffEditor.insertedTextBackground#19f9d826
  • diffEditor.removedTextBackground#ff618826
  • dropdown.background#31343b
  • dropdown.border#31343b
  • dropdown.foreground#f9f9f9
  • dropdown.listBackground#31343b
  • editor.background#272a30
  • editor.findMatchBackground#fcad83B3
  • editor.findMatchHighlightBackground#fcad8380
  • editor.findRangeHighlightBackground#fcad8380
  • editor.foreground#f9f9f9
  • editor.hoverHighlightBackground#fcad8380
  • editor.lineHighlightBackground#c594c508
  • editor.rangeHighlightBackground#22252b
  • editor.selectionBackground#f7e87e3d
  • editor.selectionHighlightBackground#f7e87e1f
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#ffffff00
  • editor.wordHighlightStrongBorder#ffffff00
  • editorCodeLens.foreground#9ea7b0
  • editorCursor.background#6fc1ff
  • editorCursor.foreground#f9f9f9
  • editorGroup.border#19f9d8
  • editorGroup.dropBackground#c594c521
  • editorGroup.emptyBackground#272a30
  • editorGroupHeader.tabsBackground#22252b
  • editorGutter.addedBackground#19f9d8
  • editorGutter.background#272a30
  • editorGutter.commentRangeForeground#6fc1ff
  • editorGutter.deletedBackground#ff6188
  • editorGutter.modifiedBackground#f7e87e
  • editorHoverWidget.background#22252b
  • editorHoverWidget.border#393f45
  • editorHoverWidget.statusBarBackground#272a30
  • editorIndentGuide.activeBackground#393f45
  • editorIndentGuide.background#393f45
  • editorLineNumber.activeForeground#f9f9f9
  • editorLineNumber.foreground#9ea7b0
  • editorLink.activeForeground#19f9d8
  • editorRuler.foreground#c594c51f
  • editorSuggestWidget.background#22252b
  • editorSuggestWidget.border#393f45
  • editorSuggestWidget.foreground#f9f9f9
  • editorSuggestWidget.highlightForeground#6fc1ff
  • editorSuggestWidget.selectedBackground#c594c51f
  • editorWhitespace.foreground#5d656e
  • editorWidget.background#22252b
  • editorWidget.border#22252b
  • editorWidget.foreground#f9f9f9
  • editorWidget.resizeBorder#31343b
  • errorForeground#ff6188
  • extensionBadge.remoteBackground#f00
  • extensionBadge.remoteForeground#f00
  • extensionButton.prominentBackground#ff6188
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff6188
  • focusBorder#c594c5
  • foreground#f9f9f9
  • gitDecoration.addedResourceForeground#19f9d8
  • gitDecoration.conflictingResourceForeground#ff6188
  • gitDecoration.deletedResourceForeground#fcad83
  • gitDecoration.modifiedResourceForeground#f7e87e
  • gitDecoration.untrackedResourceForeground#19f9d8
  • icon.foreground#f9f9f9
  • input.background#31343b
  • input.foreground#f9f9f9
  • list.activeSelectionBackground#c594c51f
  • list.activeSelectionForeground#f9f9f9
  • list.dropBackground#c594c521
  • list.errorForeground#ff6188
  • list.filterMatchBackground#0f0
  • list.filterMatchBorder#0f0
  • list.focusBackground#c594c51f
  • list.focusForeground#f9f9f9
  • list.highlightForeground#6fc1ff
  • list.hoverBackground#c594c51f
  • list.hoverForeground#f9f9f9
  • list.inactiveFocusBackground#c594c51f
  • list.inactiveSelectionBackground#c594c51f
  • list.inactiveSelectionForeground#f9f9f9
  • list.invalidItemForeground#0f0
  • list.warningForeground#fcad83
  • listFilterWidget.background#0f0
  • listFilterWidget.noMatchesOutline#0f0
  • listFilterWidget.outline#0f0
  • menu.background#31343b
  • menu.foreground#9ea7b0
  • menu.selectionForeground#f9f9f9
  • menu.separatorBackground#5a6169
  • menubar.selectionBackground#31343b
  • menubar.selectionForeground#f9f9f9
  • panel.background#272a30
  • panel.border#393f45
  • panelTitle.activeBorder#19f9d8
  • panelTitle.activeForeground#f9f9f9
  • panelTitle.inactiveForeground#9ea7b0
  • pickerGroup.border#393f45
  • pickerGroup.foreground#fcad83
  • quickInput.background#22252b
  • quickInput.foreground#9ea7b0
  • scrollbar.shadow#10161c
  • selection.background#fcad83
  • sideBar.background#22252b
  • sideBar.foreground#9ea7b0
  • sideBarSectionHeader.background#22252b
  • sideBarSectionHeader.border#22252b
  • sideBarSectionHeader.foreground#9ea7b0
  • sideBarTitle.foreground#f9f9f9
  • statusBar.background#1e2126
  • statusBar.debuggingBackground#fcad83
  • statusBar.debuggingForeground#10161c
  • statusBar.foreground#9ea7b0
  • statusBar.noFolderBackground#1e2126
  • statusBar.noFolderForeground#9ea7b0
  • statusBarItem.activeBackground#1e2126
  • statusBarItem.hoverBackground#31343b
  • statusBarItem.prominentBackground#10161c
  • statusBarItem.prominentHoverBackground#31343b
  • tab.activeBackground#272a30
  • tab.activeModifiedBorder#f00
  • tab.border#22252b
  • tab.inactiveBackground#22252b
  • tab.inactiveForeground#9ea7b0
  • tab.inactiveModifiedBorder#f00
  • tab.unfocusedActiveForeground#f9f9f9
  • tab.unfocusedInactiveForeground#5d656e
  • terminal.ansiBlack#292a2b
  • terminal.ansiBlue#6fc1ff
  • terminal.ansiBrightBlack#9ea7b0
  • terminal.ansiBrightBlue#6fc1ff
  • terminal.ansiBrightCyan#fcad83
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#c594c5
  • terminal.ansiBrightRed#ff6188
  • terminal.ansiBrightWhite#f9f9f9
  • terminal.ansiBrightYellow#f7e87e
  • terminal.ansiCyan#fcad83
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#c594c5
  • terminal.ansiRed#ff6188
  • terminal.ansiWhite#f9f9f9
  • terminal.ansiYellow#f7e87e
  • terminal.background#272a30
  • terminal.border#393f45
  • terminalCursor.foreground#fcad83
  • textBlockQuote.background#31343b
  • textBlockQuote.border#6fc1ff
  • textCodeBlock.background#31343b
  • textLink.activeForeground#19f9d8
  • textLink.foreground#19f9d8
  • textPreformat.foreground#c594c5
  • textSeparator.foreground#ff0
  • titleBar.activeBackground#1e2126
  • titleBar.activeForeground#9ea7b0
  • titleBar.inactiveBackground#22252b
  • titleBar.inactiveForeground#9ea7b0
  • walkThrough.embeddedEditorBackground#22252b
  • welcomePage.background#272a30
  • welcomePage.buttonBackground#22252b
  • welcomePage.buttonHoverBackground#31343b
  • widget.shadow#0c1014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d656e—
punctuation.definition#9ea7b0—
meta.object-literal.key, punctuation.section.embedded, support.variable#f9f9f9—
entity.name.tag, keyword.control.as, keyword.operator, punctuation.definition.keyword, punctuation.definition.template-expression, punctuation.separator.key-value, storage.type.function.arrow, support.class.component, variable.language#ff6188—
markup.inline, string#fcad83—
entity.name.type, support.class, meta.class, meta.function-call, punctuation.definition.entity, constant#f7e87e—
meta.definition.variable, variable.other, variable.parameter#19f9d8—
entity.name.function, meta.tag.attribute, meta.function-call, support.function#6fc1ff—
entity.other.attribute-name, keyword, storage, storage.type, support.type#c594c5—
markup.bold, punctuation.definition.bold, entity.other.attribute-name.id—bold
comment, markup.italic, punctuation.definition.italic, storage.type, support.type.builtin, support.type.primitive, variable.language—italic
Vivido Theme by Philip Bruér - VS Code Theme