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#111420
  • activityBar.foreground#e2e8f3
  • activityBarBadge.background#8ec2fe
  • activityBarBadge.foreground#161a26
  • badge.background#8ec2fe
  • badge.foreground#161a26
  • breadcrumb.activeSelectionForeground#8ec2fe
  • breadcrumb.background#161a26
  • breadcrumb.focusForeground#e2e8f3
  • breadcrumb.foreground#b2b8c2
  • breadcrumbPicker.background#111420
  • button.background#8ec2fe
  • button.foreground#161a26
  • button.hoverBackground#9dc9fc
  • checkbox.background#1f2430
  • checkbox.border#1a3c44
  • contrastActiveBorder#8ec2fe
  • contrastBorder#5b606c
  • debugConsole.errorForeground#fe7f76
  • debugConsole.infoForeground#8ec2fe
  • debugConsole.warningForeground#fcce62
  • debugIcon.breakpointForeground#fe7f76
  • diffEditor.insertedLineBackground#94e2820a
  • diffEditor.insertedTextBackground#94e28213
  • diffEditor.removedLineBackground#fe7f760a
  • diffEditor.removedTextBackground#fe7f7613
  • dropdown.background#111420
  • dropdown.border#1a3c44
  • dropdown.foreground#e2e8f3
  • dropdown.listBackground#111420
  • editor.background#161a26
  • editor.findMatchBackground#1a3c44
  • editor.findMatchHighlightBackground#1f2430
  • editor.foreground#e2e8f3
  • editor.lineHighlightBackground#1f2430
  • editor.selectionBackground#1a3c44
  • editorBracketHighlight.foreground1#fcce62
  • editorBracketHighlight.foreground2#c5aefe
  • editorBracketHighlight.foreground3#8ec2fe
  • editorBracketHighlight.foreground4#94e282
  • editorBracketHighlight.foreground5#fdb07b
  • editorBracketHighlight.foreground6#39ebd8
  • editorBracketHighlight.unexpectedBracket.foreground#fe7f76
  • editorCursor.background#161a26
  • editorCursor.foreground#8ec2fe
  • editorError.background#fe7f760d
  • editorError.foreground#fe7f76
  • editorGroup.border#1a3c44
  • editorGroupHeader.tabsBackground#111420
  • editorGroupHeader.tabsBorder#1a3c44
  • editorGutter.addedBackground#94e282
  • editorGutter.background#161a26
  • editorGutter.deletedBackground#fe7f76
  • editorGutter.foldingControlForeground#b2b8c2
  • editorGutter.modifiedBackground#8ec2fe
  • editorHint.foreground#39ebd8
  • editorHoverWidget.background#111420
  • editorHoverWidget.border#1a3c44
  • editorHoverWidget.foreground#e2e8f3
  • editorIndentGuide.activeBackground1#8ec2fe
  • editorIndentGuide.background1#1f2430
  • editorInfo.background#8ec2fe0d
  • editorInfo.foreground#8ec2fe
  • editorInlayHint.background#111420
  • editorInlayHint.foreground#b2b8c2
  • editorInlayHint.parameterForeground#b2b8c2
  • editorInlayHint.typeForeground#b2b8c2
  • editorLineNumber.activeForeground#fcce62
  • editorLineNumber.foreground#b2b8c2
  • editorLink.activeForeground#8ec2fe
  • editorOverviewRuler.addedForeground#94e282
  • editorOverviewRuler.bracketMatchForeground#b2b8c2
  • editorOverviewRuler.deletedForeground#fe7f76
  • editorOverviewRuler.errorForeground#fe7f76
  • editorOverviewRuler.findMatchForeground#fcce6299
  • editorOverviewRuler.infoForeground#8ec2fe
  • editorOverviewRuler.modifiedForeground#8ec2fe
  • editorOverviewRuler.warningForeground#fcce62
  • editorRuler.foreground#1f2430
  • editorSuggestWidget.background#111420
  • editorSuggestWidget.border#1a3c44
  • editorSuggestWidget.focusHighlightForeground#8ec2fe
  • editorSuggestWidget.foreground#e2e8f3
  • editorSuggestWidget.highlightForeground#8ec2fe
  • editorSuggestWidget.selectedBackground#1f2430
  • editorWarning.background#fcce620d
  • editorWarning.foreground#fcce62
  • editorWhitespace.foreground#1a3c44
  • editorWidget.background#111420
  • editorWidget.border#1a3c44
  • editorWidget.foreground#e2e8f3
  • focusBorder#8ec2fe
  • foreground#cbd1dc
  • gitDecoration.addedResourceForeground#94e282
  • gitDecoration.conflictingResourceForeground#fdb07b
  • gitDecoration.deletedResourceForeground#fe7f76
  • gitDecoration.ignoredResourceForeground#b2b8c2
  • gitDecoration.modifiedResourceForeground#8ec2fe
  • gitDecoration.stageModifiedResourceForeground#8ec2fe
  • gitDecoration.submoduleResourceForeground#c5aefe
  • gitDecoration.untrackedResourceForeground#94e282
  • input.background#111420
  • input.border#1a3c44
  • input.foreground#e2e8f3
  • input.placeholderForeground#b2b8c2
  • inputOption.activeBorder#8ec2fe
  • inputOption.activeForeground#e2e8f3
  • inputValidation.errorBackground#fe7f7633
  • inputValidation.errorBorder#fe7f76
  • inputValidation.infoBackground#8ec2fe33
  • inputValidation.infoBorder#8ec2fe
  • inputValidation.warningBackground#fcce6233
  • inputValidation.warningBorder#fcce62
  • keybindingLabel.foreground#8ec2fe
  • list.activeSelectionBackground#1a3c44
  • list.activeSelectionForeground#e2e8f3
  • list.deemphasizedForeground#b2b8c2
  • list.errorForeground#fe7f76
  • list.focusAndSelectionOutline#8ec2fe
  • list.focusOutline#8ec2fe
  • list.highlightForeground#fdb07b
  • list.hoverBackground#1f2430
  • list.inactiveSelectionBackground#1f2430
  • list.warningForeground#fcce62
  • menu.background#111420
  • menu.border#1a3c44
  • menu.foreground#e2e8f3
  • menu.selectionBackground#1f2430
  • menu.selectionForeground#e2e8f3
  • menu.separatorBackground#1a3c44
  • menubar.selectionBackground#1f2430
  • merge.currentContentBackground#39ebd80a
  • merge.currentHeaderBackground#39ebd81a
  • merge.incomingContentBackground#8ec2fe0a
  • merge.incomingHeaderBackground#8ec2fe1a
  • minimap.errorHighlight#fe7f76
  • minimap.findMatchHighlight#fcce62
  • minimap.warningHighlight#fcce62
  • minimapGutter.addedBackground#94e282
  • minimapGutter.deletedBackground#fe7f76
  • minimapGutter.modifiedBackground#8ec2fe
  • notebook.focusedCellBorder#8ec2fe
  • notificationCenterHeader.background#1f2430
  • notificationLink.foreground#8ec2fe
  • notifications.background#111420
  • notifications.border#1a3c44
  • notifications.foreground#e2e8f3
  • notificationsErrorIcon.foreground#fe7f76
  • notificationsInfoIcon.foreground#8ec2fe
  • notificationsWarningIcon.foreground#fcce62
  • panel.background#111420
  • panel.border#1a3c44
  • panelSectionHeader.background#111420
  • panelTitle.activeBorder#8ec2fe
  • peekView.border#8ec2fe
  • peekViewEditor.background#111420
  • peekViewEditor.matchHighlightBackground#fcce6233
  • peekViewResult.background#111420
  • peekViewResult.fileForeground#cbd1dc
  • peekViewResult.lineForeground#b2b8c2
  • peekViewResult.matchHighlightBackground#fcce6233
  • peekViewResult.selectionBackground#1f2430
  • peekViewTitle.background#111420
  • peekViewTitleDescription.foreground#b2b8c2
  • peekViewTitleLabel.foreground#e2e8f3
  • pickerGroup.foreground#8ec2fe
  • problemsErrorIcon.foreground#fe7f76
  • problemsInfoIcon.foreground#8ec2fe
  • problemsWarningIcon.foreground#fcce62
  • progressBar.background#8ec2fe
  • quickInput.background#111420
  • quickInput.foreground#e2e8f3
  • quickInputList.focusBackground#1f2430
  • quickInputList.focusForeground#e2e8f3
  • sash.hoverBorder#8ec2fe
  • scrollbarSlider.activeBackground#1a3c44cc
  • scrollbarSlider.background#1a3c4480
  • scrollbarSlider.hoverBackground#1a3c44aa
  • selection.background#1a3c44
  • sideBar.background#111420
  • sideBar.border#1a3c44
  • sideBar.foreground#cbd1dc
  • sideBarSectionHeader.background#111420
  • sideBarSectionHeader.border#1a3c44
  • sideBarSectionHeader.foreground#cbd1dc
  • sideBarTitle.foreground#e2e8f3
  • statusBar.background#111420
  • statusBar.border#1a3c44
  • statusBar.debuggingBackground#fdb07b
  • statusBar.foreground#cbd1dc
  • statusBar.noFolderBackground#111420
  • statusBarItem.hoverBackground#1f2430
  • statusBarItem.remoteBackground#8ec2fe
  • statusBarItem.remoteForeground#161a26
  • tab.activeBackground#161a26
  • tab.activeBorder#8ec2fe
  • tab.activeBorderTop#8ec2fe
  • tab.activeForeground#e2e8f3
  • tab.border#111420
  • tab.inactiveBackground#111420
  • tab.inactiveForeground#b2b8c2
  • terminal.ansiBlack#1f2430
  • terminal.ansiBlue#8ec2fe
  • terminal.ansiBrightBlack#1a3c44
  • terminal.ansiBrightBlue#8ec2fe
  • terminal.ansiBrightCyan#83e9ff
  • terminal.ansiBrightGreen#94e282
  • terminal.ansiBrightMagenta#fe92e8
  • terminal.ansiBrightRed#fe7f76
  • terminal.ansiBrightWhite#e2e8f3
  • terminal.ansiBrightYellow#fcce62
  • terminal.ansiCyan#83e9ff
  • terminal.ansiGreen#94e282
  • terminal.ansiMagenta#fe92e8
  • terminal.ansiRed#fe7f76
  • terminal.ansiWhite#cbd1dc
  • terminal.ansiYellow#fcce62
  • terminal.background#161a26
  • terminal.foreground#e2e8f3
  • terminal.selectionBackground#1a3c44
  • terminalCursor.background#161a26
  • terminalCursor.foreground#8ec2fe
  • testing.iconFailed#fe7f76
  • testing.iconPassed#94e282
  • testing.iconQueued#fcce62
  • textLink.activeForeground#a3ccfb
  • textLink.foreground#8ec2fe
  • titleBar.activeBackground#111420
  • titleBar.activeForeground#e2e8f3
  • titleBar.border#1a3c44
  • titleBar.inactiveBackground#111420
  • titleBar.inactiveForeground#b2b8c2
  • tree.indentGuidesStroke#1a3c44
  • widget.border#1a3c44
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, storage.type, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, meta.record.identifier storage.modifier#fe7f76bold
keyword.operator#83e9ff
entity.name.function#fcce62bold
meta.function-call, support.function, meta.function-call entity.name.function#fcce62
entity.name.function.constructor, entity.name.type.constructor#fc9d51bold
entity.name.type, support.type, entity.name.class, support.class#fdb07bbold
variable.language, support.type.builtin, constant.language#fc9d51italic
variable.parameter#c6e8f7italic
string, string.quoted, string.template#85eba3
constant.character.escape#83e9ff
constant.numeric#8ec2fe
constant.language.boolean#c5aefe
constant.other#c5aefe
variable.other.constant#c9dbfd
variable.other.property, support.variable.property, meta.object-literal.key#39ebd8
variable, variable.other.readwrite#ededfd
meta.preprocessor#fe7f76
comment, punctuation.definition.comment#b2b8c2italic
punctuation, meta.brace#9ba4bd
entity.name.tag#fe7f76
support.class.component, entity.name.tag.namespace#fdb07b
entity.other.attribute-name#6ceae0
punctuation.definition.tag#cbd1dc
markup.inserted, markup.inserted punctuation.definition.inserted#94e282
markup.changed, markup.changed punctuation.definition.changed#8ec2fe
markup.deleted, markup.deleted punctuation.definition.deleted#fe7f76
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#a9cefdbold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#84d7febold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#11e4f6bold
heading.4.markdown, heading.4.markdown punctuation.definition.heading, heading.5.markdown, heading.5.markdown punctuation.definition.heading, heading.6.markdown, heading.6.markdown punctuation.definition.heading#17eacebold
markup.bold#e2e8f3bold
markup.italic#e2e8f3italic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#39ebd8
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#83e9ffunderline
markup.quote#b2b8c2italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#fdb07b
meta.separator.markdown, entity.other.document.begin.yaml#9ba4bd
markup.strikethrough#b2b8c2strikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#39ebd8
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#c5aefe
keyword.other.unit#fdb07b
constant.other.color#c5aefe
keyword.other.important#fe7f76bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#fcce62
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#83e9ff
constant.other.character-class.regexp, constant.other.character-class.set.regexp#fdb07b
keyword.operator.quantifier.regexp#fe7f76
keyword.control.anchor.regexp#fe7f76
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#c5aefe
variable.other.jsdoc#e2e8f3italic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#8ec2fe
punctuation.definition.string#85eba3
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#fe7f76bold
keyword.control.type, storage.type.type#fdb07bitalic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c4b4febold
storage.modifier.attribute#fc9d51
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#83e9ffbold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#87bafditalic
Duskbox by Hugo Cedano - VS Code Theme