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.activeBorder#0000
  • activityBar.background#1B2329
  • activityBar.border#95A1AB1B
  • activityBar.foreground#89B0C4EA
  • activityBar.inactiveForeground#95A1AB76
  • activityBarBadge.foreground#FFFD
  • badge.background#95A1AB18
  • badge.foreground#FFFD
  • breadcrumb.activeSelectionForeground#95A1ABEA
  • breadcrumb.focusForeground#95A1ABEA
  • breadcrumb.foreground#95A1ABAF
  • button.background#95A1AB18
  • button.foreground#CACDCF
  • button.hoverBackground#95A1AB2F
  • button.secondaryBackground#0000
  • button.secondaryForeground#CACDCF
  • button.secondaryHoverBackground#95A1AB2F
  • checkbox.background#29343D
  • checkbox.foreground#A0B4BD
  • commandCenter.activeBackground#95A1AB18
  • commandCenter.activeBorder#0000
  • commandCenter.activeForeground#95A1AB
  • commandCenter.background#0000
  • commandCenter.border#0000
  • debugToolBar.background#29343D
  • descriptionForeground#95A1ABEA
  • diffEditor.diagonalFill#0000
  • diffEditor.insertedLineBackground#5CA3D61A
  • diffEditor.insertedTextBackground#5CA3D61A
  • diffEditor.removedLineBackground#B47CD61A
  • diffEditor.removedTextBackground#B47CD61A
  • diffEditorGutter.insertedLineBackground#0000
  • diffEditorGutter.removedLineBackground#0000
  • diffEditorOverview.insertedForeground#5CA3D6
  • diffEditorOverview.removedForeground#B47CD6
  • disabledForeground#95A1ABEA
  • dropdown.background#29343D
  • dropdown.border#20282D
  • dropdown.foreground#A0B4BD
  • dropdown.listBackground#29343D
  • editor.background#20282D
  • editor.findMatchBackground#20282D
  • editor.findMatchBorder#FFFFFFD6
  • editor.findMatchHighlightBackground#95A1AB20
  • editor.findRangeHighlightBackground#95A1AB20
  • editor.foldBackground#95A1AB18
  • editor.foreground#95A1AB
  • editor.hoverHighlightBackground#0000
  • editor.inactiveSelectionBackground#95A1AB20
  • editor.lineHighlightBorder#0000
  • editor.linkedEditingBackground#95A1AB18
  • editor.rangeHighlightBackground#0000
  • editor.selectionBackground#95A1AB20
  • editor.selectionHighlightBackground#95A1AB20
  • editor.snippetFinalTabstopHighlightBorder#0000
  • editor.snippetTabstopHighlightBackground#0000
  • editor.wordHighlightBackground#0000
  • editor.wordHighlightStrongBackground#0000
  • editorBracketHighlight.foreground1#5CA3D6E9
  • editorBracketHighlight.foreground2#5CA3D6E9
  • editorBracketHighlight.foreground3#5CA3D6E9
  • editorBracketHighlight.foreground4#5CA3D6E9
  • editorBracketHighlight.foreground5#5CA3D6E9
  • editorBracketHighlight.foreground6#5CA3D6E9
  • editorBracketHighlight.unexpectedBracket.foreground#F88070
  • editorBracketMatch.background#95A1AB20
  • editorBracketMatch.border#0000
  • editorCursor.background#000
  • editorCursor.foreground#CACDCF
  • editorError.foreground#EA8465
  • editorGroup.border#95A1AB1B
  • editorGroup.dropBackground#95A1AB18
  • editorGroup.dropIntoPromptBackground#1B2329
  • editorGroup.dropIntoPromptBorder#CACDCF
  • editorGroup.dropIntoPromptForeground#CACDCF
  • editorGroupHeader.noTabsBackground#1B2329
  • editorGroupHeader.tabsBackground#1B2329
  • editorGroupHeader.tabsBorder#95A1AB1B
  • editorGutter.addedBackground#71BB739D
  • editorGutter.deletedBackground#B47CD6BD
  • editorGutter.foldingControlForeground#95A1ABAF
  • editorGutter.modifiedBackground#5CA3D6BD
  • editorHoverWidget.background#29343D
  • editorHoverWidget.border#0000
  • editorHoverWidget.foreground#A0B4BD
  • editorHoverWidget.statusBarBackground#29343D
  • editorIndentGuide.activeBackground1#95A1AB18
  • editorIndentGuide.activeBackground2#95A1AB18
  • editorIndentGuide.activeBackground3#95A1AB18
  • editorIndentGuide.activeBackground4#95A1AB18
  • editorIndentGuide.activeBackground5#95A1AB18
  • editorIndentGuide.activeBackground6#95A1AB18
  • editorIndentGuide.background1#95A1AB18
  • editorIndentGuide.background2#95A1AB18
  • editorIndentGuide.background3#95A1AB18
  • editorIndentGuide.background4#95A1AB18
  • editorIndentGuide.background5#95A1AB18
  • editorIndentGuide.background6#95A1AB18
  • editorLightBulb.foreground#FFFA
  • editorLightBulbAutoFix.foreground#EA8465
  • editorLineNumber.activeForeground#95A1AB6D
  • editorLineNumber.foreground#95A1AB2A
  • editorLink.activeForeground#3794FF
  • editorOverviewRuler.addedForeground#71BB73
  • editorOverviewRuler.border#0000
  • editorOverviewRuler.bracketMatchForeground#0000
  • editorOverviewRuler.deletedForeground#B47CD6
  • editorOverviewRuler.errorForeground#EA846580
  • editorOverviewRuler.findMatchForeground#95A1AB76
  • editorOverviewRuler.modifiedForeground#5CA3D6
  • editorOverviewRuler.selectionHighlightForeground#0000
  • editorOverviewRuler.wordHighlightForeground#0000
  • editorOverviewRuler.wordHighlightStrongForeground#0000
  • editorRuler.foreground#95A1AB18
  • editorStickyScrollHover.background#95A1AB18
  • editorSuggestWidget.background#29343D
  • editorSuggestWidget.border#20282D
  • editorSuggestWidget.focusHighlightForeground#89B0C4
  • editorSuggestWidget.foreground#A0B4BD
  • editorSuggestWidget.highlightForeground#89B0C4
  • editorSuggestWidget.selectedBackground#556070
  • editorSuggestWidget.selectedForeground#FFFB
  • editorSuggestWidget.selectedIconForeground#95A1AB
  • editorUnicodeHighlight.background#FFF3
  • editorUnicodeHighlight.border#0000
  • editorWarning.foreground#F88070
  • editorWhitespace.foreground#95A1AB6D
  • editorWidget.background#1B2329
  • editorWidget.border#89B0C4AB
  • extensionIcon.sponsorForeground#E04A63
  • extensionIcon.verifiedForeground#71BB73
  • focusBorder#0000
  • foreground#95A1ABEA
  • gitDecoration.addedResourceForeground#71BB73
  • gitDecoration.conflictingResourceForeground#EA8465
  • gitDecoration.deletedResourceForeground#B47CD6
  • gitDecoration.ignoredResourceForeground#95A1ABA6
  • gitDecoration.modifiedResourceForeground#5CA3D6
  • gitDecoration.renamedResourceForeground#71BB73
  • gitDecoration.stageDeletedResourceForeground#B47CD6
  • gitDecoration.stageModifiedResourceForeground#5CA3D6
  • gitDecoration.submoduleResourceForeground#BDA864
  • gitDecoration.untrackedResourceForeground#71BB73
  • icon.foreground#95A1ABEA
  • input.background#29343D
  • input.foreground#A0B4BD
  • input.placeholderForeground#95A1AB
  • inputOption.activeForeground#89DDFF
  • inputOption.hoverBackground#556070
  • inputValidation.errorBackground#556070
  • inputValidation.errorBorder#0000
  • inputValidation.errorForeground#EA8465
  • keybindingLabel.background#556070
  • keybindingLabel.border#0000
  • keybindingLabel.bottomBorder#0000
  • keybindingLabel.foreground#FFFD
  • keybindingTable.headerBackground#0000
  • keybindingTable.rowsBackground#0000
  • list.activeSelectionBackground#95A1AB18
  • list.activeSelectionForeground#CACDCF
  • list.dropBackground#95A1AB18
  • list.errorForeground#EA8465
  • list.filterMatchBackground#0000
  • list.filterMatchBorder#95A1ABEA
  • list.hoverBackground#95A1AB18
  • list.hoverForeground#95A1AB
  • list.inactiveFocusOutline#95A1AB1B
  • list.inactiveSelectionBackground#20282D
  • list.inactiveSelectionForeground#CACDCF
  • list.warningForeground#F88070
  • menu.background#29343D
  • menu.foreground#A0B4BD
  • menu.selectionBackground#A0B4BD19
  • menu.selectionForeground#A0B4BD
  • menu.separatorBackground#0000
  • menubar.selectionBackground#0000
  • menubar.selectionBorder#0000
  • menubar.selectionForeground#89B0C4
  • minimap.errorHighlight#EA8465
  • minimap.findMatchHighlight#FFF2
  • minimap.foregroundOpacity#0000006D
  • minimap.selectionHighlight#FFF2
  • minimap.selectionOccurrenceHighlight#FFF2
  • minimap.warningHighlight#F88070
  • minimapSlider.activeBackground#95A1AB18
  • minimapSlider.background#95A1AB18
  • minimapSlider.hoverBackground#95A1AB3D
  • notificationCenterHeader.background#29343D
  • notificationCenterHeader.foreground#A0B4BD
  • notifications.background#29343D
  • notificationsInfoIcon.foreground#5CA3D6
  • panel.background#1B2329
  • panel.border#95A1AB1B
  • panelSectionHeader.background#95A1AB18
  • panelSectionHeader.foreground#95A1AB
  • panelTitle.activeBorder#89B0C4C0
  • panelTitle.activeForeground#89B0C4
  • panelTitle.inactiveForeground#95A1ABEA
  • peekView.border#29343D
  • peekViewEditor.background#20282D
  • peekViewEditor.matchHighlightBackground#0000
  • peekViewEditor.matchHighlightBorder#FFFFFFD6
  • peekViewResult.background#0000
  • peekViewResult.fileForeground#A0B4BDEA
  • peekViewResult.lineForeground#A0B4BD
  • peekViewResult.matchHighlightBackground#0000
  • peekViewResult.selectionBackground#29343D
  • peekViewResult.selectionForeground#CACDCF
  • peekViewTitle.background#29343D
  • peekViewTitleDescription.foreground#A0B4BDEA
  • peekViewTitleLabel.foreground#A0B4BD
  • pickerGroup.border#95A1AB1B
  • pickerGroup.foreground#95A1AB
  • progressBar.background#0000
  • quickInputList.focusBackground#89B0C4AB
  • quickInputList.focusForeground#FFF
  • quickInputList.focusIconForeground#CACDCF
  • quickInputTitle.background#0000
  • sash.hoverBorder#89B0C4AB
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#89B0C4AB
  • scrollbarSlider.background#95A1AB18
  • scrollbarSlider.hoverBackground#89B0C4AB
  • search.resultsInfoForeground#95A1AB
  • searchEditor.findMatchBackground#0000
  • searchEditor.findMatchBorder#FFFFFFD6
  • selection.background#556070
  • settings.dropdownListBorder#0000
  • settings.focusedRowBorder#0000
  • settings.headerBorder#0000
  • settings.headerForeground#89B0C4
  • settings.modifiedItemIndicator#556070
  • settings.sashBorder#0000
  • settings.settingsHeaderHoverForeground#89B0C4
  • sideBar.background#1B2329
  • sideBar.border#95A1AB1B
  • sideBar.dropBackground#95A1AB18
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#95A1AB1B
  • statusBar.background#1B2329
  • statusBar.border#95A1AB1B
  • statusBar.debuggingBackground#5CA3D6CD
  • statusBar.debuggingForeground#FFF
  • statusBar.focusBorder#0000
  • statusBar.foreground#95A1ABEA
  • statusBarItem.activeBackground#556070
  • statusBarItem.compactHoverBackground#29343D
  • statusBarItem.focusBorder#95A1ABEA
  • statusBarItem.hoverBackground#29343D
  • statusBarItem.prominentBackground#556070
  • statusBarItem.prominentForeground#95A1AB
  • statusBarItem.prominentHoverBackground#29343D
  • statusBarItem.remoteBackground#0000
  • statusBarItem.remoteForeground#95A1ABEA
  • tab.activeBackground#20282D
  • tab.activeBorder#89B0C4AE
  • tab.activeForeground#95A1ABEA
  • tab.border#95A1AB1B
  • tab.hoverBackground#20282D
  • tab.hoverForeground#95A1AB
  • tab.inactiveBackground#1B2329
  • tab.inactiveForeground#95A1ABEA
  • tab.unfocusedActiveBorder#20282D
  • tab.unfocusedActiveForeground#95A1ABEA
  • tab.unfocusedHoverBackground#20282D
  • tab.unfocusedHoverForeground#95A1AB
  • tab.unfocusedInactiveForeground#95A1ABEA
  • terminal.ansiBlue#5CA3D6
  • terminal.ansiBrightBlue#5CA3D6
  • terminal.ansiBrightCyan#89B0C4
  • terminal.ansiBrightGreen#71BB73
  • terminal.ansiBrightMagenta#E06670
  • terminal.ansiBrightRed#EA8465
  • terminal.ansiBrightWhite#CACDCF
  • terminal.ansiBrightYellow#BDA864
  • terminal.ansiCyan#89B0C4
  • terminal.ansiGreen#71BB73
  • terminal.ansiMagenta#E06670
  • terminal.ansiRed#EA8465
  • terminal.ansiWhite#CACDCF
  • terminal.ansiYellow#BDA864
  • terminal.findMatchBorder#FFFFFFD6
  • terminal.findMatchHighlightBackground#0000
  • terminal.findMatchHighlightBorder#95A1AB
  • terminal.foreground#95A1AB
  • terminalCursor.foreground#CACDCF
  • titleBar.activeBackground#1B2329
  • titleBar.activeForeground#95A1ABEA
  • titleBar.border#95A1AB1B
  • titleBar.inactiveBackground#1B2329
  • titleBar.inactiveForeground#95A1ABAF
  • toolbar.activeBackground#556070
  • toolbar.hoverBackground#556070
  • tree.indentGuidesStroke#0000
  • tree.tableColumnsBorder#95A1AB1B
  • widget.shadow#0003

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text.html.markdown constant, string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown, meta.embedded.line.ruby, variable.parameter.function.ruby, keyword.operator.pipe.shell#95A1AB—
comment, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, fenced_code.block.language.markdown, meta.separator.markdown#95A1AB56—
comment storage#ba8adeb0—
comment entity.name.type#D1BC71b0—
comment variable#DB676Bb0—
comment punctuation.definition.block#5CA3D6B0—
keyword, storage, storage.type.class.js, string.regexp, meta.var.expr.js storage.type.js, entity.other.attribute-name.pseudo-element.css, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, string.regexp keyword.other, keyword.control.anchor.regexp, keyword.operator.c, meta.template.call.cpp keyword.operator.cpp, meta.parens.objcpp keyword.operator.objcpp#B47CD6—
variable.language.super, entity.name.function, storage.type.function.arrow, entity.other.attribute-name.id.css, punctuation.definition.heading.markdown, meta.class.js storage.type.js, meta.function-call.generic.python, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.require.ruby, keyword.other.special-method.ruby, support.function.kernel.ruby, support.function.builtin.shell, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block, meta.parameter.object-binding-pattern.js, support.function.misc.css, support.function.gradient.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.css#5CA3D6—
keyword.operator.spread, keyword.operator.increment, keyword.operator.decrement, keyword.operator.increment-decrement, meta.brace.square, keyword.operator.arithmetic, keyword.operator.assignment, constant.character.escape, punctuation.accessor, punctuation.separator, punctuation.terminator.statement, support.type.property-name.css, support.type.property-name.json, keyword.operator.class.php, keyword.operator.objcpp, keyword.operator.optional.ts, keyword.operator.type.annotation.ts, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, keyword.other.unit.css, keyword.other.unit.px.css, punctuation.terminator.rule.css, support.constant.gradient.css, support.constant.property-value.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, keyword.operator.stylus, meta.selector.stylus, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#86ABBF—
variable.language.this, keyword.operator.new, keyword.other.new#E04A63—
variable, entity.name.tag, constant.other.character-class.regexp, meta.function.c, entity.name.variable.field.cs, entity.name.variable.local.cs, keyword.operator.rest.ts#E06670—
constant.numeric, punctuation.definition.raw.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown punctuation.definition.bold.markdown, constant.other.color.rgb-value.hex.css, source.css, source.stylus#EA8465—
string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#71BB73—
constant.language, variable.other.constant, variable.language.arguments, variable.other.object.property, support.variable.property, entity.name.type, entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.inherited-class, entity.other.attribute-name.class.css, support.class.component, support.type.object.module, punctuation.definition.metadata.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, keyword.operator.quantifier.regexp, constant.character.numeric.regexp, punctuation.definition.character-class.regexp, constant.other.character-class.set.regexp, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition, storage.modifier.import.java, storage.type.java, storage.type.object.array.java, entity.name.variable.parameter.cs, support.class.ruby, variable.other.readwrite.ts, support.type.primitive.ts, support.type.builtin.ts, meta.import variable, variable.stylus#BDA864—
CoddingTheme by bob7446 - VS Code Theme