Skip to main content
Coding Theme

Color themes

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.background#0C1018
  • activityBar.border#111827
  • activityBar.foreground#F0F9FF
  • activityBar.inactiveForeground#64748B
  • activityBarBadge.background#FBBF24
  • activityBarBadge.foreground#000000
  • badge.background#38BDF8
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#F0F9FF
  • breadcrumb.focusForeground#38BDF8
  • breadcrumb.foreground#94A3B8
  • breadcrumbPicker.background#111827
  • button.background#FBBF24
  • button.foreground#000000
  • button.hoverBackground#F59E0B
  • checkbox.background#111827
  • checkbox.border#94A3B860
  • commandCenter.activeBackground#1E3A5F
  • commandCenter.activeForeground#F0F9FF
  • commandCenter.background#111827
  • commandCenter.border#94A3B840
  • commandCenter.foreground#94A3B8
  • contrastBorder#111827
  • diffEditor.insertedTextBackground#34D39925
  • diffEditor.removedTextBackground#FF4D4225
  • dropdown.background#111827
  • dropdown.border#94A3B860
  • dropdown.foreground#E2E8F0
  • editor.background#0C1018
  • editor.foreground#E2E8F0
  • editor.lineHighlightBackground#152033
  • editor.lineHighlightBorder#111827
  • editor.selectionBackground#1E3A5F
  • editor.selectionHighlightBackground#1E3A5F80
  • editor.wordHighlightBackground#1E3A5F60
  • editor.wordHighlightStrongBackground#1E3A5F
  • editorBracketHighlight.foreground1#38BDF8
  • editorBracketHighlight.foreground2#FBBF24
  • editorBracketHighlight.foreground3#7DD3FC
  • editorBracketHighlight.foreground4#F0F9FF
  • editorBracketHighlight.foreground5#34D399
  • editorBracketHighlight.foreground6#FB7185
  • editorBracketMatch.background#38BDF830
  • editorBracketMatch.border#F0F9FF
  • editorCursor.foreground#F0F9FF
  • editorError.foreground#FF4D42
  • editorGhostText.border#111827
  • editorGhostText.foreground#64748B99
  • editorHint.foreground#7DD3FC
  • editorHoverWidget.background#111827
  • editorHoverWidget.border#94A3B860
  • editorIndentGuide.activeBackground1#94A3B880
  • editorIndentGuide.background1#111827
  • editorInfo.foreground#38BDF8
  • editorInlayHint.background#11182740
  • editorInlayHint.foreground#64748B
  • editorInlayHint.parameterForeground#94A3B8
  • editorInlayHint.typeForeground#38BDF8
  • editorLineNumber.activeForeground#38BDF8
  • editorLineNumber.foreground#64748B
  • editorOverviewRuler.border#080C14
  • editorOverviewRuler.errorForeground#FF4D42
  • editorOverviewRuler.infoForeground#38BDF8
  • editorOverviewRuler.warningForeground#F59E0B
  • editorRuler.foreground#111827
  • editorStickyScroll.background#080C14
  • editorStickyScroll.border#11182760
  • editorStickyScrollHover.background#111827
  • editorSuggestWidget.background#111827
  • editorSuggestWidget.border#94A3B860
  • editorSuggestWidget.foreground#E2E8F0
  • editorSuggestWidget.highlightForeground#FBBF24
  • editorSuggestWidget.selectedBackground#1E3A5F
  • editorWarning.foreground#F59E0B
  • editorWhitespace.foreground#111827
  • editorWidget.background#111827
  • editorWidget.border#94A3B860
  • focusBorder#38BDF880
  • gitDecoration.conflictingResourceForeground#F59E0B
  • gitDecoration.deletedResourceForeground#FF4D42
  • gitDecoration.ignoredResourceForeground#64748B
  • gitDecoration.modifiedResourceForeground#FBBF24
  • gitDecoration.untrackedResourceForeground#34D399
  • icon.foreground#94A3B8
  • input.background#111827
  • input.border#94A3B860
  • input.foreground#E2E8F0
  • input.placeholderForeground#64748B
  • inputOption.activeBorder#38BDF8
  • inputValidation.errorBackground#FF4D4220
  • inputValidation.errorBorder#FF4D42
  • keybindingLabel.background#152033
  • keybindingLabel.border#94A3B860
  • keybindingLabel.foreground#E2E8F0
  • list.activeSelectionBackground#1E3A5F
  • list.activeSelectionForeground#F0F9FF
  • list.focusBackground#1E3A5F
  • list.focusForeground#F0F9FF
  • list.highlightForeground#FBBF24
  • list.hoverBackground#152033
  • list.hoverForeground#38BDF8
  • list.inactiveSelectionBackground#152033
  • list.inactiveSelectionForeground#E2E8F0
  • menu.background#111827
  • menu.foreground#E2E8F0
  • menu.selectionBackground#1E3A5F
  • menu.selectionForeground#F0F9FF
  • menu.separatorBackground#64748B
  • menubar.selectionBackground#152033
  • menubar.selectionForeground#38BDF8
  • merge.currentHeaderBackground#38BDF840
  • merge.incomingHeaderBackground#FBBF2440
  • minimap.errorHighlight#FF4D4280
  • minimap.findMatchHighlight#FBBF2480
  • minimap.selectionHighlight#1E3A5F90
  • minimap.warningHighlight#F59E0B80
  • notificationCenter.border#94A3B860
  • notificationCenterHeader.background#111827
  • notifications.background#111827
  • notifications.border#94A3B860
  • notifications.foreground#E2E8F0
  • panel.background#0E1420
  • panel.border#111827
  • panelTitle.activeBorder#38BDF8
  • panelTitle.activeForeground#F0F9FF
  • panelTitle.inactiveForeground#94A3B8
  • peekView.border#38BDF8
  • peekViewEditor.background#080C14
  • peekViewResult.background#111827
  • peekViewTitle.background#111827
  • progressBar.background#FBBF24
  • scrollbarSlider.activeBackground#38BDF880
  • scrollbarSlider.background#94A3B840
  • scrollbarSlider.hoverBackground#94A3B860
  • selection.background#1E3A5F
  • sideBar.background#111827
  • sideBar.border#080C14
  • sideBar.foreground#94A3B8
  • sideBarSectionHeader.background#080C14
  • sideBarSectionHeader.border#111827
  • sideBarSectionHeader.foreground#38BDF8
  • sideBarTitle.foreground#FBBF24
  • statusBar.background#080C14
  • statusBar.border#111827
  • statusBar.debuggingBackground#FF4D42
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#38BDF8
  • statusBar.noFolderBackground#111827
  • statusBarItem.activeBackground#1E3A5F
  • statusBarItem.hoverBackground#1E3A5F
  • statusBarItem.remoteBackground#FBBF24
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0C1018
  • tab.activeBorder#FBBF24
  • tab.activeBorderTop#FBBF24
  • tab.activeForeground#F0F9FF
  • tab.border#080C14
  • tab.hoverBackground#152033
  • tab.inactiveBackground#111827
  • tab.inactiveForeground#94A3B8
  • tab.unfocusedActiveBorder#94A3B8
  • terminal.ansiBlack#0C1018
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlack#64748B
  • terminal.ansiBrightBlue#F0F9FF
  • terminal.ansiBrightCyan#F0F9FF
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#FB7185
  • terminal.ansiBrightRed#FF4D42
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#7DD3FC
  • terminal.ansiGreen#34D399
  • terminal.ansiMagenta#FB7185
  • terminal.ansiRed#FF4D42
  • terminal.ansiWhite#E2E8F0
  • terminal.ansiYellow#FBBF24
  • terminal.background#0C1018
  • terminal.foreground#E2E8F0
  • terminalCursor.background#0C1018
  • terminalCursor.foreground#F0F9FF
  • titleBar.activeBackground#111827
  • titleBar.activeForeground#F0F9FF
  • titleBar.border#111827
  • titleBar.inactiveBackground#080C14
  • titleBar.inactiveForeground#64748B
  • tree.indentGuidesStroke#111827
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748Bitalic
comment.block.documentation, comment.line.documentation#94A3B8italic
comment keyword.codetag.notation, keyword.codetag.notation#FBBF24bold
comment.line.fixme, meta.annotation.fixme#FF4D42bold
string, string.quoted#7DD3FC—
string.template, string.quoted.template#7DD3FC—
constant.numeric, constant.language.numeric#E0F2FE—
constant.language.boolean, constant.language.true, constant.language.false#34D399bold
constant.language.null, constant.language.undefined, constant.language.none#334155italic
keyword, storage.type, storage.modifier#FBBF24bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#FBBF24bold
keyword.control.import, keyword.control.export, keyword.control.from#38BDF8bold
keyword.operator, punctuation.separator, punctuation.terminator#94A3B8—
variable, support.variable, variable.other.readwrite#E2E8F0—
variable.parameter, meta.function.parameters variable#7DD3FC—
variable.language.this, variable.language.self, variable.language.super#FBBF24italic
entity.name.function, support.function, meta.function-call entity.name.function#38BDF8bold
entity.name.class, entity.name.type, support.class, support.type#FDE68Abold
meta.decorator, entity.name.function.decorator, punctuation.decorator#38BDF8bold
variable.other.property, variable.other.object.property, support.type.property-name#7DD3FC—
constant, variable.other.constant, support.constant#FB7185bold
entity.name.function.console, support.function.console, support.class.console, meta.function-call.python support.function.builtin.python#FF4D42bold
entity.name.tag#38BDF8—
entity.other.attribute-name#FBBF24—
support.type.property-name.json#FBBF24—
string.regexp, string.regex#FB7185—
invalid, invalid.illegal#FF4D42bold
punctuation, punctuation.definition, punctuation.accessor#64748B—
markup.heading, entity.name.section.markdown#FBBF24bold
markup.underline.link#38BDF8underline
markup.inline.raw, markup.fenced_code.block#7DD3FC—