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#464b57ff
  • activityBar.activeBorder#00000000
  • activityBar.background#2f343eff
  • activityBar.border#464b57ff
  • activityBar.foreground#dce0e5ff
  • activityBar.inactiveForeground#a9afbcff
  • activityBarBadge.background#74ade8ff
  • activityBarBadge.foreground#282c33ff
  • activityBarTop.activeBackground#464b57ff
  • activityBarTop.activeBorder#00000000
  • activityBarTop.background#2f343eff
  • activityBarTop.foreground#dce0e5ff
  • activityBarTop.inactiveForeground#a9afbcff
  • activityErrorBadge.background#d072771a
  • activityErrorBadge.foreground#d07277ff
  • activityWarningBadge.background#dec1841a
  • activityWarningBadge.foreground#dec184ff
  • agentFeedbackInputWidget.border#00000000
  • agentSessionReadIndicator.foreground#dce0e5ff
  • agentSessionSelectedBadge.border#464b57ff
  • agentSessionSelectedUnfocusedBadge.border#464b57ff
  • agentStatusIndicator.background#2f343eff
  • badge.background#2f343eff
  • badge.foreground#dce0e5ff
  • banner.background#d072771a
  • banner.foreground#a9afbcff
  • banner.iconForeground#d07277ff
  • breadcrumb.activeSelectionForeground#acb2beff
  • breadcrumb.background#282c33ff
  • breadcrumb.focusForeground#acb2beff
  • breadcrumb.foreground#acb2beff
  • breadcrumbPicker.background#acb2beff
  • browser.border#464b57ff
  • button.background#3b414dff
  • button.border#464b57ff
  • button.hoverBackground#2f343eff
  • button.secondaryBackground#464b57ff
  • button.secondaryBorder#464b57ff
  • button.secondaryForeground#dce0e5ff
  • button.secondaryHoverBackground#464b57ff
  • button.separator#464b57ff
  • chart.axis#464b57ff
  • chart.guide#878a98ff
  • chart.line#d0d4da
  • charts.blue#61afefff
  • charts.foreground#acb2beff
  • charts.green#98c379ff
  • charts.lines#363c46ff
  • charts.orange#be5046ff
  • charts.purple#c678ddff
  • charts.red#e06c75ff
  • charts.yellow#e5c07bff
  • checkbox.background#00000000
  • checkbox.border#464b57ff
  • checkbox.disabled.background#00000000
  • checkbox.disabled.foreground#464b57ff
  • checkbox.foreground#acb2beff
  • checkbox.selectBackground#293b5bff
  • checkbox.selectBorder#464b57ff
  • commandCenter.activeBackground#2f343eff
  • commandCenter.activeBorder#464b57ff
  • commandCenter.activeForeground#dce0e5ff
  • commandCenter.background#2f343eff
  • commandCenter.border#464b57ff
  • commandCenter.foreground#acb2beff
  • commandCenter.inactiveBorder#464b57ff
  • commandCenter.inactiveForeground#acb2beff
  • contrastActiveBorder#00000000
  • contrastBorder#464b57ff
  • debugToolBar.background#2f343eff
  • debugToolBar.border#464b57ff
  • descriptionForeground#a9afbcff
  • diffEditor.border#00000000
  • diffEditor.insertedLineBackground#a1c1811a
  • diffEditor.removedLineBackground#d072771a
  • editor.background#282c33ff
  • editor.findMatchBackground#645946
  • editor.findMatchHighlightBackground#74ade866
  • editor.findRangeHighlightBackground#6eb4bf3d
  • editor.foldBackground#00000000
  • editor.foreground#acb2beff
  • editor.lineHighlightBackground#2f343ebf
  • editor.lineHighlightBorder#363c46ff
  • editor.selectionBackground#74ade83d
  • editor.selectionForeground#acb2beff
  • editor.selectionHighlightBackground#555a6366
  • editor.selectionHighlightBorder#464b57ff
  • editor.wordHighlightBackground#74ade81a
  • editor.wordHighlightStrongBackground#555a6366
  • editorBracketHighlight.foreground1#abb2bfff
  • editorBracketHighlight.foreground2#abb2bfff
  • editorBracketHighlight.foreground3#abb2bfff
  • editorBracketHighlight.foreground4#abb2bfff
  • editorBracketHighlight.foreground5#abb2bfff
  • editorBracketHighlight.foreground6#abb2bfff
  • editorBracketMatch.background#74ade822
  • editorBracketMatch.border#74ade888
  • editorCodeLens.foreground#acb2beff
  • editorCursor.foreground#74ade8ff
  • editorError.border#4c2b2cff
  • editorError.foreground#d07277ff
  • editorGroup.border#464b57ff
  • editorGroupHeader.noTabsBackground#2f343eff
  • editorGroupHeader.tabsBackground#2f343eff
  • editorGroupHeader.tabsBorder#464b57ff
  • editorGutter.addedBackground#27a657ff
  • editorGutter.background#282c33ff
  • editorGutter.deletedBackground#e06c76ff
  • editorGutter.modifiedBackground#d3b020ff
  • editorHint.border#293b5bff
  • editorHint.foreground#788ca6ff
  • editorIndentGuide.activeBackground1#c8ccd41a
  • editorIndentGuide.background1#c8ccd40d
  • editorInfo.border#293b5bff
  • editorInfo.foreground#74ade8ff
  • editorInlayHint.background#5a6f891a
  • editorInlayHint.foreground#788ca6ff
  • editorLineNumber.activeForeground#d0d4da
  • editorLineNumber.foreground#4e5a5f
  • editorLink.activeForeground#acb2beff
  • editorOverviewRuler.errorForeground#d07277ff
  • editorOverviewRuler.findMatchForeground#74ade866
  • editorRuler.foreground#acb2beff
  • editorStickyScroll.border#464b57ff
  • editorStickyScroll.shadow#00000000
  • editorUnnecessaryCode.border#6b728055
  • editorUnnecessaryCode.opacity#00000099
  • editorWarning.border#5d4c2fff
  • editorWarning.foreground#dec184ff
  • editorWhitespace.foreground#4e5a5f
  • editorWidget.background#2f343eff
  • editorWidget.border#464b57ff
  • errorForeground#d07277ff
  • extensionButton.background#3b414dff
  • focusBorder#47679eff
  • foreground#acb2beff
  • gitDecoration.addedResourceForeground#a1c181ff
  • gitDecoration.conflictingResourceForeground#dec184ff
  • gitDecoration.deletedResourceForeground#d07277ff
  • gitDecoration.ignoredResourceForeground#878a98ff
  • gitDecoration.modifiedResourceForeground#dec184ff
  • gitDecoration.renamedResourceForeground#d07277ff
  • gitDecoration.stageDeletedResourceForeground#d07277ff
  • gitDecoration.stageModifiedResourceForeground#dec184ff
  • gitDecoration.submoduleResourceForeground#788ca6ff
  • gitDecoration.untrackedResourceForeground#a9afbcff
  • icon.foreground#dce0e5ff
  • input.background#282c33ff
  • input.border#464b57ff
  • input.foreground#dce0e5ff
  • input.placeholderForeground#878a98ff
  • inputValidation.errorBackground#d072771a
  • inputValidation.errorBorder#ce1d23
  • inputValidation.warningBorder#5d4c2fff
  • list.activeSelectionBackground#454a56ff
  • list.activeSelectionForeground#dce0e5ff
  • list.filterMatchBackground#2f343eff
  • list.filterMatchBorder#464b57ff
  • list.focusBackground#2e343eff
  • list.focusForeground#acb2beff
  • list.highlightForeground#74ade8ff
  • list.hoverBackground#454a56ff
  • list.inactiveSelectionBackground#454a56ff
  • list.inactiveSelectionForeground#dce0e5ff
  • menu.background#2f343eff
  • menu.border#2f343eff
  • menu.foreground#acb2beff
  • menu.selectionBackground#3b414dff
  • menu.selectionBorder#00000000
  • menu.selectionForeground#acb2beff
  • menu.separatorBackground#3b414dff
  • menubar.selectionBackground#2f343eff
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#74ade8ff
  • notificationCenter.border#464b57ff
  • notificationCenterHeader.background#3b414dff
  • notificationCenterHeader.foreground#acb2beff
  • notifications.background#2f343eff
  • notifications.border#464b57ff
  • notifications.foreground#acb2beff
  • notificationsErrorIcon.foreground#d07277ff
  • notificationsInfoIcon.foreground#74ade8ff
  • notificationsWarningIcon.foreground#dec184ff
  • notificationToast.border#464b57ff
  • panel.background#2f343eff
  • panel.border#464b57ff
  • panelTitle.activeBorder#47679eff
  • panelTitle.activeForeground#dce0e5ff
  • panelTitle.inactiveForeground#a9afbcff
  • pickerGroup.foreground#dce0e5ff
  • quickInputList.focusBackground#454a56ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#c8ccd44c
  • scrollbarSlider.background#c8ccd44c
  • scrollbarSlider.hoverBackground#363c46ff
  • settings.dropdownBackground#282c33ff
  • settings.dropdownBorder#464b57ff
  • settings.dropdownForeground#acb2beff
  • settings.modifiedItemIndicator#464b57ff
  • sideBar.background#2f343eff
  • sideBar.border#464b57ff
  • sideBar.dropBackground#00000000
  • sideBar.foreground#dce0e5ff
  • sideBarActivityBarTop.border#464b57ff
  • sideBarSectionHeader.background#2f343eff
  • sideBarSectionHeader.border#464b57ff
  • sideBarSectionHeader.foreground#dce0e5ff
  • sideBarStickyScroll.border#464b57ff
  • sideBarStickyScroll.shadow#00000000
  • sideBarTitle.background#2f343eff
  • sideBarTitle.border#464b57ff
  • sideBarTitle.foreground#acb2beff
  • statusBar.background#3b414dff
  • statusBar.border#464b57ff
  • statusBar.debuggingBackground#be5046ff
  • statusBar.debuggingBorder#464b57ff
  • statusBar.debuggingForeground#dce0e5ff
  • statusBar.foreground#dce0e5ff
  • statusBar.noFolderBackground#3b414dff
  • statusBar.noFolderBorder#464b57ff
  • statusBar.noFolderForeground#acb2beff
  • statusBarItem.activeBackground#2f343eff
  • statusBarItem.hoverBackground#363c46ff
  • statusBarItem.hoverForeground#acb2beff
  • tab.activeBackground#282c33ff
  • tab.activeBorder#282c33ff
  • tab.activeBorderTop#2f343eff
  • tab.activeForeground#dce0e5ff
  • tab.border#464b57ff
  • tab.hoverBackground#363c46ff
  • tab.inactiveBackground#2f343eff
  • tab.inactiveForeground#a9afbcff
  • tab.unfocusedActiveBorder#414754ff
  • tab.unfocusedActiveForeground#acb2beff
  • tab.unfocusedHoverBorder#464b57ff
  • tab.unfocusedHoverForeground#acb2beff
  • tab.unfocusedInactiveForeground#acb2beff
  • terminal.ansiBlack#282c34ff
  • terminal.ansiBlue#61afefff
  • terminal.ansiBrightBlack#636d83ff
  • terminal.ansiBrightBlue#85C1FFff
  • terminal.ansiBrightCyan#6ED5DEff
  • terminal.ansiBrightGreen#AAD581ff
  • terminal.ansiBrightMagenta#D398EBff
  • terminal.ansiBrightRed#EA858Bff
  • terminal.ansiBrightWhite#fafafaff
  • terminal.ansiBrightYellow#FFD885ff
  • terminal.ansiCyan#56b6c2ff
  • terminal.ansiGreen#98c379ff
  • terminal.ansiMagenta#c678ddff
  • terminal.ansiRed#e06c75ff
  • terminal.ansiWhite#abb2bfff
  • terminal.ansiYellow#e5c07bff
  • terminal.background#282c34ff
  • terminal.border#464b57ff
  • terminal.foreground#abb2bfff
  • terminal.selectionBackground#2e343eff
  • terminal.tab.activeBorder#00000000
  • terminalCursor.background#282c34ff
  • terminalCursor.foreground#abb2bfff
  • terminalStickyScroll.border#464b57ff
  • textBlockQuote.background#8389941a
  • textBlockQuote.border#74ade8ff
  • textCodeBlock.background#5a6f891a
  • textLink.activeForeground#74ade8ff
  • textLink.foreground#74ade8ff
  • textPreformat.background#8389941a
  • textPreformat.border#464b57ff
  • textPreformat.foreground#dce0e5ff
  • textSeparator.foreground#dce0e5ff
  • titleBar.activeBackground#3b414dff
  • titleBar.activeForeground#dce0e5ff
  • titleBar.border#464b57ff
  • titleBar.inactiveBackground#2e343eff
  • titleBar.inactiveForeground#a9afbcff
  • toolbar.activeBackground#2f343eff
  • toolbar.hoverBackground#2f343eff
  • tree.inactiveIndentGuidesStroke#464b57ff
  • tree.indentGuidesStroke#464b57ff
  • tree.tableColumnsBorder#464b57ff
  • walkThrough.embeddedEditorBackground#282c33ff
  • walkthrough.stepTitle.foreground#acb2beff
  • welcomePage.background#282c33ff
  • welcomePage.progress.background#5a6a871a
  • welcomePage.progress.foreground#5a6a87ff
  • welcomePage.tileBackground#2f343eff
  • welcomePage.tileBorder#464b57ff
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5d636fff—
punctuation.separator.key-value, keyword.operator.type.annotation, keyword.operator.type, keyword.operator.bitwise, keyword.operator.optional#b1574bff—
variable.object.property, support.variable.property, meta.object-literal.key, variable.other.property, meta.object-binding-pattern-variable meta.definition.variable, meta.embedded.expression variable.other.constant.property, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.numeric.decimal.go, string.json, support.type.property-name.css, punctuation.definition.constant.css, constant.numeric.float.python, punctuation.definition.variable.shell variable.other.normal.shell, variable.parameter.positional.shell, punctuation.definition.variable.shell variable.language.special.shell, string.interpolated.makefile punctuation.definition.variable.makefile#d07277ff—
keyword, storage.type, storage.modifier, storage.type.boolean.go, keyword.operator.address.go, meta.shebang.shell#b477cfff—
keyword.operator.assignment, keyword.operator.assignment.compound, storage.type.function.arrow, storage.type.function.colon, keyword.control.anchor.regexp, entity.name.class, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, meta.type.annotation, keyword.operator.spread, meta.type.declaration., support.type.primitive, meta.group.regexp, new.expr entity.name.function, meta.function-call variable.other.object, keyword.operator.logical, constant.other.character-class.range.regexp, keyword.operator.negation.regexp, meta.block variable.other.readwrite, entity.name.type.go, entity.name.type.any.go, storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, keyword.operator.address.go, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, storage.type.sql, string.quoted.other.backtick.sql, keyword.operator.arithmetic.python, meta.function-call.generic.python, keyword.control.@.makefile#6eb4bfff—
punctuation.definition.group.regexp, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.definition.block, punctuation.accessor, punctuation.separator.comma, punctuation.definition.typeparameters.end, punctuation.definition.typeparameters.begin, meta.tag meta.function-call variable.other.object, meta.var.expr meta.function-call variable.other.object, punctuation.definition.character-class.regexp, meta.type.annotation variable.parameter, variable.other.readwrite meta.array.literal, meta.object-binding-pattern-variable meta.definition.variable variable.other.constant, meta.tag.without-attributes variable.other.readwrite, meta.objectliteral meta.function-call variable.other.object, meta.var.expr meta.var.expr variable.other.readwrite, entity.name.type.package.go, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, meta.function-call.arguments.python, variable.other.normal.shell, string.quoted.double.shell variable.parameter.positional.shell#abb2bfff—
constant.other.character-class.regexp, constant.character.numeric.regexp#878e98ff—
string.regexp, constant.numeric, keyword.operator.quantifier.regexp, support.type.builtin, constant.language.null, constant.language.boolean, variable.other.constant.go, constant.language.json, entity.other.attribute-name.class.css, support.constant.property-value.css, constant.other.color.rgb-value.hex.css, keyword.other.DDL.create.II.sql, constant.other.caps.python, string.unquoted.shell, string.quoted.double.shell variable.language.special.shell, support.function.target.PHONY.makefile#bf956aff—
string.quoted.double, string.template, string.quoted.raw.go, constant.numeric.sql, string.quoted.single.sql, string.quoted.single.python, string.interpolated.makefile#a1c181ff—
support.class.component, method, function, entity.other.attribute-name, meta.definition.function, meta.function-call, entity.name.tag, meta.var.expr variable.other.readwrite, variable.other.constant entity.name.function, entity.name.function.go, entity.name.function.support.go, support.function.misc.scss, entity.name.function.python, support.function.builtin.python, support.function.builtin.shell, meta.scope.recipe.makefile#73ade9ff—
OneDark Zed by meysam - VS Code Theme